NodeMaterial: Use `materialReference()` for env maps. (#28982)

* NodeMaterial: Use `materialReference()` for env maps.

* TSL: Move to TSL approach

* Move to TSL approach *2

* EnvironmentNode: Fix PMREM generation.

---------

Co-authored-by: sunag <sunagbrasil@gmail.com>

src/nodes/Nodes.js

@@ -90,6 +90,7 @@ export { default as CubeTextureNode, cubeTexture } from './accessors/CubeTexture
 export { default as InstanceNode, instance } from './accessors/InstanceNode.js';
 export { default as BatchNode, batch } from './accessors/BatchNode.js';
 export { default as MaterialNode, materialAlphaTest, materialColor, materialShininess, materialEmissive, materialOpacity, materialSpecular, materialSpecularStrength, materialReflectivity, materialRoughness, materialMetalness, materialNormal, materialClearcoat, materialClearcoatRoughness, materialClearcoatNormal, materialRotation, materialSheen, materialSheenRoughness, materialIridescence, materialIridescenceIOR, materialIridescenceThickness, materialLineScale, materialLineDashSize, materialLineGapSize, materialLineWidth, materialLineDashOffset, materialPointWidth, materialAnisotropy, materialAnisotropyVector, materialDispersion, materialLightMap, materialAOMap } from './accessors/MaterialNode.js';
+export * from './accessors/MaterialProperties.js';
 export { default as MaterialReferenceNode, materialReference } from './accessors/MaterialReferenceNode.js';
 export { default as RendererReferenceNode, rendererReference } from './accessors/RendererReferenceNode.js';
 export { default as MorphNode, morphReference } from './accessors/MorphNode.js';

src/nodes/accessors/MaterialNode.js

@@ -320,10 +320,6 @@ class MaterialNode extends Node {
 
 			node = this.getFloat( scope );
 
-		} else if ( scope === MaterialNode.REFRACTION_RATIO ) {
-
-			node = this.getFloat( scope );
-
 		} else if ( scope === MaterialNode.LIGHT_MAP ) {
 
 			node = this.getTexture( scope ).rgb.mul( this.getFloat( 'lightMapIntensity' ) );
@@ -383,7 +379,6 @@ MaterialNode.POINT_WIDTH = 'pointWidth';
 MaterialNode.DISPERSION = 'dispersion';
 MaterialNode.LIGHT_MAP = 'light';
 MaterialNode.AO_MAP = 'ao';
-MaterialNode.REFRACTION_RATIO = 'refractionRatio';
 
 export default MaterialNode;
 

src/nodes/accessors/MaterialProperties.js

@@ -0,0 +1,3 @@
+import { uniform } from '../core/UniformNode.js';
+
+export const materialRefractionRatio = /*@__PURE__*/ uniform( 0 ).onReference( ( { material } ) => material ).onRenderUpdate( ( { material } ) => material.refractionRatio );

src/nodes/accessors/MaterialReferenceNode.js

@@ -14,6 +14,8 @@ class MaterialReferenceNode extends ReferenceNode {
 
 		//this.updateType = NodeUpdateType.RENDER;
 
+		this.isMaterialReferenceNode = true;
+
 	}
 
 	/*setNodeType( node ) {

src/nodes/accessors/ReferenceNode.js

@@ -2,6 +2,7 @@ import Node, { addNodeClass } from '../core/Node.js';
 import { NodeUpdateType } from '../core/constants.js';
 import { uniform } from '../core/UniformNode.js';
 import { texture } from './TextureNode.js';
+import { cubeTexture } from './CubeTextureNode.js';
 import { buffer } from './BufferNode.js';
 import { nodeObject } from '../shadernode/ShaderNode.js';
 import { uniformArray } from './UniformArrayNode.js';
@@ -78,6 +79,10 @@ class ReferenceNode extends Node {
 
 			node = texture( null );
 
+		} else if ( uniformType === 'cubeTexture' ) {
+
+			node = cubeTexture( null );
+
 		} else {
 
 			node = uniform( null, uniformType );

src/nodes/accessors/ReflectVectorNode.js

@@ -1,7 +1,7 @@
 import { cameraViewMatrix } from './CameraNode.js';
 import { transformedNormalView } from './NormalNode.js';
 import { positionViewDirection } from './PositionNode.js';
-import { materialRefractionRatio } from './MaterialNode.js';
+import { materialRefractionRatio } from './MaterialProperties.js';
 
 export const reflectView = /*#__PURE__*/ positionViewDirection.negate().reflect( transformedNormalView );
 export const refractView = /*#__PURE__*/ positionViewDirection.negate().refract( transformedNormalView, materialRefractionRatio );

src/nodes/lighting/EnvironmentNode.js

@@ -25,17 +25,21 @@ class EnvironmentNode extends LightingNode {
 
 	setup( builder ) {
 
+		const { material } = builder;
+
 		let envNode = this.envNode;
 
-		if ( envNode.isTextureNode ) {
+		if ( envNode.isTextureNode || envNode.isMaterialReferenceNode ) {
+
+			const value = ( envNode.isTextureNode ) ? envNode.value : material[ envNode.property ];
 
-			let cacheEnvNode = _envNodeCache.get( envNode.value );
+			let cacheEnvNode = _envNodeCache.get( value );
 
 			if ( cacheEnvNode === undefined ) {
 
-				cacheEnvNode = pmremTexture( envNode.value );
+				cacheEnvNode = pmremTexture( value );
 
-				_envNodeCache.set( envNode.value, cacheEnvNode );
+				_envNodeCache.set( value, cacheEnvNode );
 
 			}
 
@@ -45,8 +49,6 @@ class EnvironmentNode extends LightingNode {
 
 		//
 
-		const { material } = builder;
-
 		const envMap = material.envMap;
 		const intensity = envMap ? reference( 'envMapIntensity', 'float', builder.material ) : reference( 'environmentIntensity', 'float', builder.scene ); // @TODO: Add materialEnvIntensity in MaterialNode
 

src/nodes/materials/NodeMaterial.js

@@ -13,8 +13,6 @@ import { materialReference } from '../accessors/MaterialReferenceNode.js';
 import { positionLocal, positionView } from '../accessors/PositionNode.js';
 import { skinningReference } from '../accessors/SkinningNode.js';
 import { morphReference } from '../accessors/MorphNode.js';
-import { texture } from '../accessors/TextureNode.js';
-import { cubeTexture } from '../accessors/CubeTextureNode.js';
 import { lightsNode } from '../lighting/LightsNode.js';
 import { mix } from '../math/MathNode.js';
 import { float, vec3, vec4 } from '../shadernode/ShaderNode.js';
@@ -374,7 +372,7 @@ class NodeMaterial extends Material {
 
 		} else if ( this.envMap ) {
 
-			node = this.envMap.isCubeTexture ? cubeTexture( this.envMap ) : texture( this.envMap );
+			node = this.envMap.isCubeTexture ? materialReference( 'envMap', 'cubeTexture' ) : materialReference( 'envMap', 'texture' );
 
 		}