Lecture 9

CS Club Hackathon

CS460 Computer Graphics - University of Massachusetts Boston

Assignment 3

From: https://twitter.com/matt_amato

Patrick Cozzi and Liz Dailey

(CreateAccess)

https://web3d.siggraph.org/

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

https://www.imdb.com/name/nm4712854/

https://www.youtube.com/watch?v=sZ9nxj54P_s

Welcome Allyssa!

https://s2022.siggraph.org/

https://www.csail.mit.edu/news/next-3d-printing-zoolophone-new-musical-instrument-made-animal-shapes

https://nerf-w.github.io/

https://www.youtube.com/watch?v=5WAxYVVA710

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

Shaders

GLSL

https://github.com/xtk/X/blob/master/visualization/shaders.js

A rather complex example of shaders:

Vertex Shader

Fragment Shader

Vertex Shader

attribute vec4 a_position;

void main() {
  gl_Position = a_position;
}

This shader does nothing besides passing through positions.

Vertex Shader

attribute vec4 a_position;

void main() {
  gl_Position = a_position;
}

This shader does nothing besides passing through positions.

data is different for each vertex!

(x, y, z, w)

(x, y, z, 1.)

name

Vertex Shader

attribute vec4 a_position;

void main() {
  gl_Position = a_position;
}

This shader does nothing besides passing through positions.

gl_Position is the output of any vertex shader

Fragment Shader

precision mediump float;

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

This shader colors every fragment (pixel) white.

Fragment Shader

precision mediump float;

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

This shader colors every fragment (pixel) white.

defines the number of decimals for every value

Fragment Shader

precision mediump float;

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

This shader colors every fragment (pixel) white.

every fragment shader outputs a color for

the current fragment / pixel.

Fragment Shader

Vertex Shader

gl_Position

gl_FragColor

for every vertex

for every pixel

Fragment Shader

Shader Art

https://www.shadertoy.com/

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

https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

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

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

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

setup Canvas

setup GL Context

compile vertex shader

compile fragment shader

attach and link 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 ));
}

1. Initialize WebGL

2. Shaders

setup Canvas

setup GL Context

compile vertex shader

compile fragment shader

attach and link 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 ));
}

1. Initialize WebGL

2. Shaders

setup Canvas

setup GL Context

compile vertex shader

compile fragment shader

attach and link shaders

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

gl.linkProgram( shaderprogram );

gl.useProgram( shaderprogram );

1. Initialize WebGL

2. Shaders

setup Canvas

setup GL Context

compile vertex shader

compile fragment shader

attach and link 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 );

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

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

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

      vertices = new Float32Array( [
                                     -0.5,  0.5, 0.0, // V0
                                     -0.5, -0.5, 0.0, // V1, V4
                                      0.5,  0.5, 0.0, // V2, V3
                                      0.5, -0.5, 0.0  // V5
                                    ] );

18 * 32 bit == 18 * 4 bytes == 72 bytes

12 * 32 bit == 12 * 4 bytes == 48 bytes

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

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

Indexed Geometry

48 bytes

6 * 8 bit == 6 bytes

we now use 48 + 6 == 54 bytes instead of 72 bytes!

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

What the...

but don't worry!

you will understand it when you work on assignment 4!

$ git pull upstream main

$ 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>Default 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>

https://cs460.org/shortcuts/09/

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>Default 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>

https://cs460.org/shortcuts/10/

submit your music

cs460.org/music