TSL: Improve fog approach. (#30080)

examples/webgpu_custom_fog_background.html

@@ -36,7 +36,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { pass, color, rangeFog } from 'three/tsl';
+			import { pass, color, rangeFogFactor } from 'three/tsl';
 
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 
@@ -75,7 +75,7 @@
 
 				// get fog factor from scene pass context
 				// equivalent to: scene.fog = new THREE.Fog( 0x0066ff, 2.7, 4 );
-				const fogFactor = rangeFog( null, 2.7, 4 ).context( { getViewZ: () => scenePassViewZ } );
+				const fogFactor = rangeFogFactor( 2.7, 4 ).context( { getViewZ: () => scenePassViewZ } );
 
 				// tone mapping scene pass
 				const scenePassTM = scenePass.toneMapping( THREE.ACESFilmicToneMapping );

examples/webgpu_lights_phong.html

@@ -27,7 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, rangeFog, checker, uv, mix, texture, lights, normalMap } from 'three/tsl';
+			import { color, fog, rangeFogFactor, checker, uv, mix, texture, lights, normalMap } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
@@ -46,7 +46,7 @@
 				camera.position.z = 7;
 
 				scene = new THREE.Scene();
-				scene.fogNode = rangeFog( color( 0xFF00FF ), 12, 30 );
+				scene.fogNode = fog( color( 0xFF00FF ), rangeFogFactor( 12, 30 ) );
 
 				const sphereGeometry = new THREE.SphereGeometry( 0.1, 16, 8 );
 

examples/webgpu_lights_selective.html

@@ -27,7 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { rangeFog, color, lights, texture, normalMap } from 'three/tsl';
+			import { fog, rangeFogFactor, color, lights, texture, normalMap } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
@@ -48,7 +48,7 @@
 				camera.position.z = 7;
 
 				scene = new THREE.Scene();
-				scene.fogNode = rangeFog( color( 0xFF00FF ), 12, 30 );
+				scene.fogNode = fog( color( 0xFF00FF ), rangeFogFactor( 12, 30 ) );
 
 				const sphereGeometry = new THREE.SphereGeometry( 0.1, 16, 8 );
 

examples/webgpu_particles.html

@@ -44,7 +44,6 @@
 				camera.position.set( 1300, 500, 0 );
 
 				scene = new THREE.Scene();
-				//scene.fogNode = rangeFog( color( 0x0000ff ), 1500, 2100 );
 
 				// textures
 

examples/webgpu_sprites.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { texture, uv, userData, rangeFog, color } from 'three/tsl';
+			import { texture, uv, userData, fog, rangeFogFactor, color } from 'three/tsl';
 
 			let camera, scene, renderer;
 
@@ -46,7 +46,7 @@
 				camera.position.z = 1500;
 
 				scene = new THREE.Scene();
-				scene.fogNode = rangeFog( color( 0x0000ff ), 1500, 2100 );
+				scene.fogNode = fog( color( 0x0000ff ), rangeFogFactor( 1500, 2100 ) );
 
 				// create sprites
 

src/Three.TSL.js

@@ -131,6 +131,7 @@ export const defined = TSL.defined;
 export const degrees = TSL.degrees;
 export const deltaTime = TSL.deltaTime;
 export const densityFog = TSL.densityFog;
+export const densityFogFactor = TSL.densityFogFactor;
 export const depth = TSL.depth;
 export const depthPass = TSL.depthPass;
 export const difference = TSL.difference;
@@ -370,6 +371,7 @@ export const radians = TSL.radians;
 export const rand = TSL.rand;
 export const range = TSL.range;
 export const rangeFog = TSL.rangeFog;
+export const rangeFogFactor = TSL.rangeFogFactor;
 export const reciprocal = TSL.reciprocal;
 export const reference = TSL.reference;
 export const referenceBuffer = TSL.referenceBuffer;

src/materials/nodes/NodeMaterial.js

@@ -576,7 +576,13 @@ class NodeMaterial extends Material {
 
 			const fogNode = builder.fogNode;
 
-			if ( fogNode ) outputNode = vec4( fogNode.mix( outputNode.rgb, fogNode.colorNode ), outputNode.a );
+			if ( fogNode ) {
+
+				const fog = vec4( fogNode );
+
+				outputNode = vec4( fog.a.mix( outputNode.rgb, fog.rgb ), outputNode.a );
+
+			}
 
 		}
 

src/nodes/Nodes.js

@@ -104,11 +104,6 @@ export { default as FunctionNode } from './code/FunctionNode.js';
 export { default as ScriptableNode } from './code/ScriptableNode.js';
 export { default as ScriptableValueNode } from './code/ScriptableValueNode.js';
 
-// fog
-export { default as FogNode } from './fog/FogNode.js';
-export { default as FogRangeNode } from './fog/FogRangeNode.js';
-export { default as FogExp2Node } from './fog/FogExp2Node.js';
-
 // geometry
 export { default as RangeNode } from './geometry/RangeNode.js';
 

src/nodes/TSL.js

@@ -115,9 +115,7 @@ export * from './code/ScriptableNode.js';
 export * from './code/ScriptableValueNode.js';
 
 // fog
-export * from './fog/FogNode.js';
-export * from './fog/FogRangeNode.js';
-export * from './fog/FogExp2Node.js';
+export * from './fog/Fog.js';
 
 // geometry
 export * from './geometry/RangeNode.js';

src/nodes/fog/Fog.js

@@ -0,0 +1,88 @@
+import { positionView } from '../accessors/Position.js';
+import { smoothstep } from '../math/MathNode.js';
+import { Fn, vec4 } from '../tsl/TSLBase.js';
+
+/**
+ * Returns a node that represents the `z` coordinate in view space
+ * for the current fragment. It's a different representation of the
+ * default depth value.
+ *
+ * This value can be part of a computation that defines how the fog
+ * density increases when moving away from the camera.
+ *
+ * @param {NodeBuilder} builder - The current node builder.
+ * @return {Node} The viewZ node.
+ */
+function getViewZNode( builder ) {
+
+	let viewZ;
+
+	const getViewZ = builder.context.getViewZ;
+
+	if ( getViewZ !== undefined ) {
+
+		viewZ = getViewZ( this );
+
+	}
+
+	return ( viewZ || positionView.z ).negate();
+
+}
+
+/**
+ * Constructs a new range factor node.
+ *
+ * @param {Node} near - Defines the near value.
+ * @param {Node} far - Defines the far value.
+ */
+export const rangeFogFactor = Fn( ( [ near, far ], builder ) => {
+
+	const viewZ = getViewZNode( builder );
+
+	return smoothstep( near, far, viewZ );
+
+} );
+
+/**
+ * Represents an exponential squared fog. This type of fog gives
+ * a clear view near the camera and a faster than exponentially
+ * densening fog farther from the camera.
+ *
+ * @param {Node} density - Defines the fog density.
+ */
+export const densityFogFactor = Fn( ( [ density ], builder ) => {
+
+	const viewZ = getViewZNode( builder );
+
+	return density.mul( density, viewZ, viewZ ).negate().exp().oneMinus();
+
+} );
+
+/**
+ * This class can be used to configure a fog for the scene.
+ * Nodes of this type are assigned to `Scene.fogNode`.
+ *
+ * @param {Node} color - Defines the color of the fog.
+ * @param {Node} factor - Defines how the fog is factored in the scene.
+ */
+export const fog = Fn( ( [ color, factor ] ) => {
+
+	return vec4( color.toVec3(), factor.toFloat() );
+
+} );
+
+// Deprecated
+
+export function rangeFog( color, near, far ) { // @deprecated, r171
+
+	console.warn( 'THREE.TSL: "rangeFog( color, near, far )" is deprecated. Use "fog( color, rangeFog( near, far ) )" instead.' );
+	return fog( color, rangeFogFactor( near, far ) );
+
+}
+
+export function densityFog( color, density ) { // @deprecated, r171
+
+	console.warn( 'THREE.TSL: "densityFog( color, density )" is deprecated. Use "fog( color, densityFogFactor( density ) )" instead.' );
+	return fog( color, densityFogFactor( density ) );
+
+}

src/nodes/fog/FogExp2Node.js

@@ -1,60 +0,0 @@
-import FogNode from './FogNode.js';
-import { nodeProxy } from '../tsl/TSLBase.js';
-
-/**
- * Represents an exponential squared fog. This type of fog gives
- * a clear view near the camera and a faster than exponentially
- * densening fog farther from the camera.
- *
- * @augments FogNode
- */
-class FogExp2Node extends FogNode {
-
-	static get type() {
-
-		return 'FogExp2Node';
-
-	}
-
-	/**
-	 * Constructs a new exponential squared fog node.
-	 *
-	 * @param {Node} colorNode - Defines the color of the fog.
-	 * @param {Node} densityNode - Defines the fog density.
-	 */
-	constructor( colorNode, densityNode ) {
-
-		super( colorNode, null );
-
-		/**
-		 * This flag can be used for type testing.
-		 *
-		 * @type {Boolean}
-		 * @readonly
-		 * @default true
-		 */
-		this.isFogExp2Node = true;
-
-		/**
-		 * Defines the fog density.
-		 *
-		 * @type {Node}
-		 */
-		this.densityNode = densityNode;
-
-	}
-
-	setup( builder ) {
-
-		const viewZ = this.getViewZNode( builder );
-		const density = this.densityNode;
-
-		return density.mul( density, viewZ, viewZ ).negate().exp().oneMinus();
-
-	}
-
-}
-
-export default FogExp2Node;
-
-export const densityFog = /*@__PURE__*/ nodeProxy( FogExp2Node );

src/nodes/fog/FogNode.js

@@ -1,91 +0,0 @@
-import Node from '../core/Node.js';
-import { positionView } from '../accessors/Position.js';
-import { nodeProxy } from '../tsl/TSLBase.js';
-
-/**
- * This class can be used to configure a fog for the scene.
- * Nodes of this type are assigned to `Scene.fogNode`.
- *
- * @augments Node
- */
-class FogNode extends Node {
-
-	static get type() {
-
-		return 'FogNode';
-
-	}
-
-	/**
-	 * Constructs a new fog node.
-	 *
-	 * @param {Node} colorNode - Defines the color of the fog.
-	 * @param {Node} factorNode - Defines how the fog is factored in the scene.
-	 */
-	constructor( colorNode, factorNode ) {
-
-		super( 'float' );
-
-		/**
-		 * This flag can be used for type testing.
-		 *
-		 * @type {Boolean}
-		 * @readonly
-		 * @default true
-		 */
-		this.isFogNode = true;
-
-		/**
-		 * Defines the color of the fog.
-		 *
-		 * @type {Node?}
-		 */
-		this.colorNode = colorNode;
-
-		/**
-		 * Defines how the fog is factored in the scene.
-		 *
-		 * @type {Node?}
-		 */
-		this.factorNode = factorNode;
-
-	}
-
-	/**
-	 * Returns a node that represents the `z` coordinate in view space
-	 * for the current fragment. It's a different representation of the
-	 * default depth value.
-	 *
-	 * This value can be part of a computation that defines how the fog
-	 * density increases when moving away from the camera.
-	 *
-	 * @param {NodeBuilder} builder - The current node builder.
-	 * @return {Node} The viewZ node.
-	 */
-	getViewZNode( builder ) {
-
-		let viewZ;
-
-		const getViewZ = builder.context.getViewZ;
-
-		if ( getViewZ !== undefined ) {
-
-			viewZ = getViewZ( this );
-
-		}
-
-		return ( viewZ || positionView.z ).negate();
-
-	}
-
-	setup() {
-
-		return this.factorNode;
-
-	}
-
-}
-
-export default FogNode;
-
-export const fog = /*@__PURE__*/ nodeProxy( FogNode );

src/nodes/fog/FogRangeNode.js

@@ -1,67 +0,0 @@
-import FogNode from './FogNode.js';
-import { smoothstep } from '../math/MathNode.js';
-import { nodeProxy } from '../tsl/TSLBase.js';
-
-/**
- * Represents a range fog. The fog is smoothly interpolated
- * between a range defined via near and far values.
- *
- * @augments FogNode
- */
-class FogRangeNode extends FogNode {
-
-	static get type() {
-
-		return 'FogRangeNode';
-
-	}
-
-	/**
-	 * Constructs a new range node.
-	 *
-	 * @param {Node} colorNode - Defines the color of the fog.
-	 * @param {Node} nearNode - Defines the near value.
-	 * @param {Node} farNode - Defines the far value.
-	 */
-	constructor( colorNode, nearNode, farNode ) {
-
-		super( colorNode, null );
-
-		/**
-		 * This flag can be used for type testing.
-		 *
-		 * @type {Boolean}
-		 * @readonly
-		 * @default true
-		 */
-		this.isFogRangeNode = true;
-
-		/**
-		 * Defines the near value.
-		 *
-		 * @type {Node}
-		 */
-		this.nearNode = nearNode;
-
-		/**
-		 * Defines the far value.
-		 *
-		 * @type {Node}
-		 */
-		this.farNode = farNode;
-
-	}
-
-	setup( builder ) {
-
-		const viewZ = this.getViewZNode( builder );
-
-		return smoothstep( this.nearNode, this.farNode, viewZ );
-
-	}
-
-}
-
-export default FogRangeNode;
-
-export const rangeFog = /*@__PURE__*/ nodeProxy( FogRangeNode );

src/renderers/common/nodes/Nodes.js

@@ -3,7 +3,7 @@ import ChainMap from '../ChainMap.js';
 import NodeBuilderState from './NodeBuilderState.js';
 import { cubeMapNode } from '../../../nodes/utils/CubeMapNode.js';
 import { NodeFrame } from '../../../nodes/Nodes.js';
-import { objectGroup, renderGroup, frameGroup, cubeTexture, texture, rangeFog, densityFog, reference, pmremTexture, screenUV } from '../../../nodes/TSL.js';
+import { objectGroup, renderGroup, frameGroup, cubeTexture, texture, fog, rangeFogFactor, densityFogFactor, reference, pmremTexture, screenUV } from '../../../nodes/TSL.js';
 
 import { CubeUVReflectionMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from '../../../constants.js';
 import { hashArray } from '../../../nodes/core/NodeUtils.js';
@@ -327,37 +327,37 @@ class Nodes extends DataMap {
 	updateFog( scene ) {
 
 		const sceneData = this.get( scene );
-		const fog = scene.fog;
+		const sceneFog = scene.fog;
 
-		if ( fog ) {
+		if ( sceneFog ) {
 
-			if ( sceneData.fog !== fog ) {
+			if ( sceneData.fog !== sceneFog ) {
 
 				let fogNode = null;
 
-				if ( fog.isFogExp2 ) {
+				if ( sceneFog.isFogExp2 ) {
 
-					const color = reference( 'color', 'color', fog ).setGroup( renderGroup );
-					const density = reference( 'density', 'float', fog ).setGroup( renderGroup );
+					const color = reference( 'color', 'color', sceneFog ).setGroup( renderGroup );
+					const density = reference( 'density', 'float', sceneFog ).setGroup( renderGroup );
 
-					fogNode = densityFog( color, density );
+					fogNode = fog( color, densityFogFactor( density ) );
 
-				} else if ( fog.isFog ) {
+				} else if ( sceneFog.isFog ) {
 
-					const color = reference( 'color', 'color', fog ).setGroup( renderGroup );
-					const near = reference( 'near', 'float', fog ).setGroup( renderGroup );
-					const far = reference( 'far', 'float', fog ).setGroup( renderGroup );
+					const color = reference( 'color', 'color', sceneFog ).setGroup( renderGroup );
+					const near = reference( 'near', 'float', sceneFog ).setGroup( renderGroup );
+					const far = reference( 'far', 'float', sceneFog ).setGroup( renderGroup );
 
-					fogNode = rangeFog( color, near, far );
+					fogNode = fog( color, rangeFogFactor( near, far ) );
 
 				} else {
 
-					console.error( 'WebGPUNodes: Unsupported fog configuration.', fog );
+					console.error( 'WebGPUNodes: Unsupported fog configuration.', sceneFog );
 
 				}
 
 				sceneData.fogNode = fogNode;
-				sceneData.fog = fog;
+				sceneData.fog = sceneFog;
 
 			}