MeshDepthMaterial: Added displacement map support (#8586)

examples/webgl_materials_channels.html

@@ -78,6 +78,9 @@
 
 			var height = 500; // of camera frustum
 
+			var SCALE = 2.436143; // from original model
+			var BIAS = - 0.428408; // from original model
+
 			init();
 			animate();
 			initGui();
@@ -159,45 +162,86 @@
 
 				materialStandard = new THREE.MeshStandardMaterial( {
 					color: 0xffffff,
+
 					metalness: 0.5,
 					roughness: 0.6,
+
 					displacementMap: displacementMap,
-					displacementScale: 2.436143, // from original model
-					displacementBias: - 0.428408, // from original model
+					displacementScale: SCALE,
+					displacementBias: BIAS,
+
 					aoMap: aoMap,
+
 					normalMap: normalMap,
 					normalScale: new THREE.Vector2( 1, - 1 ),
+
 					side: THREE.DoubleSide
 				} );
 
 				materialDepthAuto = new THREE.MeshDepthMaterial( {
 					depthFormat: THREE.AutoDepthFormat,
-					depthPacking: THREE.LinearDepthPacking
+					depthPacking: THREE.LinearDepthPacking,
+
+					displacementMap: displacementMap,
+					displacementScale: SCALE,
+					displacementBias: BIAS,
+
+					side: THREE.DoubleSide
 				} );
 
 				materialDepthAutoRGBA = new THREE.MeshDepthMaterial( {
 					depthFormat: THREE.AutoDepthFormat,
-					depthPacking: THREE.RGBADepthPacking
+					depthPacking: THREE.RGBADepthPacking,
+
+					displacementMap: displacementMap,
+					displacementScale: SCALE,
+					displacementBias: BIAS,
+
+					side: THREE.DoubleSide
 				} );
 
 				materialDepthLinearClipZ = new THREE.MeshDepthMaterial( {
 					depthFormat: THREE.LinearClipZDepthFormat,
-					depthPacking: THREE.LinearDepthPacking
+					depthPacking: THREE.LinearDepthPacking,
+
+					displacementMap: displacementMap,
+					displacementScale: SCALE,
+					displacementBias: BIAS,
+
+					side: THREE.DoubleSide
 				} );
 
 				materialDepthLinearClipZRGBA = new THREE.MeshDepthMaterial( {
 					depthFormat: THREE.LinearClipZDepthFormat,
-					depthPacking: THREE.RGBADepthPacking
+					depthPacking: THREE.RGBADepthPacking,
+
+					displacementMap: displacementMap,
+					displacementScale: SCALE,
+					displacementBias: BIAS,
+
+					side: THREE.DoubleSide
 				} );
 
 				materialDepthInvClipZ = new THREE.MeshDepthMaterial( {
 					depthFormat: THREE.InvClipZDepthFormat,
-					depthPacking: THREE.LinearDepthPacking
+					depthPacking: THREE.LinearDepthPacking,
+
+					displacementMap: displacementMap,
+					displacementScale: SCALE,
+					displacementBias: BIAS,
+
+					side: THREE.DoubleSide
 				} );
 
 				materialDepthInvClipZRGBA = new THREE.MeshDepthMaterial( {
 					depthFormat: THREE.InvClipZDepthFormat,
-					depthPacking: THREE.RGBADepthPacking
+					depthPacking: THREE.RGBADepthPacking,
+
+					displacementMap: displacementMap,
+					displacementScale: SCALE,
+					displacementBias: BIAS,
+
+					side: THREE.DoubleSide
 				} );
 
 				materialNormal = new THREE.MeshNormalMaterial();

src/materials/MeshDepthMaterial.js

@@ -6,6 +6,10 @@
  * parameters = {
  *  opacity: <float>,
  *
+ *  displacementMap: new THREE.Texture( <Image> ),
+ *  displacementScale: <float>,
+ *  displacementBias: <float>,
+ *
  *  wireframe: <boolean>,
  *  wireframeLinewidth: <float>
  * }
@@ -23,6 +27,10 @@ THREE.MeshDepthMaterial = function ( parameters ) {
 	this.skinning = false;
 	this.morphTargets = false;
 
+	this.displacementMap = null;
+	this.displacementScale = 1;
+	this.displacementBias = 0;
+
 	this.wireframe = false;
 	this.wireframeLinewidth = 1;
 
@@ -43,6 +51,10 @@ THREE.MeshDepthMaterial.prototype.copy = function ( source ) {
 	this.skinning = source.skinning;
 	this.morphTargets = source.morphTargets;
 
+	this.displacementMap = source.displacementMap;
+	this.displacementScale = source.displacementScale;
+	this.displacementBias = source.displacementBias;
+
 	this.wireframe = source.wireframe;
 	this.wireframeLinewidth = source.wireframeLinewidth;
 

src/renderers/WebGLRenderer.js

@@ -1998,6 +1998,14 @@ THREE.WebGLRenderer = function ( parameters ) {
 				m_uniforms.mFar.value = camera.far;
 				m_uniforms.opacity.value = material.opacity;
 
+				if ( material.displacementMap ) {
+
+					m_uniforms.displacementMap.value = material.displacementMap;
+					m_uniforms.displacementScale.value = material.displacementScale;
+					m_uniforms.displacementBias.value = material.displacementBias;
+
+				}
+
 			} else if ( material instanceof THREE.MeshNormalMaterial ) {
 
 				m_uniforms.opacity.value = material.opacity;

src/renderers/shaders/ShaderLib.js

@@ -169,13 +169,17 @@ THREE.ShaderLib = {
 
 	'depth': {
 
-		uniforms: {
+		uniforms: THREE.UniformsUtils.merge( [
 
-			"mNear": { type: "1f", value: 1.0 },
-			"mFar" : { type: "1f", value: 2000.0 },
-			"opacity" : { type: "1f", value: 1.0 }
+			THREE.UniformsLib[ 'displacementmap' ],
 
-		},
+			{
+				"mNear": { type: "1f", value: 1.0 },
+				"mFar" : { type: "1f", value: 2000.0 },
+				"opacity" : { type: "1f", value: 1.0 }
+			}
+
+		] ),
 
 		vertexShader: THREE.ShaderChunk[ 'depth_vert' ],
 		fragmentShader: THREE.ShaderChunk[ 'depth_frag' ]

src/renderers/shaders/ShaderLib/depth_vert.glsl

@@ -1,4 +1,6 @@
 #include <common>
+#include <uv_pars_vertex>
+#include <displacementmap_pars_vertex>
 #include <morphtarget_pars_vertex>
 #include <skinning_pars_vertex>
 #include <logdepthbuf_pars_vertex>
@@ -12,9 +14,12 @@
 
 void main() {
 
+	#include <uv_vertex>
+
 	#include <skinbase_vertex>
 
 	#include <begin_vertex>
+	#include <displacementmap_vertex>
 	#include <morphtarget_vertex>
 	#include <skinning_vertex>
 	#include <project_vertex>