Due Today!

Quiz 4

Lowest

Highest

Assignment 4

coming soon!

1. Initialize WebGL

3. Create Geometry

5. Draw!

setup Canvas

setup GL Context

create vertices

create and bind buffer

put data in

unbind buffer

bind buffer

find vertex attribute in shader source

configure vertex attribute

enable vertex attribute array

clear viewport

clear color buffer

draw vertex arrays

What the...

but don't worry!

you will understand it when you work on assignment 4!

1. Initialize WebGL

3. Create Geometry

5. Draw!

1 Frame

multiple Frames

animate()

1 Rectangle

1. Initialize WebGL

3. Create Geometry

5. Draw!

1 Frame

multiple Frames

animate()

1 Rectangle

multiple Rectangles

createRectangle()

createRectangle()

change Offsets!

multiple Rectangles

Assignment 3 due today!

``````<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 vec3 offset;

void main(void) {

vec3 final_position = position;
final_position.x += offset.x;
final_position.y += offset.y;
final_position.z += offset.z;

gl_Position = vec4( final_position, 1.);
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;

//************************************************************//
//
// 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);

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

}

}

//************************************************************//
//
// 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
] );

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

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

offset = [0., 0., 0 ];
animate();

};

function animate() {

requestAnimationFrame(animate);

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

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,
new Float32Array( [0., 1., 0., 1.] ) );

var u_offset = gl.getUniformLocation( shaderprogram, 'offset' );

offset[0] -= .1;

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

gl.uniform3fv( u_offset, new Float32Array( offset ) );

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

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

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

};

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

createRectangle()

return [ v_buffer, i_buffer, color, offset ];

a =

``````var current_v_buffer = a[0];
var current_i_buffer = a[1];
var current_color = a[2];
var current_offset = a[3];``````

createRectangle()

return [ v_buffer, i_buffer, color, offset ];

a =

``````objects = [];

objects.push( a );
objects.push( b );``````

createRectangle()

b =

return [ v_buffer, i_buffer, color, offset ];

[ a, b ]

[ a, b ]

[ [ v_buffer, i_buffer, color, offset ], [ v_buffer, i_buffer, color, offset ] ]

objects =

objects =

``````function animate() {

//
// all kinds of stuff
//

requestAnimationFrame( animate );

}``````

[ a, b ]

[ [ v_buffer, i_buffer, color, offset ], [ v_buffer, i_buffer, color, offset ] ]

objects =

objects =

``````function animate() {

for(var o = 0; o < objects.length; o++) {

var current_object = objects[o];

}

requestAnimationFrame( animate );

}``````

[ [ v_buffer, i_buffer, color, offset ], [ v_buffer, i_buffer, color, offset ] ]

objects =

``````function animate() {

for(var o = 0; o < objects.length; o++) {

var current_object = objects[o];

var current_v_buffer = current_object[0];
var current_i_buffer = current_object[1];
var current_color = current_object[2];
var current_offset = current_object[3];

gl.drawElements( gl.TRIANGLES ... )

}

requestAnimationFrame( animate );

}``````

Transformation

Transformations

Translate

Rotate

Scale