CS297 Graphics with Java and OpenGL

1. CS297 Graphics with Java and OpenGL Basic Definitions

2. Introduction to OpenGL, Rendering Pipeline • Construct shapes from geometric primitives, thereby creating mathematical descriptions of objects. (OpenGL considers points, lines, polygons, images, and bitmaps to be primitives.) • Arrange the objects in three-dimensional space and select the desired vantage point for viewing the composed scene. • Calculate the color of all the objects. The color might be explicitly assigned by the application, determined from specified lighting conditions, obtained by pasting a texture onto the objects, or some combination of these three actions. • Convert the mathematical description of objects and their associated color information to pixels on the screen. This process is called rasterization.

3. Basic Definitions • Models, or objects, are constructed from geometric primitives - points, lines, and polygons - that are specified by their vertices. • Pixel, is the smallest visible element the display hardware can put on the screen. • Rendering, process by which a computer creates images from models and consists of pixels drawn on the screen. • Bitplane, area of memory that holds one bit of information for every pixel on the screen. E.g. bit might indicate how red a particular pixel is supposed to be. • Framebuffer, stores all bitplanes, and holds all the information that the graphics display needs to control the color and intensity of all the pixels on the screen.

4. Models, or objects, are constructed from geometric primitives - points, lines, and polygons - that are specified by their vertices. Model of Torus, constructed from triangles (each rectangle is two triangles where the diagonals are not shown).

5. OpenGL simple example • Very simple example shows many of JOGL elements that are common to all graphic programs. • Only displays white square on black background, shown in Java Swing JFrame object. Full Code on course web site.

6. // various package imports declared here public class Simple2 implements GLEventListener { /* ***** Missing Code for GLEventListener interface methods on next slide ********* */ public static void main(String[ ] args) { JFrame.setDefaultLookAndFeelDecorated(false); JFrame jframe = new JFrame("Simple2"); jframe.setSize(500, 500); jframe.setLocationRelativeTo(null); // center of screen GLJPanel canvas = new GLJPanel(); Simple2 newGLEvtListnr = new Simple2(); canvas.addGLEventListener(newGLEvtListnr); jframe.getContentPane().add(canvas);//add canvas to JFrame window jframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); jframe.setVisible(true); // show window } }

7. Missing Code for Simple2 class public void display(GLAutoDrawable drawable) { GL gl = drawable.getGL(); gl.glClearColor(0.0f, 0.0f, 0.0f, 0.0f); gl.glClear(GL.GL_COLOR_BUFFER_BIT); gl.glColor3f(1.0f, 1.0f, 1.0f); gl.glOrtho(-1.0f, 1.0f, -1.0f, 1.0f, -1.0f, 1.0f); gl.glBegin(GL.GL_POLYGON); gl.glVertex2f(-0.5f, -0.5f); gl.glVertex2f(-0.5f, 0.5f); gl.glVertex2f(0.5f, 0.5f); gl.glVertex2f(0.5f, -0.5f); gl.glEnd(); gl.glFlush(); }

8. Simple2 drawable method • glClearColor() establishes what color the window will be cleared to • glClear() actually clears the window • Once the clearing color is set, the window is cleared to that color whenever glClear() is called. • glColor3f() command establishes what color to use for drawing objects – white for this example. • glOrtho(), specifies coordinate system OpenGL assumes as it draws the final image and how the image gets mapped to the screen for orthographic parallel viewing volume.

9. gl.glOrtho(left, right, bottom, top, near, far); (right, top, -far) (right, top, -near) y x z initialpoint of view (left, bottom, -far) (left, bottom, -near)

10. Perspective (used later for 3D) Note glOrtho does not define perspective in 3D, it only defines the space that will be observable. For perspective different OpenGL operators are necessary: gl.glViewport(0, 0, w, h); gl.glMatrixMode(GL.GL_PROJECTION); glu.gluPerspective(40.0, (float) w / (float) h, 1.0, 20.0); These will be discussed in detail in later sections.

11. Simple2 drawable method • code between glBegin() and glEnd(), define the object to be drawn • a polygon with four vertices • polygon's "corners" are defined by the glVertex3f() commands, or in 2D diagram glVertex2f().Note the ‘f’ denotes that parameters are given as floating point values. • (x, y, z) coordinates, the polygon is a rectangle on the z=0 plane • glFlush() ensures that the drawing commands are actually executed rather than stored in a buffer awaiting additional OpenGL commands

12. Introduction to elementrary animation in OpenGL • Movie motion is achieved by taking a sequence of pictures and projecting them at 24 per second on the screen • Each frame is moved into position behind the lens, • The shutter is opened, and the frame is displayed. • The shutter is momentarily closed while the film is advanced to the next frame, then that frame is displayed, and so on. • Old Charlie Chaplin movies were shot at 16 frames per second and are noticeably jerky. • Computer-graphics screens typically refresh (redraw the picture) approximately 60 to 76 times per second • Refresh rates faster than 120, however, are beyond the point of diminishing returns, since the human eye is only so good. • The key reason that motion picture projection works is that each frame is complete when it is displayed.

13. Simple Animation Sequence ‘Moon’ orbits round ‘planet’. Each frame is redrawn with ‘moon’ rotated slightly each time. When played rapidly in sequence creates illusion ofmotion.

14. doublebuf class • consider very simple animation that creates a 2D square and rotates square in real time in JFrame • want square to rotate by small amount 60 times per second to create illusion of animation

15. doublebuf class example, using animator thread public static void main(String[ ] args) { /* Part 1: create new Java application object demo with double buffering here Set up OpenGL canvas and Java Swing JFrame and define drawing elements here. */ FPSAnimator animator = new FPSAnimator(canvas, 60); demo.setAnimator(animator); /* Part 2: initialise frame look and feel and attach drawing canvas here */ animator.start(); }

16. FPSAnimator • FPSAnimator, Frames Per Second animator Java thread. • new FPSAnimator(canvas, 60);this will try to force 60 frames per second to be rendered completely on screen. • FPSAnimator does not guarantee that 60 frames will be shown, this is a maximum that can be shown. • FPSAnimator will force all drawable objects to finish execution before frame is displayed. • FPSAnimator forces the display method to complete execution upto the number specified in the argument.

17. FPSAnimator FSPAnimator forcesdisplay() to execute up toN times each second.Guarantees that displaywill complete executionbefore next frame is renderedon screen.

18. main method Part 1 in doublebuf class GLCapabilities caps = new GLCapabilities(); // request double buffer display mode caps.setDoubleBuffered(true); GLJPanel canvas = new GLJPanel(caps); doublebuf demo = new doublebuf(); demo.setCanvas(canvas); canvas.addGLEventListener(demo); canvas.addKeyListener(demo); canvas.addMouseListener(demo); FPSAnimator animator = new FPSAnimator(canvas, 60);

19. main method Part 1 in doublebuf class GLCapabilities caps = new GLCapabilities(); caps.setDoubleBuffered(true); • When creating GLCanvas and GLJPanel instances, the user may configure a certain set of OpenGL parameters in the form of a GLCapabilities object. • These customise how OpenGL will perform rendering of drawable objects on the screen. • In this case double buffering is set to true.

20. main method Part 1 in doublebuf class • Double buffering uses two image buffers to handle drawing. • One buffer is displayed on screen whilst current drawing operations are executed in the other buffer, off screen. • Once all drawing operations are complete, the two buffers are swaped. • This ensures complex models are only shown on screen once they are complete, and not incrementally constructed on screen.

21. double buffering in doublebuf class clear buffer create new model etc On screen buffer Off screen buffer clear buffer create new model render new model swap buffers

22. main method Part 1 in doublebuf class GLJPanel canvas = new GLJPanel(caps); • GLJPanel is placeholder for all displayable objects. • Provides event listener to notify drawable objects when they must be redrawn. • display() method causes all registered listening objects to execute their display() methods.Class diagram shows some of methodsfor this class.

23. main method Part 1 in doublebuf class canvas.addGLEventListener(demo); • the dublebuf demo object will now execute its display() method whenever an GLAutoDrawable event is created and notified to the canvas object

24. doublebuf display( ) method public synchronized void display(GLAutoDrawable drawable) { GL gl = drawable.getGL(); gl.glClear(GL.GL_COLOR_BUFFER_BIT); gl.glPushMatrix(); gl.glRotatef(spin, 0.0f, 0.0f, 1.0f); gl.glColor3f(1.0f, 1.0f, 1.0f); gl.glRectf(-25.0f, -25.0f, 25.0f, 25.0f); gl.glPopMatrix(); gl.glBegin(GL.GL_LINES); gl.glColor3f(0.0f, 0.0f, 1.0f); gl.glVertex3f(0.0f,0.0f,0.0f); gl.glVertex3f(40.0f,0.0f,0.0f); gl.glColor3f(0.0f, 1.0f, 0.0f); gl.glVertex3f(0.0f,0.0f,0.0f); gl.glVertex3f(0.0f,40.0f,0.0f); gl.glEnd(); gl.glFlush(); spinDisplay(); // internal method to change value to rotate square }

25. GLAutoDrawable interface • JOGL abstracts the OpenGL rendering pipeline as a GLContext class. • Java is a concurrent language, and graphics rendering with JOGL is achieved via a dedicated thread. • Within JOGL drawing is always within either a GLCanvas or a GLJPanel object. • A GLAutoDrawable object can access the OpenGL current context with the getGL() method. • GLCanvas, GLJPanel both implement the GLAutoDrawable interface. • The GLAutoDrawable parameter for the display method is really whichever of GLCanvas, GLJPanel is being used to draw elements within the Java application.

26. GLContext • A GL context contains all information for rendering graphic data to display device (e.g. the screen) • Vertex data • Pixel data • Model view matrix • Projection matrix • Textures • Framebuffer

27. OpenGL rendering pipeline Show here to illustrate complexity of process, will be discussed in moredetail as course progresses.

28. doublebuf display( ) method gl.glClear(GL.GL_COLOR_BUFFER_BIT); • forces the entire GL canvas (either a GLCanvas, GLJPanel object) to be erased and coloured entirely with the current GL clear colour (defined earlier in the code with gl.glClearColor(0.0f, 0.0f, 0.0f, 0.0f), which is black.

29. doublebuf display( ) method • glPushMatrix() means "remember where you are" • glPopMatrix() means "go back to where you were."

30. doublebuf display( ) method • Using push and pop, the x and y axis remain stationary, whilst the square rotates

31. doublebuf display( ) method • Without push and pop, the x and y axis rotate as well as the square

32. doublebuf display( ) method • gl.glRotatef(spin, 0.0f, 0.0f, 1.0f); • rotate the entire 3D virtual world where all drawing objects occur by spin degrees around the vector (0,0,1) y y x x z (0,0,1)

33. doublebuf display( ) method gl.glFlush(); causes every drawable object to appear and all rendering operations to be performed spinDisplay(); internal method that increases the angle to rotate square at next iteration performed by FPS animator.