[pull] dev from mrdoob:dev

examples/files.json

@@ -443,6 +443,7 @@
 		"webgpu_postprocessing_difference",
 		"webgpu_postprocessing_dof",
 		"webgpu_postprocessing_dof_basic",
+		"webgpu_postprocessing_fog",
 		"webgpu_postprocessing_fxaa",
 		"webgpu_postprocessing_godrays",
 		"webgpu_postprocessing_lensflare",

examples/jsm/tsl/display/GaussianBlurNode.js

@@ -1,5 +1,5 @@
-import { RenderTarget, Vector2, NodeMaterial, RendererUtils, QuadMesh, TempNode, NodeUpdateType } from 'three/webgpu';
-import { Fn, float, uv, uniform, convertToTexture, vec2, vec4, passTexture, premultiplyAlpha, unpremultiplyAlpha, context } from 'three/tsl';
+import { RenderTarget, Vector2, NodeMaterial, RendererUtils, QuadMesh, TempNode, NodeUpdateType, warnOnce } from 'three/webgpu';
+import { Fn, float, uv, uniform, convertToTexture, vec2, vec4, passTexture, premultiplyAlpha, unpremultiplyAlpha, context, texture } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 
@@ -62,15 +62,6 @@ class GaussianBlurNode extends TempNode {
 		 */
 		this._invSize = uniform( new Vector2() );
 
-		/**
-		 * Gaussian blur is applied in two passes (horizontal, vertical).
-		 * This node controls the direction of each pass.
-		 *
-		 * @private
-		 * @type {UniformNode<vec2>}
-		 */
-		this._passDirection = uniform( new Vector2() );
-
 		/**
 		 * The render target used for the horizontal pass.
 		 *
@@ -104,7 +95,15 @@ class GaussianBlurNode extends TempNode {
 		 * @private
 		 * @type {?NodeMaterial}
 		 */
-		this._material = null;
+		this._hMaterial = null;
+
+		/**
+		 * The material for the vertical pass.
+		 *
+		 * @private
+		 * @type {?NodeMaterial}
+		 */
+		this._vMaterial = null;
 
 		/**
 		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node renders
@@ -173,12 +172,9 @@ class GaussianBlurNode extends TempNode {
 
 		//
 
-		const textureNode = this.textureNode;
-		const map = textureNode.value;
+		const map = this.textureNode.value;
 
-		const currentTexture = textureNode.value;
-
-		_quadMesh.material = this._material;
+		_quadMesh.material = this._hMaterial;
 
 		this.setSize( map.image.width, map.image.height );
 
@@ -191,25 +187,20 @@ class GaussianBlurNode extends TempNode {
 
 		renderer.setRenderTarget( this._horizontalRT );
 
-		this._passDirection.value.set( 1, 0 );
-
 		_quadMesh.name = 'Gaussian Blur [ Horizontal Pass ]';
 		_quadMesh.render( renderer );
 
 		// vertical
 
-		textureNode.value = this._horizontalRT.texture;
-		renderer.setRenderTarget( this._verticalRT );
+		_quadMesh.material = this._vMaterial;
 
-		this._passDirection.value.set( 0, 1 );
+		renderer.setRenderTarget( this._verticalRT );
 
 		_quadMesh.name = 'Gaussian Blur [ Vertical Pass ]';
 		_quadMesh.render( renderer );
 
 		// restore
 
-		textureNode.value = currentTexture;
-
 		RendererUtils.restoreRendererState( renderer, _rendererState );
 
 	}
@@ -233,36 +224,32 @@ class GaussianBlurNode extends TempNode {
 	 */
 	setup( builder ) {
 
-		const textureNode = this.textureNode;
-
-		//
-
 		const uvNode = uv();
 		const directionNode = vec2( this.directionNode || 1 );
 
-		let sampleTexture, output;
+		const blur = Fn( ( [ textureNode, passDirection ] ) => {
 
-		if ( this.premultipliedAlpha ) {
+			let sampleTexture, output;
 
-			// https://lisyarus.github.io/blog/posts/blur-coefficients-generator.html
+			if ( this.premultipliedAlpha ) {
 
-			sampleTexture = ( uv ) => premultiplyAlpha( textureNode.sample( uv ) );
-			output = ( color ) => unpremultiplyAlpha( color );
+				// https://lisyarus.github.io/blog/posts/blur-coefficients-generator.html
 
-		} else {
+				sampleTexture = ( uv ) => premultiplyAlpha( textureNode.sample( uv ) );
+				output = ( color ) => unpremultiplyAlpha( color );
 
-			sampleTexture = ( uv ) => textureNode.sample( uv );
-			output = ( color ) => color;
+			} else {
 
-		}
+				sampleTexture = ( uv ) => textureNode.sample( uv );
+				output = ( color ) => color;
 
-		const blur = Fn( () => {
+			}
 
 			const kernelSize = 3 + ( 2 * this.sigma );
 			const gaussianCoefficients = this._getCoefficients( kernelSize );
 
 			const invSize = this._invSize;
-			const direction = directionNode.mul( this._passDirection );
+			const direction = directionNode.mul( passDirection );
 
 			const diffuseSum = vec4( sampleTexture( uvNode ).mul( gaussianCoefficients[ 0 ] ) ).toVar();
 
@@ -286,16 +273,26 @@ class GaussianBlurNode extends TempNode {
 
 		//
 
-		const material = this._material || ( this._material = new NodeMaterial() );
-		material.contextNode = context( builder.getSharedContext() );
-		material.fragmentNode = blur();
-		material.name = 'Gaussian_blur';
-		material.needsUpdate = true;
+		const hTextureNode = this.textureNode;
+
+		this._hMaterial = this._hMaterial || ( new NodeMaterial() );
+		this._hMaterial.contextNode = context( builder.getSharedContext() );
+		this._hMaterial.fragmentNode = blur( hTextureNode, vec2( 1, 0 ) );
+		this._hMaterial.name = 'Gaussian_blur_horizontal';
+		this._hMaterial.needsUpdate = true;
+
+		const vTextureNode = texture( this._horizontalRT.texture, uv() );
+
+		this._vMaterial = this._vMaterial || new NodeMaterial();
+		this._vMaterial.fragmentNode = blur( vTextureNode, vec2( 0, 1 ) );
+		this._vMaterial.name = 'Gaussian_blur_vertical';
+		this._vMaterial.needsUpdate = true;
 
 		//
 
 		const properties = builder.getNodeProperties( this );
-		properties.textureNode = textureNode;
+		properties.hTextureNode = hTextureNode;
+		properties.vTextureNode = vTextureNode;
 
 		//
 
@@ -312,7 +309,17 @@ class GaussianBlurNode extends TempNode {
 		this._horizontalRT.dispose();
 		this._verticalRT.dispose();
 
-		if ( this._material !== null ) this._material.dispose();
+		if ( this._hMaterial !== null ) {
+
+			this._hMaterial.dispose();
+			this._vMaterial.dispose();
+
+			this._hMaterial = null;
+			this._vMaterial = null;
+
+		}
+
+		super.dispose();
 
 	}
 
@@ -328,13 +335,18 @@ class GaussianBlurNode extends TempNode {
 		const coefficients = [];
 		const sigma = kernelRadius / 3;
 
-		for ( let i = 0; i < kernelRadius; i ++ ) {
+		let sum = 1;
+		coefficients.push( 1 );
+
+		for ( let i = 1; i < kernelRadius; i ++ ) {
 
-			coefficients.push( 0.39894 * Math.exp( - 0.5 * i * i / ( sigma * sigma ) ) / sigma );
+			const w = Math.exp( - 0.5 * i * i / ( sigma * sigma ) );
+			coefficients.push( w );
+			sum += 2 * w;
 
 		}
 
-		return coefficients;
+		return coefficients.map( c => c / sum );
 
 	}
 
@@ -347,15 +359,15 @@ class GaussianBlurNode extends TempNode {
 	 */
 	get resolution() {
 
-		console.warn( 'THREE.GaussianBlurNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
+		warnOnce( 'THREE.GaussianBlurNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
 
 		return new Vector2( this.resolutionScale, this.resolutionScale );
 
 	}
 
 	set resolution( value ) {
 
-		console.warn( 'THREE.GaussianBlurNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
+		warnOnce( 'THREE.GaussianBlurNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
 
 		this.resolutionScale = value.x;
 
@@ -385,15 +397,15 @@ export const gaussianBlur = ( node, directionNode, sigma, options = {} ) => new
  *
  * @tsl
  * @function
- * @deprecated  since r180. Use `gaussianBlur()` with `premultipliedAlpha: true` option instead.
+ * @deprecated since r180. Use `gaussianBlur()` with `premultipliedAlpha: true` option instead.
  * @param {Node<vec4>} node - The node that represents the input of the effect.
  * @param {Node<vec2|float>} directionNode - Defines the direction and radius of the blur.
  * @param {number} sigma - Controls the kernel of the blur filter. Higher values mean a wider blur radius.
  * @returns {GaussianBlurNode}
  */
 export function premultipliedGaussianBlur( node, directionNode, sigma ) {
 
-	console.warn( 'THREE.TSL: "premultipliedGaussianBlur()" is deprecated. Use "gaussianBlur()" with "premultipliedAlpha: true" option instead.' ); // deprecated, r180
+	warnOnce( 'THREE.TSL: "premultipliedGaussianBlur()" is deprecated. Use "gaussianBlur()" with "premultipliedAlpha: true" option instead.' ); // @deprecated r180
 
 	return gaussianBlur( node, directionNode, sigma, { premultipliedAlpha: true } );
 

examples/tags.json

@@ -30,8 +30,8 @@
 	"webgl_geometries": [ "geometry" ],
 	"webgl_geometry_colors_lookuptable": [ "vertex" ],
 	"webgl_geometry_csg": [ "community", "csg", "bvh", "constructive", "solid", "geometry", "games", "level" ],
-	"webgpu_geometry_loft": [ "sweep", "skin", "sections", "surface", "tsl", "procedural" ],
-	"webgpu_gaussian_splat": [ "splatting", "point cloud", "loader", "compute", "tsl" ],
+	"webgpu_geometry_loft": [ "sweep", "skin", "sections", "surface", "procedural" ],
+	"webgpu_gaussian_splat": [ "splatting", "point cloud", "loader", "compute" ],
 	"webgl_geometry_nurbs": [ "curve", "surface" ],
 	"webgl_geometry_spline_editor": [ "curve" ],
 	"webgl_geometry_terrain": [ "fog" ],
@@ -178,5 +178,6 @@
 	"webgpu_ocean": [ "water" ],
 	"webgpu_video_frame": [ "webcodecs" ],
 	"webgpu_shadowmap_array": [ "tile" ],
-	"webgpu_shadow_contact": [ "shadow", "soft", "tsl" ]
+	"webgpu_shadow_contact": [ "shadow", "soft" ],
+	"webgpu_postprocessing_fog": [ "fog", "volumetric", "jbu", "gaussian", "raymarching" ]
 }