@needle-tools/three 0.153.0 → 0.154.1

package/examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js

@@ -1,3 +1,5 @@
+import { NoColorSpace } from 'three';
+
 import UniformsGroup from '../../common/UniformsGroup.js';
 import {
 	FloatNodeUniform, Vector2NodeUniform, Vector3NodeUniform, Vector4NodeUniform,
@@ -96,11 +98,11 @@ fn threejs_repeatWrapping( uv : vec2<f32>, dimension : vec2<u32> ) -> vec2<u32>
 ` )
 };
 
-class WebGPUNodeBuilder extends NodeBuilder {
+class WGSLNodeBuilder extends NodeBuilder {
 
-	constructor( object, renderer ) {
+	constructor( object, renderer, scene = null ) {
 
-		super( object, renderer, new WGSLNodeParser() );
+		super( object, renderer, new WGSLNodeParser(), scene );
 
 		this.uniformsGroup = {};
 
@@ -131,6 +133,12 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
+	needsColorSpaceToLinear( texture ) {
+
+		return texture.isVideoTexture === true && texture.colorSpace !== NoColorSpace;
+
+	}
+
 	getSampler( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
 
 		if ( shaderStage === 'fragment' ) {
@@ -252,9 +260,9 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
-	getUniformFromNode( node, type, shaderStage ) {
+	getUniformFromNode( node, type, shaderStage, name = null ) {
 
-		const uniformNode = super.getUniformFromNode( node, type, shaderStage );
+		const uniformNode = super.getUniformFromNode( node, type, shaderStage, name );
 		const nodeData = this.getDataFromNode( node, shaderStage );
 
 		if ( nodeData.uniformGPU === undefined ) {
@@ -392,6 +400,18 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
+	getVertexIndex() {
+
+		if ( this.shaderStage === 'vertex' ) {
+
+			return this.getBuiltin( 'vertex_index', 'vertexIndex', 'u32', 'attribute' );
+
+		}
+
+		return 'vertexIndex';
+
+	}
+
 	getInstanceIndex() {
 
 		if ( this.shaderStage === 'vertex' ) {
@@ -510,7 +530,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 					snippets.push( `${ attributesSnippet } ${ varying.name } : ${ this.getType( varying.type ) }` );
 
-				} else if ( vars.includes( varying ) === false ) {
+				} else if ( shaderStage === 'vertex' && vars.includes( varying ) === false ) {
 
 					vars.push( varying );
 
@@ -548,7 +568,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				if ( shaderStage === 'fragment' ) {
 
-					bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name}_sampler : sampler;` );
+					bindingSnippets.push( `@binding( ${index ++} ) @group( 0 ) var ${uniform.name}_sampler : sampler;` );
 
 				}
 
@@ -574,7 +594,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				}
 
-				bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name} : ${textureType};` );
+				bindingSnippets.push( `@binding( ${index ++} ) @group( 0 ) var ${uniform.name} : ${textureType};` );
 
 			} else if ( uniform.type === 'buffer' || uniform.type === 'storageBuffer' ) {
 
@@ -855,4 +875,4 @@ var<${access}> ${name} : ${structName};`;
 
 }
 
-export default WebGPUNodeBuilder;
+export default WGSLNodeBuilder;

package/examples/jsm/renderers/webgpu/utils/WebGPUAttributeUtils.js

@@ -1,4 +1,5 @@
 import { Float16BufferAttribute } from 'three';
+import { GPUInputStepMode } from './WebGPUConstants.js';
 
 const typedArraysToVertexFormatPrefix = new Map( [
 	[ Int8Array, [ 'sint8', 'snorm8' ]],
@@ -106,6 +107,7 @@ class WebGPUAttributeUtils {
 
 			let arrayStride = geometryAttribute.itemSize * bytesPerElement;
 			let offset = 0;
+			let stepMode = geometryAttribute.isInstancedBufferAttribute ? GPUInputStepMode.Instance : GPUInputStepMode.Vertex;
 
 			if ( geometryAttribute.isInterleavedBufferAttribute === true ) {
 
@@ -113,12 +115,14 @@ class WebGPUAttributeUtils {
 
 				arrayStride = geometryAttribute.data.stride * bytesPerElement;
 				offset = geometryAttribute.offset * bytesPerElement;
+				if ( geometryAttribute.data.isInstancedInterleavedBuffer ) stepMode = GPUInputStepMode.Instance;
 
 			}
 
 			shaderAttributes.push( {
 				geometryAttribute,
 				arrayStride,
+				stepMode,
 				offset,
 				format,
 				slot

package/examples/jsm/renderers/webgpu/utils/WebGPUPipelineUtils.js

@@ -1,7 +1,7 @@
 import { BlendColorFactor, OneMinusBlendColorFactor, } from '../../common/Constants.js';
 
 import {
-	GPUInputStepMode, GPUFrontFace, GPUCullMode, GPUColorWriteFlags, GPUCompareFunction, GPUBlendFactor, GPUBlendOperation, GPUIndexFormat, GPUStencilOperation
+	GPUFrontFace, GPUCullMode, GPUColorWriteFlags, GPUCompareFunction, GPUBlendFactor, GPUBlendOperation, GPUIndexFormat, GPUStencilOperation
 } from './WebGPUConstants.js';
 
 import {
@@ -44,26 +44,24 @@ class WebGPUPipelineUtils {
 
 		for ( const attribute of shaderAttributes ) {
 
-			const geometryAttribute = attribute.geometryAttribute;
-			const stepMode = ( geometryAttribute !== undefined && geometryAttribute.isInstancedBufferAttribute ) ? GPUInputStepMode.Instance : GPUInputStepMode.Vertex;
-
 			vertexBuffers.push( {
 				arrayStride: attribute.arrayStride,
 				attributes: [ { shaderLocation: attribute.slot, offset: attribute.offset, format: attribute.format } ],
-				stepMode: stepMode
+				stepMode: attribute.stepMode
 			} );
 
 		}
 
 		// blending
 
-		let alphaBlend = {};
-		let colorBlend = {};
+		let blending;
 
 		if ( material.transparent === true && material.blending !== NoBlending ) {
 
-			alphaBlend = this._getAlphaBlend( material );
-			colorBlend = this._getColorBlend( material );
+			blending = {
+				alpha: this._getAlphaBlend( material ),
+				color: this._getColorBlend( material )
+			};
 
 		}
 
@@ -98,10 +96,7 @@ class WebGPUPipelineUtils {
 			vertex: Object.assign( {}, vertexModule, { buffers: vertexBuffers } ),
 			fragment: Object.assign( {}, fragmentModule, { targets: [ {
 				format: colorFormat,
-				blend: {
-					alpha: alphaBlend,
-					color: colorBlend
-				},
+				blend: blending,
 				writeMask: colorWriteMask
 			} ] } ),
 			primitive: primitiveState,

package/examples/jsm/renderers/webgpu/utils/WebGPUTextureUtils.js

@@ -86,7 +86,7 @@ class WebGPUTextureUtils {
 
 	}
 
-	createTexture( texture ) {
+	createTexture( texture, options = {} ) {
 
 		const backend = this.backend;
 		const textureData = backend.get( texture );
@@ -104,9 +104,9 @@ class WebGPUTextureUtils {
 		const mipLevelCount = this._getMipLevelCount( texture, width, height, needsMipmaps );
 		const format = texture.internalFormat || this._getFormat( texture );
 		//const sampleCount = texture.isRenderTargetTexture || texture.isDepthTexture ? backend.utils.getSampleCount( renderContext ) : 1;
-		const sampleCount = 1;
+		const sampleCount = options.sampleCount !== undefined ? options.sampleCount : 1;
 
-		let usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST;
+		let usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC;
 
 		if ( texture.isCompressedTexture !== true ) {
 
@@ -245,6 +245,52 @@ class WebGPUTextureUtils {
 
 	}
 
+	async copyTextureToBuffer( texture, x, y, width, height ) {
+
+		const device = this.backend.device;
+
+		const textureData = this.backend.get( texture );
+		const textureGPU = textureData.texture;
+		const format = textureData.textureDescriptorGPU.format;
+		const bytesPerTexel = this._getBytesPerTexel( format );
+
+		const readBuffer = device.createBuffer(
+			{
+				size: width * height * bytesPerTexel,
+				usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+			}
+		);
+
+		const encoder = device.createCommandEncoder();
+
+		encoder.copyTextureToBuffer(
+			{
+				texture: textureGPU,
+				origin: { x, y },
+			},
+			{
+				buffer: readBuffer,
+				bytesPerRow: width * bytesPerTexel
+			},
+			{
+				width: width,
+				height: height
+			}
+
+		);
+
+		const typedArrayType = this._getTypedArrayType( format );
+
+		device.queue.submit( [ encoder.finish() ] );
+
+		await readBuffer.mapAsync( GPUMapMode.READ );
+
+		const buffer = readBuffer.getMappedRange();
+
+		return new typedArrayType( buffer );
+
+	}
+
 	_isEnvironmentTexture( texture ) {
 
 		const mapping = texture.mapping;
@@ -579,6 +625,42 @@ class WebGPUTextureUtils {
 
 	}
 
+	_getTypedArrayType( format ) {
+
+		if ( format === GPUTextureFormat.R8Uint ) return Uint8Array;
+		if ( format === GPUTextureFormat.R8Sint ) return Int8Array;
+		if ( format === GPUTextureFormat.R8Unorm ) return Uint8Array;
+		if ( format === GPUTextureFormat.R8Snorm ) return Int8Array;
+		if ( format === GPUTextureFormat.RG8Uint ) return Uint8Array;
+		if ( format === GPUTextureFormat.RG8Sint ) return Int8Array;
+		if ( format === GPUTextureFormat.RG8Unorm ) return Uint8Array;
+		if ( format === GPUTextureFormat.RG8Snorm ) return Int8Array;
+		if ( format === GPUTextureFormat.RGBA8Uint ) return Uint8Array;
+		if ( format === GPUTextureFormat.RGBA8Sint ) return Int8Array;
+		if ( format === GPUTextureFormat.RGBA8Unorm ) return Uint8Array;
+		if ( format === GPUTextureFormat.RGBA8Snorm ) return Int8Array;
+
+
+		if ( format === GPUTextureFormat.R16Uint ) return Uint16Array;
+		if ( format === GPUTextureFormat.R16Sint ) return Int16Array;
+		if ( format === GPUTextureFormat.RG16Uint ) return Uint16Array;
+		if ( format === GPUTextureFormat.RG16Sint ) return Int16Array;
+		if ( format === GPUTextureFormat.RGBA16Uint ) return Uint16Array;
+		if ( format === GPUTextureFormat.RGBA16Sint ) return Int16Array;
+
+
+		if ( format === GPUTextureFormat.R32Uint ) return Uint32Array;
+		if ( format === GPUTextureFormat.R32Sint ) return Int32Array;
+		if ( format === GPUTextureFormat.R32Float ) return Float32Array;
+		if ( format === GPUTextureFormat.RG32Uint ) return Uint32Array;
+		if ( format === GPUTextureFormat.RG32Sint ) return Int32Array;
+		if ( format === GPUTextureFormat.RG32Float ) return Float32Array;
+		if ( format === GPUTextureFormat.RGBA32Uint ) return Uint32Array;
+		if ( format === GPUTextureFormat.RGBA32Sint ) return Int32Array;
+		if ( format === GPUTextureFormat.RGBA32Float ) return Float32Array;
+
+	}
+
 	_getDimension( texture ) {
 
 		let dimension;

package/examples/jsm/renderers/webgpu/utils/WebGPUUtils.js

@@ -16,10 +16,14 @@ class WebGPUUtils {
 
 			format = this.getTextureFormatGPU( renderContext.depthTexture );
 
-		} else {
+		} else if ( renderContext.depth && renderContext.stencil ) {
 
 			format = GPUTextureFormat.Depth24PlusStencil8;
 
+		} else if ( renderContext.depth ) {
+
+			format = GPUTextureFormat.Depth24Plus;
+
 		}
 
 		return format;

package/examples/jsm/shaders/BlendShader.js

@@ -38,8 +38,7 @@ const BlendShader = {
 
 			vec4 texel1 = texture2D( tDiffuse1, vUv );
 			vec4 texel2 = texture2D( tDiffuse2, vUv );
-			gl_FragColor = mix( texel1, texel2, mixRatio );
-			gl_FragColor.a *= opacity;
+			gl_FragColor = opacity * mix( texel1, texel2, mixRatio );
 
 		}`
 

package/examples/jsm/shaders/BokehShader2.js

@@ -347,7 +347,7 @@ const BokehShader = {
 			gl_FragColor.a = 1.0;
 
 			#include <tonemapping_fragment>
-			#include <encodings_fragment>
+			#include <colorspace_fragment>
 		}`
 
 };

package/examples/jsm/shaders/CopyShader.js

@@ -34,8 +34,8 @@ const CopyShader = {
 
 		void main() {
 
-			gl_FragColor = texture2D( tDiffuse, vUv );
-			gl_FragColor.a *= opacity;
+			vec4 texel = texture2D( tDiffuse, vUv );
+			gl_FragColor = opacity * texel;
 
 
 		}`

package/examples/jsm/shaders/ToonShader.js

@@ -80,7 +80,7 @@ const ToonShader1 = {
 
 			}
 
-			#include <encodings_fragment>
+			#include <colorspace_fragment>
 
 		}`
 
@@ -148,7 +148,7 @@ const ToonShader2 = {
 
 			}
 
-			#include <encodings_fragment>
+			#include <colorspace_fragment>
 
 		}`
 
@@ -244,7 +244,7 @@ const ToonShaderHatching = {
 
 			}
 
-			#include <encodings_fragment>
+			#include <colorspace_fragment>
 
 		}`
 
@@ -317,7 +317,7 @@ const ToonShaderDotted = {
 
 			}
 
-			#include <encodings_fragment>
+			#include <colorspace_fragment>
 
 		}`
 

package/examples/jsm/shaders/WaterRefractionShader.js

@@ -84,7 +84,7 @@ const WaterRefractionShader = {
 			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
 
 			#include <tonemapping_fragment>
-			#include <encodings_fragment>
+			#include <colorspace_fragment>
 
 		}`
 

package/examples/jsm/webxr/OculusHandPointerModel.js

@@ -13,8 +13,8 @@ const POINTER_LENGTH = 0.035;
 const POINTER_SEGMENTS = 16;
 const POINTER_RINGS = 12;
 const POINTER_HEMISPHERE_ANGLE = 110;
-const YAXIS = new THREE.Vector3( 0, 1, 0 );
-const ZAXIS = new THREE.Vector3( 0, 0, 1 );
+const YAXIS = /* @__PURE__ */ new THREE.Vector3( 0, 1, 0 );
+const ZAXIS = /* @__PURE__ */ new THREE.Vector3( 0, 0, 1 );
 
 const CURSOR_RADIUS = 0.02;
 const CURSOR_MAX_DISTANCE = 1.5;
@@ -27,9 +27,10 @@ class OculusHandPointerModel extends THREE.Object3D {
 
 		this.hand = hand;
 		this.controller = controller;
+
+		// Unused
 		this.motionController = null;
 		this.envMap = null;
-
 		this.mesh = null;
 
 		this.pointerGeometry = null;
@@ -43,24 +44,36 @@ class OculusHandPointerModel extends THREE.Object3D {
 
 		this.raycaster = null;
 
-		hand.addEventListener( 'connected', ( event ) => {
+		this._onConnected = this._onConnected.bind( this );
+		this._onDisconnected = this._onDisconnected.bind( this );
+		this.hand.addEventListener( 'connected', this._onConnected );
+		this.hand.addEventListener( 'disconnected', this._onDisconnected );
 
-			const xrInputSource = event.data;
+	}
 
-			if ( xrInputSource.hand ) {
+	_onConnected( event ) {
 
-				this.visible = true;
-				this.xrInputSource = xrInputSource;
+		const xrInputSource = event.data;
+		if ( xrInputSource.hand ) {
 
-				if ( this.pointerObject === null ) {
+			this.visible = true;
+			this.xrInputSource = xrInputSource;
 
-					this.createPointer();
+			this.createPointer();
 
-				}
+		}
 
-			}
+	}
+
+	_onDisconnected() {
 
-		} );
+		this.visible = false;
+		this.xrInputSource = null;
+
+		if (this.pointerGeometry) this.pointerGeometry.dispose();
+		if (this.pointerMesh && this.pointerMesh.material) this.pointerMesh.material.dispose();
+
+		this.clear();
 
 	}
 
@@ -389,6 +402,14 @@ class OculusHandPointerModel extends THREE.Object3D {
 
 	}
 
+	dispose() {
+
+		this._onDisconnected();
+		this.hand.removeEventListener( 'connected', this._onConnected );
+		this.hand.removeEventListener( 'disconnected', this._onDisconnected );
+
+	}
+
 }
 
 export { OculusHandPointerModel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/three",
-  "version": "0.153.0",
+  "version": "0.154.1",
   "description": "JavaScript 3D library",
   "type": "module",
   "main": "./build/three.js",
@@ -84,6 +84,7 @@
   },
   "homepage": "https://threejs.org/",
   "devDependencies": {
+    "@puppeteer/browsers": "^1.4.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
     "chalk": "^5.2.0",