CS460 Computer Graphics - University of Massachusetts Boston

Assignment 3

Laptop Rentals

Classroom Technology and Support Services
McCormack 2nd Floor Room 112
Speedtype #108095

9 / 25 / 2019 11:00a - 12:00p CC-3-3545, Career in Tech Industry

10 / 2 / 2019 2:00p - 3:00p CC-3-Ballroom A, Technical Resume Advice

10 / 9 / 2019 11:00a - 12:00p CC-2-Alumni Lounge, Tech Interview Workshop

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

 

https://www.umb.edu/news_events_media/events/step_wksh

Student Entrepreneurship Program: Internship and Career Workshop

10 / 16 / 2019 5:00p - 7:00p VDC Wheatley 3rd Floor

@danielhaehn

From: https://twitter.com/matt_amato

var geometry = new THREE.Geometry();
geometry.vertices.push(
	new THREE.Vector3(-10, 10, 0),
	new THREE.Vector3(-10, -10, 0),
	new THREE.Vector3(10, -10, 0)
);
geometry.faces.push( new THREE.Face3(0, 1, 2));

GPU

Vertex Shader

Fragment Shader

Viewport

The Rendering Pipeline

Rasterization

Vertices

Face

zNear

Ray

Position (x,y,z)

Invisible Plane

raycaster = THREE.Raycaster();
raycaster.setFromCamera(vp_coords_near, camera);
intersects = raycaster.intersectObject( invisiblePlane );

Vertex Shader

attribute vec4 a_position;

void main() {
  gl_Position = a_position;
}

This shader does nothing besides passing through positions.

Fragment Shader

precision mediump float;

void main() {
  gl_FragColor = vec4(1., 1., 1., 1.);
}

This shader colors every fragment (pixel) white.

Fragment Shader

Vertex Shader

gl_Position

gl_FragColor

for every vertex

for every pixel

XTK

X.renderer3D

X.cube

Three.js

THREE.WebGLRenderer

THREE.Scene

THREE.TrackballControls

THREE.PerspectiveCamera

THREE.AmbientLight

THREE.DirectionalLight

WebGL

gl.viewport

gl.createShader

gl.shaderSource

gl.compileShader

gl.getShaderInfoLog

gl.createProgram

gl.attachShader

gl.linkProgram

gl.useProgram

gl.createBuffer

gl.bindBuffer

gl.BufferData

gl.getAttribLocation

gl.vertexAttribPointer

gl.enableVertexAttribArray

gl.clearColor

gl.clear

gl.drawArrays

 

THREE.Geometry

THREE.Material

THREE.Mesh

1. Initialize WebGL

2. Shaders

3. Create Geometry

4. Connect Shader with Geometry

5. Draw!

1. Initialize WebGL

setup Canvas

setup GL Context

gl = c.getContext( 'webgl' );

1. Initialize WebGL

2. Shaders

setup Canvas

setup GL Context

compile vertex shader

compile fragment shader

attach and link shaders

  <script id="vertexshader" type="glsl">
    attribute vec3 position;

    void main(void) {
    
      gl_Position = vec4( position, 1.);
    
    }
  </script>
  <script id="fragmentshader" type="glsl">
    precision mediump float;

    void main(void) {

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

    }
  </script>

1. Initialize WebGL

2. Shaders

3. Create Geometry

setup Canvas

setup GL Context

compile vertex shader

compile fragment shader

attach and link shaders

create vertices

create and bind buffer

put data in

unbind buffer

V0

V1

V2

V0

V1

V2

V0

V1

V2

V3

V4

V5

V0

V1

V2

V3

V4

V5

Viewport Coordinates

-1, -1

1, 1

-0.5, -0.5

-0.5, 0.5

0.5, 0.5

0.5, -0.5

      vertices = new Float32Array( [
                                     -0.5,  0.5, 0.0, // V0
                                     -0.5, -0.5, 0.0, // V1
                                      0.5,  0.5, 0.0, // V2

                                      0.5,  0.5, 0.0, // V3
                                     -0.5, -0.5, 0.0, // V4
                                      0.5, -0.5, 0.0  // V5
                                    ] );

1. Initialize WebGL

2. Shaders

3. Create Geometry

setup Canvas

setup GL Context

compile vertex shader

compile fragment shader

attach and link shaders

create vertices

create and bind buffer

put data in

unbind buffer

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

1. Initialize WebGL

2. Shaders

3. Create Geometry

4. Connect Shader with Geometry

setup Canvas

setup GL Context

compile vertex shader

compile fragment shader

attach and link shaders

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

gl.bindBuffer( gl.ARRAY_BUFFER, v_buffer );

// find the attribute in the shader source
var a_position = gl.getAttribLocation( shaderprogram, 'position' );

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

gl.enableVertexAttribArray ( a_position );

1. Initialize WebGL

2. Shaders

3. Create Geometry

4. Connect Shader with Geometry

5. Draw!

setup Canvas

setup GL Context

compile vertex shader

compile fragment shader

attach and link shaders

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

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

gl.drawArrays( gl.TRIANGLES, 0, 6 );

1. Initialize WebGL

2. Shaders

3. Create Geometry

4. Connect Shader with Geometry

5. Draw!

setup Canvas

setup GL Context

compile vertex shader

compile fragment shader

attach and link shaders

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

$ git pull upstream master
$ git push
$ touch index.html
$ cd 04
<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;

    void main(void) {
    
      gl_Position = vec4( position, 1.);
    
    }
  </script>
  
  <script id="fragmentshader" type="glsl">
    precision mediump float;

    void main(void) {

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

    }
  </script>

  <script>

    // VARIABLE DECLARATIONS

    window.onload = function() {
      

      //************************************************************//
      //
      // INITIALIZE WEBGL
      //




      //************************************************************//
      //
      // SHADERS
      //
    



      //************************************************************//
      //
      // CREATE GEOMETRY
      //
      vertices = new Float32Array( [
                                     -0.5,  0.5, 0.0, // V0
                                     -0.5, -0.5, 0.0, // V1
                                      0.5,  0.5, 0.0, // V2

                                      0.5,  0.5, 0.0, // V3
                                     -0.5, -0.5, 0.0, // V4
                                      0.5, -0.5, 0.0  // V5
                                    ] );



      //************************************************************//
      //
      // CONNECT SHADER WITH GEOMETRY
      //
      



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


    };

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

    void main(void) {
    
      gl_Position = vec4( position, 1.);
    
    }
  </script>
  
  <script id="fragmentshader" type="glsl">
    precision mediump float;

    void main(void) {

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

    }
  </script>
  
  <script>

    var c, gl;
    var v_shader, f_shader, shaderprogram;
    var vertices, v_buffer;

    window.onload = function() {

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

      gl = c.getContext( 'webgl' ); // setup GL context
      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 );


      //************************************************************//
      //
      // CREATE GEOMETRY
      //
      vertices = new Float32Array( [
                                     -0.5,  0.5, 0.0, // V0
                                     -0.5, -0.5, 0.0, // V1
                                      0.5,  0.5, 0.0, // V2

                                      0.5,  0.5, 0.0, // V3
                                     -0.5, -0.5, 0.0, // V4
                                      0.5, -0.5, 0.0  // V5
                                    ] );

      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


      //************************************************************//
      //
      // CONNECT SHADER WITH GEOMETRY
      //
      
      gl.bindBuffer( gl.ARRAY_BUFFER, v_buffer );

      // find the attribute in the shader source
      var a_position = gl.getAttribLocation( shaderprogram, 'position' );

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

      gl.enableVertexAttribArray ( a_position );


      //************************************************************//
      //
      // DRAW!
      //
      gl.clearColor( 0., 0., 0., 0.)
      gl.clear( gl.COLOR_BUFFER_BIT );

      gl.drawArrays( gl.TRIANGLES, 0, 6 );

    };

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

Lecture 9

By Daniel Haehn

Lecture 9

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

  • 98

More from Daniel Haehn