3d transformations
DESCRIPTION
CS 234 Jeff Parker. 3D Transformations. Objectives. Notifications Homework Gallery Pen and Paper Review transformations Apply these ideas to 3D movement. Notifications. I've figured out how to get notified by iSite:. Notifications. I've figured out how to get notified by iSite:. - PowerPoint PPT PresentationTRANSCRIPT
1
3D Transformations
CS 234
Jeff Parker
2
Objectives
NotificationsHomework
GalleryPen and Paper
Review transformationsApply these ideas to 3D movement
3
Notifications
I've figured out how to get notified by iSite:
4
Notifications
I've figured out how to get notified by iSite:
5
Notifications
I've figured out how to get notified by iSite:
6
Gallery & Three RequestsWe will look at three examples: I have posted the code for eachPlease include a .jpg of your project
A jpg makes it easy for me to include your screenshotWe do like .pdfs, but don't want to tear them apart
Please include your name in all your filesMakes it easier for us to match you to your work
Please mimic Angel's organizationCreate a folder with your name on it. Develop your source in folder. Zip the folder and submit.
RootCommonJohnDoeHw4
<Your .html and .js files>
7
Gallery
Charles
8
Gallery Dan
9
Dan// set up the tic tac toe boarddrawRectP(0.32, 1, 0.34, -1);drawRectP(-0.32, 1, -0.34, -1);drawRectP(-1, 0.32, 1, 0.34);drawRectP(-1, -0.32, 1, -0.34);
canvas.addEventListener("mousedown", function(e){
if ( moves >8) return;
// we'll say that the first player is X, then O// Get the x/y index of where the user clicked...
var clickedBox = getClickedBox(e);
10
Danfunction getClickedBox(e) {
var x = e.offsetX==undefined?e.layerX:e.offsetX;var y = e.offsetY==undefined?e.layerY:e.offsetY;
var p = vec2(2*x/canvas.width-1, 2*(canvas.height-y)/canvas.height-1);
var yIndex;var xIndex;if (p[0] < -0.32) {
xIndex = 0;}else if (p[0] > -0.34 && p[0] < 0.32) {
xIndex = 1; ...
11
Dan// we'll say that the first player is X, then O// first we get the x/y index of where the user...var clickedBox = getClickedBox(e);var xIndex = clickedBox[0];var yIndex = clickedBox[1];
// if user clicked in a boxif (typeof xIndex != 'undefined' &&
typeof yIndex != 'undefined') { var boxIndex = (xIndex * 3) + yIndex; if (usedBoxes.indexOf(boxIndex) > -1)
return; usedBoxes.push(boxIndex);
12
Dan // we draw in that location, 0,0 bottom left, 2,2
moves++;var xCenter = -1 + ((xIndex * 0.66) + .165);var yCenter = -1 + ((yIndex * 0.66) + .165);
if (first) {// draw "X" as first playerdrawX(xCenter, yCenter);first = false;
}else {
// draw "O" as second playerfirst = true;drawO(xCenter, yCenter);
}
13
Gallery
Polina
Note the instructionsThe checkers are lovely
14
Gallery
Polina
Note the instructionsThe checkers are lovely
15
Gallery
Polina
Note the instructionsThe checkers are lovely
Two colorsSelected & UserSelected is
Black or whiteInterpolate between
16
Gallery
Multiple instances of same shapeMove the object before rasterizingOutput of the program: caught and missed
Alexander
17
Alex<!DOCTYPE html><html><head><meta http-equiv="Content-Type"
content="text/html;charset=utf-8" ><title>2D Sierpinski Gasket</title>
<script id="vertex-shader" type="x-shader/x-vertex">attribute vec3 vPosition;attribute vec3 vColor;
uniform float dgrs;uniform vec3 trnsX;varying vec4 color;
18
Alex<!DOCTYPE html><html><head><meta http-equiv="Content-Type"
content="text/html;charset=utf-8" ><title>2D Sierpinski Gasket</title>
<script id="vertex-shader" type="x-shader/x-vertex">attribute vec3 vPosition;attribute vec3 vColor;
uniform float dgrs;uniform vec3 trnsX;varying vec4 color;
Please include your name in all files
Check title
19
Alex<script id="vertex-shader" type="x-shader/x-vertex">
...
uniform float dgrs;
uniform vec3 trnsX;
...
void
main(){
mat4 rotateMat = mat4( 1, 0, 0, 0,
0, cos(dgrs), sin(dgrs), 0,
0, -sin(dgrs), cos(dgrs), 0,
0, 0, 0, 1);
mat4 translationMat = mat4( 1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
trnsX[0], trnsX[1], trnsX[2], 1);
gl_Position = translationMat * rotateMat * vec4(vPosition, 1.0);
color = vec4(vColor, 1.0);
} </script>
20
Alex's JS// Renders the circle which represents the hole
function renderHole(){
gl.uniform1f(rotateDegrees, 0.95);
gl.uniform3fv(translateVector, [holePosition[0],
holePosition[1], holePosition[2]]);
gl.drawArrays( gl.TRIANGLE_FAN, spherePoints, circlePoints );
}
// Renders the sphere(s)
function renderCphere(){
gl.uniform1f(rotateDegrees, 0.55);
for(var i = 0; i < spheresPositions.length; i++){
gl.uniform3fv(translateVector, spheresPositions[i]);
gl.drawArrays( gl.TRIANGLE_STRIP, 0, spherePoints );
}
}Draw multiple copies of same thing
21
GalleryDerrick
Thoughts?
22
GalleryDerrick
"I downloaded a picture of a go board from the internet and then used an eye dropper tool from Pixelmator to choose the color with the rgb values." - Derrick
23
Gallery
Multiple instances of same shapeMove the object before rasterizing
Derrick
var baseColors = [ vec4(0.77, 0.64, 0.39, 1.0), //background vec4(0.0, 0.0, 0.0, 1.0), //black vec4(1.0, 1.0, 1.0, 1.0) //white];
24
Derrickfunction render(){
gl.clear( gl.COLOR_BUFFER_BIT );
// board grid linesfor (var i=0; i < 80; i=i+2)
gl.drawArrays(gl.LINE_LOOP, i, 2);
// render go stonesfor (var i=80; i < index; i=i+numOfCirclePoints)
gl.drawArrays(gl.TRIANGLE_FAN, i, numOfCirclePoints);
window.requestAnimFrame(render);}
Uses same buffer to hold lines and triangles
25
Derrickfor (var j=0; j < boardDimension; j++)
{
for (var i=0; i < boardDimension; i++)
{
vertPos=((j*boardDimension) + i)*4;
if ((i % 2)==(j % 2)){
square (vertices[vertPos], vertices[vertPos+1], vertices[vertPos+2], vertices[vertPos+3], 0);
}
else
{
square (vertices[vertPos], vertices[vertPos+1], vertices[vertPos+2], vertices[vertPos+3], 1);
}
if ((i==(boardDimension-1)) && (j != (boardDimension-1)))
{
triangle (vertices[vertPos+2], vertices[vertPos+3], vertices[vertPos+3], 0 );
triangle (vertices[vertPos+3], vertices[vertPos+3], vertices[vertPos+4], 0 );
}
}
}
26
Review: Pipeline Implementation
transformation rasterizer
u
v
u
v
T
T(u)
T(v)
T(u)T(u)
T(v)
T(v)
vertices vertices pixels
framebuffer
27
Affine Transformations
We want our transformations to be Line PreservingCharacteristic of many physically important
transformationsRigid body transformations:
Rotation, TranslationNon-Rigid transformations: Scaling, Shear
We need only transform endpoints of line segmentsLet GPU connect transformed endpoints
28
Rotations
Matrices provide a compact representation for rotations, and many other transformation
T (x, y) = (x cos(a) - y sin(a), x sin(a) + y cos(a))To multiply matrices, multiply the rows of first by the columns of second
€
cos(θ ) −sin(θ )
sin(θ ) cos(θ )
⎡
⎣ ⎢
⎤
⎦ ⎥x
y
⎡
⎣ ⎢
⎤
⎦ ⎥=
x cos(θ ) − ysin(θ )
x sin(θ )+ ycos(θ )
⎡
⎣ ⎢
⎤
⎦ ⎥
29
Euler Angles
Rotations about x, y, or z axisPerform the rotations in fixed orderAny rotation is the produce of three of these rotations
Euler AnglesNot unique Not obvious how to find the angles
Different order would give different angles
€
cos(θ ) 0 −sin(θ )
0 1 0
sin(θ ) 0 cos(θ )
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥
€
1 0 0
0 cos(θ ) −sin(θ )
0 sin(θ ) cos(θ )
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥
Euler Angles Wikipedia
30
Determinant
If the length of each column is 1, the matrix preserves the length of vectors (1, 0) and (0, 1)
We also will look at the DeterminantDeterminant of a rotation is 1
But determinant == 1 does not imply a rotation
€
a b
c d= ad − bc
€
cos(θ ) −sin(θ )
sin(θ ) cos(θ )= cos2(θ )+sin2(θ ) =1
31
Scaling
€
sx 0 0
0 sy 0
0 0 sz
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥
S = S(sx, sy, sz) =
x’=sxxy’=syxz’=szx
p’=Sp
Expand or contract along each axis (fixed point of origin)
user.xmission.com/~nate/tutors.html
32
ReflectionReflection corresponds to negative scale factors
Has determinant == -1Example below sends (x, y, z) (-x, y, z)Note that the product of two reflections is a rotation originalsx = -1 sy = 1
sx = -1 sy = -1
sx = 1 sy = -1
€
−1 0 0
0 1 0
0 0 1
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥
33
Order of Transformations
Note that matrix on the right is the first applied to the point pMathematically, the following are equivalent p’ = ABCp = A(B(Cp))We use column matrices to represent points. In terms of row matrices p’T = pTCTBTAT
That is, the "last" transformation is applied first.
We will see that the implicit transformations have the same order property
34
Rotation About a Fixed Point other than the Origin
Move fixed point to originRotateMove fixed point back
M = T(pf) R() T(-pf)
35
Instancing
In modeling, we often start with a simple object centered at the origin, oriented with the axis, and at a standard size
We apply an instance transformation to its vertices to Scale Orient (rotate)Locate (translate)
TRS
36
Shear
Helpful to add one more basic transformationEquivalent to pulling faces in opposite directions
37
Shear Matrix
Consider simple shear along x axis
x’ = x + y cot y’ = yz’ = z
€
1 cot(θ) 0
0 1 0
0 0 1
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥
H() =
38
Translations
We cannot define a translation in 2D space with a 2x2 matrixNo choice for a, b, c, and d that moves the origin, (0, 0), to
some other point, such as (5, 3) in the equation above
€
a b
c d
⎡
⎣ ⎢
⎤
⎦ ⎥0
0
⎡
⎣ ⎢
⎤
⎦ ⎥= ? =
5
3
⎡
⎣ ⎢
⎤
⎦ ⎥
39
Translation
To address this, we consider 2D movements in 3DWe pick a representative – we let (x, y, 1) represent (x, y)
Like coasters on glass coffee table one unit above the floorTrack the movement of these representatives€
a b
c d
⎡
⎣ ⎢
⎤
⎦ ⎥0
0
⎡
⎣ ⎢
⎤
⎦ ⎥= ? =
5
3
⎡
⎣ ⎢
⎤
⎦ ⎥
40
Translation
We use a shear transformation T(x, y, z) in 3DNote that T(0, 0, 0) = (0, 0, 0)However, T(0, 0, 1) = (5, 3, 1)
Combines with scaling, reflection, and rotation€
1 0 5
0 1 3
0 0 1
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥
x
y
1
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥=
x + 5
y + 3
1
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥
41
Translation
We use a shear transformation T(x, y, z) in 3DNote that T(0, 0, 0) = (0, 0, 0) - VectorHowever, T(0, 0, 1) = (5, 3, 1) - Point
Combines with scaling, reflection, and rotation€
1 0 5
0 1 3
0 0 1
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥
x
y
1
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥=
x + 5
y + 3
1
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥
42
Projective Space
What happens if transformation moves point (x, y, 1) off the plane z = 1?We rescale - divide by the z value
For example, the point (9, 21, 3) (3, 7, 1)We may reduce to "lowest form" – when z = 1Project onto the plane z = 1
We have many representatives of the form: (3t, 7t, t)There are all equivalent in our Projective Model
€
1 0 5
0 1 3
0 0 1
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥
x
y
1
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥=
x + 5
y + 3
1
⎡
⎣
⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥
43
Projective Space
The same trick works to perform 3D TranslationsRepresent triples (x, y, z) as (x, y, z, 1) in 4D
Harder to visualize thisMathematicians reason by analogy to lower dimensions
€
1 0 0 5
0 1 0 3
0 0 1 2
0 0 0 1
⎡
⎣
⎢ ⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥ ⎥
x
y
z
1
⎡
⎣
⎢ ⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥ ⎥
=
x + 5
y + 3
z + 2
1
⎡
⎣
⎢ ⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥ ⎥
44
GLSL uses col major form<script id="vertex-shader" type="x-shader/x-vertex">
...
uniform float dgrs;
uniform vec3 trnsX;
...
void
main(){
mat4 rotateMat = mat4( 1, 0, 0, 0,
0, cos(dgrs), sin(dgrs), 0,
0, -sin(dgrs), cos(dgrs), 0,
0, 0, 0, 1);
mat4 translationMat = mat4( 1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
trnsX[0], trnsX[1], trnsX[2], 1);
gl_Position = translationMat * rotateMat * vec4(vPosition, 1.0);
color = vec4(vColor, 1.0);
} </script>
45
Inverses
We can find inverses for all of our transformationsFocus on the basic moves we have studied –
Translation – translate back in the opposite directionRotation – rotate the the same angle, backwardsReflection – reflect a second time in the same planeScale – rescale by the reciprocal: If you doubled x, halve x.
€
1 0 0 −5
0 1 0 −3
0 0 1 −2
0 0 0 1
⎡
⎣
⎢ ⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥ ⎥
x
y
z
1
⎡
⎣
⎢ ⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥ ⎥
=
x − 5
y − 3
z − 2
1
⎡
⎣
⎢ ⎢ ⎢ ⎢
⎤
⎦
⎥ ⎥ ⎥ ⎥
46
Rotating Cube
Angel gives us two versionsThey look the same
Difference is in how we send traingles to GPU
"All problems in computer science can be solved by another level of indirection" – David Wheeler
47
HTML files$ diff cube.html cubev.html 43c43,45< precision mediump float;---> #ifdef GL_ES> precision highp float;> #endif
57c59< <script type="text/javascript"
src="cube.js"></script>---> <script type="text/javascript"
src="cubev.js"></script>...
48
HTML files
The first difference can be removedThe versions on iSite have been edited to align them
Changes to html and js files
$ diff cube.html cubev.html 57c59< <script type="text/javascript"
src="cube.js"></script>---> <script type="text/javascript"
src="cubev.js"></script>
49
cube.js
var NumVertices = 36;
var points = [];var colors = [];
var xAxis = 0;var yAxis = 1;var zAxis = 2;
var axis = 0;var theta = [ 0, 0, 0 ];
50
cube.jsvar axis = 0;var theta = [ 0, 0, 0 ];
function render(){ gl.clear( gl.COLOR_BUFFER_BIT |
gl.DEPTH_BUFFER_BIT);
theta[axis] += 2.0; gl.uniform3fv(thetaLoc, theta);
gl.drawArrays( gl.TRIANGLES, 0, NumVertices );
requestAnimFrame( render );}
// Euler Angles
51
cube.js document.getElementById( "xButton" ).onclick =
function () { axis = xAxis; };
document.getElementById( "yButton" ).onclick = function () { axis = yAxis; };
document.getElementById( "zButton" ).onclick = function () { axis = zAxis; };
render();}
52
cube.html<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;attribute vec4 vColor;varying vec4 fColor;
uniform vec3 theta;
void main(){ // Compute the sines and cosines of theta for // each of the three axes in one step. vec3 angles = radians( theta ); vec3 c = cos( angles ); vec3 s = sin( angles );
53
Vertex Shader vec3 angles = radians( theta ); vec3 c = cos( angles ); vec3 s = sin( angles );
// Remeber: thse matrices are column-major mat4 rx = mat4( 1.0, 0.0, 0.0, 0.0, 0.0, c.x, s.x, 0.0, 0.0, -s.x, c.x, 0.0, 0.0, 0.0, 0.0, 1.0 );
mat4 ry = mat4( c.y, 0.0, -s.y, 0.0, 0.0, 1.0, 0.0, 0.0, s.y, 0.0, c.y, 0.0, 0.0, 0.0, 0.0, 1.0 );
54
Vertex Shader mat4 ry = mat4( c.y, 0.0, -s.y, 0.0, 0.0, 1.0, 0.0, 0.0, s.y, 0.0, c.y, 0.0, 0.0, 0.0, 0.0, 1.0 );
mat4 rz = mat4( c.z, -s.z, 0.0, 0.0, s.z, c.z, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0 );
fColor = vColor; gl_Position = rz * ry * rx * vPosition;}</script>
55
Fragment Shader<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
voidmain(){ gl_FragColor = fColor;}
</script>
56
Cube Geometry: JavaScriptfunction colorCube(){ quad( 1, 0, 3, 2 ); quad( 2, 3, 7, 6 ); quad( 3, 0, 4, 7 ); quad( 6, 5, 1, 2 ); quad( 4, 5, 6, 7 ); quad( 5, 4, 0, 1 );}
57
Cube Geometry: JavaScriptfunction colorCube(){ quad( 1, 0, 3, 2 ); quad( 2, 3, 7, 6 ); quad( 3, 0, 4, 7 ); quad( 6, 5, 1, 2 ); quad( 4, 5, 6, 7 ); quad( 5, 4, 0, 1 );}
58
Cube Geometry: JavaScriptfunction quad(a, b, c, d){ ... // Parition the quad into two triangles to render it // We create two triangles from the quad indices
//vertex color assigned by the index of the vertex
var indices = [ a, b, c, a, c, d ];
for ( var i = 0; i < indices.length; ++i ) { points.push( vertices[indices[i]] ); colors.push( vertexColors[indices[i]] );
// for solid colored faces use //colors.push(vertexColors[a]); }}
59
Solid Colorsfunction quad(a, b, c, d){ ... // Parition the quad into two triangles to render it // We create two triangles from the quad indices
//vertex color assigned by the index of the vertex
var indices = [ a, b, c, a, c, d ];
for ( var i = 0; i < indices.length; ++i ) { points.push( vertices[indices[i]] ); // colors.push( vertexColors[indices[i]] );
// for solid colored faces use colors.push(vertexColors[a]); }}
60
Cube Geometry: JavaScriptfunction quad(a, b, c, d){ var vertices = [ vec3( -0.5, -0.5, 0.5 ), vec3( -0.5, 0.5, 0.5 ), vec3( 0.5, 0.5, 0.5 ), vec3( 0.5, -0.5, 0.5 ), vec3( -0.5, -0.5, -0.5 ), vec3( -0.5, 0.5, -0.5 ), vec3( 0.5, 0.5, -0.5 ), vec3( 0.5, -0.5, -0.5 ) ];
61
Cube Geometry: JavaScriptfunction quad(a, b, c, d){ var vertices = [ vec3( -0.5, -0.5, 0.5 ), ... ]; var vertexColors = [ [ 0.0, 0.0, 0.0, 1.0 ], // black [ 1.0, 0.0, 0.0, 1.0 ], // red [ 1.0, 1.0, 0.0, 1.0 ], // yellow [ 0.0, 1.0, 0.0, 1.0 ], // green [ 0.0, 0.0, 1.0, 1.0 ], // blue [ 1.0, 0.0, 1.0, 1.0 ], // magenta [ 1.0, 1.0, 1.0, 1.0 ], // white [ 0.0, 1.0, 1.0, 1.0 ] // cyan ];
62
Cube Geometry: Vector Versionvar indices = [ 1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2, 3, 0, 4, 4, 7, 3, 6, 5, 1, 1, 2, 6, 4, 5, 6, 6, 7, 4, 5, 4, 0, 0, 1, 5];
63
Cube Geometry: Vector Versionvar indices = [ 1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2,
3, 0, 4, 4, 7, 3,
6, 5, 1, 1, 2, 6,
4, 5, 6, 6, 7, 4, ...
Replaces
function colorCube(){ quad( 1, 0, 3, 2 ); quad( 2, 3, 7, 6 ); quad( 3, 0, 4, 7 ); quad( 6, 5, 1, 2 ); quad( 4, 5, 6, 7 ); quad( 5, 4, 0, 1 );}
64
DiffsI edited the files to align them
$ diff cube.js cubev.js 7,9d6< var points = [];< var colors = [];<
40a38,52> // indices of the 12 triangles that comprise the cube> var indices = [> 1, 0, 3,> 3, 2, 1,> 2, 3, 7,> 7, 6, 2,> 3, 0, 4,
65
Diffs49,50d60< colorCube();< 61a72,77> // array element buffer > var iBuffer = gl.createBuffer();> gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);> gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new
Uint8Array(indices), gl.STATIC_DRAW);> 66c82< gl.bufferData( gl.ARRAY_BUFFER, flatten(colors),
gl.STATIC_DRAW );---> gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors),
gl.STATIC_DRAW );
66
Diffs99,128d114< function colorCube()< {< quad( 1, 0, 3, 2 );< quad( 2, 3, 7, 6 ); ...< quad( 5, 4, 0, 1 );< }< < function quad(a, b, c, d) < {< // We need to partition the quad into two triangles in
order for< // WebGL to be able to render it. In this case, we
create two
67
Diffs (cont)136c122< gl.drawArrays( gl.TRIANGLES, 0, NumVertices );---> gl.drawElements( gl.TRIANGLES, NumVertices,
gl.UNSIGNED_BYTE, 0 );
glDrawElements specifies multiple geometric primitives with very few subroutine calls. Instead of calling a GL function to pass each individual vertex, normal, texture coordinate, edge flag, or color, you can prespecify separate arrays of vertices, normals, and so on, and use them to construct a sequence of primitives with a single call to glDrawElements.
68
Droste Effect
69
Droste Effect
Royal Can transformation is just scaling. Droste has rotation and translation
70
Escher-Droste
http://wakaba.c3.cx/w/escher_droste.htmlTry Firefox…
Started with question from Charles – I want to understand that!
71
All work in Fragment Shader
</script><script id="fragmentshader" type="x-shader/x-fragment">precision highp float;
uniform sampler2D texture;uniform vec2 size;uniform float time;uniform float p1,p2;uniform int dipole;
const float factor=256.0;const float pi=3.1415926535;
72
Reading Texture in GPUvoid main(){
...
vec2 transformed=cmul(logpos,vec2(p2,-p1*log(factor)/(2.0*pi)));
vec2 texcoords = vec2(-transformed.y/(2.0*pi),transformed.x/log(factor)-0.35-time*0.1);
gl_FragColor = texture2D(texture,texcoords);}</script>
73
Initialize texture in CPU<script type="text/javascript"> ... texture=gl.createTexture();
texture.image=new Image();texture.image.onload=function(){
gl.bindTexture(gl.TEXTURE_2D,texture);...gl.generateMipmap(gl.TEXTURE_2D);
}texture.image.src="/images/escher.jpg";
74
Escher-Droste
http://wakaba.c3.cx/w/escher_droste.htmlTry Firefox…
http://wakaba.c3.cx/images/escher.jpg
75
Math: Convex SumVector Operations
We can add or subtract two vectorsCan multiply vector by scalarWe have two ways to multiple two vectors
Dot product: gives scalarWorks in any dimension
In 3D, cross product: gives vectorWeaker version exists in 7D
No Jacobi Identity in 7D
76
Point Operations
We can add a vector and a pointWe can subtract two pointsWe cannot multiply a point by a scalarWe cannot add two points
77
Point Operations
We can add a vector and a pointWe can subtract two pointsWe cannot multiply a point by a scalarWe cannot add two points
But we can average two points
78
Point Operations
Given points P and Q
€
P = (xp , yp , zp )
Q = (xq , yq , zq )
79
Point Operations
Given points P and QCan find a point midway between them
€
P = (xp , yp , zp )
Q = (xq , yq , zq )
S = (xp + xq
2,yp + yq
2,zp + zq
2)
80
Point Operations
Given points P and QCan find a point midway between them
€
P = (xp , yp , zp )
Q = (xq , yq , zq )
S =1
2P +
1
2Q
81
Point Operations
Given points P and QCan find a point closer to P
€
P = (xp , yp , zp )
Q = (xq , yq , zq )
S =1
3P +
2
3Q
82
Point Operations
Given points P and QCan find any point between P and Q
€
P = (xp , yp , zp )
Q = (xq , yq , zq )
S = tP +(1− t)Q
83
Point Operations
Given points P and QLet v be the vector from Q to P
€
v = (P −Q)
S = Q + tv = Q + t(P −Q) = tP +(1− t)Q
84
Point Operations
Give P, Q, and R, can form sums
€
S =αP +(1−α )Q
T = βS +(1− β )R
T = βS +(1− β )αP +(1− β )(1−α )Q
β +(1− β )α +(1− β )(1−α ) = β +(1− β )[α +(1−α )]
β +(1− β )[α +(1−α )] = β +(1− β ) =1
That is, the coefficients sum to 1: convex sumCalled the Barycentric Coefficients
85
Convex Sum
We want polygons to be convexIllustration of convex hull of a set of points
86
Convex Sum
When we rasterize, we will be working on scan linesWe will interpolate attributes, such as colorInterpolate down the edges – convex sumFor each scan line, interpolate the endpoints
Use Barycentric Coefficients as weights
87
Parametric Equations
We have seen several ways to describe a line (1) Point-slope form
(2) General EquationCan describe a vertical line
(3) General Equation as dot product
We looked at two new forms(4) Two Point form Rise over run of typical point
(5) Parameterized by a variable tLet's look at parameterized versions of other curves
€
(1) y = mx +b
(2) ax +by = c
(3) (x, y)• (a,b) = c
(4)y − y1
x − x1
=y2 − y1
x2 − x1
(5) (x, y) = (1− t)v1 + tv2
88
Parametric Equations
Consider the circleWhile this is a form you recognize, has problems
It is not a function: when x = a, there are two legal values for yDoes not give instructions on how to traverse the curve (!?!)
Why would we worry about this?Important in animation: characters move
on curvesAn alternative is to describe the points as traced by point
We parameterize the point via the angleAs theta runs from 0 to 2pi, we trace out the unit circle
The form to match the equation above is
€
(x − a)2 +(y −b)2 = k2
€
(x, y) = (cosθ ,sinθ )
€
(x, y) = (k cosθ + a, k sinθ +b)
89
Parameterized Lines
Once again, we start with a line defined by two endpoints
We will start at e1 and travel to e2
Define v1 as the vector from the origin to e1
Define v2 as the vector from the origin to e2
Define v3 = v2 – v1
Consider
v1 + tv3 = v1 + t(v2 – v1)
When t = 0, this is v1
When t = 1, this is v1 + (v2-v1) = v2
In between, this is (1-t)v1 + tv2
90
Application
Does a line segment intersect a line?Does line segment ( (1, 1,), (4, 3) ) intersect 3x – 2y = 5?
v3 = v2 – v1 = (4, 3) – (1, 1) = (3, 2)Define the line segment as
(x, y) = (1, 1) + t(3, 2) = (1 + 3t, 1 + 2t)Runs from (1, 1) to (4, 3) as t goes from 0 to 1
Plug this into equation of the line 3x – 2y = 5, and solve for t3(1 + 3t) - 2(1 + 2t) = 53 – 2 + 9t – 4t = 51 + 5t = 5
Does this have a root in [0, 1]?
91
Painter's Algorithm
Painter's Algorithm performs hidden surface removalSort the objects by their distance from the eyePaint the furthest things first, working your way to front
92
Painter's Algorithm
One difficulty is that we have to sort the objectsA second difficulty is that most objects don't have a fixed
depthWe can have circular chains
93
Painter's Algorithm
We can solve the problem by throwing memory at itAssign a buffer to hold depth of pixelAs we paint each pixel that will appear,remember the depth in the Z-Buffer
94
ZBuffer
We start with two images: remember color and depth
95
ZBuffer
96
Using z-BufferTo use the z-Buffer, you must
1) Ask for a depth buffer when you create your window.
2) Place a call to glEnable (GL_DEPTH_TEST) in your program's initialization routine, after a context is created and made current.
3) Ensure that your zNear and zFar clipping planes are set correctly and in a way that provides adequate depth buffer precision. In particular, zNear and zFar should be positive (not zero or negative) values.
4) Pass GL_DEPTH_BUFFER_BIT as a parameter to glClear
When zNear is too small, you get "z fighting"
97
Project for next weekConstruct a 3D worldMust have multiple objects
At least two different objects, multiple copies of oneMust have animation and user control of some aspectWe are going to have a "fly over" coming up
http://www.youtube.com/watch?v=nCYZjmfyQFcBuild an interesting world
by Steve DavisTeapot is an OpenGL primitive
98
Summary
Looked at work of fellow studentsWe have moved to animating the 3rd DimensionWe have found a way to represent translations
Next week, transformations to provide perspectiveWe have seen a new way to write the equation of a line