Part 2 – Chapter 4: Modelling and Rendering of 3D Objects 4.1 3D Shape Representations 4.2 Example: Rendering 3D objects using OpenGL 4.3 Depth Buffer - Handling occlusion in 3D 4.4 Double Buffering - Rendering animated objects 4.5 Vertex colours & colour interpolation - Increasing realism 4.6 Backface culling – Increasing efficiency 4.7 Modelling and Animation Tools © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 2 Polygonmesh The most suitable shape representation Parametric Surface depends on the application => IMPORTANT DESIGN DECISION Subdivison Surface Implicit Surface Constructive Solid Geometry Point Cloud © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 3 Defined by a set of vertices and a set of faces Faces are (usually) quadrilaterals or triangles The illusion of a solid 3D object is achieved by representing the object’s boundary surface with a polygon mesh © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 4 Advantages Disadvantages • Easy to define - just • Impractical for everything but the define vertex positions most basic meshes and connectivity • Time-consuming • No control over shape properties (e.g. curvature, smoothness) 1’ 10’ 8’ 6 56’5’ 1 10 8 7 3 3’ 9 2 2’ 4’ 4 © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 5 Defined as function p(s,t)=(x(s,t), y(s,t), z(s,t)) Direct definition is difficult, but we can use spline surfaces where surfaces are defined using control points, e.g. Bezier Surfaces, and NURBS (Non-Uniform Rational B- Spline) surfaces. Advantages • High level of control • Flexible Disadvantages • Only moderately intuitive • Steep learning curve © http://www.ibiblio.org/e-notes/Splines/Inter.htm © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 6 Subdivision Surfaces generate smooth surfaces from coarse control meshes by iteratively subdividing them • New vertices are weighted averages of existing vertices • Different weighting factors result in different surfaces Advantages • Fast since simple initial surface sufficient Disadvantages • Limited control of resulting shape © http://graphics.pixar.com/opensubdiv/docs/ subdivision_surfaces.html © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 7 Implicit surfaces are defined as all points (x,y,z) where f(x,y,z)=0 •The inside of the object is given by all points where f(x,y,z)<0 Example: f(x,y,z)=x2+y2+z2-r2 Advantages •Some types of surfaces are easy to define •Surface normal given by gradient •Easier blending between objects Disadvantages •Non-intuitive •Limited control about surface shape •Computationally complex to compute surface © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 8 Constructive Solid Geometry (CSG) • Combine simple objects to more complex objects by using set operations (union, intersection, …) Advantages • Intuitive & easy modelling of complex shapes • Easy to render using ray tracing Disadvantages • Difficult to convert to polygon representation • Limited range of shapes © http://de.wikipedia.org/wiki/ Constructive_Solid_Geometry © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 9 Advantages Disadvantages • Can be acquired automatically • Requires special hardware / using sensors (Laser scanner, software to acquire structured lighting etc.) • Conversion into polygon mesh can • Can be rendered directly or by introduce errors transforming into polygon mesh) • Difficult to deal with large “gaps” • Usually very large © https://en.wikipedia.org /wiki/Point_cloud © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 10 Objects defined using 3D Vertices Surface rendered using polygons formed by vertices If polygons overlap only render visible pixels (→ Depth buffer) If animating the shape ensure that animation is smooth, i.e. image is displayed only if completely drawn (→ Double buffer) Make object appearance more realistic by applying Illumination and shading (see chapter 3) Increase realism (→ vertex colours & colour interpolation, texture mapping (see chapter 7)) Increase rendering speed by removing invisible surface regions (→ Backface culling) © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 11 // A program to display a simple cube with each face a different colour. // Cube can be rotated with a trackball. #include <windows.h> #include <gl/gl.h> y #include <gl/glu.h> 2 3 #include <gl/glut.h> 6 #include "Trackball.h" 7 const int windowWidth=400; 0 const int windowHeight=400; Note: all face 4 1 x // define vertices and faces of the cube vertices are defined anti-clockwise 5 const int numVertices=8; z const int numFaces=6; const int numFaceVertices=4; const float vertices[numVertices][3] = {{0,0,0},{1,0,0},{0,1,0},{1,1,0},{0,0,1},{1,0,1},{0,1,1},{1,1,1}}; const int faces[numFaces][numFaceVertices] = { {0,1,5,4}, {1,3,7,5}, {0,4,6,2} // Bottom, Right, Left {2,6,7,3}, {4,5,7,6}, {0,2,3,1}}; // Top, Front, Back const float faceColours[numFaces][3] = // (R,G,B) colours of each face {{1,0,0},{0,1,0},{0,0,1},{1,1,0},{1,0,1},{0,1,1}}; // red, green, blue, yellow, magenta, cyan CTrackball trackball; © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 12 void handleMouseMotion(int x, int y) { trackball.tbMotion(x, y); } void handleMouseClick(int button, int state, int x, int y) {trackball.tbMouse(button, state, x, y); } void handleKeyboardEvent(unsigned char key, int x, int y) { trackball.tbKeyboard(key); } void display(void){ glMatrixMode( GL_MODELVIEW ); // Set the view matrix ... glLoadIdentity(); // ... to identity. gluLookAt(0,0,4, 0,0,0, 0,1,0); // camera is on the z-axis trackball.tbMatrix(); // rotate the cube using the trackball ... glTranslatef(-0.5f,-0.5f,-0.5f); // ... and move it to the centre glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // clear colour & depth buffer for (int i=0; i < numFaces; i++) { const int* face = faces[i]; glBegin(GL_POLYGON); glColor3fv(faceColours[i]); for (int vIndex=0; vIndex<numFaceVertices; vIndex++) glVertex3fv(vertices[face[vIndex]]); glEnd();} glFlush (); glutSwapBuffers(); // swap framebuffer in which image has been draw with } // the frame buffer read by the CRT controller © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 13 void init(void) { // select clearing color (for glClear) glClearColor (1,1,1,1); // RGB-value for white // enable depth buffering glEnable(GL_DEPTH_TEST); // initialize view (simple orthographic projection) glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(33,1,2,8); trackball.tbInit(GLUT_LEFT_BUTTON); } void reshape(int width, int height ) { // Called at start, and whenever user resizes component int size = min(width, height); glViewport(0, 0, size, size); // Largest possible square trackball.tbReshape(width, height); } © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 14 // create a double buffered colour window int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH); glutInitWindowSize(windowWidth, windowHeight); glutInitWindowPosition(100, 100); glutCreateWindow("Coloured Cube"); init (); // initialise view glutMouseFunc(handleMouseClick); // Set function to handle mouse clicks glutMotionFunc(handleMouseMotion); // Set function to handle mouse motion glutKeyboardFunc(handleKeyboardEvent); // Set function to handle keyboard input glutDisplayFunc(display); // Set function to draw scene glutReshapeFunc(reshape); // Set function called if window gets resized glutMainLoop(); return 0; } © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 15 Polyhedra are solid objects with polygonal faces • Usually represented as an array of vertices and an array of polygonal faces, each face being an array of indices into the vertex array. IMPORTANT: the vertices of a face must be stored in ANTICLOCKWISE order when looking from outside • i.e. right-handed with respect to outgoing face normal • Ordering is used by OpenGL to classify faces as front or back w.r.t. eye point. • Wrongly classified faces may be coloured wrongly (see later) The output primitives are polygons • Between glBegin(GL_POLYGON) and glEnd() you output all the vertices of the (convex) polygon Polygon is drawn with whatever the current colour is. • Note: OpenGL can’t fill concave polygons • You have to break them into convex bits © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 16 Problem: For many 3D objects polygons overlap on the display. How do we determine which pixel on the display belongs to which polygon? Solution: Use depth buffer which determines for each pixel front most object With depth buffer Without