1. Computer Graphics with Three.JS
Part II (Texturing)

2. Texture Mapping
A way to render realistic picture w/o using too many polygons
Fall 2009 revised
Parallax mapping

3. Texture Coordinate System
Texture: a 2D array of color values, each unit is called texel (texture element)
Every texture map has (s,t) coordinates [0,0] to [1,1]
Each vertex in a polygon specifies its texture coordinates (s,t), then map to the given image to determine the corresponding texture
Fall 2009 revised

4. Example Screen space view Texture Map Texture space view OpenGL code
Fall 2009 revised

5. Example Screen space view Texture space view Texture Map OpenGL code
BACK
Fall 2009 revised

6. Texture Mapping in Three.JS
Map in material
Different texture modulation in different material
UV coordinates
Settings: wrapping, filters, …
multitexture
Jsfiddles… (CORS)
Spring 2016

7. Texture Coordinates
Spring 2016

8. Texture Parameters wrapS/T: minFilter magFilter
For non power-of-two textures, “simplest” parameters apply
wrapS/T:
THREE.ClampToEdgeWrapping, THREE.RepeatWrapping, and THREE.MirroredRepeatWrapping
How the texture repeats for texcoord outside [0,1]
Texture.repeat: a simpler way to set repeat pattern
minFilter
THREE.LinearMipMapLinearFilter, THREE.NearestFilter, THREE.NearestMipMapNearestFilter, THREE.NearestMipMapLinearFilter, THREE.LinearFilter, and THREE.LinearMipMapNearestFilter.
magFilter
THREE.LinearFilter, THREE.NearestFilter
Spring 2016

9. Texture Parameters (3JS)
Spring 2016

10. Code Study (site)
Spring 2016

11. Texture Environment (modulate)
Spring 2016

12. Easy Multi-Texture
Basically, it is a kind of blending
Spring 2016

13. Code Study (site)
Spring 2016

14. Cutout texture (billboard)
Alpha Test
material.alphaTest
Sets the alphaValue to be used when running an alpha test (default: 0)
alphaTest: if alpha > 0, the fragment passes
Must set material.transparent = true
glAlphaFunc (GL_GREATER, alphaValue)
Spring 2016

15. From Stack Overflow (url)
Spring 2016

16. Spring 2016

17. Cylindrical Billboard
Spring 2016

18. Code Study (site)
Spring 2016

19. MeshFaceMaterial
Is now THREE.MultiMaterial
Spring 2016

20. Example (jsfiddle) var geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(-50, 50, -50),   new THREE.Vector3(-50, -50, -50),
    new THREE.Vector3(100, -50, -50),  new THREE.Vector3(50, 50, -50)
  );
  var face;
  face = new THREE.Face3(0, 1, 3);  face.materialIndex = 0;
  geometry.faces.push(face);
  face = new THREE.Face3(1, 2, 3);  face.materialIndex = 1;
  var materialArray = [];
  materialArray.push(new THREE.MeshBasicMaterial({
    color: 0x009999
  }));
    color: 0xff0000
  var material = new THREE.MeshFaceMaterial(materialArray);
var mesh = new THREE.Mesh (geometry, material);
Spring 2016