Presentation is loading. Please wait.

Presentation is loading. Please wait.

Dr M. Collinson, Computing Science, University of Aberdeen 1 CS3516: Graphics l Recap of 2D graphics l 3D Graphic concepts l Libraries.

Similar presentations


Presentation on theme: "Dr M. Collinson, Computing Science, University of Aberdeen 1 CS3516: Graphics l Recap of 2D graphics l 3D Graphic concepts l Libraries."— Presentation transcript:

1 Dr M. Collinson, Computing Science, University of Aberdeen 1 CS3516: Graphics l Recap of 2D graphics l 3D Graphic concepts l Libraries

2 Dr M. Collinson, Computing Science, University of Aberdeen 2 AI, not Graphics l This is not a course about graphics. l However, if you think you might want a job in the games industry you should probably learn as much as you can independently.

3 Dr M. Collinson, Computing Science, University of Aberdeen 3 Simple 2D Graphics l Simplest type of graphic l Similar to drawing with Paint l Can use Java2D package »Or OpenGL, http://www.opengl.org/.http://www.opengl.org/

4 Dr M. Collinson, Computing Science, University of Aberdeen 4 Drawing with Paint l Create canvas l Select parameters »Edge colour, fill colour »Line thickness, (line type) l Draw shape »Rectangle, Ellipse, Line, … »Filled or outline l Draw Text (font)

5 Dr M. Collinson, Computing Science, University of Aberdeen 5 Drawing with Java 2D l Create canvas object l Set parameters »Line thickness, type (eg, dashed), colour »Fill colour, pattern »Compositing, clip l Draw shapes »Rectangle, Ellipse, Line, … »Filled or outline l Draw text (font, colour, angle, …) l Add event handlers (interactivity, animation)

6 Dr M. Collinson, Computing Science, University of Aberdeen 6 Java2D: paintComponent l Create paintComponent() method, this does actual drawing (in Java2D) l Called when window visibility changes l Called by software when graphic changes

7 Dr M. Collinson, Computing Science, University of Aberdeen 7 Drawing Shapes l Set parameters »Colour, stroke (line thickness, style), etc l g2.draw(Shape) -- outline l g2.fill(Shape) -- filled l Many shapes (see java.awt.geom) »Rectangle2D, Ellipse2D, Line2D, Arc2D, RoundRectangle2D, CubicCurve2D, … »Need to add.Double (strange design) –Rectangle2D.Double

8 Dr M. Collinson, Computing Science, University of Aberdeen 8 Parameters l setColor-- drawing color l setStroke-- line type l setFont-- font for text l setComposite– how overwriting is done l setTransform -- transformation

9 Dr M. Collinson, Computing Science, University of Aberdeen 9 Example l 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 Dr M. Collinson, Computing Science, University of Aberdeen 10 Text l 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 Dr M. Collinson, Computing Science, University of Aberdeen 11 Images l Two steps to display an image »Load image from file (or URL) –Typically gif, jpeg, etc »Display image on graphics panel –g2.drawImage(,,, this)

12 Dr M. Collinson, Computing Science, University of Aberdeen 12 Interactive graphics l Include model and state information l paintComponent() examines these when drawing l Rest of system updates model/state to change the graphic

13 Dr M. Collinson, Computing Science, University of Aberdeen 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 Dr M. Collinson, Computing Science, University of Aberdeen 14 Interaction l Add event handler »For input device (mouse, joystick) l Handler has access to details »Mouse coords »Button pressed l Updates model/state, invokes paintComponent

15 Dr M. Collinson, Computing Science, University of Aberdeen 15 Interaction l Typically interpret mouse click by identifying object clicked on »Object from scene model l Effect of click depends on object »Pick up, fight, open…

16 Dr M. Collinson, Computing Science, University of Aberdeen 16 Animation l 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 Dr M. Collinson, Computing Science, University of Aberdeen 17 Simple example l Move image across panel public void tick() { imageX = imageX + velocityX/ticksPerSec; imageY = imageY + velocityY/ticksPerSec; }

18 Dr M. Collinson, Computing Science, University of Aberdeen 18 3D Graphics What do we need for 3D graphics? l 3D scene models l What does the viewer see l Render (create) image

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

20 Dr M. Collinson, Computing Science, University of Aberdeen 20 Scene Models l 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 Dr M. Collinson, Computing Science, University of Aberdeen 21 Representing shape l 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) l Spline »Curved shapes

22 Dr M. Collinson, Computing Science, University of Aberdeen 22 Polygons show visual appearance l Colour, texture, transparency, texture, reflection, etc l Each polygon can have values for these parameters l Example: dolphin

23 Dr M. Collinson, Computing Science, University of Aberdeen 23 Acquiring shape l Scan real objects (Stanford bunny) l Artists model (dragons and other fictional creatures) »Less fidelity needed for fictional objects, since users have no expectations l Combinations of above

24 Dr M. Collinson, Computing Science, University of Aberdeen 24 Stanford bunny l Shape created by very many polygons l Created from multiple scans: final version approx 70K polygons (triangles); originally 700K polygons. l http://www.graphics.stanford.edu/data/3Dscanrep/ http://www.graphics.stanford.edu/data/3Dscanrep/

25 Dr M. Collinson, Computing Science, University of Aberdeen 25 The Bunny Scan

26 Dr M. Collinson, Computing Science, University of Aberdeen 26 Movement l 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 l Ignore for low-quality animation »Sprites l Can use physics engine

27 Dr M. Collinson, Computing Science, University of Aberdeen 27 Viewer Perspective l Need to figure out what viewer will see l Depends on »Viewer position »Viewer orientation »Light source

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

29 Dr M. Collinson, Computing Science, University of Aberdeen 29 Occlusion l 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 Dr M. Collinson, Computing Science, University of Aberdeen 30 Depth of field l Further away objects look smaller l Orientation matters. Need to convert “true” shape polygon into “perceived” polygon.

31 Dr M. Collinson, Computing Science, University of Aberdeen 31 Light source l Light source has big impact on what we perceive »What is it (sun? electric light?) »Where is it l Shadows, translucency, reflections

32 Dr M. Collinson, Computing Science, University of Aberdeen 32 Rendering algorithms l Algorithms that compute the pixels in a 3D image l Polygon rendering »Figure out which polygons visible, adjust for depth of field »Fast, does not handle lighting effects well

33 Dr M. Collinson, Computing Science, University of Aberdeen 33 Ray tracing l 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 l 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 Dr M. Collinson, Computing Science, University of Aberdeen 34 Blurring l 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 Dr M. Collinson, Computing Science, University of Aberdeen 35 Graphics cards l Ideally, would take the scene model (wireframe) and viewer/lighting details, and generate the image l Some graphics cards just do lower-level rendering, not all of the above

36 Dr M. Collinson, Computing Science, University of Aberdeen 36 3D graphics libraries l Java 3D: developer specifies a scene graph (model), view model; generates 3D image »Doesn’t seem to be widely used (?) l 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 Dr M. Collinson, Computing Science, University of Aberdeen 37 3D Graphics l Very important to games, but will not be further discussed l If want to pursue, I suggest working through some of the JOGL/LWJGL tutorials (JMonkey is another possibility)


Download ppt "Dr M. Collinson, Computing Science, University of Aberdeen 1 CS3516: Graphics l Recap of 2D graphics l 3D Graphic concepts l Libraries."

Similar presentations


Ads by Google