CS 352: Computer Graphics
Chapter 8:
Discrete
Techniques
Chapter 7 - 2
Interactive Computer Graphics
Chapter 7 - 3
Interactive Computer Graphics
Chapter 7 - 4
Interactive Computer Graphics
Chapter 7 - 5
Interactive Computer Graphics
How do you do this?






Cottage
Q3Tourney2
Aquarium
Space balls
Dynamic cubemap
Refraction
Chapter 7 - 6
Interactive Computer Graphics
Applications




How do you do all those nice object textures?
Brick pattern on a walkway. How to give it some
depth—model the bricks? Model the roughness of
the brick surface?
Pool-like light patterns in water water (caustics)
Shiny objects with reflections
Chapter 7 - 7
Interactive Computer Graphics
Discrete Techniques






Texture mapping
Bump mapping
Reflection or environment mapping
Displacement mapping
Bit and pixel operations in OpenGL
Compositing




Blending
Antialiasing
Depth cueing and fog
Using the accumulation buffer
Chapter 7 - 8
Interactive Computer Graphics
The Joy of Frame Buffers




For decades, shape only – no access to
frame buffer
Access to frame buffer and operations on
fragments have made enormous difference in
interactive graphics
Applications: texture mapping, antialiasing,
compositing, transparency, fog, accumulation
buffering, …
Silicon Graphics/GL – first real texturemapping systems. Major advance.
Chapter 7 - 9
Interactive Computer Graphics
OpenGL frame buffer

The OpenGL “frame buffer” actually consists
of many separate buffers
Chapter 7 - 10
Interactive Computer Graphics
Fragment processing

These various buffers are accessed during
fragment processing
Chapter 7 - 11
Interactive Computer Graphics
Mapping methods


Imagine modeling a piece of carved wood, or
a golf ball, or a spoon, or a tree…
Rather than modeling the geometry at a very
fine level of detail, we may
prefer discrete methods:


texture mapping
bump mapping
Chapter 7 - 12
Interactive Computer Graphics
Texture mapping


Texture mapping:
applying images to
rendered polygons.
A separate texture buffer on the graphics
card stores texture images



Texture “pixels” are called texels
Textures may be 1-, 2-, or 3- (or 4-!) dimensional
(mapped onto 1-, 2-, or 3-dimensional surfaces)
The need for texture images is why you have 1GB
graphics cards (and repetitive patterns!)
Chapter 7 - 13
Interactive Computer Graphics
Example
Chapter 7 - 14
Interactive Computer Graphics
Mapping geometry





Texture mapping:
rendering polygons by
applying images with
mapped geometry
(s,t) – texture coordinates
T(s,t) – texture
x(s,t), y(s,t), z(s,t) – texture map
(a mapping of texture onto world coords)
To render, we really want the inverse map: s(x,y,z)
and t(x,y,z)
Chapter 7 - 15
Interactive Computer Graphics
Mapping geometry

Also have to map screen coordinates (xs,ys)
into world coordinates before you can map
texture coordinates onto world coordinates
Chapter 7 - 16
Interactive Computer Graphics
Texture Mapping Coordinates



Sometimes finding the mapping is easy
(rectangle onto rectangle)
Can use some standard mappings (rectangle
onto a sphere, for example)
Otherwise, it’s generally done by hand


Automatically “unwrap” shape onto plane
Hand-paint or otherwise create custom texture
map
Chapter 7 - 17
Interactive Computer Graphics
JSON Teapot
{
"vertexPositions": [
5.930, 4.125, 0,
5.387, 4.125, 2.748,
5.297, 4.494, 2.876, ... ],
"vertexNormals": [
-0.967, -0.256, 0,
-0.893, -0.256, -0.370,
-0.893, 0.256, -0.369, ... ],
"vertexTextureCoords": [
1, 1,
0.75, 1,
0.75, 0.975, ... ],
"groups": [ { "Kd": [0.8, 0.8, 0.8], "faces": [
[0, 2, 1], [2, 0, 3], [3, 4, 2],
Chapter 7 - 18
Interactive Computer Graphics
Texture Mapping Details




Assume texture image has coordinates (s,t)
from (0,0) to (1,1)
Specify texture coordinates for each vertex
and interpolate
Look up color from texture
Mix texture color with object color:




Replace – just use the texture map color
Decal – apply lighting to texture mapped point
Modulate – multiply object color by texture map
Blend – alpha-blend colors
Chapter 7 - 19
Interactive Computer Graphics
Pixel color from texture map?

How do we get the pixel’s color from the
texture map?

We could map the center of the pixel to the
texture map and use the color we find there
Chapter 7 - 20
Interactive Computer Graphics
Texture Mapping in Three.js

Specify texture map in material object
parameters
var moonTexture =
THREE.ImageUtils.loadTexture( 'images/moon.jpg' );
var moonMaterial = new
THREE.MeshLambertMaterial( { map: moonTexture } );
Chapter 7 - 21
Interactive Computer Graphics
Basic Texture Mapping
Chapter 7 - 22
Interactive Computer Graphics
Basic Spherical Texture Mapping
Chapter 7 - 23
Interactive Computer Graphics
Lighting and Shading
Chapter 7 - 24
Interactive Computer Graphics
Texture and Color
MeshLambertMaterial({ map: moonTexture,
color:0xff8800; ambient: 0x0000ff } ) ;
Chapter 7 - 25
Interactive Computer Graphics
Pixel color from texture map?

How do we get the pixel’s
color from the texture map?

We could map the center of
the pixel to the texture map
and use the color we find


But this can result in severe aliasing and flickering
Better to map the whole pixel and average. But
won’t that be slow?
Chapter 7 - 26
Interactive Computer Graphics
Aliasing and Filtering



What happens if texture is too small or too big?
What happens when you zoom way in or out on
a textured object?
(Moire patterns)
Chapter 7 - 27
Mipmaps



Make pre-filtered
images of size 1x1,
2x2, 4x4, …, nxn
Choose the best
Examples: [1][2]
Interactive Computer Graphics
Chapter 7 - 28
Interactive Computer Graphics
Mipmaps in Three.js
Chapter 7 - 29
Interactive Computer Graphics
Handling Multiple Textures

Using multiple texture objects:




Make two texture samplers
Read the values from both
Combine however you like in fragment shader
Fragment shader example:
baseColor = texture2D(s_baseMap, v_texCoord);
lightColor = texture2D(s_lightMap, v_texCoord);
gl_FragColor = baseColor * (lightColor + 0.25);
Chapter 7 - 30
Interactive Computer Graphics
Three.js Multiple Textures
Chapter 7 - 31
Interactive Computer Graphics
Chapter 7 - 32
Interactive Computer Graphics
Light mapping


Like a projected texture
Or “bake” it – built it into textures for static
objects
Chapter 7 - 33
Interactive Computer Graphics
Chapter 7 - 34
Interactive Computer Graphics
Environment Mapping



Compute viewing direction reflection vector
See where it hits the environment map
Need:



View direction
Surface normal at every pt
Simplifications:


Assume environment is
distant (only need direction
to environment)
Use the same environment
map for all objects (no one
will notice for curved surfaces)
Chapter 7 - 35
Interactive Computer Graphics
Dynamic Envmap in Three.js
Chapter 7 - 36
Skybox
Interactive Computer Graphics
Chapter 7 - 37
Interactive Computer Graphics
Creating an environment map




Take a panoramic photo
Load it into Blender (e.g.) and map it onto a
sphere
Create 6 images with orthographic cameras
Tutorial
Chapter 7 - 38
Interactive Computer Graphics
Heads-up display?


How to do a far-away tree?
How to a heads-up display?
Chapter 7 - 39
Interactive Computer Graphics
Sprites in Three.js



Sprite: 2-D image facing camera
var sprite = new Three.Sprite
useScreenCoordinates: true;
Chapter 7 - 40
How to do this?
Interactive Computer Graphics
Chapter 7 - 41
Interactive Computer Graphics
Bump Mapping

Bump map (aka UV map) is an array of
values for modulating surface normals
XYZ components stored in RGB, 128=0

Details

How to generate a normal map from height field?

Chapter 7 - 42
Interactive Computer Graphics
Bump Mapping Math


Light vector, etc. must be in the same
coordinate system (frame) as normals
Could convert everything back to object
space or (easier) rotate direction vectors into
texture space



Called texture-space bump mapping (aka tangent-space
bump mapping)
Requires a new transformation
matrix for every point
Allows you to use a single
bump map for multiple
models
Chapter 7 - 43
Interactive Computer Graphics
Reflect/bump Vertex Shader
attribute vec3 g_Position, g_TexCoord0, g_Tangent, g_Binormal,
g_Normal;
uniform mat4 world, worldInverseTranspose, worldViewProj,
viewInverse;
varying vec2 texCoord;
varying vec3 worldEyeVec, worldNormal, worldTangent, worldBinorm;
void main() {
gl_Position = worldViewProj * vec4(g_Position.xyz, 1.);
texCoord.xy = g_TexCoord0.xy;
worldNormal = (worldInverseTranspose * vec4(g_Normal, 1.)).xyz;
worldTangent = (worldInverseTranspose *
vec4(g_Tangent, 1.)).xyz;
worldBinorm = (worldInverseTranspose *
vec4(g_Binormal, 1.)).xyz;
vec3 worldPos = (world * vec4(g_Position, 1.)).xyz;
worldEyeVec = normalize(worldPos - viewInverse[3].xyz);
}
Chapter 7 - 44
Interactive Computer Graphics
Reflect/bump Fragment Shader
const float bumpHeight = 0.2;
uniform sampler2D normalSampler;
uniform samplerCube envSampler;
varying vec2 texCoord;
varying vec3 worldEyeVec, worldNormal, worldTangent, worldBinorm;
void main() {
vec2 bump = (texture2D(normalSampler, texCoord.xy).xy *
2.0 - 1.0) * bumpHeight;
vec3 normal = normalize(worldNormal);
vec3 tangent = normalize(worldTangent);
vec3 binormal = normalize(worldBinorm);
vec3 nb = normal + bump.x * tangent + bump.y * binormal;
nb = normalize(nb);
vec3 worldEye = normalize(worldEyeVec);
vec3 lookup = reflect(worldEye, nb);
vec4 color = textureCube(envSampler, lookup);
gl_FragColor = color; }
Chapter 7 - 45
Interactive Computer Graphics
Bump, Specular Mapping in Three.js
Chapter 7 - 46
Interactive Computer Graphics
Bump Mapping in Three.js
Chapter 7 - 47
Interactive Computer Graphics
Bump Mapping in Three.js
Chapter 7 - 48
Interactive Computer Graphics
Chapter 7 - 49
How to do this?
Interactive Computer Graphics
Chapter 7 - 50
Interactive Computer Graphics
Displacement Mapping
Texture map
Displacement map
Normal map
Alter location
of vertices in
vertex shader
Chapter 7 - 51
Interactive Computer Graphics
How to do this?
How exactly are the
two colors combined?
What if underlying
pixel is also transparent?
Chapter 7 - 52
Interactive Computer Graphics
Blending

Blend a source and destination fragment



Source: fragment currently being drawn
Destination: fragment already in frame buffer
Turn on blending



gl.enable(gl.BLEND);
gl.disable(gl.DEPTH_TEST); //optional
gl.blendFunc(gl.SRC_ALPHA, gl.ONE);



First parameter: source factor
Second parameter: destination factor
Possible values: ZERO, ONE, SRC_COLOR,
ONE_MINUS_SOURCE_COLOR, SRC_ALPHA,
ONE_MINUS_SRC_ALPHA, DST_ALPHA, ONE_MINUS_DST_ALPHA
Chapter 7 - 53
Interactive Computer Graphics
Blending Function





Source: Rs, Gs, Bs, As
Destination: Rd, Gd, Bd, Ad
Source factor: Sr, Sg, Sb, Sa
(Can have separate
RGBA components of source, destination factors)
Dest factor: Dr, Dg, Db, Da
Combining colors:




Rresult = Rs * Sr + Rd * Dr
Gresult = Gs * Sg + Gd * Dg
Bresult = Bs * Sb + Bd * Db
Aresult = As * Sa + Ad * Da
Chapter 7 - 54
Interactive Computer Graphics
Blending example

Draw a transparent polygon (given by alpha)
on top of an opaque background


gl.blendFunc(gl.SRC_ALPHA, gl.ONE)
Resulting function:


Rresult = Rs* As+ Rd
Source and background both potentially
transparent

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)


Rresult = Rs* As+ Rd * (1-As)
Does this really work?
Chapter 7 - 55
Interactive Computer Graphics
Custom bending example
Chapter 7 - 56
Interactive Computer Graphics
Blending Problems

What if we leave the depth test on and want
to draw these faces (back to front order):
1. (1, 0, 0, .5) [Red 50% opaque]
2. (0, 1, 0, 1) [Green 100% opaque]
3. (0, 0, 1, .5) [Blue 50% opaque]

What happens if we draw faces…



1, then 2, then 3
2, then 1, then 3
1, then 3, then 2
Chapter 7 - 57
Interactive Computer Graphics
Blending Problems



Unfortunately, blending doesn’t work with
depth-buffering and arbitrary polygon order
What to do?
Possible solution:



Draw all opaque polygons with depth-buffering
Enable blending, sort transparent polygons, draw
back to front
Or skip the sorting
Chapter 7 - 58
Interactive Computer Graphics
Screen-door Transparency



Another approach for fast transparency effects:
“Screen door” method–put a pattern with a set
percent coverage into
the stencil buffer and
render.
Even works with many
layers (but use
different patterns)
Chapter 7 - 59
Interactive Computer Graphics
More uses of blending


How to make a nice-looking (ish) tree with
two polygons?
“Billboarding:”





Draw two intersecting
rectangles at right angles
Texture map with tree image
Use alpha to “cut away”
hollow parts
Three.js: sprites
Or, us a single poly and
make its normal point to the viewer
Chapter 7 - 60
Interactive Computer Graphics
How would you do this?
Chapter 7 - 61
Interactive Computer Graphics
Particles



Particles are essentially rendered points
Full-fledged systems include generators,
velocity, randomness, etc
Particles in Three.js:


No generators that I could find – handle the
geometry on your own
You can give the particles any of the material
types, including sprites
Chapter 7 - 62
Interactive Computer Graphics
Snowflakes


Five snowflake images as sprites
Particle system
materials[i]= new THREE.ParticleBasicMaterial(
{ map: sprite, blending: THREE.AdditiveBlending,
depthTest: false, transparent : true } );
Chapter 7 - 63
Interactive Computer Graphics
Anti-Aliasing


How?
Supersampling:




Render an image at higher resolution (or “jitter”)
Average results in the accumulation buffer
(This taxes bandwidth, fill rate, etc)
Multisampling (according to OpenGL def):



Run fragment program once per pixel
Supersample depth and stencil values
Supersample fragments that are on edges
Chapter 7 - 64
Interactive Computer Graphics
Depth of Field with Bokeh
Chapter 7 - 65
Interactive Computer Graphics
Depth of Field with Bokeh

Post-processing filter (fragment shader) with
depth of field, bokeh
Chapter 7 - 66
Interactive Computer Graphics
Fragment Processing Summary

You can read and write buffers:




Color (normal drawing buffers)
Depth (for hidden surface removal)
Stencil (masking – e.g. screendoor transparency)
Use buffers and fragment processing to
magnify, reduce, flip, fog, blend, blur, gamma
correct, modify colors, dither, histogram, add,
multiply, composite, do screendoor
transparency, depth of field, …
Chapter 7 - 67
Interactive Computer Graphics
Picking

How can you determine from a click on an
image which object was selected?
Chapter 7 - 68
Interactive Computer Graphics
Picking


How can you determine from a click on an
image which object was selected?
Method 1: pseudo-colored image



Render image of scene in off-screen bitmap
Use false colors: unique solid color for each
object
Determine color of point clicked – this gives
object
Chapter 7 - 69
Interactive Computer Graphics
Picking
Method 2: Ray casting
var ray = new THREE.Ray( camera.position,
vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
if ( INTERSECTED ) [do something]
Chapter 7 - 70
Interactive Computer Graphics
Collision Detection

How do you prevent walking through walls?
Chapter 7 - 71
Interactive Computer Graphics
Collision Detection

More ray casting
Chapter 7 - 72
Interactive Computer Graphics
3D Object Formats


Alias Systems Corporation (3DS max) – .obj
Collada (.dae)





Many many others, standard and custom


Designed for digial asset exchange
XML-based, standard, royalty-free
Many files available, e.g. Google’s 3dwarehouse
WebGL framework for Collada is appearing
slowly…
Many conversion programs, or hack your own
Three.js installed (examples)
Chapter 7 - 73
Interactive Computer Graphics
Creating Objects






Model in Sketchup
Export as Collada
In Blender, load Collada file and export as
Alias .obj
Use Three.js python script to convert to
Three.js’s JSON format
See https://github.com/mrdoob/three.js/wiki
[these are old instructions; hopefully most
formats work directly now]
Chapter 7 - 74
Free 3D models
Interactive Computer Graphics
Chapter 7 - 75
Interactive Computer Graphics
Environment Maps

Find a cube map on the Internet


E.g. Google image search for cube map
Create your own

tutorial
Chapter 7 - 76
Interactive Computer Graphics
Another Option

Unity3D: full-featured game engine
Chapter 7 - 77
Interactive Computer Graphics
Credits



Texture mapping: http://radoff.com/blog/2008/08/22/anatomy-of-an-mmorpg/
Texture, bump-mapped teapot: http://caig.cs.nctu.edu.tw/course/CG2007/assignments.htm
Multitexturing example: OpenGL ES 2.0 Programming Guide example