CS460 Computer Graphics - University of Massachusetts Boston

Assignment 2

Three.js

THREE.WebGLRenderer

THREE.Scene

THREE.TrackballControls

THREE.PerspectiveCamera

THREE.AmbientLight

THREE.DirectionalLight

THREE.Mesh

THREE.BoxBufferGeometry

THREE.MeshStandardMaterial

<html>
  <head>
    <style>
      html, body { 
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>
    <script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
    <script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
    <script>
      window.onload = function() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.set( 0, 0, 100 );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
        ambientLight = new THREE.AmbientLight();
        scene.add( ambientLight );

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

        geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
        material = new THREE.MeshStandardMaterial({ color: 0xffffff });
        cube = new THREE.Mesh( geometry, material );
        
        scene.add(cube);

        controls = new THREE.TrackballControls( camera );

        animate();
        
      };

      function animate() {

        requestAnimationFrame( animate );

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

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

V1

V2

V3

V4

V6

V5

(x, y, z)

(x, y, z)

(x, y, z)

(x, y, z)

(x, y, z)

(x, y, z)

Y

X

Z

Vertex

/ Vertices

V1

V2

V3

V4

V6

V5

Vertex

/ Vertices

Face

Face

Edge

V1

V2

V3

V4

V6

V5

Vertex

/ Vertices

Face

Face

V1

V2

V3

V4

V6

V5

(x, y, z)

(x, y, z)

(x, y, z)

(x, y, z)

(x, y, z)

(x, y, z)

Vertex

/ Vertices

Face

Face

12 Triangles

V1

V2

V3

36 Vertices

8

geometry = new THREE.BoxBufferGeometry( 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));

V0

V1

V2

12 Triangles

8 Vertices

3D

2D

?

12 Triangles

8 Vertices

3D

2D

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

V1

V2

(x, y, z)

(x, y, z)

V3

(x, y, z)

V1

V2

(x, y, z)

(x, y, z)

V3

(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

V1

V2

V3

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 src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
    <script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
    <script>
      window.onload = function() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.set( 0, 0, 100 );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
        ambientLight = new THREE.AmbientLight();
        scene.add( ambientLight );

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

        geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
        material = new THREE.MeshStandardMaterial({ color: 0xffffff });
        cube = new THREE.Mesh( geometry, material );
        
        scene.add(cube);

        controls = new THREE.TrackballControls( camera );

        animate();
        
      };

      function animate() {

        requestAnimationFrame( animate );

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

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

Lecture 7

By Daniel Haehn

Lecture 7

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

  • 95

More from Daniel Haehn