Lecture 22

Patrick Cozzi and Liz Dailey

3D model

Assignment 5

Bonus

coming soon!

blender.org

Assignment 5 coming very soon!

McCormack 1st Floor

Assignment 6

My solution: https://cs460.org/shortcuts/28/

Assignment 6

Assignment 7

https://cs460.org/assignments/07

https://tungduong2.github.io/cs460student/06/

https://youtu.be/j9oeOGMiXSs

https://www.youtube.com/watch?v=52TD1RUPNCs

Final Project!

counts as 40%

1-3 students per team

the more impact, the better!

any computer graphics framework is fine!

start thinking about it now :)

FYOT!

https://danielhaehn.com/papers/?burkhardt2022ntools

https://cs666.org

Texture Mapping

U,V coordinates for each vertex

https://webglfundamentals.org/webgl/lessons/webgl-3d-textures.html

Three.js

XTK

Vanilla WebGL

var cube = new X.cube();
cube.texture.file = 'umb.png';

var floorTexture = new THREE.TextureLoader().load( 'marble.jpg' );
var floorGeometry = new THREE.PlaneGeometry( 1000, 1000 );
var floorMaterial = new THREE.MeshBasicMaterial( {
  map: floorTexture,
  side: THREE.DoubleSide
} );
floor = new THREE.Mesh( floorGeometry, floorMaterial );

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

Assignment 6

Head

Upper Arm

Lower Arm

Hand

q (0, 0, 0, 1)

Identity

Head

Upper Arm

q (0, 0, 0, 1)

Identity

q2 (Math.sin(T/2),

Math.cos(T/2))

Rotate 180° in X

T = Math.PI

Arm down

Arm up

Time

Frames

Keyframe 2

Keyframe 1

slerp Interpolation

60 FPS

60 Hz

60 1/s

Modern computer screens

Skinning

http://doc.gold.ac.uk/msccge/alumni/KesterSheridan/Solidsight/implementation.htm

Skeleton -> Mesh

Rigging

https://www.youtube.com/watch?v=cp1YRaTZBfw

Mesh -> Skeleton

Blender, 3D Studio Max, Maya

Assignment 5

https://threejs.org/docs/index.html#api/en/objects/SkinnedMesh

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

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

Time

Coding

Skinning

  var mesh = new THREE.SkinnedMesh( geometry, material );
  var skeleton = new THREE.Skeleton( bones );
  mesh.add( bones[ 0 ] );
  mesh.bind( skeleton );

5 Skinned Meshes

5 Cylinder Geometries

  var fromhelper = HELPER.cylinderSkeletonMesh(3, 5, 'blue')
  var geometry = fromhelper[0];
  var material = fromhelper[1];
  var bones = fromhelper[2];

  var mesh = new THREE.SkinnedMesh( geometry, material );
  var skeleton = new THREE.Skeleton( bones );
  mesh.add( bones[ 0 ] );
  mesh.bind( skeleton );

how many bones

cylinder radius

color

[ geometry, material, bones ]

helper.js

$ git pull upstream main

$ git push

$ python -m http.server

$ cd 07

$ cp 06/index.html .

$ cp 06/robot.js .

or copy my solution from

https://cs460.org/shortcuts/28/

  var fromhelper = HELPER.cylinderSkeletonMesh(3, 5, 'blue')
  var geometry = fromhelper[0];
  var material = fromhelper[1];
  var bones = fromhelper[2];

bones[ 0 ]

is an invisible anchor point

bones[ 0, 1, 2, 3 ]

left upper arm

left lower arm

left hand

how many bones

Quiz due tonight!

submit your music

cs460.org/music