super-three 0.181.0 → 0.185.0

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

@@ -138,4 +138,4 @@ export default TransitionNode;
  * @param {Node<float> | number} useTexture - Whether `mixTextureNode` should influence the transition or not.
  * @returns {TransitionNode}
  */
-export const transition = ( nodeA, nodeB, mixTextureNode, mixRatio, threshold, useTexture ) => nodeObject( new TransitionNode( convertToTexture( nodeA ), convertToTexture( nodeB ), convertToTexture( mixTextureNode ), nodeObject( mixRatio ), nodeObject( threshold ), nodeObject( useTexture ) ) );
+export const transition = ( nodeA, nodeB, mixTextureNode, mixRatio, threshold, useTexture ) => new TransitionNode( convertToTexture( nodeA ), convertToTexture( nodeB ), convertToTexture( mixTextureNode ), nodeObject( mixRatio ), nodeObject( threshold ), nodeObject( useTexture ) );

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

@@ -0,0 +1,80 @@
+import { abs, color, float, Fn, Loop, mix, nodeObject, perspectiveDepthToViewZ, reference, textureSize, uv, vec2, vec4, viewZToOrthographicDepth, int, If, array, ivec2 } from 'three/tsl';
+
+/**
+ * Performs a depth-aware blend between a base scene and a secondary effect (like godrays).
+ * This function uses a Poisson disk sampling pattern to detect depth discontinuities
+ * in the neighborhood of the current pixel. If an edge is detected, it shifts the
+ * sampling coordinate for the blend node away from the edge to prevent light leaking/haloing.
+ *
+ * @param {Node} baseNode - The main scene/beauty pass texture node.
+ * @param {Node} blendNode - The effect to be blended (e.g., Godrays, Bloom).
+ * @param {Node} depthNode - The scene depth texture node.
+ * @param {Camera} camera - The camera used for the scene.
+ * @param {Object} [options={}] - Configuration for the blend effect.
+ * @param {Node|Color} [options.blendColor=Color(0xff0000)] - The color applied to the blend node.
+ * @param {Node<int> | number} [options.edgeRadius=2] - The search radius (in pixels) for detecting depth edges.
+ * @param {Node<float> | number} [options.edgeStrength=2] - How far to "push" the UV away from detected edges.
+ * @returns {Node<vec4>} The resulting blended color node.
+ */
+export const depthAwareBlend = /*#__PURE__*/ Fn( ( [ baseNode, blendNode, depthNode, camera, options = {} ] ) => {
+
+	const uvNode = baseNode.uvNode || uv();
+
+	const cameraNear = reference( 'near', 'float', camera );
+	const cameraFar = reference( 'far', 'float', camera );
+
+	const blendColor = nodeObject( options.blendColor ) || color( 0xffffff );
+	const edgeRadius = nodeObject( options.edgeRadius ) || int( 2 );
+	const edgeStrength = nodeObject( options.edgeStrength ) || float( 2 );
+
+	const viewZ = perspectiveDepthToViewZ( depthNode, cameraNear, cameraFar );
+	const correctDepth = viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
+
+	const pushDir = vec2( 0.0 ).toVar();
+	const count = float( 0 ).toVar();
+
+	const resolution = ivec2( textureSize( baseNode ) ).toConst();
+	const pixelStep = vec2( 1 ).div( resolution );
+
+	const poissonDisk = array( [
+		vec2( 0.493393, 0.394269 ),
+		vec2( 0.798547, 0.885922 ),
+		vec2( 0.259143, 0.650754 ),
+		vec2( 0.605322, 0.023588 ),
+		vec2( - 0.574681, 0.137452 ),
+		vec2( - 0.430397, - 0.638423 ),
+		vec2( - 0.849487, - 0.366258 ),
+		vec2( 0.170621, - 0.569941 )
+	] );
+
+	Loop( 8, ( { i } ) => {
+
+		const offset = poissonDisk.element( i ).mul( edgeRadius );
+
+		const sampleUv = uvNode.add( offset.mul( pixelStep ) );
+		const sampleDepth = depthNode.sample( sampleUv );
+
+		const sampleViewZ = perspectiveDepthToViewZ( sampleDepth, cameraNear, cameraFar );
+		const sampleLinearDepth = viewZToOrthographicDepth( sampleViewZ, cameraNear, cameraFar );
+
+		If( abs( sampleLinearDepth.sub( correctDepth ) ).lessThan( float( 0.05 ).mul( correctDepth ) ), () => {
+
+			pushDir.addAssign( offset );
+			count.addAssign( 1 );
+
+		} );
+
+	} );
+
+	count.assign( count.equal( 0 ).select( 1, count ) );
+
+	pushDir.divAssign( count ).normalize();
+
+	const sampleUv = pushDir.length().greaterThan( 0 ).select( uvNode.add( edgeStrength.mul( pushDir.div( resolution ) ) ), uvNode );
+
+	const bestChoice = blendNode.sample( sampleUv ).r;
+	const baseColor = baseNode.sample( uvNode );
+
+	return vec4( mix( baseColor, vec4( blendColor, 1 ), bestChoice ) );
+
+} );

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

@@ -0,0 +1,68 @@
+import { interleavedGradientNoise, Fn, vec2, vec4, mix, uv, Loop, premultiplyAlpha, unpremultiplyAlpha, int, float, nodeObject, convertToTexture, screenCoordinate } from 'three/tsl';
+
+/**
+ * This TSL function blurs an image in a circular pattern, radiating from a configurable center point in screen space.
+ *
+ * Radial blurs can be used for different kind of effects like producing simple faked lighting effects also known as
+ * "light shafts". The major limitation of this specific usage is the center point can only be defined in 2D so the
+ * effect does not honor the depth of 3D objects. Consequently, it is not intended for physically correct lit scenes.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec4>} textureNode - The texture node that should be blurred.
+ * @param {Object} [options={}] - Additional options for the radial blur effect.
+ * @param {Node<vec2>} [options.center=vec2(0.5, 0.5)] - The center of the light in screen uvs.
+ * @param {Node<int>} [options.weight=float(0.9)] - Base weight factor for each sample in the range `[0,1]`.
+ * @param {Node<int>} [options.decay=float(0.95)] - Decreases the weight factor so each iteration adds less to the sum. Must be in the range `[0,1]`.
+ * If you increase the sample count, you have to increase this option as well to avoid a darking effect.
+ * @param {Node<int>} [options.count=int(32)] - The number if iterations. Should be in the range `[16,64]`.
+ * @param {Node<int>} [options.exposure=float(5)] - Exposure control of the blur.
+ * @return {Node<vec4>} The blurred texture node.
+ */
+export const radialBlur = /*#__PURE__*/ Fn( ( [ textureNode, options = {} ] ) => {
+
+	textureNode = convertToTexture( textureNode );
+
+	const center = nodeObject( options.center ) || vec2( 0.5, 0.5 );
+	const weight = nodeObject( options.weight ) || float( 0.9 );
+	const decay = nodeObject( options.decay ) || float( 0.95 );
+	const count = nodeObject( options.count ) || int( 32 );
+	const exposure = nodeObject( options.exposure ) || float( 5 );
+	const premultipliedAlpha = options.premultipliedAlpha || false;
+
+	const tap = ( uv ) => {
+
+		const sample = textureNode.sample( uv );
+
+		return premultipliedAlpha ? premultiplyAlpha( sample ) : sample;
+
+	};
+
+	const sampleUv = vec2( textureNode.uvNode || uv() );
+
+	const base = tap( sampleUv ).toConst();
+	const blur = vec4().toVar();
+	const offset = center.sub( sampleUv ).div( count ).toConst();
+	const w = float( weight ).toVar();
+
+	const noise = interleavedGradientNoise( screenCoordinate );
+	sampleUv.addAssign( offset.mul( noise ) ); // mitigate banding
+
+	Loop( { start: int( 0 ), end: int( count ), type: 'int', condition: '<' }, () => {
+
+		sampleUv.addAssign( offset );
+		const sample = tap( sampleUv );
+
+		blur.addAssign( sample.mul( w ) );
+		w.mulAssign( decay );
+
+	} );
+
+	blur.divAssign( count );
+	blur.mulAssign( exposure );
+
+	const color = mix( blur, base.mul( 2 ), 0.5 );
+
+	return premultipliedAlpha ? unpremultiplyAlpha( color ) : color;
+
+} );