@lampdotdev/lamp 0.0.0-stage → 0.36.2-nightly.16

package/Resources/WebLibraries/three/addons/tsl/display/SharpenNode.js

@@ -0,0 +1,284 @@
+import { HalfFloatType, RenderTarget, Vector2, NodeMaterial, RendererUtils, QuadMesh, Node, NodeUpdateType } from 'three/webgpu';
+import { Fn, float, vec3, vec4, ivec2, int, uv, floor, abs, max, min, exp2, nodeObject, passTexture, textureSize, textureLoad, convertToTexture, context } from 'three/tsl';
+
+const _quadMesh = /*@__PURE__*/ new QuadMesh();
+const _size = /*@__PURE__*/ new Vector2();
+
+let _rendererState;
+
+/**
+ * Post processing node for contrast-adaptive sharpening (RCAS).
+ *
+ * Reference: {@link https://gpuopen.com/fidelityfx-superresolution/}.
+ *
+ * @augments Node
+ * @three_import import { sharpen } from 'three/addons/tsl/display/SharpenNode.js';
+ */
+class SharpenNode extends Node {
+
+	static get type() {
+
+		return 'SharpenNode';
+
+	}
+
+	/**
+	 * Constructs a new sharpen node.
+	 *
+	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect.
+	 * @param {Node<float>} [sharpness=0.2] - Sharpening strength. 0 = maximum sharpening, 2 = no sharpening.
+	 * @param {Node<bool>} [denoise=false] - Whether to attenuate sharpening in noisy areas.
+	 */
+	constructor( textureNode, sharpness = 0.2, denoise = false ) {
+
+		super( 'vec4' );
+
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isSharpenNode = true;
+
+		/**
+		 * The texture node that represents the input of the effect.
+		 *
+		 * @type {TextureNode}
+		 */
+		this.textureNode = textureNode;
+
+		/**
+		 * Sharpening strength. 0 = maximum, 2 = none.
+		 *
+		 * @type {Node<float>}
+		 * @default 0.2
+		 */
+		this.sharpness = nodeObject( sharpness );
+
+		/**
+		 * Whether to attenuate sharpening in noisy areas.
+		 *
+		 * @type {Node<bool>}
+		 * @default false
+		 */
+		this.denoise = nodeObject( denoise );
+
+		/**
+		 * The render target for the sharpening pass.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
+		this._renderTarget = new RenderTarget( 1, 1, { depthBuffer: false, type: HalfFloatType } );
+		this._renderTarget.texture.name = 'SharpenNode.output';
+
+		/**
+		 * The result of the effect as a texture node.
+		 *
+		 * @private
+		 * @type {PassTextureNode}
+		 */
+		this._textureNode = passTexture( this, this._renderTarget.texture );
+
+		/**
+		 * The material for the sharpening pass.
+		 *
+		 * @private
+		 * @type {?NodeMaterial}
+		 */
+		this._material = null;
+
+		/**
+		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node renders
+		 * its effect once per frame in `updateBefore()`.
+		 *
+		 * @type {string}
+		 * @default 'frame'
+		 */
+		this.updateBeforeType = NodeUpdateType.FRAME;
+
+	}
+
+	/**
+	 * Sets the output size of the effect.
+	 *
+	 * @param {number} width - The width in pixels.
+	 * @param {number} height - The height in pixels.
+	 */
+	setSize( width, height ) {
+
+		this._renderTarget.setSize( width, height );
+
+	}
+
+	/**
+	 * This method is used to render the effect once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
+	updateBefore( frame ) {
+
+		const { renderer } = frame;
+
+		_rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
+
+		//
+
+		renderer.getDrawingBufferSize( _size );
+		this.setSize( _size.x, _size.y );
+
+		renderer.setRenderTarget( this._renderTarget );
+
+		_quadMesh.material = this._material;
+		_quadMesh.name = 'Sharpen [ RCAS ]';
+		_quadMesh.render( renderer );
+
+		//
+
+		RendererUtils.restoreRendererState( renderer, _rendererState );
+
+	}
+
+	/**
+	 * Returns the result of the effect as a texture node.
+	 *
+	 * @return {PassTextureNode} A texture node that represents the result of the effect.
+	 */
+	getTextureNode() {
+
+		return this._textureNode;
+
+	}
+
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {PassTextureNode}
+	 */
+	setup( builder ) {
+
+		const textureNode = this.textureNode;
+		const inputTex = textureNode.value;
+
+		// RCAS: Robust Contrast-Adaptive Sharpening.
+		//
+		// Ported from AMD FidelityFX FSR 1 (ffx_fsr1.h). Uses a 5-tap
+		// cross pattern (center + up/down/left/right) to compute a
+		// per-pixel sharpening weight that is automatically limited by
+		// local contrast to avoid ringing. An optional noise-attenuation
+		// factor reduces sharpening in noisy areas.
+
+		const rcas = Fn( () => {
+
+			const targetUV = uv();
+			const texSize = textureSize( textureLoad( inputTex ) );
+
+			const p = ivec2( int( floor( targetUV.x.mul( texSize.x ) ) ), int( floor( targetUV.y.mul( texSize.y ) ) ) ).toConst();
+
+			const e = textureLoad( inputTex, p );
+			const b = textureLoad( inputTex, p.add( ivec2( 0, - 1 ) ) );
+			const d = textureLoad( inputTex, p.add( ivec2( - 1, 0 ) ) );
+			const f = textureLoad( inputTex, p.add( ivec2( 1, 0 ) ) );
+			const h = textureLoad( inputTex, p.add( ivec2( 0, 1 ) ) );
+
+			// Approximate luminance (luma times 2).
+
+			const luma = ( s ) => s.g.add( s.b.add( s.r ).mul( 0.5 ) );
+
+			const bL = luma( b );
+			const dL = luma( d );
+			const eL = luma( e );
+			const fL = luma( f );
+			const hL = luma( h );
+
+			// Sharpening amount from user parameter.
+
+			const con = exp2( this.sharpness.negate() ).toConst();
+
+			// Min and max of ring.
+
+			const mn4 = min( min( b.rgb, d.rgb ), min( f.rgb, h.rgb ) ).toConst();
+			const mx4 = max( max( b.rgb, d.rgb ), max( f.rgb, h.rgb ) ).toConst();
+
+			// Compute adaptive lobe weight.
+			// Limiters based on how much sharpening the local contrast can tolerate.
+
+			const RCAS_LIMIT = float( 0.25 - 1.0 / 16.0 ).toConst();
+
+			const hitMin = min( mn4, e.rgb ).div( mx4.mul( 4.0 ) ).toConst();
+			const hitMax = vec3( 1.0 ).sub( max( mx4, e.rgb ) ).div( mn4.mul( 4.0 ).sub( 4.0 ) ).toConst();
+			const lobeRGB = max( hitMin.negate(), hitMax ).toConst();
+
+			const lobe = max(
+				RCAS_LIMIT.negate(),
+				min( max( lobeRGB.r, max( lobeRGB.g, lobeRGB.b ) ), float( 0.0 ) )
+			).mul( con ).toConst();
+
+			// Noise attenuation.
+
+			const nz = bL.add( dL ).add( fL ).add( hL ).mul( 0.25 ).sub( eL ).toConst();
+			const nzRange = max( max( bL, dL ), max( eL, max( fL, hL ) ) ).sub( min( min( bL, dL ), min( eL, min( fL, hL ) ) ) ).toConst();
+			const nzFactor = float( 1.0 ).sub( abs( nz ).div( max( nzRange, float( 1.0 / 65536.0 ) ) ).saturate().mul( 0.5 ) ).toConst();
+
+			const effectiveLobe = this.denoise.equal( true ).select( lobe.mul( nzFactor ), lobe ).toConst();
+
+			// Resolve: weighted blend of cross neighbors and center.
+
+			const result = b.rgb.add( d.rgb ).add( f.rgb ).add( h.rgb ).mul( effectiveLobe ).add( e.rgb )
+				.div( effectiveLobe.mul( 4.0 ).add( 1.0 ) ).toConst();
+
+			return vec4( result, e.a );
+
+		} );
+
+		//
+
+		const material = this._material || ( this._material = new NodeMaterial() );
+		material.contextNode = context( builder.getSharedContext() );
+		material.fragmentNode = rcas();
+		material.name = 'Sharpen_RCAS';
+		material.needsUpdate = true;
+
+		//
+
+		const properties = builder.getNodeProperties( this );
+		properties.textureNode = textureNode;
+
+		//
+
+		return this._textureNode;
+
+	}
+
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the effect is no longer required.
+	 */
+	dispose() {
+
+		super.dispose();
+
+		this._renderTarget.dispose();
+
+		if ( this._material !== null ) this._material.dispose();
+
+	}
+
+}
+
+export default SharpenNode;
+
+/**
+ * TSL function for creating a sharpen node for post processing.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec4>} node - The node that represents the input of the effect.
+ * @param {(number|Node<float>)} [sharpness=0.2] - Sharpening strength. 0 = maximum, 2 = none.
+ * @param {(boolean|Node<bool>)} [denoise=false] - Whether to attenuate sharpening in noisy areas.
+ * @returns {SharpenNode}
+ */
+export const sharpen = ( node, sharpness, denoise ) => new SharpenNode( convertToTexture( node ), sharpness, denoise );

package/Resources/WebLibraries/three/addons/tsl/display/SobelOperatorNode.js

@@ -0,0 +1,168 @@
+import { Vector2, Node, NodeUpdateType } from 'three/webgpu';
+import { Fn, uv, uniform, convertToTexture, vec2, vec3, vec4, mat3, luminance, add } from 'three/tsl';
+
+/**
+ * Post processing node for detecting edges with a sobel filter.
+ * A sobel filter should be applied after tone mapping and output color
+ * space conversion.
+ *
+ * @augments Node
+ * @three_import import { sobel } from 'three/addons/tsl/display/SobelOperatorNode.js';
+ */
+class SobelOperatorNode extends Node {
+
+	static get type() {
+
+		return 'SobelOperatorNode';
+
+	}
+
+	/**
+	 * Constructs a new sobel operator node.
+	 *
+	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect.
+	 */
+	constructor( textureNode ) {
+
+		super( 'vec4' );
+
+		/**
+		 * The texture node that represents the input of the effect.
+		 *
+		 * @type {TextureNode}
+		 */
+		this.textureNode = textureNode;
+
+		/**
+		 * The `updateBeforeType` 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;
+
+		/**
+		 * A uniform node holding the inverse resolution value.
+		 *
+		 * @private
+		 * @type {UniformNode<vec2>}
+		 */
+		this._invSize = uniform( new Vector2() );
+
+	}
+
+	/**
+	 * This method is used to update the effect's uniforms once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
+	updateBefore( /* frame */ ) {
+
+		const map = this.textureNode.value;
+
+		this._invSize.value.set( 1 / map.image.width, 1 / map.image.height );
+
+	}
+
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {ShaderCallNodeInternal}
+	 */
+	setup( /* builder */ ) {
+
+		const { textureNode } = this;
+
+		const uvNode = textureNode.uvNode || uv();
+
+		const sampleTexture = ( uv ) => textureNode.sample( uv );
+
+		const sobel = Fn( () => {
+
+			// Sobel Edge Detection (see https://youtu.be/uihBwtPIBxM)
+
+			const texel = this._invSize;
+
+			// kernel definition (in glsl matrices are filled in column-major order)
+
+			const Gx = mat3( - 1, - 2, - 1, 0, 0, 0, 1, 2, 1 ); // x direction kernel
+			const Gy = mat3( - 1, 0, 1, - 2, 0, 2, - 1, 0, 1 ); // y direction kernel
+
+			// fetch the 3x3 neighbourhood of a fragment
+
+			// first column
+
+			const tx0y0 = luminance( sampleTexture( uvNode.add( texel.mul( vec2( - 1, - 1 ) ) ) ).xyz );
+			const tx0y1 = luminance( sampleTexture( uvNode.add( texel.mul( vec2( - 1, 0 ) ) ) ).xyz );
+			const tx0y2 = luminance( sampleTexture( uvNode.add( texel.mul( vec2( - 1, 1 ) ) ) ).xyz );
+
+			// second column
+
+			const tx1y0 = luminance( sampleTexture( uvNode.add( texel.mul( vec2( 0, - 1 ) ) ) ).xyz );
+			const tx1y1 = luminance( sampleTexture( uvNode.add( texel.mul( vec2( 0, 0 ) ) ) ).xyz );
+			const tx1y2 = luminance( sampleTexture( uvNode.add( texel.mul( vec2( 0, 1 ) ) ) ).xyz );
+
+			// third column
+
+			const tx2y0 = luminance( sampleTexture( uvNode.add( texel.mul( vec2( 1, - 1 ) ) ) ).xyz );
+			const tx2y1 = luminance( sampleTexture( uvNode.add( texel.mul( vec2( 1, 0 ) ) ) ).xyz );
+			const tx2y2 = luminance( sampleTexture( uvNode.add( texel.mul( vec2( 1, 1 ) ) ) ).xyz );
+
+			// gradient value in x direction
+
+			const valueGx = add(
+				Gx[ 0 ][ 0 ].mul( tx0y0 ),
+				Gx[ 1 ][ 0 ].mul( tx1y0 ),
+				Gx[ 2 ][ 0 ].mul( tx2y0 ),
+				Gx[ 0 ][ 1 ].mul( tx0y1 ),
+				Gx[ 1 ][ 1 ].mul( tx1y1 ),
+				Gx[ 2 ][ 1 ].mul( tx2y1 ),
+				Gx[ 0 ][ 2 ].mul( tx0y2 ),
+				Gx[ 1 ][ 2 ].mul( tx1y2 ),
+				Gx[ 2 ][ 2 ].mul( tx2y2 )
+			);
+
+
+			// gradient value in y direction
+
+			const valueGy = add(
+				Gy[ 0 ][ 0 ].mul( tx0y0 ),
+				Gy[ 1 ][ 0 ].mul( tx1y0 ),
+				Gy[ 2 ][ 0 ].mul( tx2y0 ),
+				Gy[ 0 ][ 1 ].mul( tx0y1 ),
+				Gy[ 1 ][ 1 ].mul( tx1y1 ),
+				Gy[ 2 ][ 1 ].mul( tx2y1 ),
+				Gy[ 0 ][ 2 ].mul( tx0y2 ),
+				Gy[ 1 ][ 2 ].mul( tx1y2 ),
+				Gy[ 2 ][ 2 ].mul( tx2y2 )
+			);
+
+			// magnitude of the total gradient
+
+			const G = valueGx.mul( valueGx ).add( valueGy.mul( valueGy ) ).sqrt();
+
+			return vec4( vec3( G ), 1 );
+
+		} );
+
+		const outputNode = sobel();
+
+		return outputNode;
+
+	}
+
+}
+
+export default SobelOperatorNode;
+
+/**
+ * TSL function for creating a sobel operator node which performs edge detection with a sobel filter.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec4>} node - The node that represents the input of the effect.
+ * @returns {SobelOperatorNode}
+ */
+export const sobel = ( node ) => new SobelOperatorNode( convertToTexture( node ) );

package/Resources/WebLibraries/three/addons/tsl/display/StereoCompositePassNode.js

@@ -0,0 +1,190 @@
+import { RenderTarget, StereoCamera, HalfFloatType, LinearFilter, NearestFilter, Vector2, PassNode, QuadMesh, RendererUtils } from 'three/webgpu';
+import { texture } from 'three/tsl';
+
+const _size = /*@__PURE__*/ new Vector2();
+const _quadMesh = /*@__PURE__*/ new QuadMesh();
+
+let _rendererState;
+
+/**
+ * A special (abstract) render pass node that renders the scene
+ * as a stereoscopic image. Unlike {@link StereoPassNode}, this
+ * node merges the image for the left and right eye
+ * into a single one. That is required for effects like
+ * anaglyph or parallax barrier.
+ *
+ * @abstract
+ * @augments PassNode
+ * @three_import import { StereoCompositePassNode } from 'three/addons/tsl/display/StereoCompositePassNode.js';
+ */
+class StereoCompositePassNode extends PassNode {
+
+	static get type() {
+
+		return 'StereoCompositePassNode';
+
+	}
+
+	/**
+	 * Constructs a new stereo composite pass node.
+	 *
+	 * @param {Scene} scene - The scene to render.
+	 * @param {Camera} camera - The camera to render the scene with.
+	 */
+	constructor( scene, camera ) {
+
+		super( PassNode.COLOR, scene, camera );
+
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isStereoCompositePassNode = true;
+
+		/**
+		 * The internal stereo camera that is used to render the scene.
+		 *
+		 * @type {StereoCamera}
+		 */
+		this.stereo = new StereoCamera();
+
+		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, type: HalfFloatType };
+
+		/**
+		 * The render target for rendering the left eye's view.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
+		this._renderTargetL = new RenderTarget( 1, 1, _params );
+
+		/**
+		 * The render target for rendering the right eye's view.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
+		this._renderTargetR = new RenderTarget( 1, 1, _params );
+
+		/**
+		 * A texture node representing the left's eye view.
+		 *
+		 * @private
+		 * @type {TextureNode}
+		 */
+		this._mapLeft = texture( this._renderTargetL.texture );
+
+		/**
+		 * A texture node representing the right's eye view.
+		 *
+		 * @private
+		 * @type {TextureNode}
+		 */
+		this._mapRight = texture( this._renderTargetR.texture );
+
+		/**
+		 * The node material that implements the composite. All
+		 * derived effect passes must provide an instance for rendering.
+		 *
+		 * @private
+		 * @type {?NodeMaterial}
+		 * @default null
+		 */
+		this._material = null;
+
+	}
+
+	/**
+	 * Updates the internal stereo camera.
+	 *
+	 * @param {number} coordinateSystem - The current coordinate system.
+	 */
+	updateStereoCamera( coordinateSystem ) {
+
+		this.stereo.cameraL.coordinateSystem = coordinateSystem;
+		this.stereo.cameraR.coordinateSystem = coordinateSystem;
+		this.stereo.update( this.camera );
+
+	}
+
+	/**
+	 * Sets the size of the pass.
+	 *
+	 * @param {number} width - The width of the pass.
+	 * @param {number} height - The height of the pass.
+	 */
+	setSize( width, height ) {
+
+		super.setSize( width, height );
+
+		this._renderTargetL.setSize( this.renderTarget.width, this.renderTarget.height );
+		this._renderTargetR.setSize( this.renderTarget.width, this.renderTarget.height );
+
+	}
+
+	/**
+	 * This method is used to render the effect once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
+	updateBefore( frame ) {
+
+		const { renderer } = frame;
+		const { scene, stereo, renderTarget } = this;
+
+		_rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
+
+		//
+
+		this.updateStereoCamera( renderer.coordinateSystem );
+
+		const size = renderer.getDrawingBufferSize( _size );
+		this.setSize( size.width, size.height );
+
+		// left
+
+		renderer.setRenderTarget( this._renderTargetL );
+		renderer.render( scene, stereo.cameraL );
+
+		// right
+
+		renderer.setRenderTarget( this._renderTargetR );
+		renderer.render( scene, stereo.cameraR );
+
+		// composite
+
+		renderer.setRenderTarget( renderTarget );
+		_quadMesh.material = this._material;
+		_quadMesh.render( renderer );
+
+		// restore
+
+		RendererUtils.restoreRendererState( renderer, _rendererState );
+
+	}
+
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the pass is no longer required.
+	 */
+	dispose() {
+
+		super.dispose();
+
+		this._renderTargetL.dispose();
+		this._renderTargetR.dispose();
+
+		if ( this._material !== null ) {
+
+			this._material.dispose();
+
+		}
+
+	}
+
+}
+
+export default StereoCompositePassNode;