Computer Graphics with Three.JS Part II (Texturing)

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

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

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

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

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

Texture Coordinates Spring 2016

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

Texture Parameters (3JS) Spring 2016

Code Study (site) Spring 2016

Texture Environment (modulate) Spring 2016

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

Code Study (site) Spring 2016

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

From Stack Overflow (url) Spring 2016

Spring 2016

Cylindrical Billboard Spring 2016

Code Study (site) Spring 2016

MeshFaceMaterial Is now THREE.MultiMaterial Spring 2016

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