Assignment 4 due Monday!

Quiz today!

Transformations

Translate

Rotate

Scale

Matrix

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

x, y, z

x, y, z

new

matrix multiplication

Matrix

1   0   0   t_x

0   1   0   t_y

0   0   1   t_z

0   0   0   1

x, y, z

x, y, z

new

Translation

Matrix

s_x   0   0   t_x

0   s_y   0   t_y

0   0   s_z   t_z

0   0      0     1

x, y, z

x, y, z

new

Scaling

Matrix

r   r   r   t_x

r   r   r   t_y

r   r   r   t_z

0   0   0     1

x, y, z

x, y, z

new

Rotation

Matrix

r   r   r   t_x

r   r   r   t_y

r   r   r   t_z

0   0   0     1

x, y, z

x, y, z

new

``````var m = new Float32Array( [
r, r, r, 0,
r, r, r, 0,
r, r, r, 0,
t_x, t_y, t_z, 1
]);``````

column-major ordering!

Matrix

1   0   0   t_x

0   1   0   t_y

0   0   1   t_z

0   0   0   1

x, y, z

x, y, z

new

Translation

``````<html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Vanilla WebGL!</title>
<style>
html, body {
background-color:#000;
margin: 0;
height: 100%;
overflow: hidden !important;
}

#c {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="https://cs460.org/js/glmatrix.js"></script>

attribute vec3 position;

uniform mat4 transform;

void main(void) {

vec4 final_position = transform * vec4(position, 1.);

gl_Position = final_position;
gl_PointSize = 10.;

}
</script>

precision mediump float;

uniform vec4 color;

void main(void) {

gl_FragColor = color; //vec4(1., 1., 1., 1.);

}
</script>

<script>

// VARIABLE DECLARATIONS
var c, gl;
// var vertices, v_buffer, indices, i_buffer;
var objects;

//************************************************************//
//
// INITIALIZE WEBGL
//
c = document.getElementById( 'c' );
c.width = window.innerWidth;
c.height = window.innerHeight;

gl = c.getContext( 'webgl' );
gl.viewport(0, 0, c.width, c.height);

//************************************************************//
//
//

}

}

objects = [];
objects.push(createRectangle(new Float32Array( [1., 1., 0., 1.]),
new Float32Array( [-.3, -.2, 0 ] )));
objects.push(createRectangle(new Float32Array( [1., 0., 0., 1.]),
new Float32Array( [-.1, -.2, 0 ] )));

animate();

};

function createRectangle(color, offset) {

//************************************************************//
//
// CREATE GEOMETRY
//
vertices = new Float32Array( [
-0.5,  0.5, 0.0, // V0.     // 0
-0.5, -0.5, 0.0, // V1, V4. // 1
0.5,  0.5, 0.0, // V2, V3. // 2
0.5, -0.5, 0.0  // V5.     // 3
] );

indices = new Uint8Array( [
0, 1, 2, 2, 1, 3
] );

var v_buffer = gl.createBuffer(); // create
gl.bindBuffer( gl.ARRAY_BUFFER, v_buffer ); // bind
gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW ); // put data in
gl.bindBuffer( gl.ARRAY_BUFFER, null ); // unbind

var i_buffer = gl.createBuffer(); // create
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, i_buffer ); // bind
gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW ); // put data in
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, null ); // unbind

return [v_buffer, i_buffer, color, offset];

};

function animate() {

gl.clearColor( 0., 0., 0., 0. );
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );

// loop through all objects in the scene
for (var o=0; o<objects.length; o++) {

var current_object = objects[o];
var v_buffer = current_object[0];
var i_buffer = current_object[1];
var current_color = current_object[2];
var current_offset = current_object[3];
// console.log(current_object);

//************************************************************//
//
//

gl.bindBuffer( gl.ARRAY_BUFFER, v_buffer );

gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, i_buffer );

var a_position = gl.getAttribLocation( shaderprogram, 'position' );

gl.vertexAttribPointer( a_position, 3, gl.FLOAT, false, 0, 0 );

gl.enableVertexAttribArray( a_position );

var u_color = gl.getUniformLocation( shaderprogram, 'color' );

gl.uniform4fv( u_color, current_color );

current_offset[0] -= .01;

if (current_offset[0] < -1) {
current_offset[0] = 1;
}

var u_transform = gl.getUniformLocation( shaderprogram, 'transform' );

current_transform = new Float32Array([
.5, 0, 0, 0,
0, .5, 0, 0,
0, 0, .5, 0,
current_offset[0], current_offset[1], 0, 1
]);

gl.uniformMatrix4fv( u_transform, false, current_transform );

//************************************************************//
//
// DRAW!
//

// gl.drawArrays( gl.LINE_LOOP, 0, 6);
gl.drawElements( gl.TRIANGLES, 6, gl.UNSIGNED_BYTE, 0);

}

// THIS IS OUR LOOP
requestAnimationFrame(animate);

};

</script>
<body>
<canvas id="c"></canvas>
</body>
</html>
``````

Matrix Games

winner gets extra credit or german chocolate

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

0, 0, 0

?

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

0, 0, 0

0, 0, 0

0.5   0   0   0

0   0.5   0   0

0   0   0.5   0

0   0   0   1

2, 2, 2

?

1, 1, 1

0.5   0   0   0

0   0.5   0   0

0   0   0.5   0

0   0   0   1

2, 2, 2

1   0   0   -1

0   1   0   -1

0   0   1   -1

0   0   0   1

2, 2, 2

?

1, 1, 1

2, 2, 2

1   0   0   -1

0   1   0   -1

0   0   1   -1

0   0   0   1

0.5   0   0   -1

0   0.5   0   -1

0   0   0.5   -1

0    0    0    1

2, 2, 2

?

0.5   0   0   -1

0   0.5   0   -1

0   0   0.5   -1

0    0    0    1

2, 2, 2

0, 0, 0

cos(T)   -sin(T)   0   0

sin(T)   cos(T)   0    0

0          0        1    0

0          0       0     1

2, 2, 2

?

with T = Pi/2

= 90°

X

Y

Z

cos(T)   -sin(T)   0   0

sin(T)   cos(T)   0    0

0          0        1    0

0          0       0     1

2, 2, 2

with T = Pi/2

= 90°

-2, 2, 2

Scene Graph

Scene

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

Scene

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

Scene

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

*

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

Scene

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

*

*

*

Scene

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

Scene Graph is a Tree-like Hierarchy!

*

*

*

`\$ git pull upstream main`
`\$ git push`
`\$ touch xtk.html`
`\$ cd 05`
``````<html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<style>
html, body {
background-color: #000;
margin: 0;
height: 100%;
overflow: hidden !important;
}
</style>

<script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
<script type="text/javascript" src="https://get.goXTK.com/xtk_xdat.gui.js"></script>

<script type="text/javascript">

var r,c;

r = new X.renderer3D();
r.init();

c = new X.cube();

r.render();

var gui = new dat.GUI();
cubeGui.add(c, 'lengthX', 0, 100).onChange( function() {
c.modified();
});

};

</script>

<body>

</body>

</html>``````

No class on Monday!

Quiz due today! Asst 4 due Monday!

By Daniel Haehn

# Lecture 14

Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!

• 626