MeshNormalMaterial: added support for normal/bump/displ maps, flat shading, morphs, skinning

examples/webgl_materials_channels.html

@@ -166,6 +166,8 @@
 					normalMap: normalMap,
 					normalScale: new THREE.Vector2( 1, - 1 ),
 
+					//shading: THREE.FlatShading,
+
 					side: THREE.DoubleSide
 				} );
 
@@ -190,6 +192,15 @@
 				} );
 
 				materialNormal = new THREE.MeshNormalMaterial( {
+					displacementMap: displacementMap,
+					displacementScale: SCALE,
+					displacementBias: BIAS,
+
+					normalMap: normalMap,
+					normalScale: new THREE.Vector2( 1, - 1 ),
+
+					//shading: THREE.FlatShading,
+
 					side: THREE.DoubleSide
 				} );
 
@@ -269,12 +280,18 @@
 
 					}
 
-					switch ( params.side ) {
+					if ( params.side !== material.side ) {
+
+						switch ( params.side ) {
+
+							case 'front': material.side = THREE.FrontSide; break;
+							case 'back': material.side = THREE.BackSide; break;
+							case 'double': material.side = THREE.DoubleSide; break;
+
+						}
+
+						material.needsUpdate = true;
 
-						case 'front': material.side = THREE.FrontSide; break;
-						case 'back': material.side = THREE.BackSide; break;
-						case 'double': material.side = THREE.DoubleSide; break;
-	
 					}
 
 					mesh.material = material;

src/materials/MeshNormalMaterial.js

@@ -1,13 +1,29 @@
 import { Material } from './Material';
+import { Vector2 } from '../math/Vector2';
 
 /**
  * @author mrdoob / http://mrdoob.com/
+ * @author WestLangley / http://github.com/WestLangley
  *
  * parameters = {
  *  opacity: <float>,
  *
+ *  bumpMap: new THREE.Texture( <Image> ),
+ *  bumpScale: <float>,
+ *
+ *  normalMap: new THREE.Texture( <Image> ),
+ *  normalScale: <Vector2>,
+ *
+ *  displacementMap: new THREE.Texture( <Image> ),
+ *  displacementScale: <float>,
+ *  displacementBias: <float>,
+ *
  *  wireframe: <boolean>,
  *  wireframeLinewidth: <float>
+ *
+ *  skinning: <bool>,
+ *  morphTargets: <bool>,
+ *  morphNormals: <bool>
  * }
  */
 
@@ -17,12 +33,25 @@ function MeshNormalMaterial( parameters ) {
 
 	this.type = 'MeshNormalMaterial';
 
+	this.bumpMap = null;
+	this.bumpScale = 1;
+
+	this.normalMap = null;
+	this.normalScale = new Vector2( 1, 1 );
+
+	this.displacementMap = null;
+	this.displacementScale = 1;
+	this.displacementBias = 0;
+
 	this.wireframe = false;
 	this.wireframeLinewidth = 1;
 
 	this.fog = false;
 	this.lights = false;
+
+	this.skinning = false;
 	this.morphTargets = false;
+	this.morphNormals = false;
 
 	this.setValues( parameters );
 
@@ -37,9 +66,23 @@ MeshNormalMaterial.prototype.copy = function ( source ) {
 
 	Material.prototype.copy.call( this, source );
 
+	this.bumpMap = source.bumpMap;
+	this.bumpScale = source.bumpScale;
+
+	this.normalMap = source.normalMap;
+	this.normalScale.copy( source.normalScale );
+
+	this.displacementMap = source.displacementMap;
+	this.displacementScale = source.displacementScale;
+	this.displacementBias = source.displacementBias;
+
 	this.wireframe = source.wireframe;
 	this.wireframeLinewidth = source.wireframeLinewidth;
 
+	this.skinning = source.skinning;
+	this.morphTargets = source.morphTargets;
+	this.morphNormals = source.morphNormals;
+
 	return this;
 
 };

src/renderers/WebGLRenderer.js

@@ -624,6 +624,7 @@ function WebGLRenderer( parameters ) {
 
 			if ( ! material.isMeshPhongMaterial &&
 				! material.isMeshStandardMaterial &&
+				! material.isMeshNormalMaterial &&
 				material.shading === FlatShading ) {
 
 				for ( var i = 0, l = object.count * 3; i < l; i += 9 ) {
@@ -1863,6 +1864,7 @@ function WebGLRenderer( parameters ) {
 				material.isMeshLambertMaterial ||
 				material.isMeshPhongMaterial ||
 				material.isMeshStandardMaterial ||
+				material.isMeshNormalMaterial ||
 				material.isMeshDepthMaterial ) {
 
 				refreshUniformsCommon( m_uniforms, material );
@@ -1916,7 +1918,7 @@ function WebGLRenderer( parameters ) {
 
 			} else if ( material.isMeshNormalMaterial ) {
 
-				m_uniforms.opacity.value = material.opacity;
+				refreshUniformsNormal( m_uniforms, material );
 
 			}
 
@@ -2217,6 +2219,32 @@ function WebGLRenderer( parameters ) {
 
 	}
 
+	function refreshUniformsNormal( uniforms, material ) {
+
+		if ( material.bumpMap ) {
+
+			uniforms.bumpMap.value = material.bumpMap;
+			uniforms.bumpScale.value = material.bumpScale;
+
+		}
+
+		if ( material.normalMap ) {
+
+			uniforms.normalMap.value = material.normalMap;
+			uniforms.normalScale.value.copy( material.normalScale );
+
+		}
+
+		if ( material.displacementMap ) {
+
+			uniforms.displacementMap.value = material.displacementMap;
+			uniforms.displacementScale.value = material.displacementScale;
+			uniforms.displacementBias.value = material.displacementBias;
+
+		}
+
+	}
+
 	// If uniforms are marked as clean, they don't need to be loaded to the GPU.
 
 	function markUniformsLightsNeedsUpdate( uniforms, value ) {

src/renderers/shaders/ShaderLib.js

@@ -139,9 +139,15 @@ var ShaderLib = {
 
 	normal: {
 
-		uniforms: {
-			opacity : { value: 1.0 }
-		},
+		uniforms: Object.assign( {},
+			UniformsLib.common,
+			UniformsLib.bumpmap,
+			UniformsLib.normalmap,
+			UniformsLib.displacementmap,
+			{
+				opacity : { value: 1.0 }
+			}
+		),
 
 		vertexShader: ShaderChunk.normal_vert,
 		fragmentShader: ShaderChunk.normal_frag

src/renderers/shaders/ShaderLib/normal_frag.glsl

@@ -1,18 +1,34 @@
+#define NORMAL
+
 uniform float opacity;
-varying vec3 vNormal;
 
-#include <common>
+#if defined( FLAT_SHADED  ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP )
+
+	varying vec3 vViewPosition;
+
+#endif
+
+#ifndef FLAT_SHADED
+
+	varying vec3 vNormal;
+
+#endif
+
 #include <packing>
+#include <uv_pars_fragment>
+#include <bumpmap_pars_fragment>
+#include <normalmap_pars_fragment>
 #include <logdepthbuf_pars_fragment>
-#include <clipping_planes_pars_fragment>
 
 void main() {
 
-	#include <clipping_planes_fragment>
+	#include <logdepthbuf_fragment>
 	#include <normal_flip>
-   
-   	gl_FragColor = vec4( packNormalToRGB( vNormal * flipNormal ), opacity );
+	#include <normal_fragment>
 
-	#include <logdepthbuf_fragment>
+	gl_FragColor = vec4( packNormalToRGB( normal ), opacity );
+
+	#include <premultiplied_alpha_fragment>
+	#include <encodings_fragment>
 
 }

src/renderers/shaders/ShaderLib/normal_vert.glsl

@@ -1,18 +1,50 @@
-varying vec3 vNormal;
+#define NORMAL
 
-#include <common>
+#if defined( FLAT_SHADED  ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP )
+
+	varying vec3 vViewPosition;
+
+#endif
+
+#ifndef FLAT_SHADED
+
+	varying vec3 vNormal;
+
+#endif
+
+#include <uv_pars_vertex>
+#include <displacementmap_pars_vertex>
 #include <morphtarget_pars_vertex>
+#include <skinning_pars_vertex>
 #include <logdepthbuf_pars_vertex>
-#include <clipping_planes_pars_vertex>
 
 void main() {
 
-	vNormal = normalize( normalMatrix * normal );
+	#include <uv_vertex>
+
+	#include <beginnormal_vertex>
+	#include <morphnormal_vertex>
+	#include <skinbase_vertex>
+	#include <skinnormal_vertex>
+	#include <defaultnormal_vertex>
+
+#ifndef FLAT_SHADED // Normal computed with derivatives when FLAT_SHADED
+
+	vNormal = normalize( transformedNormal );
+
+#endif
 
 	#include <begin_vertex>
+	#include <displacementmap_vertex>
 	#include <morphtarget_vertex>
+	#include <skinning_vertex>
 	#include <project_vertex>
 	#include <logdepthbuf_vertex>
-	#include <clipping_planes_vertex>
+
+#if defined( FLAT_SHADED  ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP )
+
+	vViewPosition = - mvPosition.xyz;
+
+#endif
 
 }