Lecture 19

3D model

Assignment 5

Bonus

Olivia Moos

Free!

https://gltf-viewer.donmccurdy.com/

Mesh Fileformats

3D model

Assignment 5

Bonus

coming soon!

+ materials

+ quaternions

+ anaglyph

zNear

Ray

Position (x,y,z)

Invisible Plane

raycaster = THREE.Raycaster();
raycaster.setFromCamera(vp_coords_near, camera);
intersects = raycaster.intersectObject( invisiblePlane );

Raycasting

https://threejs.org/examples/webgl_interactive_cubes.html

https://threejs.org/examples/webgl_decals.html

How are the colors chosen?

What are these .jpg images?

material.color.setHex( Math.random() * 0xffffff );

texture

specular

normals

lil-gui

https://tweakpane.github.io/docs/

connect Three.js with Tweakpane!

https://threejs.org/examples/?q=effects

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

Augmented Reality

Virtual Reality

Mixed Reality

Cross Reality

Augmented Reality

Virtual Reality

Mixed Reality

https://threejs.org/examples/?q=webxr

https://arvr.google.com/cardboard/get-cardboard/

https://immersive-web.github.io/webxr/

Oculus Quest 2

https://www.umb.edu/makerspace/virtual_reality

https://stackoverflow.com/a/33581108

How are the colors chosen?

What are these .jpg images?

material.color.setHex( Math.random() * 0xffffff );

texture

specular

normals

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

Rendering Primitives

http://antongerdelan.net/opengl/

(x, y, z)

Vertex

/ Vertices

Face

Normals

(x, y, z)

Vertex

/ Vertices

Face

N1 (x, y, z)

N2 (x, y, z)

Face

Normals

(x, y, z)

Vertex

/ Vertices

Face

N1 (x, y, z)

N2 (x, y, z)

Vertex

N3 (x, y, z)

N6 (x, y, z)

N5 (x, y, z)

N4 (x, y, z)

No Shading

Normals

used for Material

used for Lighting

No Normals

Face Normals

Vertex Normals

Bump Map

Normals

Pixel

Normal Map

Bump Map

Normals

Pixel

usually between 0 and 1 for x,y,z

usually point away from the outside of a surface

Normals

used for Material

used for Lighting

used for Shading

Light Simulations

N (x, y, z)

Material

Scattering

controls the physical appearance

<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/02/

Mesh File Formats

GLTF

.gltf

.glb

STL

OBJ

PLY

Collada

.dae

.stl

.ply

.obj

http://www.theobjects.com/dragonfly/dfhelp/4-0/Content/17_File%20Formats/Mesh%20File%20Formats.htm

And more:

https://www.sculpteo.com/en/glossary/obj-file-3d-printing-file-format/

Let's make an OBJ file

save as tetrahedron.obj and drag into Slicedrop.com

Assignment 5

https://cs460.org/shortcuts/30/

Now let's load some PLY file!

https://cs460.org/shortcuts/30/

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

} );

submit your music

cs460.org/music

Quiz 8 due today!