In this lab, you will draw a sequence of small squares that are positioned randomly on the screen and maintained in a vertex buffer object. The provided shaders will rotate the squares by a specified angle.

This is a modification of the provided example, which is drawing static points. You will be drawing a sequence of small squares; each square is drawn as a a pair of triangles, i.e., you will provide 6 vertices for the two triangles to make up each square.. The generated vertices will be maintained in an array, transferred to a vertex buffer object (on the GPU) and drawn using a glDrawArrays call.

The provided example above illustrates the calls that need to be made to properly initialize a vertex buffer and transfer data to it (review the video for the example).

The squares will rotate by a fixed angle (this is done by the shaders which is provided). The angle by which to rotate comes from the Javascript application through a uniform variable.

**** Below is the code, one is HTML and the other two are the java script code

// some globals var gl;

var delay = 100; var program; var vertLoc;

var MaxPoints = 100; var counter = 0; var fRotation;

var vBuffer; var vertices = [];

window.onload = function init() { // get the canvas handle from the document's DOM var canvas = document.getElementById( "gl-canvas" ); fRotation = 1; // initialize webgl gl = initWebGL(canvas);

// set up a viewing surface to display your image // All drawing will be restricted to these dimensions gl.viewport( 0, 0, canvas.width, canvas.height );

// clear the display with a background color // specified as R,G,B triplet in 0 to 1.0 range gl.clearColor( 0.5, 0.5, 0.5, 1.0 );

// Load shaders -- all work done in init_shaders.js // Shaders are compiled and linked and returned as an // executable program; the arguments are the names // of the shaders specified in the html file program = initShaders(gl, "vertex-shader", "fragment-shader");

// make this program the current shader program gl.useProgram(program);

// create a vertex buffer - to hold point data vBuffer = gl.createBuffer();

// set this buffer the active buffer for subsequent operations on it gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);

// Associate our shader variables with our data buffer // note: "vposition" is a named variable used in the vertex shader and is // associated with vPosition here var vPosition = gl.getAttribLocation( program, "vPosition");

// specify the format of the vertex data - here it is a float with // 2 coordinates per vertex - these are its attributes gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);

// enable the vertex attribute array gl.enableVertexAttribArray(vPosition);

render(); };

function render() { // first clear the display with the background color gl.clear( gl.COLOR_BUFFER_BIT );

// adds a point at a random position within the range of -1.0 to 1.0 in // X and Y, which is the default coordinate system for GL // draw upto MaxPoints points if (counter < MaxPoints) { // position the point at random vertices.push(-1. + Math.random()*2., -1. + Math.random()*2., 0.0, 1.); counter++;

// send the vertex positions to the GPU // Note: as this is a simple example, this repeated update // is inefficient gl.bufferData (gl.ARRAY_BUFFER, flatten(vertices), gl.DYNAMIC_DRAW); }

// draw the point; as this is a call to draw an array of // primitives, we specify the start index (second argument) and // the number of primitives (third argument); this will draw // all the points created so far gl.drawArrays(gl.TRIANGLES, 0, 6);

// this is recursive call that continuously updates the screen // with any new primitives created. Here only a single point is // being drawn. setTimeout( function (){requestAnimFrame(render);}, delay ); }

function initWebGL (canvas) { // Initialize the WebGL context // returns the context const gl = canvas.getContext("webgl");

// Only continue if WebGL is available and working if (gl === null) { alert("Unable to initialize WebGL "+ + "Your browser or machine may not support it."); }

return gl; }

// // Provides requestAnimationFrame in a cross browser way. // // Source Angel/Shreiner book tools // window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element) { window.setTimeout(callback, 1000 / 60); }; })();

// // initialize vertex and fragment shaders // Source: Angel/Shreiner book tools //

// this function initializes the vertex and fragment shaders function initShaders(gl, vertexShaderId, fragmentShaderId ) { let vertShdr, fragShdr;

let vertElem = document.getElementById( vertexShaderId ); if (!vertElem) { alert( "Unable to load vertex shader " + vertexShaderId ); return -1; } else { // create the vertex shader vertShdr = gl.createShader(gl.VERTEX_SHADER);

// read it as a string gl.shaderSource(vertShdr, vertElem.text);

// compile it gl.compileShader(vertShdr);

// print error logs if compilation failed if (!gl.getShaderParameter(vertShdr, gl.COMPILE_STATUS) ) { let msg = "Vertex shader failed to compile. The error log is:" + "

" + gl.getShaderInfoLog( vertShdr ) + "

"; alert( msg ); return -1; } }

// get the fragment shader source (string) and then compile it let fragElem = document.getElementById( fragmentShaderId ); if (!fragElem) { alert( "Unable to load vertex shader " + fragmentShaderId ); return -1; } else { // create a fragment shader fragShdr = gl.createShader(gl.FRAGMENT_SHADER);

// read it as a string gl.shaderSource(fragShdr, fragElem.text);

// compile it gl.compileShader( fragShdr );

// print error logs if compilation failed if (!gl.getShaderParameter(fragShdr, gl.COMPILE_STATUS)) { let msg = "Fragment shader failed to compile. The error log is:" + "

" + gl.getShaderInfoLog( fragShdr ) + "

"; alert( msg ); return -1; } }

// create a shader program let program = gl.createProgram();

// attach the two shaders to the program gl.attachShader(program, vertShdr); gl.attachShader(program, fragShdr);

// link the program gl.linkProgram( program );

// if linking failed, print error log if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { let msg = "Shader program failed to link. The error log is:" + "

" + gl.getProgramInfoLog( program ) + "

"; alert( msg ); return -1; } return program; }

function flatten( v ) {

// This function takes Javascript arrays and flattens it into // a set of floating point values; this is required since Javascript // arrays, being objects, cannot be passed to GL buffers directly, // buffers expect raw float (or whatever type chose) values

// For matrices, column major is expected by it, so this function // transposes them for convenience and then flattens it

if (v.matrix === true) { v = transpose(v); }

var n = v.length; var elemsAreArrays = false;

if (Array.isArray(v[0])) { elemsAreArrays = true; n *= v[0].length; }

var float_vals = new Float32Array(n);

if (elemsAreArrays) { var idx = 0; for ( var i = 0; i < v.length; ++i ) { for ( var j = 0; j < v[i].length; ++j ) { float_vals[idx++] = v[i][j]; } } } else { for ( var i = 0; i < v.length; ++i ) { float_vals[i] = v[i]; } }

return float_vals; }