MeshPhongMaterial: Added displacementMap. See #7094.

editor/js/Sidebar.Material.js

@@ -223,6 +223,20 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialNormalMapRow );
 
+	// displacement map
+
+	var materialDisplacementMapRow = new UI.Panel();
+	var materialDisplacementMapEnabled = new UI.Checkbox( false ).onChange( update );
+	var materialDisplacementMap = new UI.Texture().onChange( update );
+	var materialDisplacementScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
+
+	materialDisplacementMapRow.add( new UI.Text( 'Displace Map' ).setWidth( '90px' ) );
+	materialDisplacementMapRow.add( materialDisplacementMapEnabled );
+	materialDisplacementMapRow.add( materialDisplacementMap );
+	materialDisplacementMapRow.add( materialDisplacementScale );
+
+	container.add( materialDisplacementMapRow );
+
 	// specular map
 
 	var materialSpecularMapRow = new UI.Panel();
@@ -517,6 +531,24 @@ Sidebar.Material = function ( editor ) {
 
 			}
 
+			if ( material.displacementMap !== undefined ) {
+
+				var displacementMapEnabled = materialDisplacementMapEnabled.getValue() === true;
+
+				if ( objectHasUvs ) {
+
+					material.displacementMap = displacementMapEnabled ? materialDisplacementMap.getValue() : null;
+					material.displacementScale = materialDisplacementScale.getValue();
+					material.needsUpdate = true;
+
+				} else {
+
+					if ( displacementMapEnabled ) textureWarning = true;
+
+				}
+
+			}
+
 			if ( material.specularMap !== undefined ) {
 
 				var specularMapEnabled = materialSpecularMapEnabled.getValue() === true;
@@ -659,6 +691,7 @@ Sidebar.Material = function ( editor ) {
 			'alphaMap': materialAlphaMapRow,
 			'bumpMap': materialBumpMapRow,
 			'normalMap': materialNormalMapRow,
+			'displacementMap': materialDisplacementMapRow,
 			'specularMap': materialSpecularMapRow,
 			'envMap': materialEnvMapRow,
 			'lightMap': materialLightMapRow,
@@ -787,6 +820,20 @@ Sidebar.Material = function ( editor ) {
 
 		}
 
+		if ( material.displacementMap !== undefined ) {
+
+			materialDisplacementMapEnabled.setValue( material.displacementMap !== null );
+
+			if ( material.displacementMap !== null || resetTextureSelectors ) {
+
+				materialDisplacementMap.setValue( material.displacementMap );
+
+			}
+
+			materialDisplacementScale.setValue( material.displacementScale );
+
+		}
+
 		if ( material.specularMap !== undefined ) {
 
 			materialSpecularMapEnabled.setValue( material.specularMap !== null );

src/loaders/ObjectLoader.js

@@ -341,6 +341,9 @@ THREE.ObjectLoader.prototype = {
 				if ( data.normalMap !== undefined ) material.normalMap = getTexture( data.normalMap );
 				if ( data.normalScale )	material.normalScale = new THREE.Vector2( data.normalScale, data.normalScale );
 
+				if ( data.displacementMap !== undefined ) material.displacementMap = getTexture( data.displacementMap );
+				if ( data.displacementScale !== undefined ) material.displacementScale = data.displacementScale;
+
 				if ( data.specularMap !== undefined ) material.specularMap = getTexture( data.specularMap );
 
 				if ( data.envMap !== undefined ) {

src/materials/Material.js

@@ -144,6 +144,12 @@ THREE.Material.prototype = {
 			data.normalMap = this.normalMap.toJSON( meta ).uuid;
 			data.normalScale = this.normalScale; // Removed for now, causes issue in editor ui.js
 
+		}
+		if ( this.displacementMap instanceof THREE.Texture ) {
+
+			data.displacementMap = this.displacementMap.toJSON( meta ).uuid;
+			data.displacementScale = this.displacementScale;
+
 		}
 		if ( this.specularMap instanceof THREE.Texture ) data.specularMap = this.specularMap.toJSON( meta ).uuid;
 		if ( this.envMap instanceof THREE.Texture ) {

src/materials/MeshPhongMaterial.js

@@ -25,6 +25,9 @@
  *  normalMap: new THREE.Texture( <Image> ),
  *  normalScale: <Vector2>,
  *
+ *  displacementMap: new THREE.Texture( <Image> ),
+ *  displacementScale: <float>,
+ *
  *  specularMap: new THREE.Texture( <Image> ),
  *
  *  alphaMap: new THREE.Texture( <Image> ),
@@ -81,6 +84,9 @@ THREE.MeshPhongMaterial = function ( parameters ) {
 	this.normalMap = null;
 	this.normalScale = new THREE.Vector2( 1, 1 );
 
+	this.displacementMap = null;
+	this.displacementScale = 1;
+
 	this.specularMap = null;
 
 	this.alphaMap = null;
@@ -139,6 +145,9 @@ THREE.MeshPhongMaterial.prototype.copy = function ( source ) {
 	this.normalMap = source.normalMap;
 	this.normalScale.copy( source.normalScale );
 
+	this.displacementMap = source.displacementMap;
+	this.displacementScale = source.displacementScale;
+
 	this.specularMap = source.specularMap;
 
 	this.alphaMap = source.alphaMap;

src/renderers/WebGLRenderer.js

@@ -1484,6 +1484,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			emissiveMap: !! material.emissiveMap,
 			bumpMap: !! material.bumpMap,
 			normalMap: !! material.normalMap,
+			displacementMap: !! material.displacementMap,
 			specularMap: !! material.specularMap,
 			alphaMap: !! material.alphaMap,
 
@@ -1995,6 +1996,13 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		}
 
+		if ( material.displacementMap ) {
+
+			uniforms.displacementMap.value = material.displacementMap;
+			uniforms.displacementScale.value = material.displacementScale;
+
+		}
+
 		// uv repeat and offset setting priorities
 		// 1. color map
 		// 2. specular map
@@ -2013,6 +2021,10 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			uvScaleMap = material.specularMap;
 
+		} else if ( material.displacementMap ) {
+
+			uvScaleMap = material.displacementMap;
+
 		} else if ( material.normalMap ) {
 
 			uvScaleMap = material.normalMap;

src/renderers/shaders/ShaderChunk/begin_vertex.glsl

@@ -1 +1,2 @@
+
 vec3 transformed = vec3( position );

src/renderers/shaders/ShaderChunk/displacementmap_pars_vertex.glsl

@@ -0,0 +1,6 @@
+#ifdef USE_DISPLACEMENTMAP
+
+	uniform sampler2D displacementMap;
+	uniform float displacementScale;
+
+#endif

src/renderers/shaders/ShaderChunk/displacementmap_vertex.glsl

@@ -0,0 +1,5 @@
+#ifdef USE_DISPLACEMENTMAP
+
+	transformed += objectNormal * texture2D( displacementMap, uv ).x * displacementScale;
+
+#endif

src/renderers/shaders/ShaderLib.js

@@ -248,8 +248,9 @@ THREE.ShaderLib = {
 			THREE.UniformsLib[ "aomap" ],
 			THREE.UniformsLib[ "lightmap" ],
 			THREE.UniformsLib[ "emissivemap" ],
-			THREE.UniformsLib[ "bump" ],
+			THREE.UniformsLib[ "bumpmap" ],
 			THREE.UniformsLib[ "normalmap" ],
+			THREE.UniformsLib[ "displacementmap" ],
 			THREE.UniformsLib[ "fog" ],
 			THREE.UniformsLib[ "lights" ],
 			THREE.UniformsLib[ "shadowmap" ],
@@ -277,6 +278,7 @@ THREE.ShaderLib = {
 			THREE.ShaderChunk[ "common" ],
 			THREE.ShaderChunk[ "uv_pars_vertex" ],
 			THREE.ShaderChunk[ "uv2_pars_vertex" ],
+			THREE.ShaderChunk[ "displacementmap_pars_vertex" ],
 			THREE.ShaderChunk[ "envmap_pars_vertex" ],
 			THREE.ShaderChunk[ "lights_phong_pars_vertex" ],
 			THREE.ShaderChunk[ "color_pars_vertex" ],
@@ -303,6 +305,7 @@ THREE.ShaderLib = {
 			"#endif",
 
 				THREE.ShaderChunk[ "begin_vertex" ],
+				THREE.ShaderChunk[ "displacementmap_vertex" ],
 				THREE.ShaderChunk[ "morphtarget_vertex" ],
 				THREE.ShaderChunk[ "skinning_vertex" ],
 				THREE.ShaderChunk[ "project_vertex" ],

src/renderers/shaders/UniformsLib.js

@@ -42,7 +42,7 @@ THREE.UniformsLib = {
 
 	},
 
-	bump: {
+	bumpmap: {
 
 		"bumpMap" : { type: "t", value: null },
 		"bumpScale" : { type: "f", value: 1 }
@@ -53,6 +53,14 @@ THREE.UniformsLib = {
 
 		"normalMap" : { type: "t", value: null },
 		"normalScale" : { type: "v2", value: new THREE.Vector2( 1, 1 ) }
+
+	},
+
+	displacementmap: {
+
+		"displacementMap" : { type: "t", value: null },
+		"displacementScale" : { type: "f", value: 1 }
+
 	},
 
 	fog : {

src/renderers/webgl/WebGLProgram.js

@@ -201,6 +201,7 @@ THREE.WebGLProgram = ( function () {
 				parameters.emissiveMap ? '#define USE_EMISSIVEMAP' : '',
 				parameters.bumpMap ? '#define USE_BUMPMAP' : '',
 				parameters.normalMap ? '#define USE_NORMALMAP' : '',
+				parameters.displacementMap ? '#define USE_DISPLACEMENTMAP' : '',
 				parameters.specularMap ? '#define USE_SPECULARMAP' : '',
 				parameters.alphaMap ? '#define USE_ALPHAMAP' : '',
 				parameters.vertexColors ? '#define USE_COLOR' : '',

utils/build/includes/common.json

@@ -95,15 +95,16 @@
 	"src/renderers/shaders/ShaderChunk/alphatest_fragment.glsl",
 	"src/renderers/shaders/ShaderChunk/aomap_fragment.glsl",
 	"src/renderers/shaders/ShaderChunk/aomap_pars_fragment.glsl",
+	"src/renderers/shaders/ShaderChunk/begin_vertex.glsl",
 	"src/renderers/shaders/ShaderChunk/bumpmap_pars_fragment.glsl",
 	"src/renderers/shaders/ShaderChunk/color_fragment.glsl",
 	"src/renderers/shaders/ShaderChunk/color_pars_fragment.glsl",
 	"src/renderers/shaders/ShaderChunk/color_pars_vertex.glsl",
 	"src/renderers/shaders/ShaderChunk/color_vertex.glsl",
 	"src/renderers/shaders/ShaderChunk/common.glsl",
-	"src/renderers/shaders/ShaderChunk/begin_vertex.glsl",
-	"src/renderers/shaders/ShaderChunk/project_vertex.glsl",
 	"src/renderers/shaders/ShaderChunk/defaultnormal_vertex.glsl",
+	"src/renderers/shaders/ShaderChunk/displacementmap_vertex.glsl",
+	"src/renderers/shaders/ShaderChunk/displacementmap_pars_vertex.glsl",
 	"src/renderers/shaders/ShaderChunk/emissivemap_fragment.glsl",
 	"src/renderers/shaders/ShaderChunk/emissivemap_pars_fragment.glsl",
 	"src/renderers/shaders/ShaderChunk/envmap_fragment.glsl",
@@ -133,6 +134,7 @@
 	"src/renderers/shaders/ShaderChunk/morphtarget_pars_vertex.glsl",
 	"src/renderers/shaders/ShaderChunk/morphtarget_vertex.glsl",
 	"src/renderers/shaders/ShaderChunk/normalmap_pars_fragment.glsl",
+	"src/renderers/shaders/ShaderChunk/project_vertex.glsl",
 	"src/renderers/shaders/ShaderChunk/shadowmap_fragment.glsl",
 	"src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl",
 	"src/renderers/shaders/ShaderChunk/shadowmap_pars_vertex.glsl",