Add MeshNormalNodeMaterial (#25471)

* Add MeshNormalNodeMaterial

* add opacity support

* rename directionToColor / colorToDirection

examples/jsm/nodes/materials/Materials.js

@@ -1,5 +1,6 @@
 import NodeMaterial from './NodeMaterial.js';
 import LineBasicNodeMaterial from './LineBasicNodeMaterial.js';
+import MeshNormalNodeMaterial from './MeshNormalNodeMaterial.js';
 import MeshBasicNodeMaterial from './MeshBasicNodeMaterial.js';
 import MeshPhongNodeMaterial from './MeshPhongNodeMaterial.js';
 import MeshStandardNodeMaterial from './MeshStandardNodeMaterial.js';
@@ -10,6 +11,7 @@ import SpriteNodeMaterial from './SpriteNodeMaterial.js';
 export {
 	NodeMaterial,
 	LineBasicNodeMaterial,
+	MeshNormalNodeMaterial,
 	MeshBasicNodeMaterial,
 	MeshPhongNodeMaterial,
 	MeshStandardNodeMaterial,
@@ -23,6 +25,7 @@ NodeMaterial.fromMaterial = function ( material ) {
 	const materialLib = {
 		NodeMaterial,
 		LineBasicNodeMaterial,
+		MeshNormalNodeMaterial,
 		MeshBasicNodeMaterial,
 		MeshPhongNodeMaterial,
 		MeshStandardNodeMaterial,

examples/jsm/nodes/materials/MeshNormalNodeMaterial.js

@@ -0,0 +1,45 @@
+import NodeMaterial from './NodeMaterial.js';
+import { MeshNormalMaterial } from 'three';
+import { vec4, diffuseColor, materialOpacity, transformedNormalView, directionToColor } from '../shadernode/ShaderNodeElements.js';
+
+const defaultValues = new MeshNormalMaterial();
+
+class MeshNormalNodeMaterial extends NodeMaterial {
+
+	constructor( parameters ) {
+
+		super();
+
+		this.isMeshNormalNodeMaterial = true;
+
+		this.opacityNode = null;
+
+		this.positionNode = null;
+
+		this.setDefaultValues( defaultValues );
+
+		this.setValues( parameters );
+
+	}
+
+	constructDiffuseColor( builder, stack ) {
+
+		const opacityNode = this.opacityNode ? float( this.opacityNode ) : materialOpacity;
+
+		stack.assign( diffuseColor, vec4( directionToColor( transformedNormalView ), opacityNode ) );
+
+	}
+
+	copy( source ) {
+
+		this.opacityNode = source.opacityNode;
+
+		this.positionNode = source.positionNode;
+
+		return super.copy( source );
+
+	}
+
+}
+
+export default MeshNormalNodeMaterial;

examples/jsm/nodes/shadernode/ShaderNodeElements.js

@@ -29,6 +29,7 @@ import SpecularMIPLevelNode from '../utils/SpecularMIPLevelNode.js';
 import SpriteSheetUVNode from '../utils/SpriteSheetUVNode.js';
 import TimerNode from '../utils/TimerNode.js';
 import TriplanarTexturesNode from '../utils/TriplanarTexturesNode.js';
+import PackingNode from '../utils/PackingNode.js';
 
 // geometry
 import RangeNode from '../geometry/RangeNode.js';
@@ -143,6 +144,9 @@ export const frameId = nodeImmutable( TimerNode, TimerNode.FRAME );
 export const triplanarTextures = nodeProxy( TriplanarTexturesNode );
 export const triplanarTexture = ( texture, ...params ) => triplanarTextures( texture, texture, texture, ...params );
 
+export const directionToColor = nodeProxy( PackingNode, PackingNode.DIRECTION_TO_COLOR );
+export const colorToDirection = nodeProxy( PackingNode, PackingNode.COLOR_TO_DIRECTION );
+
 // geometry
 
 export const range = ( min, max ) => nodeObject( new RangeNode( min, max ) );

examples/jsm/nodes/utils/PackingNode.js

@@ -0,0 +1,46 @@
+import TempNode from '../core/TempNode.js';
+import { mul } from '../shadernode/ShaderNodeBaseElements.js';
+
+class PackingNode extends TempNode {
+
+	constructor( scope, node ) {
+
+		super();
+
+		this.scope = scope;
+		this.node = node;
+
+	}
+
+	getNodeType( builder ) {
+
+		return this.node.getNodeType( builder );
+
+	}
+
+	construct() {
+
+		const { scope, node } = this;
+
+		let result = null;
+
+		if ( scope === PackingNode.DIRECTION_TO_COLOR ) {
+
+			result = mul( node, 0.5 ).add( 0.5 );
+
+		} else if ( scope === PackingNode.COLOR_TO_DIRECTION ) {
+
+			result = mul( node, 2.0 ).sub( 1 );
+
+		}
+
+		return result;
+
+	}
+
+}
+
+PackingNode.DIRECTION_TO_COLOR = 'directionToColor';
+PackingNode.COLOR_TO_DIRECTION = 'colorToDirection';
+
+export default PackingNode;

examples/webgpu_materials.html

@@ -128,6 +128,12 @@
 				material.alphaTestNode = new Nodes.UniformNode( 0.5 );
 				materials.push( material );
 
+				// Normal
+				material = new THREE.MeshNormalMaterial();
+				material.opacity = .5;
+				material.transparent = true;
+				materials.push( material );
+
 				//
 				//	ADVANCED
 				//