diff --git a/examples/webgl_materials_channels.html b/examples/webgl_materials_channels.html index bee0ab2a8a5635215f713ed083da605df239ecdd..8e78cc815c3b31b194607cdd6d760211f66bae1f 100644 --- a/examples/webgl_materials_channels.html +++ b/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(); diff --git a/src/materials/MeshDepthMaterial.js b/src/materials/MeshDepthMaterial.js index 67e06889a170b7b73c9612fe88e3a2e4bec2e3d6..2726096ed911a33e96830a94cff6651e9dbf4430 100644 --- a/src/materials/MeshDepthMaterial.js +++ b/src/materials/MeshDepthMaterial.js @@ -6,6 +6,10 @@ * parameters = { * opacity: , * + * displacementMap: new THREE.Texture( ), + * displacementScale: , + * displacementBias: , + * * wireframe: , * wireframeLinewidth: * } @@ -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; diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js index cfad1c1c6fe7e78225284e2d92636782ac068459..bedbab3838ce83592904a3d3c0351c1ea1aad471 100644 --- a/src/renderers/WebGLRenderer.js +++ b/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; diff --git a/src/renderers/shaders/ShaderLib.js b/src/renderers/shaders/ShaderLib.js index 188b7fe5a81c6a3f99a1f0fae93b28d333bdf010..446d20d87676e74809fecd01a63f64ea4cf19676 100644 --- a/src/renderers/shaders/ShaderLib.js +++ b/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' ] diff --git a/src/renderers/shaders/ShaderLib/depth_vert.glsl b/src/renderers/shaders/ShaderLib/depth_vert.glsl index dfcb074baff48fc64e101507ede50d85469840d1..dae628572fbec92e51006e8fff4828ab11d4ce56 100644 --- a/src/renderers/shaders/ShaderLib/depth_vert.glsl +++ b/src/renderers/shaders/ShaderLib/depth_vert.glsl @@ -1,4 +1,6 @@ #include +#include +#include #include #include #include @@ -12,9 +14,12 @@ void main() { + #include + #include #include + #include #include #include #include