Part 2 – Chapter 4:
Modelling and Rendering of 3D
Objects
4.1
4.2
4.3
4.4
4.5
4.6
4.7
3D Shape Representations
Example: Rendering 3D objects using OpenGL
Depth Buffer - Handling occlusion in 3D
Double Buffering - Rendering animated objects
Vertex colours & colour interpolation - Increasing realism
Backface culling – Increasing efficiency
Modelling and Animation Tools
© 2017 Burkhard Wuensche
Dept. of Computer Science, University of Auckland
COMPSCI 373 Computer Graphics & Image Processing
2

Polygonmesh

Parametric Surface

Subdivison Surface

Implicit Surface

Constructive Solid Geometry

Point Cloud
© 2017 Burkhard Wuensche
The most suitable shape representation
depends on the application
=> IMPORTANT DESIGN DECISION
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
•

Easy to define - just
define vertex positions
and connectivity
Disadvantages
•
•
•
Impractical for everything but the
most basic meshes
Time-consuming
No control over shape properties
(e.g. curvature, smoothness)
1’ 10’ 8’ 6 5 6’5’
1 10
8
9
2
© 2017 Burkhard Wuensche
7
3 3’
2’
4
4’
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 BSpline) 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
•

© http://graphics.pixar.com/opensubdiv/docs/
subdivision_surfaces.html
© 2017 Burkhard Wuensche
Fast since simple initial surface sufficient
Disadvantages
•
Dept. of Computer Science, University of Auckland
Limited control of resulting shape
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)
•

Advantages
•
•

Combine simple objects to more complex
objects by using set operations (union,
intersection, …)
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
•
•
Can be acquired automatically
using sensors (Laser scanner,
structured lighting etc.)
Can be rendered directly or by
transforming into polygon mesh)

Disadvantages
•
•
•
•
Requires special hardware /
software to acquire
Conversion into polygon mesh can
introduce errors
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>
#include <gl/glu.h>
#include <gl/glut.h>
6
#include "Trackball.h"
const int windowWidth=400;
const int windowHeight=400;
y
2
3
7
0
Note: all face
vertices are defined
anti-clockwise
4
1
x
// define vertices and faces of the cube
5
const int numVertices=8;
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
z
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
© 2017 Burkhard Wuensche
Dept. of Computer Science, University of Auckland
Without depth buffer
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);
glBegin(GL_POLYGON);
glVertex3f(0,0,0);
glVertex3f(1,0,0);
glVertex3f(1,1,0);
glVertex3f(0,1,0);
glEnd();
© 2017 Burkhard Wuensche
glColor3f(0,0,1);
glBegin(GL_POLYGON);
glVertex3f(0.2,0.2,0);
glVertex3f(1.2,0.2,0);
glVertex3f(1.2,1.2,0);
glVertex3f(0.2,1.2,0);
glEnd();
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
(left, bottom, -near)
z far
z near
Perform depth test in these coordinates!!
y
v
n
z 
x
u
z
© 2017 Burkhard Wuensche
z 
Dept. of Computer Science, University of Auckland
NOTE: z=1
used for
clearing
depth buffer
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
G
polygon vertices
yellow
(1,1,0)
green
(0,1,0)
Example: for the RGB
colour cube the colour of
each vertex is equal its
spatial coordinates.
© 2017 Burkhard Wuensche
cyan
(0,1,1)
black
(0,0,0)
blue
(0,0,1)
white
(1,1,1)
red
(1,0,0)
R
magenta
(1,0,1)
B
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   A   B   C
is
C p   C A   C B   CC
where CA, CB, and CC are the colours at the vertices
A, B and C respectively and ,  and  are the
barycentric coordinates of p:
 
C
A
p
 
B
© 2017 Burkhard Wuensche
Dept. of Computer Science, University of Auckland
 
area (  p BC )
area (  ABC )
area (  p CA )
area (  ABC )
area (  p AB )
area (  ABC )
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
© by Ken Brilliant
meshes are created.
• 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.
© 2017 Burkhard Wuensche
Dept. of Computer Science, University of Auckland
COMPSCI 373 Computer Graphics & Image Processing
25
Popular professional software packages are





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, …
© 2017 Burkhard Wuensche
Dept. of Computer Science, University of Auckland
© Pixar Inc. – How We Do It
http://www.pixar.com/howwedoit/index.html#
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?
© 2017 Burkhard Wuensche
Dept. of Computer Science, University of Auckland
COMPSCI 373 Computer Graphics & Image Processing
30