TSL: Improve fog approach. (mrdoob#30080)

Author: sunag

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 ) );
+
+}