mrdoob · bhouston · Mar 2, 2016 · Mar 2, 2016 · Mar 2, 2016 · Mar 2, 2016
diff --git a/examples/files.js b/examples/files.js
@@ -127,6 +127,7 @@ var files = {
 		"webgl_materials_parallaxmap",
 		"webgl_materials_shaders_fresnel",
 		"webgl_materials_skin",
+		"webgl_materials_slots",
 		"webgl_materials_standard",
 		"webgl_materials_texture_anisotropy",
 		"webgl_materials_texture_compressed",

diff --git a/examples/webgl_materials_slots.html b/examples/webgl_materials_slots.html
@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>threejs webgl - per-mat per-material uv offset/repeat and texel scale/offset/invert</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				color: #000;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+
+				background-color: #000;
+
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			a { color: #222 }
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - Per-Map Per-Material UV Channel, UV Repeat/Offset, and Texel Scale/Offset/Invert<br/>via THREE.Map by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
+
+		<script src="../build/three.min.js"></script>
+		<script src="../examples/js/controls/OrbitControls.js"></script>
+		<script src="../src/loaders/BinaryTextureLoader.js"></script>
+
+		<script src="../examples/js/Detector.js"></script>
+		<script src="../examples/js/libs/stats.min.js"></script>
+
+		<script src="../examples/js/libs/dat.gui.min.js"></script>
+		<script src="../src/loaders/BinaryTextureLoader.js"></script>
+		<script src="../examples/js/loaders/RGBELoader.js"></script>
+		<script src="../examples/js/loaders/HDRCubeTextureLoader.js"></script>
+		<script src="../examples/js/Half.js"></script>
+		<script src="../examples/js/Encodings.js"></script>
+		<script src="../examples/js/pmrem/PMREMGenerator.js"></script>
+		<script src="../examples/js/pmrem/PMREMCubeUVPacker.js"></script>
+
+		<script src="../examples/js/postprocessing/EffectComposer.js"></script>
+		<script src="../examples/js/postprocessing/RenderPass.js"></script>
+		<script src="../examples/js/postprocessing/MaskPass.js"></script>
+		<script src="../examples/js/postprocessing/ShaderPass.js"></script>
+		<script src="../examples/js/shaders/CopyShader.js"></script>
+		<script src="../examples/js/shaders/FXAAShader.js"></script>
+		<script src="../examples/js/postprocessing/BloomPass.js"></script>
+		<script src="../examples/js/shaders/ConvolutionShader.js"></script>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats;
+			var params;
+			var camera, scene, renderer, controls, objects = [];
+			var composer;
+			var standardMaterial, standardMaterialPremultiplied, floorMaterial;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera.position.set( 0.0, 80, 40 * 3.5 );
+
+				scene = new THREE.Scene();
+
+				renderer = new THREE.WebGLRenderer( { antialias: false } );
+				renderer.setClearColor( new THREE.Color( 0xffffff ) );
+
+				standardMaterial = new THREE.MeshStandardMaterial( {
+					bumpScale: - 0.05,
+					color: 0xffffff,
+					emissive: 0xffffff,
+					metalness: 0.9,
+					roughness: 0.8,
+					normalScale: new THREE.Vector2( 1, -1 ),
+					shading: THREE.SmoothShading,
+					transparent: true,
+					blending: THREE.PremultipliedAlphaBlending
+				} );
+
+				var textureLoader = new THREE.TextureLoader();
+				textureLoader.load( "../examples/textures/planets/earth_atmos_2048.jpg", function( map ) {
+					map.wrapS = THREE.RepeatWrapping;
+					map.wrapT = THREE.RepeatWrapping;
+					map.anisotropy = 4;
+					standardMaterial.map = map;
+					standardMaterial.needsUpdate = true;
+				} );
+				textureLoader.load( "../examples/textures/planets/earth_normal_2048.jpg", function( map ) {
+					map.wrapS = THREE.RepeatWrapping;
+					map.wrapT = THREE.RepeatWrapping;
+					map.anisotropy = 4;
+					standardMaterial.normalMap = map;
+					standardMaterial.needsUpdate = true;
+				} );
+				textureLoader.load( "../examples/textures/planets/earth_specular_2048.jpg", function( map ) {
+					map.wrapS = THREE.RepeatWrapping;
+					map.wrapT = THREE.RepeatWrapping;
+					map.anisotropy = 4;
+					standardMaterial.roughnessMap = map;
+					standardMaterial.needsUpdate = true;
+				} );
+				textureLoader.load( "../examples/textures/planets/earth_lights_2048.png", function( map ) {
+					map.wrapS = THREE.RepeatWrapping;
+					map.wrapT = THREE.RepeatWrapping;
+					map.anisotropy = 4;
+					standardMaterial.emissiveMap = map;
+					standardMaterial.needsUpdate = true;
+				} );
+
+
+				var geometry = new THREE.SphereGeometry( 35, 48, 48 );
+				var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
+				torusMesh1.position.x = 0.0;
+				torusMesh1.castShadow = true;
+				torusMesh1.receiveShadow = true;
+				scene.add( torusMesh1 );
+				objects.push( torusMesh1 );
+
+				// Materials
+				var hdrpath = "../examples/textures/cube/hdrPisa/";
+				var hdrformat = '.hdr';
+				var hdrurls = [
+					hdrpath + 'px' + hdrformat, hdrpath + 'nx' + hdrformat,
+					hdrpath + 'py' + hdrformat, hdrpath + 'ny' + hdrformat,
+					hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat
+				];
+
+				var hdrCubeMap = new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrurls, function ( hdrCubeMap ) {
+
+					var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
+					pmremGenerator.update( renderer );
+
+					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+					pmremCubeUVPacker.update( renderer );
+
+					standardMaterial.envMap = pmremCubeUVPacker.CubeUVRenderTarget;
+					standardMaterial.envMapIntensity = 3;
+					standardMaterial.needsUpdate = true;
+
+				} );
+
+				// Lights
+
+				//scene.add( new THREE.AmbientLight( 0x222222 ) );
+
+				var spotLight = new THREE.SpotLight( 0xffffff );
+				spotLight.position.set( 50, 100, 50 );
+				spotLight.angle = Math.PI / 7;
+				spotLight.penumbra = 0.8
+				spotLight.castShadow = true;
+				scene.add( spotLight );
+
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.shadowMap.enabled = true;
+				container.appendChild( renderer.domElement );
+
+				renderer.toneMapping = THREE.ReinhardToneMapping;
+				renderer.toneMappingExposure = 6;
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+
+				composer = new THREE.EffectComposer( renderer );
+				composer.setSize( window.innerWidth, window.innerHeight );
+
+				var renderScene = new THREE.RenderPass( scene, camera );
+				composer.addPass( renderScene );
+
+				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				copyPass.renderToScreen = true;
+				composer.addPass( copyPass );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+
+				container.appendChild( stats.domElement );
+
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 0, 0 );
+				controls.update();
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				var gui = new dat.GUI();
+
+				params = {};
+
+				var mapParams = function( mapName ) {
+					params[ mapName + 'TexelInvert'] = ( mapName === 'rough' );
+					gui.add( params, mapName + 'TexelInvert' );
+					if( mapName === "bump" ) {
+						params[ mapName + 'TexelOffset'] = 0;
+						params[ mapName + 'TexelScale'] = 0.05;
+						gui.add( params, mapName + 'TexelScale', -0.1, 0.1 );
+					}
+					else {
+						params[ mapName + 'TexelOffset'] = ( mapName === 'rough' ) ? 0.4 : 0;
+						if( mapName === 'rough' ) params[ mapName + 'TexelScale'] = 0.6;
+						else if( mapName === 'emissive' ) params[ mapName + 'TexelScale'] = 0.3;
+						else params[ mapName + 'TexelScale'] = 1.0;
+						if( mapName !== "normal" ) {
+							gui.add( params, mapName + 'TexelOffset', -1, 1 );
+							gui.add( params, mapName + 'TexelScale', -1, 1 );
+						}
+					}
+					params[ mapName + 'UVOffsetX'] = 0;
+					gui.add( params, mapName + 'UVOffsetX', 0, 1 );
+					params[ mapName + 'UVOffsetY'] = 0;
+					gui.add( params, mapName + 'UVOffsetY', 0, 1 );
+					params[ mapName + 'UVRepeatX'] = 1;
+					gui.add( params, mapName + 'UVRepeatX', 0.01, 5 );
+					params[ mapName + 'UVRepeatY'] = 1;
+					gui.add( params, mapName + 'UVRepeatY', 0.01, 5 );
+				};
+				mapParams( "map" );
+				mapParams( "normal" );
+				mapParams( "rough" );
+				mapParams( "emissive" );
+				gui.open();
+
+			}
+
+			function onWindowResize() {
+
+				var width = window.innerWidth;
+				var height = window.innerHeight;
+
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( width, height );
+				composer.setSize( width, height );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				if ( standardMaterial !== undefined ) {
+
+					var setSlot = function( map, name ) {
+						map.texelTransform = true;
+						map.texelScale = params[ name + 'TexelScale'];
+						map.texelOffset = params[ name + 'TexelOffset'];
+						map.texelInvert = params[ name + 'TexelInvert'];
+						map.uvTransform = true;
+						map.uvRepeat.x = params[ name + 'UVRepeatX'];
+						map.uvRepeat.y = params[ name + 'UVRepeatY'];
+						map.uvOffset.x = params[ name + 'UVOffsetX'];
+						map.uvOffset.y = params[ name + 'UVOffsetY'];
+					}
+					setSlot( standardMaterial.mapSlot, "map" );
+					setSlot( standardMaterial.normalMapSlot, "normal" );
+					setSlot( standardMaterial.roughnessMapSlot, "rough" );
+					setSlot( standardMaterial.emissiveMapSlot, "emissive" );
+				}
+
+				var timer = Date.now() * 0.00025;
+
+				camera.lookAt( scene.position );
+
+				for ( var i = 0, l = objects.length; i < l; i ++ ) {
+
+					var object = objects[ i ];
+					object.rotation.y += 0.005;
+
+				}
+
+				if( params.renderMode === "Composer" ) {
+					composer.render();
+				}
+				else {
+					renderer.render( scene, camera );
+				}
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/src/materials/Map.js b/src/materials/Map.js
@@ -0,0 +1,71 @@
+/**
+ * @author Ben Houston / bhouston / http://clara.io
+ *
+ */
+
+THREE.Map = function ( name, uvChannel, uvTransform, texelTransform ) {
+
+  this.name = name || "unnamed";
+
+  this.texture = null;
+
+  this.uvChannel = uvChannel || 0;
+
+  this.uvTransform = uvTransform || false;
+  this.uvOffset = new THREE.Vector2( 0, 0 );
+  this.uvRepeat = new THREE.Vector2( 1.0, 1.0 );
+  //this.uvRotation = 0;  - not implemented because offset/repeat fix in a vec4 uniform, rotation doesn't.
+
+  this.texelTransform = uvTransform || false;
+  this.texelScale = 1.0;
+  this.texelOffset = 0.0;
+  this.texelInvert = false;
+
+};
+
+THREE.Map.prototype = {
+
+  constructor: THREE.Map,
+
+  copy: function ( source ) {
+
+    this.name = source.name;
+
+  	this.texture = source.texture;
+
+    this.uvChannel = source.uvChannel;
+
+    this.uvTransform = source.uvTransform;
+    this.uvOffset = source.uvOffset;
+    this.uvRepeat = source.uvRepeat;
+    //this.uvRotation = source.uvRotation;
+
+    this.texelTransform = source.texelTransform;
+    this.texelScale = source.texelScale;
+    this.texelOffset = source.texelOffset;
+    this.texelInvert = source.texelInvert;
+
+  	return this;
+
+  },
+
+  // bakes all the input texel parameters into just two.
+  getFlattenedTexelTransform: function() {
+
+      if( this.texelInvert ) {
+        return {
+          texelScale: -this.texelScale,
+          texelOffset: this.texelScale + this.texelOffset
+        };
+      }
+      return {
+        texelScale: this.texelScale,
+        texelOffset: this.texelOffset
+      };
+  }
+
+};
+
+THREE.Map.SupportedMapNames = [
+	'map', 'lightMap', 'aoMap', 'emissiveMap', 'specularMap', 'bumpMap', 'normalMap', 'roughnessMap', 'metalnessMap', 'alphaMap', 'displacementMap'
+];