@needle-tools/three 0.145.4 → 0.146.2

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

@@ -1,6 +1,6 @@
 import { GPULoadOp, GPUStoreOp } from './constants.js';
-import { Color, Mesh, BoxGeometry, BackSide } from 'three';
-import { context, transformDirection, positionWorld, modelWorldMatrix, MeshBasicNodeMaterial } from 'three/nodes';
+import { Color, Mesh, BoxGeometry, BackSide, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from 'three';
+import { context, vec2, invert, texture, cubeTexture, transformDirection, positionWorld, modelWorldMatrix, viewportBottomLeft, equirectUV, MeshBasicNodeMaterial } from 'three/nodes';
 
 let _clearAlpha;
 const _clearColor = new Color();
@@ -45,7 +45,7 @@ class WebGPUBackground {
 			_clearAlpha = 1;
 			forceClear = true;
 
-		} else if ( background.isNode === true ) {
+		} else if ( background.isNode === true || background.isTexture === true ) {
 
 			_clearColor.copy( renderer._clearColor );
 			_clearAlpha = renderer._clearAlpha;
@@ -54,12 +54,41 @@ class WebGPUBackground {
 
 			if ( boxMesh === null ) {
 
-				const colorNode = context( background, {
-					uvNode: transformDirection( positionWorld, modelWorldMatrix )
-				} );
+				let node = null;
+
+				if ( background.isCubeTexture === true ) {
+
+					node = cubeTexture( background, transformDirection( positionWorld, modelWorldMatrix ) );
+
+				} else if ( background.isTexture === true ) {
+
+					let nodeUV = null;
+
+					if ( background.mapping === EquirectangularReflectionMapping || background.mapping === EquirectangularRefractionMapping ) {
+
+						const dirNode = transformDirection( positionWorld, modelWorldMatrix );
+
+						nodeUV = equirectUV( dirNode );
+						nodeUV = vec2( nodeUV.x, invert( nodeUV.y ) );
+
+					} else {
+
+						nodeUV = viewportBottomLeft;
+
+					}
+
+					node = texture( background, nodeUV );
+
+				} else /*if ( background.isNode === true )*/ {
+
+					node = context( background, {
+						uvNode: transformDirection( positionWorld, modelWorldMatrix )
+					} );
+
+				}
 
 				const nodeMaterial = new MeshBasicNodeMaterial();
-				nodeMaterial.colorNode = colorNode;
+				nodeMaterial.colorNode = node;
 				nodeMaterial.side = BackSide;
 				nodeMaterial.depthTest = false;
 				nodeMaterial.depthWrite = false;

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

@@ -1,4 +1,5 @@
 import { GPUIndexFormat, GPUTextureFormat, GPUStoreOp } from './constants.js';
+import WebGPUAnimation from './WebGPUAnimation.js';
 import WebGPUObjects from './WebGPUObjects.js';
 import WebGPUAttributes from './WebGPUAttributes.js';
 import WebGPUGeometries from './WebGPUGeometries.js';
@@ -132,6 +133,8 @@ class WebGPURenderer {
 		this._textures = null;
 		this._background = null;
 
+		this._animation = new WebGPUAnimation();
+
 		this._renderPassDescriptor = null;
 
 		this._currentRenderState = null;
@@ -147,6 +150,8 @@ class WebGPURenderer {
 
 		this._renderTarget = null;
 
+		this._initialized = false;
+
 		// some parameters require default values other than "undefined"
 
 		this._parameters.antialias = ( parameters.antialias === true );
@@ -168,6 +173,12 @@ class WebGPURenderer {
 
 	async init() {
 
+		if ( this._initialized === true ) {
+
+			throw new Error( 'WebGPURenderer: Device has already been initialized.' );
+
+		}
+
 		const parameters = this._parameters;
 
 		const adapterOptions = {
@@ -192,7 +203,7 @@ class WebGPURenderer {
 		const context = ( parameters.context !== undefined ) ? parameters.context : this.domElement.getContext( 'webgpu' );
 
 		context.configure( {
-			device: device,
+			device,
 			format: GPUTextureFormat.BGRA8Unorm, // this is the only valid context format right now (r121)
 			alphaMode: 'premultiplied'
 		} );
@@ -232,16 +243,21 @@ class WebGPURenderer {
 		this._setupColorBuffer();
 		this._setupDepthBuffer();
 
-	}
+		this._animation.setNodes( this._nodes );
+		this._animation.start();
+
+		this._initialized = true;
 
-	render( scene, camera ) {
+	}
 
-		// @TODO: move this to animation loop
+	async render( scene, camera ) {
 
-		this._nodes.updateFrame();
+		if ( this._initialized === false ) return await this.init();
 
 		//
 
+		if ( this._animation.isAnimating === false ) this._nodes.updateFrame();
+
 		if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
 
 		if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
@@ -276,6 +292,8 @@ class WebGPURenderer {
 
 		if ( renderTarget !== null ) {
 
+			this._textures.initRenderTarget( renderTarget );
+
 			// @TODO: Support RenderTarget with antialiasing.
 
 			const renderTargetProperties = this._properties.get( renderTarget );
@@ -354,6 +372,24 @@ class WebGPURenderer {
 
 	}
 
+	setAnimationLoop( callback ) {
+
+		if ( this._initialized === false ) this.init();
+
+		const animation = this._animation;
+
+		animation.setAnimationLoop( callback );
+
+		( callback === null ) ? animation.stop() : animation.start();
+
+	}
+
+	async getArrayFromBuffer( attribute ) {
+
+		return await this._attributes.getArrayBuffer( attribute );
+
+	}
+
 	getContext() {
 
 		return this._context;
@@ -571,21 +607,20 @@ class WebGPURenderer {
 		this._renderStates.dispose();
 		this._textures.dispose();
 
+		this.setRenderTarget( null );
+		this.setAnimationLoop( null );
+
 	}
 
 	setRenderTarget( renderTarget ) {
 
 		this._renderTarget = renderTarget;
 
-		if ( renderTarget !== null ) {
-
-			this._textures.initRenderTarget( renderTarget );
-
-		}
-
 	}
 
-	compute( ...computeNodes ) {
+	async compute( ...computeNodes ) {
+
+		if ( this._initialized === false ) return await this.init();
 
 		const device = this._device;
 		const computePipelines = this._computePipelines;

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

@@ -78,9 +78,9 @@ fn threejs_mod( x : f32, y : f32 ) -> f32 {
 }
 ` ),
 	repeatWrapping: new CodeNode( `
-fn threejs_repeatWrapping( uv : vec2<f32>, dimension : vec2<i32> ) -> vec2<i32> {
+fn threejs_repeatWrapping( uv : vec2<f32>, dimension : vec2<u32> ) -> vec2<u32> {
 
-	let uvScaled = vec2<i32>( uv * vec2<f32>( dimension ) );
+	let uvScaled = vec2<u32>( uv * vec2<f32>( dimension ) );
 
 	return ( ( uvScaled % dimension ) + dimension ) % dimension;
 
@@ -200,7 +200,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	getPropertyName( node, shaderStage = this.shaderStage ) {
 
-		if ( node.isNodeVarying === true ) {
+		if ( node.isNodeVarying === true && node.needsInterpolation === true ) {
 
 			if ( shaderStage === 'vertex' ) {
 
@@ -399,6 +399,18 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
+	getFragCoord() {
+
+		return this.getBuiltin( 'position', 'fragCoord', 'vec4<f32>', 'fragment' );
+
+	}
+
+	isFlipY() {
+
+		return false;
+
+	}
+
 	getAttributes( shaderStage ) {
 
 		const snippets = [];
@@ -463,24 +475,42 @@ class WebGPUNodeBuilder extends NodeBuilder {
 			this.getBuiltin( 'position', 'Vertex', 'vec4<f32>', 'vertex' );
 
 			const varyings = this.varyings;
+			const vars = this.vars[ shaderStage ];
 
 			for ( let index = 0; index < varyings.length; index ++ ) {
 
 				const varying = varyings[ index ];
 
-				snippets.push( `@location( ${index} ) ${ varying.name } : ${ this.getType( varying.type ) }` );
+				if ( varying.needsInterpolation ) {
+
+					snippets.push( `@location( ${index} ) ${ varying.name } : ${ this.getType( varying.type ) }` );
+
+				} else if ( vars.includes( varying ) === false ) {
+
+					vars.push( varying );
+
+				}
 
 			}
 
 		} else if ( shaderStage === 'fragment' ) {
 
 			const varyings = this.varyings;
+			const vars = this.vars[ shaderStage ];
 
 			for ( let index = 0; index < varyings.length; index ++ ) {
 
 				const varying = varyings[ index ];
 
-				snippets.push( `@location( ${index} ) ${ varying.name } : ${ this.getType( varying.type ) }` );
+				if ( varying.needsInterpolation ) {
+
+					snippets.push( `@location( ${index} ) ${ varying.name } : ${ this.getType( varying.type ) }` );
+
+				} else if ( vars.includes( varying ) === false ) {
+
+					vars.push( varying );
+
+				}
 
 			}
 

package/examples/jsm/shaders/MMDToonShader.js

@@ -45,8 +45,6 @@ void RE_IndirectDiffuse_BlinnPhong( const in vec3 irradiance, const in Geometric
 
 #define RE_Direct				RE_Direct_BlinnPhong
 #define RE_IndirectDiffuse		RE_IndirectDiffuse_BlinnPhong
-
-#define Material_LightProbeLOD( material )	(0)
 `;
 
 const mmd_toon_matcap_fragment = /* glsl */`

package/examples/jsm/shaders/VelocityShader.js

@@ -0,0 +1,128 @@
+import {
+	UniformsLib,
+	UniformsUtils,
+	Matrix4
+} from 'three';
+
+/**
+ * Mesh Velocity Shader @bhouston
+ */
+
+const VelocityShader = {
+
+	uniforms: UniformsUtils.merge( [
+		UniformsLib.common,
+		UniformsLib.displacementmap,
+		{
+			modelMatrixPrev: { value: new Matrix4() },
+			currentProjectionViewMatrix: { value: new Matrix4() },
+			previousProjectionViewMatrix: { value: new Matrix4() }
+		}
+	] ),
+
+	vertexShader: /* glsl */`
+#define NORMAL
+
+#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || defined( TANGENTSPACE_NORMALMAP )
+
+	varying vec3 vViewPosition;
+
+#endif
+
+#include <common>
+#include <packing>
+#include <uv_pars_vertex>
+#include <displacementmap_pars_vertex>
+#include <normal_pars_vertex>
+#include <morphtarget_pars_vertex>
+#include <skinning_pars_vertex>
+#include <logdepthbuf_pars_vertex>
+#include <clipping_planes_pars_vertex>
+
+uniform mat4 previousProjectionViewMatrix;
+uniform mat4 currentProjectionViewMatrix;
+
+uniform mat4 modelMatrixPrev;
+
+varying vec4 clipPositionCurrent;
+varying vec4 clipPositionPrevious;
+
+void main() {
+
+
+	#include <uv_vertex>
+
+	#include <beginnormal_vertex>
+	#include <morphnormal_vertex>
+	#include <skinbase_vertex>
+	#include <skinnormal_vertex>
+	#include <defaultnormal_vertex>
+	#include <normal_vertex>
+
+	#include <begin_vertex>
+	#include <morphtarget_vertex>
+	#include <displacementmap_vertex>
+	#include <morphtarget_vertex>
+	#include <skinning_vertex>
+
+#ifdef USE_SKINNING
+
+	vec4 mvPosition = modelViewMatrix * skinned;
+	clipPositionCurrent  = currentProjectionViewMatrix * modelMatrix * skinned;
+	clipPositionPrevious = previousProjectionViewMatrix * modelMatrixPrev * skinned;
+
+#else
+
+	vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );
+	clipPositionCurrent  = currentProjectionViewMatrix * modelMatrix * vec4( transformed, 1.0 );
+	clipPositionPrevious = previousProjectionViewMatrix * modelMatrixPrev * vec4( transformed, 1.0 );
+
+#endif
+
+	gl_Position = projectionMatrix * mvPosition;
+
+	#include <logdepthbuf_vertex>
+	#include <clipping_planes_vertex>
+}
+`,
+	fragmentShader: /* glsl */`
+#define NORMAL
+
+uniform float opacity;
+
+#include <packing>
+#include <uv_pars_fragment>
+#include <map_pars_fragment>
+#include <alphamap_pars_fragment>
+#include <alphatest_pars_fragment>
+#include <logdepthbuf_pars_fragment>
+#include <clipping_planes_pars_fragment>
+
+varying vec4 clipPositionCurrent;
+varying vec4 clipPositionPrevious;
+
+void main() {
+
+	vec4 diffuseColor = vec4( 1.0 );
+	diffuseColor.a = opacity;
+
+	#include <map_fragment>
+	#include <alphamap_fragment>
+	#include <alphatest_fragment>
+
+	vec2 ndcPositionCurrent  = clipPositionCurrent.xy/clipPositionCurrent.w;
+	vec2 ndcPositionPrevious = clipPositionPrevious.xy/clipPositionPrevious.w;
+	vec2 vel = ( ndcPositionCurrent - ndcPositionPrevious ) * 0.5;
+	vel = vel * 0.5 + 0.5;
+	vec2 v1 = packDepthToRG(vel.x);
+	vec2 v2 = packDepthToRG(vel.y);
+	gl_FragColor = vec4(v1.x, v1.y, v2.x, v2.y);
+
+	#include <logdepthbuf_fragment>
+
+}
+
+`
+};
+
+export { VelocityShader };

package/examples/jsm/utils/BufferGeometryUtils.js

@@ -192,11 +192,6 @@ function mergeBufferGeometries( geometries, useGroups = false ) {
 
 		}
 
-		// gather .userData
-
-		mergedGeometry.userData.mergedUserData = mergedGeometry.userData.mergedUserData || [];
-		mergedGeometry.userData.mergedUserData.push( geometry.userData );
-
 		if ( useGroups ) {
 
 			let count;
@@ -371,6 +366,28 @@ function mergeBufferAttributes( attributes ) {
 
 }
 
+/**
+ * @param {BufferAttribute}
+ * @return {BufferAttribute}
+ */
+export function deepCloneAttribute( attribute ) {
+
+	if ( attribute.isInstancedInterleavedBufferAttribute || attribute.isInterleavedBufferAttribute ) {
+
+		return deinterleaveAttribute( attribute );
+
+	}
+
+	if ( attribute.isInstancedBufferAttribute ) {
+
+		return new InstancedBufferAttribute().copy( attribute );
+
+	}
+
+	return new BufferAttribute().copy( attribute );
+
+}
+
 /**
  * @param {Array<BufferAttribute>} attributes
  * @return {Array<InterleavedBufferAttribute>}
@@ -1208,6 +1225,112 @@ function mergeGroups( geometry ) {
 
 }
 
+
+// Creates a new, non-indexed geometry with smooth normals everywhere except faces that meet at
+// an angle greater than the crease angle.
+function toCreasedNormals( geometry, creaseAngle = Math.PI / 3 /* 60 degrees */ ) {
+
+	const creaseDot = Math.cos( creaseAngle );
+	const hashMultiplier = ( 1 + 1e-10 ) * 1e2;
+
+	// reusable vertors
+	const verts = [ new Vector3(), new Vector3(), new Vector3() ];
+	const tempVec1 = new Vector3();
+	const tempVec2 = new Vector3();
+	const tempNorm = new Vector3();
+	const tempNorm2 = new Vector3();
+
+	// hashes a vector
+	function hashVertex( v ) {
+
+		const x = ~ ~ ( v.x * hashMultiplier );
+		const y = ~ ~ ( v.y * hashMultiplier );
+		const z = ~ ~ ( v.z * hashMultiplier );
+		return `${x},${y},${z}`;
+
+	}
+
+	const resultGeometry = geometry.toNonIndexed();
+	const posAttr = resultGeometry.attributes.position;
+	const vertexMap = {};
+
+	// find all the normals shared by commonly located vertices
+	for ( let i = 0, l = posAttr.count / 3; i < l; i ++ ) {
+
+		const i3 = 3 * i;
+		const a = verts[ 0 ].fromBufferAttribute( posAttr, i3 + 0 );
+		const b = verts[ 1 ].fromBufferAttribute( posAttr, i3 + 1 );
+		const c = verts[ 2 ].fromBufferAttribute( posAttr, i3 + 2 );
+
+		tempVec1.subVectors( c, b );
+		tempVec2.subVectors( a, b );
+
+		// add the normal to the map for all vertices
+		const normal = new Vector3().crossVectors( tempVec1, tempVec2 ).normalize();
+		for ( let n = 0; n < 3; n ++ ) {
+
+			const vert = verts[ n ];
+			const hash = hashVertex( vert );
+			if ( ! ( hash in vertexMap ) ) {
+
+				vertexMap[ hash ] = [];
+
+			}
+
+			vertexMap[ hash ].push( normal );
+
+		}
+
+	}
+
+	// average normals from all vertices that share a common location if they are within the
+	// provided crease threshold
+	const normalArray = new Float32Array( posAttr.count * 3 );
+	const normAttr = new BufferAttribute( normalArray, 3, false );
+	for ( let i = 0, l = posAttr.count / 3; i < l; i ++ ) {
+
+		// get the face normal for this vertex
+		const i3 = 3 * i;
+		const a = verts[ 0 ].fromBufferAttribute( posAttr, i3 + 0 );
+		const b = verts[ 1 ].fromBufferAttribute( posAttr, i3 + 1 );
+		const c = verts[ 2 ].fromBufferAttribute( posAttr, i3 + 2 );
+
+		tempVec1.subVectors( c, b );
+		tempVec2.subVectors( a, b );
+
+		tempNorm.crossVectors( tempVec1, tempVec2 ).normalize();
+
+		// average all normals that meet the threshold and set the normal value
+		for ( let n = 0; n < 3; n ++ ) {
+
+			const vert = verts[ n ];
+			const hash = hashVertex( vert );
+			const otherNormals = vertexMap[ hash ];
+			tempNorm2.set( 0, 0, 0 );
+
+			for ( let k = 0, lk = otherNormals.length; k < lk; k ++ ) {
+
+				const otherNorm = otherNormals[ k ];
+				if ( tempNorm.dot( otherNorm ) > creaseDot ) {
+
+					tempNorm2.add( otherNorm );
+
+				}
+
+			}
+
+			tempNorm2.normalize();
+			normAttr.setXYZ( i3 + n, tempNorm2.x, tempNorm2.y, tempNorm2.z );
+
+		}
+
+	}
+
+	resultGeometry.setAttribute( 'normal', normAttr );
+	return resultGeometry;
+
+}
+
 export {
 	computeTangents,
 	computeMikkTSpaceTangents,
@@ -1218,5 +1341,6 @@ export {
 	mergeVertices,
 	toTrianglesDrawMode,
 	computeMorphedAttributes,
-	mergeGroups
+	mergeGroups,
+	toCreasedNormals
 };