Jasmine Roberts

11 / 17 / 2021

Dan Ginsburg

11 / 29

Vulkan, OpenGL, and OpenGL ES renderers for the Source 2 engine used by games such as Dota 2, Artifact, and Dota Underlords

Assignment 8

Assignment 8

Due 11/22!

Normals

V4

V6

V5

(x, y, z)

(x, y, z)

(x, y, z)

Face

N4 (x, y, z)

V1

V3

(x, y, z)

(x, y, z)

(x, y, z)

Vertex

/ Vertices

Face

N1 (x, y, z)

N2 (x, y, z)

N3 (x, y, z)

Vertex Normals

Face Normals

used for Material

used for Lighting

used for Shading

V1

V2

V3

Bump Map

Normals

Pixel

Mesh File Formats

GLTF

.gltf

.glb

STL

OBJ

PLY

Collada

.dae

.stl

.ply

.obj

And more:

Let's make an OBJ file

v 0 0 0
v 0 10 0
v 10 0 0
v 0 0 10
f 1 2 3
f 1 2 4
f 1 4 3
f 2 4 3
<html>
  <head>
    <meta charset="UTF-8" />
    <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 src="https://threejs.org/examples/js/loaders/PLYLoader.js" type="text/javascript"></script>

    <script>

      var scene, camera, renderer, ambientLight, light, controls;
      var floor;

      window.onload = function() {

        scene = new THREE.Scene();

        var fov = 60;
        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, 500);

        renderer = new THREE.WebGLRenderer({ alpha: true });
        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 );

        controls = new THREE.TrackballControls( camera, renderer.domElement );




        // TODO
        
        
        
        

        animate();


      };

      function animate() {

        requestAnimationFrame( animate );

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

      };

    </script>
  </head>
  <body></body>
</html>

var loader = new THREE.PLYLoader();
loader.load('beethoven.ply', function (geometry) {
  
  geometry.computeVertexNormals();
  
  var material = new THREE.MeshStandardMaterial( {
    color: 'red'
  } );
  
  scene.add( new THREE.Mesh( geometry, material ) );

} );
var loader = new THREE.PLYLoader();
loader.load('beethoven.ply', function (geometry) {
  
  geometry.computeVertexNormals();
  
  var material = new THREE.MeshStandardMaterial( {
    color: 'red'
  } );
  
  scene.add( new THREE.Mesh( geometry, material ) );

} );

Constructive Solid Geometry

Materials

Mesh

Geometry

+ Material

Light Simulations

N (x, y, z)

Material

Scattering

controls the physical appearance

BRDF

magic mode uses (x, y, z) as color

Physically Based Rendering

Shiny with highlights

Non-Shiny without highlights

roughness 0 .. 1

metalness 0 .. 1

THREE.MeshStandardMaterial

Quiz today!

Lecture 27

By Daniel Haehn

Lecture 27

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

  • 103

More from Daniel Haehn