Assignment 6
My solution: https://cs460.org/shortcuts/28/
Assignment 7
11/18 12pm EST
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
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 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