super-three 0.171.0 → 0.173.0

package/examples/jsm/postprocessing/OutlinePass.js

@@ -81,10 +81,10 @@ class OutlinePass extends Pass {
 		const MAX_EDGE_THICKNESS = 4;
 		const MAX_EDGE_GLOW = 4;
 
-		this.separableBlurMaterial1 = this.getSeperableBlurMaterial( MAX_EDGE_THICKNESS );
+		this.separableBlurMaterial1 = this.getSeparableBlurMaterial( MAX_EDGE_THICKNESS );
 		this.separableBlurMaterial1.uniforms[ 'texSize' ].value.set( resx, resy );
 		this.separableBlurMaterial1.uniforms[ 'kernelRadius' ].value = 1;
-		this.separableBlurMaterial2 = this.getSeperableBlurMaterial( MAX_EDGE_GLOW );
+		this.separableBlurMaterial2 = this.getSeparableBlurMaterial( MAX_EDGE_GLOW );
 		this.separableBlurMaterial2.uniforms[ 'texSize' ].value.set( Math.round( resx / 2 ), Math.round( resy / 2 ) );
 		this.separableBlurMaterial2.uniforms[ 'kernelRadius' ].value = MAX_EDGE_GLOW;
 
@@ -241,7 +241,7 @@ class OutlinePass extends Pass {
 
 			} else if ( object.isPoints || object.isLine ) {
 
-				// the visibilty of points and lines is always set to false in order to
+				// the visibility of points and lines is always set to false in order to
 				// not affect the outline computation
 
 				if ( bVisible === true ) {
@@ -521,7 +521,7 @@ class OutlinePass extends Pass {
 
 	}
 
-	getSeperableBlurMaterial( maxRadius ) {
+	getSeparableBlurMaterial( maxRadius ) {
 
 		return new ShaderMaterial( {
 

package/examples/jsm/postprocessing/OutputPass.js

@@ -8,6 +8,7 @@ import {
 	AgXToneMapping,
 	ACESFilmicToneMapping,
 	NeutralToneMapping,
+	CustomToneMapping,
 	SRGBTransfer
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
@@ -63,6 +64,7 @@ class OutputPass extends Pass {
 			else if ( this._toneMapping === ACESFilmicToneMapping ) this.material.defines.ACES_FILMIC_TONE_MAPPING = '';
 			else if ( this._toneMapping === AgXToneMapping ) this.material.defines.AGX_TONE_MAPPING = '';
 			else if ( this._toneMapping === NeutralToneMapping ) this.material.defines.NEUTRAL_TONE_MAPPING = '';
+			else if ( this._toneMapping === CustomToneMapping ) this.material.defines.CUSTOM_TONE_MAPPING = '';
 
 			this.material.needsUpdate = true;
 

package/examples/jsm/postprocessing/SAOPass.js

@@ -19,8 +19,7 @@ import {
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
 import { SAOShader } from '../shaders/SAOShader.js';
-import { DepthLimitedBlurShader } from '../shaders/DepthLimitedBlurShader.js';
-import { BlurShaderUtils } from '../shaders/DepthLimitedBlurShader.js';
+import { BlurShaderUtils, DepthLimitedBlurShader } from '../shaders/DepthLimitedBlurShader.js';
 import { CopyShader } from '../shaders/CopyShader.js';
 
 /**

package/examples/jsm/postprocessing/SMAAPass.js

@@ -8,9 +8,7 @@ import {
 	WebGLRenderTarget
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
-import { SMAAEdgesShader } from '../shaders/SMAAShader.js';
-import { SMAAWeightsShader } from '../shaders/SMAAShader.js';
-import { SMAABlendShader } from '../shaders/SMAAShader.js';
+import { SMAABlendShader, SMAAEdgesShader, SMAAWeightsShader } from '../shaders/SMAAShader.js';
 
 class SMAAPass extends Pass {
 

package/examples/jsm/postprocessing/SSAOPass.js

@@ -24,9 +24,7 @@ import {
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
 import { SimplexNoise } from '../math/SimplexNoise.js';
-import { SSAOShader } from '../shaders/SSAOShader.js';
-import { SSAOBlurShader } from '../shaders/SSAOShader.js';
-import { SSAODepthShader } from '../shaders/SSAOShader.js';
+import { SSAOBlurShader, SSAODepthShader, SSAOShader } from '../shaders/SSAOShader.js';
 import { CopyShader } from '../shaders/CopyShader.js';
 
 class SSAOPass extends Pass {
@@ -169,7 +167,7 @@ class SSAOPass extends Pass {
 		this.copyMaterial.dispose();
 		this.depthRenderMaterial.dispose();
 
-		// dipsose full screen quad
+		// dispose full screen quad
 
 		this.fsQuad.dispose();
 

package/examples/jsm/postprocessing/SSRPass.js

@@ -16,9 +16,7 @@ import {
 	HalfFloatType,
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
-import { SSRShader } from '../shaders/SSRShader.js';
-import { SSRBlurShader } from '../shaders/SSRShader.js';
-import { SSRDepthShader } from '../shaders/SSRShader.js';
+import { SSRBlurShader, SSRDepthShader, SSRShader } from '../shaders/SSRShader.js';
 import { CopyShader } from '../shaders/CopyShader.js';
 
 class SSRPass extends Pass {
@@ -337,7 +335,7 @@ class SSRPass extends Pass {
 		this.copyMaterial.dispose();
 		this.depthRenderMaterial.dispose();
 
-		// dipsose full screen quad
+		// dispose full screen quad
 
 		this.fsQuad.dispose();
 

package/examples/jsm/postprocessing/UnrealBloomPass.js

@@ -92,7 +92,7 @@ class UnrealBloomPass extends Pass {
 
 		for ( let i = 0; i < this.nMips; i ++ ) {
 
-			this.separableBlurMaterials.push( this.getSeperableBlurMaterial( kernelSizeArray[ i ] ) );
+			this.separableBlurMaterials.push( this.getSeparableBlurMaterial( kernelSizeArray[ i ] ) );
 
 			this.separableBlurMaterials[ i ].uniforms[ 'invSize' ].value = new Vector2( 1 / resx, 1 / resy );
 
@@ -296,7 +296,7 @@ class UnrealBloomPass extends Pass {
 
 	}
 
-	getSeperableBlurMaterial( kernelRadius ) {
+	getSeparableBlurMaterial( kernelRadius ) {
 
 		const coefficients = [];
 

package/examples/jsm/renderers/SVGRenderer.js

@@ -8,10 +8,12 @@ import {
 	SRGBColorSpace,
 	Vector3
 } from 'three';
-import { Projector } from '../renderers/Projector.js';
-import { RenderableFace } from '../renderers/Projector.js';
-import { RenderableLine } from '../renderers/Projector.js';
-import { RenderableSprite } from '../renderers/Projector.js';
+import {
+	Projector,
+	RenderableFace,
+	RenderableLine,
+	RenderableSprite
+} from '../renderers/Projector.js';
 
 class SVGObject extends Object3D {
 

package/examples/jsm/shaders/BokehShader2.js

@@ -104,7 +104,7 @@ const BokehShader = {
 
 		float vignout = 1.3; // vignetting outer border
 		float vignin = 0.0; // vignetting inner border
-		float vignfade = 22.0; // f-stops till vignete fades
+		float vignfade = 22.0; // f-stops till vignette fades
 
 		uniform bool shaderFocus;
 		// disable if you use external focalDepth value

package/examples/jsm/shaders/GodRaysShader.js

@@ -12,7 +12,7 @@ import {
  * sample count to produce a blur filter with large support.
  *
  * My implementation performs 3 passes, similar to the implementation from Sousa. I found
- * just 6 samples per pass produced acceptible results. The blur is applied three times,
+ * just 6 samples per pass produced acceptable results. The blur is applied three times,
  * with decreasing filter support. The result is equivalent to a single pass with
  * 6*6*6 = 216 samples.
  *
@@ -136,12 +136,12 @@ const GodRaysGenerateShader = {
 		//	- see http://code.google.com/p/chromium/issues/detail?id=153105
 
 		/*
-		// Unrolling didnt do much on my hardware (ATI Mobility Radeon 3450),
+		// Unrolling didn't do much on my hardware (ATI Mobility Radeon 3450),
 		// so i've just left the loop
 
 		"for ( float i = 0.0; i < TAPS_PER_PASS; i += 1.0 ) {",
 
-		// Accumulate samples, making sure we dont walk past the light source.
+		// Accumulate samples, making sure we don't walk past the light source.
 
 		// The check for uv.y < 1 would not be necessary with "border" UV wrap
 		// mode, with a black border color. I don't think this is currently

package/examples/jsm/shaders/OutputShader.js

@@ -28,7 +28,7 @@ const OutputShader = {
 		}`,
 
 	fragmentShader: /* glsl */`
-	
+
 		precision highp float;
 
 		uniform sampler2D tDiffuse;
@@ -68,6 +68,10 @@ const OutputShader = {
 
 				gl_FragColor.rgb = NeutralToneMapping( gl_FragColor.rgb );
 
+			#elif defined( CUSTOM_TONE_MAPPING )
+
+				gl_FragColor.rgb = CustomToneMapping( gl_FragColor.rgb );
+
 			#endif
 
 			// color space

package/examples/jsm/shaders/SobelOperatorShader.js

@@ -79,7 +79,7 @@ const SobelOperatorShader = {
 				Gy[0][1] * tx0y1 + Gy[1][1] * tx1y1 + Gy[2][1] * tx2y1 +
 				Gy[0][2] * tx0y2 + Gy[1][2] * tx1y2 + Gy[2][2] * tx2y2;
 
-		// magnitute of the total gradient
+		// magnitude of the total gradient
 
 			float G = sqrt( ( valueGx * valueGx ) + ( valueGy * valueGy ) );
 

package/examples/jsm/transpiler/GLSLDecoder.js

@@ -461,11 +461,11 @@ class GLSLDecoder {
 			const isHex = /^(0x)/.test( firstToken.str );
 
 			if ( isHex ) type = 'int';
-			else if ( /u$/.test( firstToken.str ) ) type = 'uint';
+			else if ( /u$|U$/.test( firstToken.str ) ) type = 'uint';
 			else if ( /f|e|\./.test( firstToken.str ) ) type = 'float';
 			else type = 'int';
 
-			let str = firstToken.str.replace( /u|i$/, '' );
+			let str = firstToken.str.replace( /u|U|i$/, '' );
 
 			if ( isHex === false ) {
 

package/examples/jsm/transpiler/TSLEncoder.js

@@ -255,6 +255,8 @@ class TSLEncoder {
 
 			code = node.expression.type + '( ' + node.type + ' ' + node.expression.value + ' )';
 
+			this.addImport( node.expression.type );
+
 		} else if ( node.isUnary ) {
 
 			let type = unaryLib[ node.type ];

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

@@ -1,11 +1,18 @@
-import { RenderTarget, Vector2, QuadMesh, NodeMaterial, PostProcessingUtils, TempNode, NodeUpdateType } from 'three/webgpu';
+import { RenderTarget, Vector2, QuadMesh, NodeMaterial, RendererUtils, TempNode, NodeUpdateType } from 'three/webgpu';
 import { nodeObject, Fn, float, vec4, uv, texture, passTexture, uniform, sign, max, convertToTexture } from 'three/tsl';
 
+/** @module AfterImageNode **/
+
 const _size = /*@__PURE__*/ new Vector2();
 const _quadMeshComp = /*@__PURE__*/ new QuadMesh();
 
 let _rendererState;
 
+/**
+ * Post processing node for creating an after image effect.
+ *
+ * @augments TempNode
+ */
 class AfterImageNode extends TempNode {
 
 	static get type() {
@@ -14,32 +21,91 @@ class AfterImageNode extends TempNode {
 
 	}
 
+	/**
+	 * Constructs a new after image node.
+	 *
+	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect.
+	 * @param {Number} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect.
+	 */
 	constructor( textureNode, damp = 0.96 ) {
 
 		super( 'vec4' );
 
+		/**
+		 * The texture node that represents the input of the effect.
+		 *
+		 * @type {TextureNode}
+		 */
 		this.textureNode = textureNode;
+
+		/**
+		 * The texture represents the pervious frame.
+		 *
+		 * @type {TextureNode}
+		 */
 		this.textureNodeOld = texture();
+
+		/**
+		 * The damping intensity as a uniform node.
+		 *
+		 * @type {UniformNode<float>}
+		 */
 		this.damp = uniform( damp );
 
+		/**
+		 * The render target used for compositing the effect.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
 		this._compRT = new RenderTarget( 1, 1, { depthBuffer: false } );
 		this._compRT.texture.name = 'AfterImageNode.comp';
 
+		/**
+		 * The render target that represents the previous frame.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
 		this._oldRT = new RenderTarget( 1, 1, { depthBuffer: false } );
 		this._oldRT.texture.name = 'AfterImageNode.old';
 
+		/**
+		 * The result of the effect is represented as a separate texture node.
+		 *
+		 * @private
+		 * @type {PassTextureNode}
+		 */
 		this._textureNode = passTexture( this, this._compRT.texture );
 
+		/**
+		 * 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;
 
 	}
 
+	/**
+	 * 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;
 
 	}
 
+	/**
+	 * Sets the size of the effect.
+	 *
+	 * @param {Number} width - The width of the effect.
+	 * @param {Number} height - The height of the effect.
+	 */
 	setSize( width, height ) {
 
 		this._compRT.setSize( width, height );
@@ -47,11 +113,16 @@ class AfterImageNode extends TempNode {
 
 	}
 
+	/**
+	 * This method is used to render the effect once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
 	updateBefore( frame ) {
 
 		const { renderer } = frame;
 
-		_rendererState = PostProcessingUtils.resetRendererState( renderer, _rendererState );
+		_rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
 
 		//
 
@@ -86,10 +157,16 @@ class AfterImageNode extends TempNode {
 
 		textureNode.value = currentTexture;
 
-		PostProcessingUtils.restoreRendererState( renderer, _rendererState );
+		RendererUtils.restoreRendererState( renderer, _rendererState );
 
 	}
 
+	/**
+	 * 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;
@@ -101,7 +178,7 @@ class AfterImageNode extends TempNode {
 
 		textureNodeOld.uvNode = uvNode;
 
-		const sampleTexture = ( uv ) => textureNode.uv( uv );
+		const sampleTexture = ( uv ) => textureNode.sample( uv );
 
 		const when_gt = Fn( ( [ x_immutable, y_immutable ] ) => {
 
@@ -141,6 +218,10 @@ class AfterImageNode extends TempNode {
 
 	}
 
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the effect is no longer required.
+	 */
 	dispose() {
 
 		this._compRT.dispose();
@@ -150,6 +231,14 @@ class AfterImageNode extends TempNode {
 
 }
 
+/**
+ * TSL function for creating an after image node for post processing.
+ *
+ * @function
+ * @param {Node<vec4>} node - The node that represents the input of the effect.
+ * @param {Number} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect.
+ * @returns {AfterImageNode}
+ */
 export const afterImage = ( node, damp ) => nodeObject( new AfterImageNode( convertToTexture( node ), damp ) );
 
 export default AfterImageNode;

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

@@ -2,6 +2,13 @@ import { Matrix3, NodeMaterial } from 'three/webgpu';
 import { clamp, nodeObject, Fn, vec4, uv, uniform, max } from 'three/tsl';
 import StereoCompositePassNode from './StereoCompositePassNode.js';
 
+/** @module AnaglyphPassNode **/
+
+/**
+ * A render pass node that creates an anaglyph effect.
+ *
+ * @augments StereoCompositePassNode
+ */
 class AnaglyphPassNode extends StereoCompositePassNode {
 
 	static get type() {
@@ -10,20 +17,43 @@ class AnaglyphPassNode extends StereoCompositePassNode {
 
 	}
 
+	/**
+	 * Constructs a new anaglyph pass node.
+	 *
+	 * @param {Scene} scene - The scene to render.
+	 * @param {Camera} camera - The camera to render the scene with.
+	 */
 	constructor( scene, camera ) {
 
 		super( scene, camera );
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {Boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isAnaglyphPassNode = true;
 
 		// Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
 
+		/**
+		 * Color matrix node for the left eye.
+		 *
+		 * @type {UniformNode<mat3>}
+		 */
 		this._colorMatrixLeft = uniform( new Matrix3().fromArray( [
 			0.456100, - 0.0400822, - 0.0152161,
 			0.500484, - 0.0378246, - 0.0205971,
 			0.176381, - 0.0157589, - 0.00546856
 		] ) );
 
+		/**
+		 * Color matrix node for the right eye.
+		 *
+		 * @type {UniformNode<mat3>}
+		 */
 		this._colorMatrixRight = uniform( new Matrix3().fromArray( [
 			- 0.0434706, 0.378476, - 0.0721527,
 			- 0.0879388, 0.73364, - 0.112961,
@@ -32,14 +62,20 @@ class AnaglyphPassNode extends StereoCompositePassNode {
 
 	}
 
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {PassTextureNode}
+	 */
 	setup( builder ) {
 
 		const uvNode = uv();
 
 		const anaglyph = Fn( () => {
 
-			const colorL = this._mapLeft.uv( uvNode );
-			const colorR = this._mapRight.uv( uvNode );
+			const colorL = this._mapLeft.sample( uvNode );
+			const colorR = this._mapRight.sample( uvNode );
 
 			const color = clamp( this._colorMatrixLeft.mul( colorL.rgb ).add( this._colorMatrixRight.mul( colorR.rgb ) ) );
 
@@ -60,4 +96,12 @@ class AnaglyphPassNode extends StereoCompositePassNode {
 
 export default AnaglyphPassNode;
 
+/**
+ * TSL function for creating an anaglyph pass node.
+ *
+ * @function
+ * @param {Scene} scene - The scene to render.
+ * @param {Camera} camera - The camera to render the scene with.
+ * @returns {AnaglyphPassNode}
+ */
 export const anaglyphPass = ( scene, camera ) => nodeObject( new AnaglyphPassNode( scene, camera ) );