Meet with me

in November

10 minutes

Candy

Meat Sticks

Assignment 6

Assignment 6

A

Assignment 6

Assignment 6

Assignment 7

Texture Mapping

U,V coordinates for each vertex

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.PlaneBufferGeometry( 1000, 1000 );
var floorMaterial = new THREE.MeshBasicMaterial( {
map: floorTexture,
side: THREE.DoubleSide
} );
floor = new THREE.Mesh( floorGeometry, floorMaterial );
  //...
  
  video = document.getElementById( 'video' );
        video.play();

  texture = new THREE.VideoTexture( video );
  texture.offset.y += -.5
  texture.repeat.set(1, 2 );

  // now we add the cube
  var geometry = new THREE.BoxBufferGeometry( 20, 20, 20);
  var material = new THREE.MeshStandardMaterial({ color: 0xffffff, map:texture });
  cube = new THREE.Mesh( geometry, material);
  scene.add(cube);
  
  //...

Skinning

Skeleton -> Mesh

Mesh

Geometry

+ Material

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

Rendering Primitives

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

Normals

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

N1 (x, y, z)

N2 (x, y, z)

Face

Normals

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

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

V1

V2

V3

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

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 master
$ git push
$ python -m http.server
$ cd 07
$ cp 06/index.html .
$ cp 06/robot.js .

or copy my solution from

 

  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

Lecture 26

By Daniel Haehn

Lecture 26

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

  • 66

More from Daniel Haehn