Part 2 – Chapter 4: Modelling and Rendering of 3D Objects

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

© 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

© 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 #include y #include 2 3 #include 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

© 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 depth buffer

© 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 17  Before drawing scene, you must clear the frame buffer (aka colour buffer) AND the depth buffer with: glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

 Enable depth testing as polygons are drawn to the screen glEnable(GL_DEPTH_TEST); • Usually only front faces are visible [see “Backface culling”]

 Common problem: “z-fighting” • Insufficient depth resolution (depth buffer usually 16 bits) • Poorly defined polygons (e.g. same depth)

glColor3f(1,0,0); glColor3f(0,0,1); glBegin(GL_POLYGON); glBegin(GL_POLYGON); glVertex3f(0,0,0); glVertex3f(0.2,0.2,0); glVertex3f(1,0,0); glVertex3f(1.2,0.2,0); glVertex3f(1,1,0); glVertex3f(1.2,1.2,0); glVertex3f(0,1,0); glVertex3f(0.2,1.2,0); glEnd(); glEnd(); © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 18  Need depth of each pixel of polygon drawn  Depth test performed after view transformation and perspective projection

(right, top, -near) z near z far y

z z far (left, bottom, -near) z near Perform depth test in these coordinates!!

y NOTE: z=1 v z  used for clearing depth buffer n x z  u z © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 19  All vertices (x,y,z) are converted into normalised device coordinates (X,Y,Z).  (X,Y) converted to view port coordinates (pixel (i,j) on screen) depthBuffer[i][j] = -Z colourBuffer[i][j] = … // Desired pixel colour  A polygon is drawn by computing for each pixel its depth and colour by interpolating the vertex values • Its colour and depth are copied into the colourBuffer and depthBuffer only if its depth is less than the current depth

© 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 20 Problem:  Frame buffer is read at regular intervals by display  When animating a scene frame buffer is regularly updated, but not synchronised with display  => Frame can contain scene elements from two different animation steps (“tearing”)

Solution: “tearing” no “tearing”  Use double buffering: Display reads from on-screen buffer & scene is rendered into off-screen buffer. Buffers are switched when rendering completed (NOTE: For even better performance use “triple buffering”)  In OpenGL:

In main(): glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH); At end of display() method: glutSwapBuffers(); © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 21 Problem:  Many natural objects are not single-coloured (monochrome)  Even if single-coloured perceived colour varies smoothly due to illumination changes Solution:  Define vertex colours and/or use smooth shading (Gouraud shading)  Perform colour interpolation between polygon vertices G

green yellow (0,1,0) (1,1,0) cyan (0,1,1) white (1,1,1) Example: for the RGB black (0,0,0) R red colour cube the colour of (1,0,0) blue each vertex is equal its (0,0,1) magenta (1,0,1) spatial coordinates. B

© 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 22  OpenGL renders polygons by breaking them into triangles  If each triangle vertex has a colour the colours are interpolated over the polygon: Within a triangle ABC, the colour at any point p  ABC

is CCCCp  ABC

area() pBC where CA, CB, and CC are the colours at the vertices   area() A, B and C respectively and ,  and  are the C ABC barycentric coordinates of p: area()  pCA  area() p ABC A area()  pAB area () B ABC

© 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 23  Problem: Back faces of solid objects are not visible => about half of all polygons are rendered unnecessary

 Solution: Omit rendering using backface culling glCullFace(GL_BACK); glCullFace(GL_BACK) glEnable(GL_CULL_FACE); (backfaces are identified by testing whether its anticlockwise ordered vertices are ordered clockwise when projected onto the screen) glCullFace(GL_FRONT)

 NOTE: by default only one side of a polygon (the side facing the light source) is shaded. • No problem when modelling solid objects (such as a cube) since back faces are not visible. • Double-sided shading is possible in OpenGL.

© 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 24  3D Modelling and Animation packages contain three main functions: • An object modelling environment where 3D models or meshes are created. © by Ken Brilliant © by Ken

• An animation environment where models are arranged and animated. • A variety of rendering tools to create fast previews and photorealistic images (movies) of a scene.

 Maya (Autodesk)  3D Studio Max (Autodesk)  Houdini (SideFX)  LightWave 3D (NewTek)  Cinema4D (Maxon)

Many specialized tools available, e.g. for architecture and engineering (AutoCAD, SolidWorks), computer animation and AI (MASSIVE), modelling urban (CityEngine) and natural (Vue) environments.

© 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 26  Storyboard  Modelling [Topics touched in this lecture] • Curves and surfaces • 3D Shapes  Animation • Keyframing (motion capture and/or human animator) • Physically-based animations  Lighting and Texturing  Rendering • Preview (polygon rendering) • Production quality rendering (e.g. ray tracing)  Post-Production • Special effects, sound, … © Pixar Inc. – How We Do It http://www.pixar.com/howwedoit/index.html#

© 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 27 Open source software for 3D modeling, animation, and rendering • Download for free from http://www.blender.org/ • Tutorial (for an older version, some functionalities have changed): http://www.cs.auckland.ac.nz/~jli023/opengl/blender3dtutorial.htm

 Experimenting with “Blender” will improve your 3D perception and your understanding of modelling and rendering techniques and 3D transformations.  In this lecture we learn many of the techniques implemented in “Blender” (e.g. polygon rendering, ray tracing, Bezier curves, illumination, materials, 3D transformations, … )

© 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 28 Creation of a simple 3D model: 1) Draw a closed Bezier curve 2) Extrude it and apply “bevelling” (rounding of edges using subdivision surfaces) 3) Perform high quality rendering © 2017 Burkhard Wuensche Dept. of Computer Science, University of Auckland COMPSCI 373 Computer Graphics & Image Processing 29 Q1. You want to model a dinosaur and render it using a game engine. What modelling technique do you choose? Q2. Given is an object consisting of intersecting spheres and cuboids with cylindrical holes. You want to model and render this object. What modelling technique do you choose? Q3. Given is an equilateral triangle with the vertex colours red (1,0,0), green (0,1,0), and blue (0,0,1). What is the colour at the centre of the triangle? Q4. Two overlapping polygons seem to “bleed” into each other when rendered (you see pixels of both polygons). What could be the reason for this?