@needle-tools/three 0.145.4 → 0.146.2

package/examples/jsm/postprocessing/RenderPixelatedPass.js

@@ -0,0 +1,234 @@
+import {
+	WebGLRenderTarget,
+	MeshNormalMaterial,
+	ShaderMaterial,
+	Vector2,
+	Vector4,
+	DepthTexture,
+	NearestFilter
+} from 'three';
+import { Pass, FullScreenQuad } from './Pass.js';
+
+class RenderPixelatedPass extends Pass {
+
+	constructor( pixelSize, scene, camera, options = {} ) {
+
+		super();
+
+		this.pixelSize = pixelSize;
+		this.resolution = new Vector2();
+		this.renderResolution = new Vector2();
+
+		this.pixelatedMaterial = this.createPixelatedMaterial();
+		this.normalMaterial = new MeshNormalMaterial();
+
+		this.fsQuad = new FullScreenQuad( this.pixelatedMaterial );
+		this.scene = scene;
+		this.camera = camera;
+
+		this.normalEdgeStrength = options.normalEdgeStrength || 0.3;
+		this.depthEdgeStrength = options.depthEdgeStrength || 0.4;
+
+		this.beautyRenderTarget = new WebGLRenderTarget();
+		this.beautyRenderTarget.texture.minFilter = NearestFilter;
+		this.beautyRenderTarget.texture.magFilter = NearestFilter;
+		this.beautyRenderTarget.depthTexture = new DepthTexture();
+
+		this.normalRenderTarget = new WebGLRenderTarget();
+		this.normalRenderTarget.texture.minFilter = NearestFilter;
+		this.normalRenderTarget.texture.magFilter = NearestFilter;
+
+
+
+	}
+
+	dispose() {
+
+		this.beautyRenderTarget.dispose();
+		this.normalRenderTarget.dispose();
+
+		this.pixelatedMaterial.dispose();
+		this.normalMaterial.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
+	setSize( width, height ) {
+
+		this.resolution.set( width, height );
+		this.renderResolution.set( ( width / this.pixelSize ) | 0, ( height / this.pixelSize ) | 0 );
+		const { x, y } = this.renderResolution;
+		this.beautyRenderTarget.setSize( x, y );
+		this.normalRenderTarget.setSize( x, y );
+		this.fsQuad.material.uniforms.resolution.value.set( x, y, 1 / x, 1 / y );
+
+	}
+
+	setPixelSize( pixelSize ) {
+
+		this.pixelSize = pixelSize;
+		this.setSize( this.resolution.x, this.resolution.y );
+
+	}
+
+	render( renderer, writeBuffer ) {
+
+		const uniforms = this.fsQuad.material.uniforms;
+		uniforms.normalEdgeStrength.value = this.normalEdgeStrength;
+		uniforms.depthEdgeStrength.value = this.depthEdgeStrength;
+
+		renderer.setRenderTarget( this.beautyRenderTarget );
+		renderer.render( this.scene, this.camera );
+
+		const overrideMaterial_old = this.scene.overrideMaterial;
+		renderer.setRenderTarget( this.normalRenderTarget );
+		this.scene.overrideMaterial = this.normalMaterial;
+		renderer.render( this.scene, this.camera );
+		this.scene.overrideMaterial = overrideMaterial_old;
+
+		uniforms.tDiffuse.value = this.beautyRenderTarget.texture;
+		uniforms.tDepth.value = this.beautyRenderTarget.depthTexture;
+		uniforms.tNormal.value = this.normalRenderTarget.texture;
+
+		if ( this.renderToScreen ) {
+
+			renderer.setRenderTarget( null );
+
+		} else {
+
+			renderer.setRenderTarget( writeBuffer );
+
+			if ( this.clear ) renderer.clear();
+
+		}
+
+		this.fsQuad.render( renderer );
+
+	}
+
+	createPixelatedMaterial() {
+
+		return new ShaderMaterial( {
+			uniforms: {
+				tDiffuse: { value: null },
+				tDepth: { value: null },
+				tNormal: { value: null },
+				resolution: {
+					value: new Vector4(
+						this.renderResolution.x,
+						this.renderResolution.y,
+						1 / this.renderResolution.x,
+						1 / this.renderResolution.y,
+					)
+				},
+				normalEdgeStrength: { value: 0 },
+				depthEdgeStrength: { value: 0 }
+			},
+			vertexShader: /* glsl */`
+				varying vec2 vUv;
+
+				void main() {
+
+					vUv = uv;
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+				}
+			`,
+			fragmentShader: /* glsl */`
+				uniform sampler2D tDiffuse;
+				uniform sampler2D tDepth;
+				uniform sampler2D tNormal;
+				uniform vec4 resolution;
+				uniform float normalEdgeStrength;
+				uniform float depthEdgeStrength;
+				varying vec2 vUv;
+
+				float getDepth(int x, int y) {
+
+					return texture2D( tDepth, vUv + vec2(x, y) * resolution.zw ).r;
+
+				}
+
+				vec3 getNormal(int x, int y) {
+
+					return texture2D( tNormal, vUv + vec2(x, y) * resolution.zw ).rgb * 2.0 - 1.0;
+
+				}
+
+				float depthEdgeIndicator(float depth, vec3 normal) {
+
+					float diff = 0.0;
+					diff += clamp(getDepth(1, 0) - depth, 0.0, 1.0);
+					diff += clamp(getDepth(-1, 0) - depth, 0.0, 1.0);
+					diff += clamp(getDepth(0, 1) - depth, 0.0, 1.0);
+					diff += clamp(getDepth(0, -1) - depth, 0.0, 1.0);
+					return floor(smoothstep(0.01, 0.02, diff) * 2.) / 2.;
+
+				}
+
+				float neighborNormalEdgeIndicator(int x, int y, float depth, vec3 normal) {
+
+					float depthDiff = getDepth(x, y) - depth;
+					vec3 neighborNormal = getNormal(x, y);
+
+					// Edge pixels should yield to faces who's normals are closer to the bias normal.
+					vec3 normalEdgeBias = vec3(1., 1., 1.); // This should probably be a parameter.
+					float normalDiff = dot(normal - neighborNormal, normalEdgeBias);
+					float normalIndicator = clamp(smoothstep(-.01, .01, normalDiff), 0.0, 1.0);
+
+					// Only the shallower pixel should detect the normal edge.
+					float depthIndicator = clamp(sign(depthDiff * .25 + .0025), 0.0, 1.0);
+
+					return (1.0 - dot(normal, neighborNormal)) * depthIndicator * normalIndicator;
+
+				}
+
+				float normalEdgeIndicator(float depth, vec3 normal) {
+
+					float indicator = 0.0;
+
+					indicator += neighborNormalEdgeIndicator(0, -1, depth, normal);
+					indicator += neighborNormalEdgeIndicator(0, 1, depth, normal);
+					indicator += neighborNormalEdgeIndicator(-1, 0, depth, normal);
+					indicator += neighborNormalEdgeIndicator(1, 0, depth, normal);
+
+					return step(0.1, indicator);
+
+				}
+
+				void main() {
+
+					vec4 texel = texture2D( tDiffuse, vUv );
+
+					float depth = 0.0;
+					vec3 normal = vec3(0.0);
+
+					if (depthEdgeStrength > 0.0 || normalEdgeStrength > 0.0) {
+
+						depth = getDepth(0, 0);
+						normal = getNormal(0, 0);
+
+					}
+
+					float dei = 0.0;
+					if (depthEdgeStrength > 0.0)
+						dei = depthEdgeIndicator(depth, normal);
+
+					float nei = 0.0;
+					if (normalEdgeStrength > 0.0)
+						nei = normalEdgeIndicator(depth, normal);
+
+					float Strength = dei > 0.0 ? (1.0 - depthEdgeStrength * dei) : (1.0 + normalEdgeStrength * nei);
+
+					gl_FragColor = texel * Strength;
+
+				}
+			`
+		} );
+
+	}
+
+}
+
+export { RenderPixelatedPass };

package/examples/jsm/postprocessing/SAOPass.js

@@ -400,6 +400,26 @@ class SAOPass extends Pass {
 
 	}
 
+	dispose() {
+
+		this.saoRenderTarget.dispose();
+		this.blurIntermediateRenderTarget.dispose();
+		this.beautyRenderTarget.dispose();
+		this.normalRenderTarget.dispose();
+		this.depthRenderTarget.dispose();
+
+		this.depthMaterial.dispose();
+		this.normalMaterial.dispose();
+		this.saoMaterial.dispose();
+		this.vBlurMaterial.dispose();
+		this.hBlurMaterial.dispose();
+		this.materialCopy.dispose();
+		this.depthCopy.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 SAOPass.OUTPUT = {

package/examples/jsm/postprocessing/SMAAPass.js

@@ -183,6 +183,22 @@ class SMAAPass extends Pass {
 
 	}
 
+	dispose() {
+
+		this.edgesRT.dispose();
+		this.weightsRT.dispose();
+
+		this.areaTexture.dispose();
+		this.searchTexture.dispose();
+
+		this.materialEdges.dispose();
+		this.materialWeights.dispose();
+		this.materialBlend.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 export { SMAAPass };

package/examples/jsm/postprocessing/SSAARenderPass.js

@@ -63,6 +63,10 @@ class SSAARenderPass extends Pass {
 
 		}
 
+		this.copyMaterial.dispose();
+
+		this.fsQuad.dispose();
+
 	}
 
 	setSize( width, height ) {

package/examples/jsm/postprocessing/SavePass.js

@@ -32,7 +32,7 @@ class SavePass extends Pass {
 
 		if ( this.renderTarget === undefined ) {
 
-			this.renderTarget = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
+			this.renderTarget = new WebGLRenderTarget(); // will be resized later
 			this.renderTarget.texture.name = 'SavePass.rt';
 
 		}
@@ -57,6 +57,22 @@ class SavePass extends Pass {
 
 	}
 
+	setSize( width, height ) {
+
+		this.renderTarget.setSize( width, height );
+
+	}
+
+	dispose() {
+
+		this.renderTarget.dispose();
+
+		this.material.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 export { SavePass };

package/examples/jsm/postprocessing/ShaderPass.js

@@ -63,6 +63,14 @@ class ShaderPass extends Pass {
 
 	}
 
+	dispose() {
+
+		this.material.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 export { ShaderPass };

package/examples/jsm/postprocessing/TAARenderPass.js

@@ -130,6 +130,15 @@ class TAARenderPass extends SSAARenderPass {
 
 	}
 
+	dispose() {
+
+		super.dispose();
+
+		if ( this.sampleRenderTarget !== undefined ) this.sampleRenderTarget.dispose();
+		if ( this.holdRenderTarget !== undefined ) this.holdRenderTarget.dispose();
+
+	}
+
 }
 
 const _JitterVectors = [

package/examples/jsm/postprocessing/TexturePass.js

@@ -55,6 +55,14 @@ class TexturePass extends Pass {
 
 	}
 
+	dispose() {
+
+		this.material.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 export { TexturePass };

package/examples/jsm/postprocessing/UnrealBloomPass.js

@@ -170,6 +170,22 @@ class UnrealBloomPass extends Pass {
 
 		this.renderTargetBright.dispose();
 
+		//
+
+		for ( let i = 0; i < this.separableBlurMaterials.length; i ++ ) {
+
+			this.separableBlurMaterials[ i ].dispose();
+
+		}
+
+		this.compositeMaterial.dispose();
+		this.materialCopy.dispose();
+		this.basic.dispose();
+
+		//
+
+		this.fsQuad.dispose();
+
 	}
 
 	setSize( width, height ) {

package/examples/jsm/renderers/webgl/nodes/WebGLNodeBuilder.js

@@ -1,7 +1,6 @@
 import { defaultShaderStages, NodeFrame, MathNode, GLSLNodeParser, NodeBuilder } from 'three/nodes';
 import SlotNode from './SlotNode.js';
-import { PerspectiveCamera, ShaderChunk, ShaderLib, UniformsUtils, UniformsLib,
-	LinearEncoding, RGBAFormat, UnsignedByteType, sRGBEncoding } from 'three';
+import { PerspectiveCamera, ShaderChunk, ShaderLib, UniformsUtils, UniformsLib } from 'three';
 
 const nodeFrame = new NodeFrame();
 nodeFrame.camera = new PerspectiveCamera();
@@ -73,7 +72,17 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	_parseShaderLib() {
 
-		const type = this.material.type;
+		const material = this.material;
+
+		let type = material.type;
+
+		// see https://github.com/mrdoob/three.js/issues/23707
+
+		if ( material.isMeshPhysicalNodeMaterial ) type = 'MeshPhysicalNodeMaterial';
+		else if ( material.isMeshStandardNodeMaterial ) type = 'MeshStandardNodeMaterial';
+		else if ( material.isMeshBasicNodeMaterial ) type = 'MeshBasicNodeMaterial';
+		else if ( material.isPointsNodeMaterial ) type = 'PointsNodeMaterial';
+		else if ( material.isLineBasicNodeMaterial ) type = 'LineBasicNodeMaterial';
 
 		// shader lib
 
@@ -501,15 +510,31 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	}
 
-	getVaryings( /* shaderStage */ ) {
+	getVaryings( shaderStage ) {
 
 		let snippet = '';
 
 		const varyings = this.varyings;
 
-		for ( const varying of varyings ) {
+		if ( shaderStage === 'vertex' ) {
+
+			for ( const varying of varyings ) {
+
+				snippet += `${varying.needsInterpolation ? 'varying' : '/*varying*/'} ${varying.type} ${varying.name}; `;
+
+			}
+
+		} else if ( shaderStage === 'fragment' ) {
+
+			for ( const varying of varyings ) {
+
+				if ( varying.needsInterpolation ) {
 
-			snippet += `varying ${varying.type} ${varying.name}; `;
+					snippet += `varying ${varying.type} ${varying.name}; `;
+
+				}
+
+			}
 
 		}
 
@@ -546,23 +571,21 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	}
 
-	getTextureEncodingFromMap( map ) {
-
-		const isWebGL2 = this.renderer.capabilities.isWebGL2;
+	getFrontFacing() {
 
-		if ( isWebGL2 && map && map.isTexture && map.format === RGBAFormat && map.type === UnsignedByteType && map.encoding === sRGBEncoding ) {
+		return 'gl_FrontFacing';
 
-			return LinearEncoding; // disable inline decode for sRGB textures in WebGL 2
+	}
 
-		}
+	getFragCoord() {
 
-		return super.getTextureEncodingFromMap( map );
+		return 'gl_FragCoord';
 
 	}
 
-	getFrontFacing() {
+	isFlipY() {
 
-		return 'gl_FrontFacing';
+		return true;
 
 	}
 
@@ -692,7 +715,7 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 			this.addCode(
 				shaderStage,
 				'main() {',
-				this.flowCode[ shaderStage ]
+				'\n\t' + this.flowCode[ shaderStage ]
 			);
 
 		}

package/examples/jsm/renderers/webgpu/WebGPUAnimation.js

@@ -0,0 +1,58 @@
+class WebGPUAnimation {
+
+	constructor() {
+
+		this.nodes = null;
+
+		this.animationLoop = null;
+		this.requestId = null;
+
+		this.isAnimating = false;
+
+		this.context = self;
+
+	}
+
+	start() {
+
+		if ( this.isAnimating === true || this.animationLoop === null || this.nodes === null ) return;
+
+		this.isAnimating = true;
+
+		const update = ( time, frame ) => {
+
+			this.requestId = self.requestAnimationFrame( update );
+
+			this.animationLoop( time, frame );
+
+			this.nodes.updateFrame();
+
+		};
+
+		this.requestId = self.requestAnimationFrame( update );
+
+	}
+
+	stop() {
+
+		self.cancelAnimationFrame( this.requestId );
+
+		this.isAnimating = false;
+
+	}
+
+	setAnimationLoop( callback ) {
+
+		this.animationLoop = callback;
+
+	}
+
+	setNodes( nodes ) {
+
+		this.nodes = nodes;
+
+	}
+
+}
+
+export default WebGPUAnimation;

package/examples/jsm/renderers/webgpu/WebGPUAttributes.js

@@ -23,7 +23,7 @@ class WebGPUAttributes {
 
 		if ( data ) {
 
-			data.buffer.destroy();
+			this._destroyBuffers( data );
 
 			this.buffers.delete( attribute );
 
@@ -51,7 +51,7 @@ class WebGPUAttributes {
 
 		} else if ( usage && usage !== data.usage ) {
 
-			data.buffer.destroy();
+			this._destroyBuffers( data );
 
 			data = this._createBuffer( attribute, usage );
 
@@ -67,6 +67,53 @@ class WebGPUAttributes {
 
 	}
 
+	async getArrayBuffer( attribute ) {
+
+		const data = this.get( attribute );
+		const device = this.device;
+
+		const gpuBuffer = data.buffer;
+		const size = gpuBuffer.size;
+
+		let gpuReadBuffer = data.readBuffer;
+		let needsUnmap = true;
+
+		if ( gpuReadBuffer === null ) {
+
+			gpuReadBuffer = device.createBuffer( {
+				size,
+				usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+			} );
+
+			needsUnmap = false;
+
+			data.readBuffer = gpuReadBuffer;
+
+		}
+
+		const cmdEncoder = device.createCommandEncoder( {} );
+
+		cmdEncoder.copyBufferToBuffer(
+			gpuBuffer,
+			0,
+			gpuReadBuffer,
+			0,
+			size
+		);
+
+		if ( needsUnmap ) gpuReadBuffer.unmap();
+
+		const gpuCommands = cmdEncoder.finish();
+		device.queue.submit( [ gpuCommands ] );
+
+		await gpuReadBuffer.mapAsync( GPUMapMode.READ );
+
+		const arrayBuffer = gpuReadBuffer.getMappedRange();
+
+		return new Float32Array( arrayBuffer );
+
+	}
+
 	_createBuffer( attribute, usage ) {
 
 		const array = attribute.array;
@@ -74,7 +121,7 @@ class WebGPUAttributes {
 
 		const buffer = this.device.createBuffer( {
 			size,
-			usage: usage | GPUBufferUsage.COPY_DST,
+			usage: usage | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
 			mappedAtCreation: true
 		} );
 
@@ -87,6 +134,7 @@ class WebGPUAttributes {
 		return {
 			version: attribute.version,
 			buffer,
+			readBuffer: null,
 			usage
 		};
 
@@ -94,6 +142,8 @@ class WebGPUAttributes {
 
 	_writeBuffer( buffer, attribute ) {
 
+		const device = this.device;
+
 		const array = attribute.array;
 		const updateRange = attribute.updateRange;
 
@@ -101,7 +151,7 @@ class WebGPUAttributes {
 
 			// Not using update ranges
 
-			this.device.queue.writeBuffer(
+			device.queue.writeBuffer(
 				buffer,
 				0,
 				array,
@@ -110,7 +160,7 @@ class WebGPUAttributes {
 
 		} else {
 
-			this.device.queue.writeBuffer(
+			device.queue.writeBuffer(
 				buffer,
 				0,
 				array,
@@ -124,6 +174,14 @@ class WebGPUAttributes {
 
 	}
 
+	_destroyBuffers( { buffer, readBuffer } ) {
+
+		buffer.destroy();
+
+		if ( readBuffer !== null ) readBuffer.destroy();
+
+	}
+
 }
 
 export default WebGPUAttributes;