Lab 3' Interactive 3D Scene

1
Lab 3. Interactive 3D Scene

• Due 16th March

2
Overview

• This lab will cover some of the topics discussed
  in previous lectures including
• Lighting
• Transformations
• Polygon Meshes
• Texture Mapping

3
Goals (option 1)

• Write code to load up the polygon mesh of the
  house provided
• Use functions in processing to
• Set the camera position
• Rotate the house (about its center) - in
  response to mouse/key
• Set the position of the light source, move the
  lightsource in relation to the house - in
  response to mouse/key
• Texturing
• Texture map simple quads with textures to create
  a simple scene with trees.
• Texture map the house with an asphalt texture
• EXPERT MODE (Optional Tasks)
• Texture mapping Can you modify the code to draw
  the house adding different textures for the
  walls, roof and chimney.
• Billboarding Can you apply the right transform
  so that the textured quads always face the camera?

4
Goals (option 2)

• Create a texture mapped polygonal object (a
  simple box will do) using a polygon mesh that you
  create yourself. Write code to drw the box and
  also, Use functions in processing to
• Set the camera position
• Rotate the box (about its center) - in response
  to mouse/key
• Set the position of the light source, move the
  lightsource in relation to the object - in
  response to mouse/key
• Texturing
• Texture map each face of the box with a different
  texture (e.g. a logo)
• Texture map some simple quads with textures and
  add them to the scene.
• EXPERT MODE (Optional Tasks)
• Billboarding Can you apply the right transform
  so that the textured quads always face the
  camera?
• Can you control the camera to walk/fly around the
  scene in response to keypresses?

5
Lab stuff

• You can make/download your own textures and
  polygon meshes if you wish.
• Some samples for use in this lab are provided at
• http//www.cs.tcd.ie/John.Dingliana/CS4/labstuff.h
  tml
• Including
• House - polygon mesh
• Tree, Brick, Asphalt textures.

6
Further Info

• Tips and Useful information for working on this
  lab

7
3D Mode

• Processing allows you to work in two 3D modes P3D
  and OpenGL which allows you to use a few
  additional/modified functions including
• Lights Illumination
• 3D coordinates (vertex is called with x, y, and z
  values)
• 3D primitives (3d vertices used within
  beginShape)
• Camera positioning
• Texture mapping
• 3D mode is enabled in the size function at the
  start of the program. e.g
• size (500, 500, P3D) OR size(500, 500,
  OPENGL)
• OpenGL mode has some advantages in terms of speed
  but is buggy in some platforms. The following
  notes assume P3D mode.

8
Loading in a Polygon Mesh

• Recall the last lab where we just loaded in lines
• This time we are provided with a list of polygons
  (Triangles for ease of implementation)
• As before, each row in the polygon list contains
  the three vertex indices that make up the
  triangle
• N.B. there is no Edge List
• Pdeudocode
• For t0 to NUM_TRIANGLES
• Int V1 polyst3
• Int V1 polyst3 1
• Int V1 polyst3 2
• beginShape( TRIANGLE)
• Vertex (vertsv13, vertsv13 1, vertsv13
  2)
• Vertex (vertsv13, vertsv13 1, vertsv13
  2)
• Vertex (vertsv13, vertsv13 1, vertsv13
  2)
• endShape()

9
Camera Position

• In processing, the camera parameters are set by
  the following function call
• camera ( ex, ey, ez, tx, ty, tz, ux, uy, uz
  )
• ex, ey, ez is a vector defining the camera
  position (a.k.a. view reference point or eye
  position)
• tx, ty, tz is a vector defining the target
  point (the point the camera is looking at
• ux, uy, yz is the up vector which loosely
  orients the camera. Make sure this is not
  parallel to the camera direction

UP VECTOR
The Up Vector
10
Lights

• Lights are placed in the scene with the
  pointLight or directionalLight functions (use
  either ONE not both)
• pointLight( r, g, b, px, py, pz )
• directionalLight( r, g, b, dx, dy, dz )
• r , g, b is the colour of the light
• px, py, pz is the position of a point light
  in 3D space
• dx, dy, dz is a directional vector for light
  rays from a distant source (see illumination
  notes in Lec. 7)
• e.g. pointLight( 255, 255, 255, 0, 100, 100
  )
• A white point lightsource at position 0, 100,
  100

11
Texture mapping

• An image texture can be applied to an object
  defined with beginShape
• Apart from the x, y, z co-ordinates of the
  vertex, you need to provide the UV coordinates on
  the image where the colour of the pixel comes
  from.

(0, 0, 0, 25, 32)
(200, 0,0, 75, 31)
(25, 32)
(75, 31)
(30, 81)
(65, 80)
(0, 200, 0, 30, 81)
(200, 200, 0, 65, 80)
12
Texture mapping Example
(25, 32)
(75, 31)

• noStroke()
• PImage a loadImage(face.jpg")
• beginShape(QUADS)
• texture(a)
• vertex(0,0,0, 25, 32)
• vertex(200, 0, 0, 75, 31)
• vertex(200, 200, 0, 65, 80)
• vertex(0, 200, 0, 30, 81)
• endShape()

(30, 81)
(65, 80)
(200, 0,0, 75, 31)
(0, 0, 0, 25, 32)
(200, 200, 0, 65, 80)
(0, 200, 0, 30, 81)
N.B. The texture() function must be called
between beginShape() and endShape() and before
any calls to vertex().
13
Transformations

• Transformations functions in processing include
• translate (tx, ty, tz)
• scale (sx, sy, sz)
• rotate ( radians, ax, ay, az)
• Also include the camera function, which is a more
  complex transform
• Each of these affect the Current Transfromation
  Matrix (CTM)
• In code, the order is to call a transformation
  and then draw/create an object (e.g. beginShape)
• NOTE! This can also apply to lights, camera,
  images, predefined shapes
• Transformations are cumulative (they get
  concatenated to the CTM)
• This is good for hierarchical objects
• By default this means all objects are dependent
  on each other - Bad For independent objects
  unless we have some way of separating them

14
Dependent Transforms

• By Default objects are affected by all previous
  transforms that have gone before
• float bx 0, by 10, bz 0, b2x 200, b2y
  200, b2z 0
• translate (bx, by, bz)
• sphere( 20) // this is translated by bx,
  by, bz
• translate (b2x, b2y, b2z)
• sphere( 20) // this is translated by bx, by,
  bz AND b2x, b2y, b2z

15
Independent transforms

• resetMatrix() sets the CTM to identity i.e.
  forget all previous transforms that have been
  applied
• float bx 0, by 10, bz 0, b2x 200, b2y
  200, b2z 0
• translate (bx, by, bz)
• sphere( 20) // this is translated by bx, by,
  bz
• resetMatrix()
• translate (b2x, b2y, b2z)
• sphere( 20) // this is translated by b2x, b2y,
  b2z

16
Hierarchical Transforms

• pushMatrix() and popMatrix() allow you to save
  and retrieve transforms from a transform Stack
• translate (bx, by, bz)
• sphere( 20) // this is translated by bx, by,
  bz
• pushMatrix()
• rotate( 45, 0, 0, 1)
• box (23) // this is translated by bx, by, bz
  AND rotated by 45
• popMatrix() // retrieves CTM before the rotate
• translate (b2x, b2y, b2z)
• sphere( 20) // this is translated by bx, by,
  bz AND b2x, b2y, b2z
• This can be used for modelling some interesting
  hierarchical objects