Assignment 4

Today!

Paid Internships (Deadline 10 / 15 / 2019, https://hackdiversity.com/interns/)

Networking Event 10 / 3 / 2019 2:00p - 3:30p VDC Wheatley 3rd Floor https://umb.joinhandshake.com/events/367692/share_preview

 

1. Initialize WebGL

2. Shaders

3. Create Geometry

4. Connect Shader with Geometry

5. Draw!

1 Frame

multiple Frames

animate()

1 Rectangle

multiple Rectangles

createRectangle()

createRectangle()

change Offsets!

multiple Rectangles

<html>
  <head>
    <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;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }

      #c {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <script type="text/javascript" src="https://cs460.org/js/glmatrix.js"></script>
  
  <script id="vertexshader" type="glsl">
    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>
  
  <script id="fragmentshader" type="glsl">
    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 v_shader, f_shader, shaderprogram;
    // var vertices, v_buffer, indices, i_buffer;
    var objects;

    window.onload = function() {
      

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


      //************************************************************//
      //
      // SHADERS
      //
      v_shader = gl.createShader( gl.VERTEX_SHADER );

      f_shader = gl.createShader( gl.FRAGMENT_SHADER );

      // compile vertex shader
      gl.shaderSource( v_shader, document.getElementById( 'vertexshader' ).innerText );
      gl.compileShader( v_shader );

      if (!gl.getShaderParameter( v_shader, gl.COMPILE_STATUS )) {
        console.log(gl.getShaderInfoLog( v_shader ));
      }

      // compile fragment shader
      gl.shaderSource( f_shader, document.getElementById( 'fragmentshader' ).innerText );
      gl.compileShader( f_shader );

      if (!gl.getShaderParameter( f_shader, gl.COMPILE_STATUS )) {
        console.log(gl.getShaderInfoLog( f_shader ));
      }

      // attach and link the shaders
      shaderprogram = gl.createProgram();
      gl.attachShader( shaderprogram, v_shader );
      gl.attachShader( shaderprogram, f_shader );

      gl.linkProgram( shaderprogram );

      gl.useProgram( shaderprogram );


      // add objects
      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 );


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

        //************************************************************//
        //
        // CONNECT SHADER WITH GEOMETRY
        //
        
        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 );

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

        current_offset[0] -= .01;

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

        gl.uniform3fv( u_offset, current_offset );


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

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];
    
    // pass data to shader
    
    gl.drawElements( gl.TRIANGLES ... )
    
  }
  
  requestAnimationFrame( animate );
  
}

Transformation

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

Identity

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!

Further Reading

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>
  <head>
    <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;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }

      #c {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <script type="text/javascript" src="https://cs460.org/js/glmatrix.js"></script>
  
  <script id="vertexshader" type="glsl">
    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>
  
  <script id="fragmentshader" type="glsl">
    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 v_shader, f_shader, shaderprogram;
    // var vertices, v_buffer, indices, i_buffer;
    var objects;

    window.onload = function() {
      

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


      //************************************************************//
      //
      // SHADERS
      //
      v_shader = gl.createShader( gl.VERTEX_SHADER );

      f_shader = gl.createShader( gl.FRAGMENT_SHADER );

      // compile vertex shader
      gl.shaderSource( v_shader, document.getElementById( 'vertexshader' ).innerText );
      gl.compileShader( v_shader );

      if (!gl.getShaderParameter( v_shader, gl.COMPILE_STATUS )) {
        console.log(gl.getShaderInfoLog( v_shader ));
      }

      // compile fragment shader
      gl.shaderSource( f_shader, document.getElementById( 'fragmentshader' ).innerText );
      gl.compileShader( f_shader );

      if (!gl.getShaderParameter( f_shader, gl.COMPILE_STATUS )) {
        console.log(gl.getShaderInfoLog( f_shader ));
      }

      // attach and link the shaders
      shaderprogram = gl.createProgram();
      gl.attachShader( shaderprogram, v_shader );
      gl.attachShader( shaderprogram, f_shader );

      gl.linkProgram( shaderprogram );

      gl.useProgram( shaderprogram );


      // add objects
      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 );


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

        //************************************************************//
        //
        // CONNECT SHADER WITH GEOMETRY
        //
        
        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 );

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

        current_offset[0] -= .01;

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

        gl.uniform3fv( u_offset, current_offset );


        //************************************************************//
        //
        // 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>
<html>
  <head>
    <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;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }

      #c {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <script type="text/javascript" src="https://cs460.org/js/glmatrix.js"></script>
  
  <script id="vertexshader" type="glsl">
    attribute vec3 position;

    uniform mat4 transform;

    void main(void) {
    
      vec4 final_position = transform * vec4(position, 1.);
      
      gl_Position = final_position;
      gl_PointSize = 10.;
    
    }
  </script>
  
  <script id="fragmentshader" type="glsl">
    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 v_shader, f_shader, shaderprogram;
    // var vertices, v_buffer, indices, i_buffer;
    var objects;

    window.onload = function() {
      

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


      //************************************************************//
      //
      // SHADERS
      //
      v_shader = gl.createShader( gl.VERTEX_SHADER );

      f_shader = gl.createShader( gl.FRAGMENT_SHADER );

      // compile vertex shader
      gl.shaderSource( v_shader, document.getElementById( 'vertexshader' ).innerText );
      gl.compileShader( v_shader );

      if (!gl.getShaderParameter( v_shader, gl.COMPILE_STATUS )) {
        console.log(gl.getShaderInfoLog( v_shader ));
      }

      // compile fragment shader
      gl.shaderSource( f_shader, document.getElementById( 'fragmentshader' ).innerText );
      gl.compileShader( f_shader );

      if (!gl.getShaderParameter( f_shader, gl.COMPILE_STATUS )) {
        console.log(gl.getShaderInfoLog( f_shader ));
      }

      // attach and link the shaders
      shaderprogram = gl.createProgram();
      gl.attachShader( shaderprogram, v_shader );
      gl.attachShader( shaderprogram, f_shader );

      gl.linkProgram( shaderprogram );

      gl.useProgram( shaderprogram );


      // add objects
      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);

        //************************************************************//
        //
        // CONNECT SHADER WITH GEOMETRY
        //
        
        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>
$ git pull upstream master
$ git push
$ touch xtk.html
$ cd 05

Lecture 13

By Daniel Haehn

Lecture 13

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

  • 100

More from Daniel Haehn