Presentation is loading. Please wait.

Presentation is loading. Please wait.

COMP3421/9415 Computer Graphics

Similar presentations


Presentation on theme: "COMP3421/9415 Computer Graphics"— Presentation transcript:

1 COMP3421/9415 Computer Graphics
Introduction Angela Finlayson

2 Course Admin Labs next week in piano lab/ tutorials normally from week 3 onwards Course Outline Robert lectures week 7 – week 13 Second assignment in pairs from same tutorial group Pair from same tutorial group Lecture slides before and some before code.

3 Graphics Then and Now 1963 Sketchpad (4mins 20) Ha_bA 2014 Pixar’s Renderman P6dlg Teaot and the old thing on youtube. Sketchpad Check the links

4 Computer Graphics Algorithms to automatically render images from models. Light hi mum Camera Objects model image

5 Computer Graphics Based on: Geometry Physics
Physiology/Neurology/Psychology with a lot of simplifications and hacks to make it tractable and look good. Algorithms based on geometry: light, models. Physics of light bouncing off things. What happens when the light comes into my eye? Your brain does stuff that works for us and sometimes against us – 3d drawing – not really 3D – brain takes cues to reassemble a 3d image. Sometimes the brain works against us. We can’t simulate billions and billions of photons moving around in the room. A lot of time comes down to what looks right. Not like bubble sort – we know it works. Massive increases in processing power, so what is tractable is getting broader and broader.

6 Physics of light Light is an electromagnetic wave, the same as radio waves, microwaves, X-rays, etc. The visible spectrum (for humans) consists of waves with wavelength between 400 and 700 nanometers. Different animals see different parts of the range. Birds can see ultraviolet light Snakes can see infrared.

7 Non-spectral colours Some light sources, such as lasers, emit
light of essentially a single wavelength or “pure spectral” light (red,violet and colors of the rainbow). Other colours (e.g. white, purple, pink,brown) are non-spectral. There is no single wavelength for these colours, rather they are mixtures of light of different wavelengths.

8 The Eye Retina – light – nerve impulses that go to the brain. Optic nerve blind spot. Fovea – centre of vision sharp central vision highest density of cones and nerves.

9 Colour perception The retina (back of the eye) has two different kinds of photoreceptor cells: rods and cones. Rods are good at handling low-level lighting (e.g. moonlight). They do not detect different colours and are poor at distinguishing detail. Cones respond better in brighter light levels. They are better at discerning detail and colour. Large sections of your retina fire Groups of rods – share the same nerve – so low resolution. All fire the same nerve. More of them in the peripheral.

10 Tristimulus Theory Most people have three different kinds of cones which are sensitive to different wavelengths. Trees and green things at night – shorter wavelengths. Respond very little to red light. Rose at twilight, When you see lots of red and green we can get the same response as yellow light. Different mixtures of lights rather than producing pure yellow light. Are eyes can’t tell the difference. They overla, so it is harder to do greener than greener than green. By staring at something red and then staring at something green! Fatigue your red recetors.

11 Colour blending As a result of this, different mixtures of light will appear to have the same colour, because they stimulate the cones in the same way. For example, a mixture of red and green light will appear to be yellow.

12 Colour blending We can take advantage of this in a computer by having monitors with only red, blue and green phosphors in pixels. Other colours are made by mixing these lights together. We can’t make all colors this way Negative red Tired cells can see brighter greens

13 Color Illusions Color constancy Not absolute color
If you assume that the front of the dress is in shadow (thanks to the bright blurry background light), your brain will apply colour constancy and remove the blueish hue of the shadow — and bingo, the dress is white. But if you assume that the front of the dress is well lit (thanks to the shiny reflections on the top panel of the dress), you will see the dress as blue.

14 Checker Shadow Illusion

15

16 Corner/Curve Illusions
Best Illusion of the Year Contest K9v8

17 Realistic rendering Our main focus will be on realistic rendering of 3D models. i.e. Simulating a photographic image from a camera. Note however: most art is not realistic but involves some kind of abstraction. Realism is easier because physics is more predictable than psychology.

18 Hardware

19 CPU vs GPU

20 CPU vs GPU CPU consists of a few cores optimized for sequential serial processing GPU has a massively parallel architecture (SIMD/Single Instruction Multiple Data) consisting of smaller special purpose cores designed for handling multiple tasks simultaneously. Making decisions and branching.

21 OpenGL A 2D/3D graphics API. Free, Open source
Cross platform (incl. web and mobile) Highly optimised Designed to use special purpose hardware (GPU) We will be using OpenGL

22 DirectX Direct3D Microsoft proprietary
Only on MS platforms or through emulation (Wine, VMWare) Roughly equivalent features + quality

23 Do it yourself Generally a bad idea: Reinventing the wheel
Numerical accuracy is hard Efficiency is also hard

24 OpenGL fixed function pipeline
Model Model-View Transform Model Transform View Transform Illumination Projection transformation Rasterisation Viewport Perspective division Clipping Texturing Hidden surface removal Frame buffer Display User

25 OpenGL fixed function pipeline
Vertex transformations Model ` Model-View Transform Model Transform View Transform Illumination Projection transformation Rasterisation Viewport Perspective division Clipping Texturing Hidden surface removal Frame buffer Display Fragment transformations User

26 Programmable pipeline
Connectivity lines & polys Vertex transformation Assembly, Clipping Rasterisation Vertices screen vertices pixel positions fragments Frame buffer Depth buffer Fragment colouring Display visible pixels pixel colours We do vertex transformations and Fragment colouring ourselves by writing shaders in GLSL (There are also other optional shaders)

27 Other topics Advanced Topics: You can suggest these for week 11/12
Global illumination techniques such as Ray tracing Radiosity Curves and splines Fractals Advanced Topics: You can suggest these for week 11/12

28 JOGL OpenGL is a C/C++ library.
JOGL provides a set of Java bindings to the native library. jogl/javadoc/

29 JOGL at Home Assuming you use Eclipse JOGL Home Computing
Make font bigger in eclise. Window->preferences->general->appearance->

30 JOGL at cse JOGL is available on school machines in:
/home/cs3421/jogamp Add the following JAR files to your classpath: /home/cs3421/jogamp/jar/jogl-all.jar /home/cs3421/jogamp/jar/gluegen-rt.jar Assignment 1 will be automarked, so you must make sure it runs and compiles on cse machines. Just set class path – you need all of them in your folder – but just link to the two gluegen-rt and Jogl -

31 UI Toolkits JOGL interfaces with a number of different UI toolkits:
AWT, SWT, Swing OpenGL also has its own UI tools: GLUT, GLUI We will be using Swing:

32 Initialisation // Get default version of OpenGL This chooses a profile best suited for your running platform GLProfile glProfile = GLProfile.getDefault(); // Get the default rendering capabilities GLCapabilities glCapabilities = new GLCapabilities(glProfile); Change font in eclise. You can play with the capabilities to achieve certain effects like antialiasing etc later on

33 Create a GLJPanel // A JPanel that is provides opengl rendering support. GLJPanel panel = new GLJPanel(glCapabilities); // Put it in a Swing window JFrame jframe = new JFrame("Title"); jframe.add(panel); jframe.setSize(300, 300); jframe.setVisible(true);

34 Add event handlers // Add a GL event listener // to handle rendering events // MyRenderer must implement GLEvenListener panel.addGLEventListener(new MyRenderer()); // Quit if the window is closed jframe.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE);

35 Event-based Programming
Both JOGL and Swing are event driven. This requires a different approach to programming: The main body sets up the components and registers event handlers, then quits. Events are dispatched by the event loop. Handlers are called when events occur.

36 GLEventListener // initialise (usually only called once) init(GLAutoDrawable drawable); // release resources dispose(GLAutoDrawable drawable); // called after init and then in response to //canvas resizing reshape(GLAutoDrawable drawable, int x, int y, int width, int height); // render the scene, always called after a reshape display(GLAutoDrawable drawable);

37 GL2 All drawing is done using a GL2 object.
You can get one from the GLAutoDrawable : GL2 gl = drawable.getGL().getGL2(); GL2 provides access to all the normal OpenGL methods and constants. jogl/javadoc/javax/media/opengl/GL2.html

38 GL2 Objects Do not store GL2 objects as instance variables. They may be created and destroyed over the lifetime of the program, so always get a fresh one each time display,reshape etc is called. You can pass it to other functions that display etc uses.

39 GL is stateful The GL2 object maintains a large amount of state:
the pen colour the background colour the point size, etc Drawing operations require you to set the state before issuing the drawing command.

40 Colors in JOGL: RGBA Colors are defined using Red (R), Green (G), Blue (B) and Alpha (A) values. For R,G,B values ranges from 0.0(none) to 1.0 (full intensity) For A: values range from 0.0 (Transparent) to 1.0(Opaque) //Set pen color to brightest red gl.glColor3f(1, 0, 0); //default alpha of 1 Color blending, shade across and linearly interpolate. Hardware causes each pixel on the screen to emit different amounts of red green and blue Does not work once we turn on lighting

41 GL methods Because of OpenGL's origins in C, the methods have a distinctive naming convention: glColor3f(...) arg type f = float i = int d = double etc. GL Library Function # args

42 Color Buffer Holds color information about the pixels. Holds garbage when your program starts and should be cleared. The default settings clears it with black, resulting in a black background. Or you can set the color first before you clear it gl.glClearColor(1,1,1,1) ; //white gl.glClear(GL.GL_COLOR_BUFFER_BIT); It is in RAM on the graphics card. Show without. Ie like the black board when you walk in a room.

43 Our First Triangle Once we have set the state we can issue drawing commands such as: gl.glBegin(GL2.GL_TRIANGLES); gl.glVertex2d(-1, -1); gl.glVertex2d(1, -1); gl.glVertex2d(0, 1); gl.glEnd();

44 Screen Shot

45 Our Second Triangle gl.glVertex2d(-1, -1);
gl.glClearColor(1,1,1,1) ; //WHITE gl.glClear(GL.GL_COLOR_BUFFER_BIT); gl.glBegin(GL2.GL_TRIANGLES); gl.glColor3f(1,0,0); //RED gl.glVertex2d(-1, -1); gl.glColor3f(0,1,0); //GREEN gl.glVertex2d(1, -1); gl.glVertex2d(0, 1); //BLUE gl.glEnd();

46 Screen Shot

47 More drawing Once we have set the state we can issue drawing commands as: gl.glBegin(GL_POINTS);// draw some points gl.glVertex2d(-1, -1); gl.glVertex2d(1, -1); gl.glVertex2d(0, 1); glEnd(); Note: these will be tiny and hard to see! gl.glPointSize(15);

48 Begin and End Not all commands can be used between Begin and End. glVertex, glColor can be. glPointSize, glLineWidth can’t For complete list see: ml/glBegin.xml Show primitive types demo. It is state based so the last vertex color of the triangle would probably determine it.

49 More drawing commands Draw unconnected lines: glBegin(GL.GL_LINES);
glVertex2d(-1, -1); // P0 glVertex2d(1, 1); // P1 glVertex2d(1, -1); // P2 glVertex2d(-1, 1); // P3 glEnd(); P3 P1 P0 P2

50 More drawing commands Draw connected lines: glBegin(GL.GL_LINE_STRIP);
glVertex2d(-1, -1); // P0 glVertex2d(1, 1); // P1 glVertex2d(1, -1); // P2 glVertex2d(-1, 1); // P3 glEnd(); P3 P1 P0 P2

51 More drawing commands Draw closed polygons (deprecated):
glBegin(GL.GL_POLYGON); glVertex2d(-1, -1); // P0 glVertex2d(1, 1); // P1 glVertex2d(1, -1); // P2 glVertex2d(-1, 1); // P3 glEnd(); //Note: this particular polygon is complex and may not be rendered properly P3 P1 BAD SLIDE – this may not be renderable P0 P2

52 Polygons OpenGL does not always draw polygons properly. (See week2 tutorial/lab) OpenGL only guarantees to draw simple, convex polygons correctly. Concave and non-simple polygons need to be tessellated into convex parts. Algorithms for tesseltating code. Inbuilt into jogl libraries? Assignment – only simple convex polygon Show my lab running. Show concave ones. Do not worry about back and front of polygon for this lab. Not worth marks.

53 Polygons concavity Simple, Concave Simple, Convex hole Not simple

54 Polygons Simple, Concave Simple, Convex possible convex tessellations
Automatic algorithms and glu utility classes. GLU vs GL2 Simple, Convex possible convex tessellations Not simple

55 More drawing commands Draw separate triangles:
glBegin(GL.GL_TRIANGLES); glVertex2d(etc); // P0 glVertex2d(); // P1 glVertex2d(); // P2 glVertex2d(); // P3 glVertex2d(); // P4 glVertex2d(); // P5 glEnd(); P0 Triangles based are the P2 P1 P3 P5 P4

56 More drawing commands Draw strips of triangles:
glBegin(GL.GL_TRIANGLE_STRIP); glVertex2d(etc); // P0 glVertex2d(); // P1 glVertex2d(); // P2 glVertex2d(); // P3 glVertex2d(); // P4 glVertex2d(); // P5 glEnd(); P0 Triangle stris and winding order? P2 P1 P3 P4 P5

57 More drawing commands Draw fans of triangles:
glBegin(GL.GL_TRIANGLE_FAN); glVertex2d(); // P0 glVertex2d(); // P1 glVertex2d(); // P2 glVertex2d(); // P3 glVertex2d(); // P4 glEnd(); P0 P4 P1 P3 P2

58 More drawing commands Similarly for quadrilaterals (deprecated):
glBegin(GL.GL_QUADS); // draw unconnected quads glEnd(); glBegin(GL.GL_QUAD_STRIP); // draw a connected strip of quads

59 Triangles Triangles are preferred over quads and polygons as they are guaranteed to lie in one plane. In 3D we can define four points for our quads (or more for our polygons) which don’t lie on the same plane and different implementations of OpenGL will different results – some of them not great 

60 Winding Order By default, triangles/quads/polygons etc are defined with counter-clockwise vertices are processed as front-facing triangles. Clockwise are processed as back-facing triangles. Right Hand

61 Fill or outline // fill the polygon with colour
gl.glColor4d(r, g, b, a); //This is the default anyway gl.glPolygonMode( GL2.GL_FRONT_AND_BACK, GL2.GL_FILL); gl.glBegin(GL2.GL_POLYGON); // ...points... gl.glEnd();

62 Fill or outline // outline the polygon with colour
gl.glColor4d(r, g, b, a); gl.glPolygonMode( GL2.GL_FRONT_AND_BACK, GL2.GL_LINE); gl.glBegin(GL2.GL_POLYGON); // ...points... gl.glEnd(); //Set back to FILL when you are finished – not needed but is a bug fix for some implementations on some platforms gl.glPolygonMode( GL2.GL_FRONT_AND_BACK, GL2.GL_FILL); gl.glPolygonMode( GL2.GL_FRONT_AND_BACK, GL2.GL_FILL); Set it back again.

63 Animation To handle animation we can separate the display() function into two methods: public void display(GLAutoDrawable drawable) { // Update the model updateModel(); // Render the new scene render(drawable); } Do without animator – just resizing the screen. Animator is one way of doing it. Can also call update.

64 Animation Display events are only fired when the image needs to be redrawn. We can use an FPSAnimator to fire events at a particular rate: // in main() // create display events at 60fps FPSAnimator animator = new FPSAnimator(60); animator.add(panel); animator.start();

65 Double Buffering Single Buffering: One buffer being both drawn to and sent to the monitor. Updated objects would often flicker. Double Buffering: (default in jogl ) Uses two buffers, draw into back buffer while the front buffer is displayed and then swap buffers after updating finished. Smoother animation. In the old days there was only one buffer and it was continually being both drawn to and sent to the monitor. There are some advantages to this approach, but there are also very large drawbacks. Most notably, when objects on the display were updated, they would often flicker.

66 Input events We can add keyboard or mouse event listeners to handle input. a/awt/event/KeyListener.html a/awt/event/MouseListener.html Need to make it focusable to get key events. Mouse not in same co-ordinates. Show changing to line-strip. Model View Control – hard to implement things

67 Event handling GL commands should generally only be used within the GLEventListener events don’t try to store GL objects and use GL commands in keylistener or mouse events etc. In multi-threaded code it is easy to create a mess if you write the same variables in different threads.

68 World vs Viewport Notice that the coordinate system is independent of the window size. OpenGL maintains separate coordinate systems for the world and the viewport. This allows us to make our model independent of the particular window size or resolution of the display.

69 Viewport We talk in general about the viewport as the piece of the screen we are drawing on. We can think of it as a 2d array of pixels. It may be a window, part of a window, or the whole screen. (In jogl by default it is the whole window – minus the border) It can be any size but we assume it is always a rectangle.

70 World window The world window is the portion of the world that we can see. It is always an axis-aligned rectangle. By default the bottom-left corner is (-1,-1) and the top-right corner is (1,1). We can change this using by setting the Projection matrix using glu.Ortho2d Demo changing triangle coord to a 4 and resizing the window – still does not show more of it

71 GLU The GLU class contains a bunch of utility methods. We will introduce some useful methods as they arise. To create an orthographic projection with the specified boundaries in 2D (in world coordinates): glu.gluOrtho2d(left, right, top, bottom); Left right top bottom with respect to the camera – default position at centre. No perspective.

72 Resizing the World Window
public void reshape(GLAutoDrawable d, int x, int y, int w, int h) { GL2 gl = drawable.getGL().getGL2(); gl.glMatrixMode(GL2.GL_PROJECTION); gl.glLoadIdentity(); glu.gluOrtho2d( , 10, // left, right , 10.0); // top, bottom } What and how the world gets projected to the screen. The bounding box or frustum. Defines what gets projected and how. How would you get it to

73 Aspect ratio The aspect ratio of a rectangle is:
aspect = width / height The default world window has aspect (i.e. it is a square) – or it can be changed by the programmer to be a rectangle. The aspect ratio of the viewport depends on the window shape – which the user can change.

74 Mapping Windows Opengl maps the world window to the viewport automatically by stretching the world to fit into the viewport. If the aspect ratios of the 2 rectangles are not the same, distortion will result. Google maps

75 Maintaining Aspect Ratio
We can resize the world window to match its aspect ratio to viewport. The reshape() method is called whenever the window/panel changes size. If the viewport’s width is greater than its height, show more of the world model in the x-direction and vice versa. This may cause things to appear or disaear on screen rather than things being stretched. Or just make it bigger and bigger as it gets bigger.

76 gluOrtho2D public void reshape(GLAutoDrawable d, int x, int y, int w, int h) { GL2 gl = drawable.getGL().getGL2(); GLU glu = new GLU(); double aspect = (1.0 * w) / h; //Tell gl what matrix to use and //initialise it to 1 gl.glMatrixMode(GL2.GL_PROJECTION); gl.glLoadIdentity(); What and how the world gets projected to the screen. The bounding box or frustum. Defines what gets projected and how. How would you get it to

77 gluOrtho2D… double size = 1.0; if(aspect >=1){ // left, right, top, bottom glu.gluOrtho2d( -size * aspect, size * aspect, -size, size); } else { glu.gluOrtho2d( -size, size, -size/aspect, size/aspect); }

78 Mouse Events When we click on the screen we get the mouse co-ordinates in screen co-ordinates. We need to somehow map them back to world co-ordinates. We have provided a utility class to help do this as it is little messy/tricky at this point. Also show the lab at this point.

79 Debugging Can use DebugGL2 or TraceGL2 or both. In init: drawable.setGL(new DebugGL2( new TraceGL2( drawable.getGL().getGL2(), System.err)));


Download ppt "COMP3421/9415 Computer Graphics"

Similar presentations


Ads by Google