super-three 0.181.0 → 0.185.0

package/examples/jsm/tsl/display/OutlineNode.js

@@ -1,5 +1,5 @@
-import { DepthTexture, FloatType, RenderTarget, Vector2, TempNode, QuadMesh, NodeMaterial, RendererUtils, NodeUpdateType } from 'three/webgpu';
-import { Loop, int, exp, min, float, mul, uv, vec2, vec3, Fn, textureSize, orthographicDepthToViewZ, screenUV, nodeObject, uniform, vec4, passTexture, texture, perspectiveDepthToViewZ, positionView, reference } from 'three/tsl';
+import { DepthTexture, FloatType, RenderTarget, Vector2, TempNode, QuadMesh, NodeMaterial, SpriteNodeMaterial, RendererUtils, NodeUpdateType } from 'three/webgpu';
+import { Loop, int, exp, min, float, mul, uv, vec2, vec3, Fn, textureSize, orthographicDepthToViewZ, screenUV, nodeObject, uniform, vec4, passTexture, texture, perspectiveDepthToViewZ, positionView, reference, color } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -13,7 +13,7 @@ let _rendererState;
  * gives you great flexibility in composing the final outline look depending on
  * your requirements.
  * ```js
- * const postProcessing = new THREE.PostProcessing( renderer );
+ * const renderPipeline = new THREE.RenderPipeline( renderer );
  *
  * const scenePass = pass( scene, camera );
  *
@@ -36,7 +36,7 @@ let _rendererState;
  * const { visibleEdge, hiddenEdge } = outlinePass;
  * const outlineColor = visibleEdge.mul( visibleEdgeColor ).add( hiddenEdge.mul( hiddenEdgeColor ) ).mul( edgeStrength );
  *
- * postProcessing.outputNode = outlineColor.add( scenePass );
+ * renderPipeline.outputNode = outlineColor.add( scenePass );
  * ```
  *
  * @augments TempNode
@@ -293,9 +293,13 @@ class OutlineNode extends TempNode {
 		 * @type {NodeMaterial}
 		 */
 		this._depthMaterial = new NodeMaterial();
-		this._depthMaterial.fragmentNode = vec4( 0, 0, 0, 1 );
+		this._depthMaterial.colorNode = color( 0, 0, 0 );
 		this._depthMaterial.name = 'OutlineNode.depth';
 
+		this._depthSpriteMaterial = new SpriteNodeMaterial();
+		this._depthSpriteMaterial.colorNode = color( 0, 0, 0 );
+		this._depthSpriteMaterial.name = 'OutlineNode.depthSprite';
+
 		/**
 		 * The material for preparing the mask.
 		 *
@@ -305,6 +309,9 @@ class OutlineNode extends TempNode {
 		this._prepareMaskMaterial = new NodeMaterial();
 		this._prepareMaskMaterial.name = 'OutlineNode.prepareMask';
 
+		this._prepareMaskSpriteMaterial = new SpriteNodeMaterial();
+		this._prepareMaskSpriteMaterial.name = 'OutlineNode.prepareMaskSprite';
+
 		/**
 		 * The copy material
 		 *
@@ -358,6 +365,17 @@ class OutlineNode extends TempNode {
 		 */
 		this._selectionCache = new Set();
 
+		/**
+		 * The number of selected objects from the previous frame. Used to detect
+		 * the transition to an empty selection so the composite render target can
+		 * be cleared once and avoid leaving a stale outline on screen.
+		 *
+		 * @private
+		 * @type {number}
+		 * @default 0
+		 */
+		this._lastSelectionCount = 0;
+
 		/**
 		 * The result of the effect is represented as a separate texture node.
 		 *
@@ -442,6 +460,35 @@ class OutlineNode extends TempNode {
 		const { renderer } = frame;
 		const { camera, scene } = this;
 
+		this._updateSelectionCache();
+
+		// If no objects are selected, all subsequent passes can be skipped since
+		// the outline would be empty anyway. The composite render target is cleared
+		// once when transitioning to an empty selection so a previously rendered
+		// outline does not linger on screen.
+
+		if ( this._selectionCache.size === 0 ) {
+
+			if ( this._lastSelectionCount > 0 ) {
+
+				_rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
+
+				renderer.setRenderTarget( this._renderTargetComposite );
+				renderer.setClearColor( 0x000000, 0 );
+				renderer.clear();
+
+				RendererUtils.restoreRendererState( renderer, _rendererState );
+
+				this._lastSelectionCount = 0;
+
+			}
+
+			return;
+
+		}
+
+		this._lastSelectionCount = this._selectionCache.size;
+
 		_rendererState = RendererUtils.resetRendererAndSceneState( renderer, scene, _rendererState );
 
 		//
@@ -453,20 +500,18 @@ class OutlineNode extends TempNode {
 
 		renderer.setClearColor( 0xffffff, 1 );
 
-		this._updateSelectionCache();
-
 		const currentSceneName = scene.name;
 
 		// 1. Draw non-selected objects in the depth buffer
 
-		scene.overrideMaterial = this._depthMaterial;
-
 		renderer.setRenderTarget( this._renderTargetDepthBuffer );
-		renderer.setRenderObjectFunction( ( object, ...params ) => {
+		renderer.setRenderObjectFunction( ( object, scene, camera, geometry, material, group, lightsNode, clippingContext ) => {
 
 			if ( this._selectionCache.has( object ) === false ) {
 
-				renderer.renderObject( object, ...params );
+				const overrideMaterial = object.isSprite ? this._depthSpriteMaterial : this._depthMaterial;
+
+				renderer.renderObject( object, scene, camera, geometry, overrideMaterial, group, lightsNode, clippingContext );
 
 			}
 
@@ -477,14 +522,14 @@ class OutlineNode extends TempNode {
 
 		// 2. Draw only the selected objects by comparing the depth buffer of non-selected objects
 
-		scene.overrideMaterial = this._prepareMaskMaterial;
-
 		renderer.setRenderTarget( this._renderTargetMaskBuffer );
-		renderer.setRenderObjectFunction( ( object, ...params ) => {
+		renderer.setRenderObjectFunction( ( object, scene, camera, geometry, material, group, lightsNode, clippingContext ) => {
 
 			if ( this._selectionCache.has( object ) === true ) {
 
-				renderer.renderObject( object, ...params );
+				const overrideMaterial = object.isSprite ? this._prepareMaskSpriteMaterial : this._prepareMaskMaterial;
+
+				renderer.renderObject( object, scene, camera, geometry, overrideMaterial, group, lightsNode, clippingContext );
 
 			}
 
@@ -587,13 +632,16 @@ class OutlineNode extends TempNode {
 			}
 
 			const depthTest = positionView.z.lessThanEqual( viewZNode ).select( 1, 0 );
-			return vec4( 0.0, depthTest, 1.0, 1.0 );
+			return vec3( 0.0, depthTest, 1.0 );
 
 		};
 
-		this._prepareMaskMaterial.fragmentNode = prepareMask();
+		this._prepareMaskMaterial.colorNode = prepareMask();
 		this._prepareMaskMaterial.needsUpdate = true;
 
+		this._prepareMaskSpriteMaterial.colorNode = prepareMask();
+		this._prepareMaskSpriteMaterial.needsUpdate = true;
+
 		// copy material
 
 		this._materialCopy.fragmentNode = this._maskTextureUniform;
@@ -712,7 +760,9 @@ class OutlineNode extends TempNode {
 		this._renderTargetComposite.dispose();
 
 		this._depthMaterial.dispose();
+		this._depthSpriteMaterial.dispose();
 		this._prepareMaskMaterial.dispose();
+		this._prepareMaskSpriteMaterial.dispose();
 		this._materialCopy.dispose();
 		this._edgeDetectionMaterial.dispose();
 		this._separableBlurMaterial.dispose();
@@ -733,7 +783,7 @@ class OutlineNode extends TempNode {
 			const selectedObject = this.selectedObjects[ i ];
 			selectedObject.traverse( ( object ) => {
 
-				if ( object.isMesh ) this._selectionCache.add( object );
+				if ( object.isMesh || object.isSprite ) this._selectionCache.add( object );
 
 			} );
 
@@ -759,4 +809,4 @@ export default OutlineNode;
  * @param {number} [params.downSampleRatio=2] - The downsample ratio.
  * @returns {OutlineNode}
  */
-export const outline = ( scene, camera, params ) => nodeObject( new OutlineNode( scene, camera, params ) );
+export const outline = ( scene, camera, params ) => new OutlineNode( scene, camera, params );

package/examples/jsm/tsl/display/ParallaxBarrierPassNode.js

@@ -1,5 +1,5 @@
 import { NodeMaterial } from 'three/webgpu';
-import { nodeObject, Fn, vec4, uv, If, mod, screenCoordinate } from 'three/tsl';
+import { Fn, vec4, uv, If, mod, screenCoordinate } from 'three/tsl';
 import StereoCompositePassNode from './StereoCompositePassNode.js';
 
 /**
@@ -86,4 +86,4 @@ export default ParallaxBarrierPassNode;
  * @param {Camera} camera - The camera to render the scene with.
  * @returns {ParallaxBarrierPassNode}
  */
-export const parallaxBarrierPass = ( scene, camera ) => nodeObject( new ParallaxBarrierPassNode( scene, camera ) );
+export const parallaxBarrierPass = ( scene, camera ) => new ParallaxBarrierPassNode( scene, camera );

package/examples/jsm/tsl/display/PixelationPassNode.js

@@ -1,5 +1,5 @@
 import { NearestFilter, Vector4, TempNode, NodeUpdateType, PassNode } from 'three/webgpu';
-import { nodeObject, Fn, float, uv, uniform, convertToTexture, vec2, vec3, clamp, floor, dot, smoothstep, If, sign, step, mrt, output, normalView, property } from 'three/tsl';
+import { nodeObject, Fn, float, uv, uniform, convertToTexture, vec2, vec3, clamp, floor, dot, smoothstep, If, sign, step, mrt, output, normalView, property, vec4 } from 'three/tsl';
 
 /**
  * A inner node definition that implements the actual pixelation TSL code.
@@ -74,18 +74,19 @@ class PixelationNode extends TempNode {
 		/**
 		 * Uniform node that represents the resolution.
 		 *
+		 * @private
 		 * @type {Node<vec4>}
 		 */
 		this._resolution = uniform( new Vector4() );
 
 		/**
-		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node updates
+		 * The `updateType` is set to `NodeUpdateType.FRAME` since the node updates
 		 * its internal uniforms once per frame in `updateBefore()`.
 		 *
 		 * @type {string}
 		 * @default 'frame'
 		 */
-		this.updateBeforeType = NodeUpdateType.FRAME;
+		this.updateType = NodeUpdateType.FRAME;
 
 	}
 
@@ -94,7 +95,7 @@ class PixelationNode extends TempNode {
 	 *
 	 * @param {NodeFrame} frame - The current node frame.
 	 */
-	updateBefore() {
+	update() {
 
 		const map = this.textureNode.value;
 
@@ -193,7 +194,7 @@ class PixelationNode extends TempNode {
 
 			const nei = property( 'float', 'nei' );
 
-			If( this.normalEdgeStrength.greaterThan( 0.0 ), () => {
+			If( this.normalEdgeStrength.greaterThan( 0.0 ).and( normal.length().greaterThan( 0 ) ), () => {
 
 				nei.assign( normalEdgeIndicator( depth, normal ) );
 
@@ -201,7 +202,7 @@ class PixelationNode extends TempNode {
 
 			const strength = dei.greaterThan( 0 ).select( float( 1.0 ).sub( dei.mul( this.depthEdgeStrength ) ), nei.mul( this.normalEdgeStrength ).add( 1 ) );
 
-			return texel.mul( strength );
+			return vec4( texel.mul( strength ).rgb, texel.a );
 
 		} );
 
@@ -213,7 +214,7 @@ class PixelationNode extends TempNode {
 
 }
 
-const pixelation = ( node, depthNode, normalNode, pixelSize = 6, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) => nodeObject( new PixelationNode( convertToTexture( node ), convertToTexture( depthNode ), convertToTexture( normalNode ), nodeObject( pixelSize ), nodeObject( normalEdgeStrength ), nodeObject( depthEdgeStrength ) ) );
+const pixelation = ( node, depthNode, normalNode, pixelSize = 6, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) => new PixelationNode( convertToTexture( node ), convertToTexture( depthNode ), convertToTexture( normalNode ), nodeObject( pixelSize ), nodeObject( normalEdgeStrength ), nodeObject( depthEdgeStrength ) );
 
 /**
  * A special render pass node that renders the scene with a pixelation effect.
@@ -329,6 +330,6 @@ class PixelationPassNode extends PassNode {
  * @param {Node<float> | number} [depthEdgeStrength=0.4] - The depth edge strength.
  * @returns {PixelationPassNode}
  */
-export const pixelationPass = ( scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength ) => nodeObject( new PixelationPassNode( scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength ) );
+export const pixelationPass = ( scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength ) => new PixelationPassNode( scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength );
 
 export default PixelationPassNode;

package/examples/jsm/tsl/display/RGBShiftNode.js

@@ -1,5 +1,5 @@
 import { TempNode } from 'three/webgpu';
-import { nodeObject, Fn, uv, uniform, vec2, sin, cos, vec4, convertToTexture } from 'three/tsl';
+import { Fn, uv, uniform, vec2, sin, cos, vec4, convertToTexture } from 'three/tsl';
 
 /**
  * Post processing node for shifting/splitting RGB color channels. The effect
@@ -93,4 +93,4 @@ export default RGBShiftNode;
  * @param {number} [angle=0] - Defines in which direction colors are shifted.
  * @returns {RGBShiftNode}
  */
-export const rgbShift = ( node, amount, angle ) => nodeObject( new RGBShiftNode( convertToTexture( node ), amount, angle ) );
+export const rgbShift = ( node, amount, angle ) => new RGBShiftNode( convertToTexture( node ), amount, angle );