Lecture 7

CS460 Computer Graphics - University of Massachusetts Boston

1: https://cakohl.github.io/cs460student/02/
2: https://wilhenalbertohm.github.io/cs460student/02/
3: https://shrutivarade.github.io/cs460student/02/
4: https://jefzen28.github.io/cs460student/02/
5: https://allysonochoa.github.io/cs460student/02/

SPECIAL: https://rishankumb.github.io/cs460student/02/

ask in #help

tag @staff

CS460 Computer Graphics - University of Massachusetts Boston

Assignment 3

is being updated right now!

Three.js

THREE.WebGLRenderer

THREE.Scene

THREE.TrackballControls

THREE.PerspectiveCamera

THREE.AmbientLight

THREE.DirectionalLight

THREE.Mesh

THREE.BoxGeometry

THREE.MeshStandardMaterial

https://threejs.org

https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene

https://threejs.org/examples/#webgl_animation_cloth

<html>
  <head>
    <style>
      html, body { 
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>
    
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

    <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@latest/build/three.module.js",
        "three/addons/": "https://unpkg.com/three@latest/examples/jsm/"
      }
    }
    </script>

    <script type="module">

      import * as THREE from 'three';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';      

      var renderer, controls, scene, camera;

      window.onload = function() {


        // create scene
        scene = new THREE.Scene();
        
        //...

        // call animation/rendering loop
        animate();
        
      };

      function animate() {

        requestAnimationFrame( animate );

        // ...
        
      };
    </script>
  </head>
  <body></body>
</html>

Mesh

Geometry

+ Material

material = new THREE.MeshStandardMaterial({ color: 0xffffff });

material = new THREE.MeshStandardMaterial({ color: 0xffffff, wireframe: true });

Wireframe

12 Triangles

(x, y, z)

Vertex

/ Vertices

Vertex

/ Vertices

Face

Edge

Vertex

/ Vertices

Face

(x, y, z)

Vertex

/ Vertices

Face

12 Triangles

36 Vertices

geometry = new THREE.BoxGeometry( 20, 20, 20 );

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

12 Triangles

8 Vertices

12 Triangles

8 Vertices

2560 x 1600 Pixels

width

height

Frame Buffer

Screen Space

Frame Buffer

Screen Space

width x height Pixels

Rasterization

Rendering Pipeline

JavaScript 3D Screen Space

(x, y, z)

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

Graphics Processing Unit (GPU)

Vertex Shader

3D World

Shape Assembly

Perspective Projection

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

Graphics Processing Unit (GPU)

Vertex Shader

Fragment Shader

3D World

2D Space

Rasterization

Colorization

Frame Buffer / Viewport

Blending

Frame Buffer / Viewport

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

From 3D..

..to 2D

From 3D to 2D

From 2D to 3D?

Unprojecting...

<html>
  <head>
    <style>
      html, body { 
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>
    
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

    <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@latest/build/three.module.js",
        "three/addons/": "https://unpkg.com/three@latest/examples/jsm/"
      }
    }
    </script>

    <script type="module">

      import * as THREE from 'three';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';      

      var renderer, controls, scene, camera;

      window.onload = function() {


        // create scene
        scene = new THREE.Scene();

        // setup the camera
        var fov = 75;
        var ratio = window.innerWidth / window.innerHeight;
        var zNear = 1;
        var zFar = 10000;
        camera = new THREE.PerspectiveCamera( fov, ratio, zNear, zFar );
        camera.position.set(0, 0, 100);

        // create renderer and add canvas
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
        //.. setup lights
        var ambientLight = new THREE.AmbientLight();
        scene.add( ambientLight );

        var light = new THREE.DirectionalLight( 0xffffff, 5.0 );
        light.position.set( 10, 100, 10 );
        scene.add( light );

        // configure cube
        var geometry = new THREE.BoxGeometry( 20, 20, 20 );
        var material = new THREE.MeshStandardMaterial({ color: 0xffffff });
        var cube = new THREE.Mesh( geometry, material );
        
        // add it to the scene
        scene.add(cube);

        // setup interaction
        controls = new OrbitControls( camera, renderer.domElement );
 
        // call animation/rendering loop
        animate();
        
      };

      function animate() {

        requestAnimationFrame( animate );

        controls.update();
        renderer.render( scene, camera );

      };
    </script>
  </head>
  <body></body>
</html>

https://cs460.org/shortcuts/06/

submit your music

cs460.org/music