1 / 37

CS3516: Graphics

CS3516: Graphics. Recap of 2D graphics 3D Graphic concepts Libraries. AI, not Graphics. This is not a course about graphics. However, if you think you might want a job in the games industry you should probably learn as much as you can independently. Simple 2D Graphics.

jdresser
Download Presentation

CS3516: Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. CS3516: Graphics • Recap of 2D graphics • 3D Graphic concepts • Libraries

  2. AI, not Graphics • This is not a course about graphics. • However, if you think you might want a job in the games industry you should probably learn as much as you can independently.

  3. Simple 2D Graphics • Simplest type of graphic • Similar to drawing with Paint • Can use Java2D package • Or OpenGL, http://www.opengl.org/ .

  4. Drawing with Paint • Create canvas • Select parameters • Edge colour, fill colour • Line thickness, (line type) • Draw shape • Rectangle, Ellipse, Line, … • Filled or outline • Draw Text (font)

  5. Drawing with Java 2D • Create canvas object • Set parameters • Line thickness, type (eg, dashed), colour • Fill colour, pattern • Compositing, clip • Draw shapes • Rectangle, Ellipse, Line, … • Filled or outline • Draw text (font, colour, angle, …) • Add event handlers (interactivity, animation)

  6. Java2D: paintComponent • Create paintComponent() method, this does actual drawing (in Java2D) • Called when window visibility changes • Called by software when graphic changes

  7. Drawing Shapes • Set parameters • Colour, stroke (line thickness, style), etc • g2.draw(Shape) -- outline • g2.fill(Shape) -- filled • Many shapes (see java.awt.geom) • Rectangle2D, Ellipse2D, Line2D, Arc2D, RoundRectangle2D, CubicCurve2D, … • Need to add .Double (strange design) • Rectangle2D.Double

  8. Parameters • setColor -- drawing color • setStroke -- line type • setFont -- font for text • setComposite– how overwriting is done • setTransform -- transformation

  9. Example • Draw ellipse, not filled, red outline, 3 units thick // set drawing color g2.setColor(Color.red); // set line thickness g2.setStroke(new BasicStroke(3)); // draw ellipse outline (g2.fill would draw filled ellipse) g2.draw(new Ellipse2D.Double(40,40,20,20));

  10. Text • Can add text • drawString: Specify origin, string • Specify colour, stroke before drawing • Also font // draw “hello” in top left g2.drawString("hello",10,10);

  11. Images • Two steps to display an image • Load image from file (or URL) • Typically gif, jpeg, etc • Display image on graphics panel • g2.drawImage(<image>,<Xpos>,<Ypos>, this)

  12. Interactive graphics • Include model and state information • paintComponent() examines these when drawing • Rest of system updates model/state to change the graphic

  13. Example // class variable int imageX = 50; int imageY = 50; // paintComponent uses vars g2.drawImage(im,imageX, imageY,this); // move image by deltaX in X direction, deltaY in Y dir public void moveImage(int deltaX, int deltaY) { imageX = imageX + deltaX; imageY = imageY + deltaY; }

  14. Interaction • Add event handler • For input device (mouse, joystick) • Handler has access to details • Mouse coords • Button pressed • Updates model/state, invokes paintComponent

  15. Interaction • Typically interpret mouse click by identifying object clicked on • Object from scene model • Effect of click depends on object • Pick up, fight, open…

  16. Animation • General idea • Establish a timer which ticks every time the graphic should be updated • Every 50ms? • Specify how world is changing • Eg, how objects are moving • Write a “tick” routine which updates the graphic • Basic “physics engine” which updates the state of the world based on movement information

  17. Simple example Move image across panel public void tick() { imageX = imageX + velocityX/ticksPerSec; imageY = imageY + velocityY/ticksPerSec; }

  18. 3D Graphics What do we need for 3D graphics? • 3D scene models • What does the viewer see • Render (create) image

  19. Basic concepts • 3D graphics: Show the user, on the monitor, what his eye would see if he was at a given location in a 3D scene • Note that both computer monitors and human eyes are inherently 2D • Monitors are flat • Human eyes (unlike laser rangefinders) cannot directly measure distance

  20. Scene Models • Define scene • Location of objects • 3D shape of objects (not just a gif) • Orientation of objects • Texture, colour of objects • (for animation) movement of objects

  21. Representing shape • Polygons (wireframes) (most common) • Rectangles, triangles, etc • Millions can be used for complex shapes • Graphics card can process 10M-100M poly/sec • Represent a few key objects at hi-fidelity, rest at lower fidelity (number of polys) • Spline • Curved shapes

  22. Polygons show visual appearance • Colour, texture, transparency, texture, reflection, etc • Each polygon can have values for these parameters • Example: dolphin

  23. Acquiring shape • Scan real objects (Stanford bunny) • Artists model (dragons and other fictional creatures) • Less fidelity needed for fictional objects, since users have no expectations • Combinations of above

  24. Stanford bunny • Shape created by very many polygons • Created from multiple scans: final version approx 70K polygons (triangles); originally 700K polygons. • http://www.graphics.stanford.edu/data/3Dscanrep/

  25. The Bunny Scan

  26. Movement • For high-quality animation, need to model not just gross movement, but details of how object’s shape changes as it moves • Ie, what its muscles do • Detailed models, motion capture • Ignore for low-quality animation • Sprites • Can use physics engine

  27. Viewer Perspective • Need to figure out what viewer will see • Depends on • Viewer position • Viewer orientation • Light source

  28. Which objects are in view? • In a complex world, many objects will be completely out of view (ie, they are behind the viewer, or inside a building) • Use geometrical models to quickly identify these, so they can be ignored by the graphics engine • Occlusion.

  29. Occlusion • Some objects will occlude parts of other objects • Eg from students perspective, the lecturer occludes part of the blackboard (you can’t see what is behind me) • Z-buffer used by graphics systems to keep track of what is visible • Keeps track of closest polygon for (X,Y) coord

  30. Depth of field • Further away objects look smaller • Orientation matters. Need to convert “true” shape polygon into “perceived” polygon.

  31. Light source • Light source has big impact on what we perceive • What is it (sun? electric light?) • Where is it • Shadows, translucency, reflections

  32. Rendering algorithms • Algorithms that compute the pixels in a 3D image • Polygon rendering • Figure out which polygons visible, adjust for depth of field • Fast, does not handle lighting effects well

  33. Ray tracing • For each pixel in the image, trace it back to the light source, and compute its RGB value (colour, intensity) • Slower • Handles lighting effects well • Trick: avoid reflecting, translucent objects, so don’t need to worry about these effects • So can use fast polygon rendering • Harder to avoid shadows, but can use simpler techniques for these

  34. Blurring • May deliberately blur images, especially for background objects • Encourage user to focus on object of interest • Saves time • People may expect it (common in live-action movies, because of way cameras work)

  35. Graphics cards • Ideally, would take the scene model (wireframe) and viewer/lighting details, and generate the image • Some graphics cards just do lower-level rendering, not all of the above

  36. 3D graphics libraries • Java 3D: developer specifies a scene graph (model), view model; generates 3D image • Doesn’t seem to be widely used (?) • OpenGL: lower-level library, but does better job of getting details right • Bindings for many languages • Java: JOGL, LWJGL • Can combine JOGL and Java2D

  37. 3D Graphics • Very important to games, but will not be further discussed • If want to pursue, I suggest working through some of the JOGL/LWJGL tutorials (JMonkey is another possibility)

More Related