CS3516: Graphics

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)