+

3D model

Assignment 5

Bonus

Due 11/21!

Mesh Fileformats

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

save as tetrahedron.obj and drag into Slicedrop.com

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

} );

Assignment 5

connect Three.js with Tweakpane!

Mesh

Geometry

+ Material

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

} );

Assignment 5

<script type="module">
  
// ...

  
import { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';
  
let effect; 
 
// ...
 
effect = new AnaglyphEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );

// ...

function animate() {

  // ...

  effect.render( scene, camera ); // replace renderer. with effect.

  // ...

}

</script>

Oculus Quest 2

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

submit your music

Quiz 9 due tomorrow!

Lecture 20

By Daniel Haehn

Lecture 20

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

  • 80