super-three 0.147.0 → 0.152.0

package/examples/jsm/renderers/CSS2DRenderer.js

@@ -1,6 +1,7 @@
 import {
 	Matrix4,
 	Object3D,
+	Vector2,
 	Vector3
 } from 'three';
 
@@ -19,6 +20,8 @@ class CSS2DObject extends Object3D {
 
 		this.element.setAttribute( 'draggable', false );
 
+		this.center = new Vector2( 0.5, 0.5 ); // ( 0, 0 ) is the lower left; ( 1, 1 ) is the top right
+
 		this.addEventListener( 'removed', function () {
 
 			this.traverse( function ( object ) {
@@ -41,6 +44,8 @@ class CSS2DObject extends Object3D {
 
 		this.element = source.element.cloneNode( true );
 
+		this.center = source.center;
+
 		return this;
 
 	}
@@ -125,7 +130,7 @@ class CSS2DRenderer {
 
 					const element = object.element;
 
-					element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
+					element.style.transform = 'translate(' + ( - 100 * object.center.x ) + '%,' + ( - 100 * object.center.y ) + '%)' + 'translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
 
 					if ( element.parentNode !== domElement ) {
 

package/examples/jsm/renderers/CSS3DRenderer.js

@@ -105,12 +105,16 @@ class CSS3DRenderer {
 
 		this.domElement = domElement;
 
+		const viewElement = document.createElement( 'div' );
+		viewElement.style.transformOrigin = '0 0';
+		viewElement.style.pointerEvents = 'none';
+		domElement.appendChild( viewElement );
+
 		const cameraElement = document.createElement( 'div' );
 
 		cameraElement.style.transformStyle = 'preserve-3d';
-		cameraElement.style.pointerEvents = 'none';
 
-		domElement.appendChild( cameraElement );
+		viewElement.appendChild( cameraElement );
 
 		this.getSize = function () {
 
@@ -127,11 +131,25 @@ class CSS3DRenderer {
 
 			if ( cache.camera.fov !== fov ) {
 
-				domElement.style.perspective = camera.isPerspectiveCamera ? fov + 'px' : '';
+				viewElement.style.perspective = camera.isPerspectiveCamera ? fov + 'px' : '';
 				cache.camera.fov = fov;
 
 			}
 
+			if ( camera.view && camera.view.enabled ) {
+
+				// view offset
+				viewElement.style.transform = `translate( ${ - camera.view.offsetX * ( _width / camera.view.width ) }px, ${ - camera.view.offsetY * ( _height / camera.view.height ) }px )`;
+
+				// view fullWidth and fullHeight, view width and height
+				viewElement.style.transform += `scale( ${ camera.view.fullWidth / camera.view.width }, ${ camera.view.fullHeight / camera.view.height } )`;
+
+			} else {
+
+				viewElement.style.transform = '';
+
+			}
+
 			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
 			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 
@@ -144,9 +162,10 @@ class CSS3DRenderer {
 
 			}
 
+			const scaleByViewOffset = camera.view && camera.view.enabled ? camera.view.height / camera.view.fullHeight : 1;
 			const cameraCSSMatrix = camera.isOrthographicCamera ?
-				'scale(' + fov + ')' + 'translate(' + epsilon( tx ) + 'px,' + epsilon( ty ) + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse ) :
-				'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse );
+				`scale( ${ scaleByViewOffset } )` + 'scale(' + fov + ')' + 'translate(' + epsilon( tx ) + 'px,' + epsilon( ty ) + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse ) :
+				`scale( ${ scaleByViewOffset } )` + 'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse );
 
 			const style = cameraCSSMatrix +
 				'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
@@ -173,6 +192,9 @@ class CSS3DRenderer {
 			domElement.style.width = width + 'px';
 			domElement.style.height = height + 'px';
 
+			viewElement.style.width = width + 'px';
+			viewElement.style.height = height + 'px';
+
 			cameraElement.style.width = width + 'px';
 			cameraElement.style.height = height + 'px';
 

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

@@ -17,6 +17,12 @@ const glslMethods = {
 	[ MathNode.ATAN2 ]: 'atan'
 };
 
+const precisionLib = {
+	low: 'lowp',
+	medium: 'mediump',
+	high: 'highp'
+};
+
 function getIncludeSnippet( name ) {
 
 	return `#include <${name}>`;
@@ -58,18 +64,6 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	}
 
-	addFlowCode( code ) {
-
-		if ( ! /;\s*$/.test( code ) ) {
-
-			code += ';';
-
-		}
-
-		super.addFlowCode( code + '\n\t' );
-
-	}
-
 	_parseShaderLib() {
 
 		const material = this.material;
@@ -103,7 +97,7 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 		const { material, renderer } = this;
 
-		if ( renderer.toneMappingNode?.isNode === true ) {
+		if ( renderer.toneMappingNode && renderer.toneMappingNode.isNode === true ) {
 
 			this.addSlot( 'fragment', new SlotNode( {
 				node: material.colorNode,
@@ -428,27 +422,21 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	}
 
-	getTexture( textureProperty, uvSnippet ) {
-
-		return `texture2D( ${textureProperty}, ${uvSnippet} )`;
-
-	}
-
-	getTextureBias( textureProperty, uvSnippet, biasSnippet ) {
+	getTexture( texture, textureProperty, uvSnippet ) {
 
-		if ( this.material.extensions !== undefined ) this.material.extensions.shaderTextureLOD = true;
+		if ( texture.isTextureCube ) {
 
-		return `textureLod( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
+			return `textureCube( ${textureProperty}, ${uvSnippet} )`;
 
-	}
+		} else {
 
-	getCubeTexture( textureProperty, uvSnippet ) {
+			return `texture2D( ${textureProperty}, ${uvSnippet} )`;
 
-		return `textureCube( ${textureProperty}, ${uvSnippet} )`;
+		}
 
 	}
 
-	getCubeTextureBias( textureProperty, uvSnippet, biasSnippet ) {
+	getTextureBias( texture, textureProperty, uvSnippet, biasSnippet ) {
 
 		if ( this.material.extensions !== undefined ) this.material.extensions.shaderTextureLOD = true;
 
@@ -460,29 +448,45 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 		const uniforms = this.uniforms[ shaderStage ];
 
-		let snippet = '';
+		let output = '';
 
 		for ( const uniform of uniforms ) {
 
+			let snippet = null;
+
 			if ( uniform.type === 'texture' ) {
 
-				snippet += `uniform sampler2D ${uniform.name}; `;
+				snippet = `sampler2D ${uniform.name}; `;
 
 			} else if ( uniform.type === 'cubeTexture' ) {
 
-				snippet += `uniform samplerCube ${uniform.name}; `;
+				snippet = `samplerCube ${uniform.name}; `;
 
 			} else {
 
 				const vectorType = this.getVectorType( uniform.type );
 
-				snippet += `uniform ${vectorType} ${uniform.name}; `;
+				snippet = `${vectorType} ${uniform.name}; `;
 
 			}
 
+			const precision = uniform.node.precision;
+
+			if ( precision !== null ) {
+
+				snippet = 'uniform ' + precisionLib[ precision ] + ' ' + snippet;
+
+			} else {
+
+				snippet = 'uniform ' + snippet;
+
+			}
+
+			output += snippet;
+
 		}
 
-		return snippet;
+		return output;
 
 	}
 

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

@@ -23,9 +23,9 @@ class WebGPUAnimation {
 
 			this.requestId = self.requestAnimationFrame( update );
 
-			this.animationLoop( time, frame );
+			this.nodes.nodeFrame.update();
 
-			this.nodes.updateFrame();
+			this.animationLoop( time, frame );
 
 		};
 

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

@@ -9,7 +9,7 @@ class WebGPUAttributes {
 
 	get( attribute ) {
 
-		if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
+		attribute = this._getAttribute( attribute );
 
 		return this.buffers.get( attribute );
 
@@ -17,7 +17,7 @@ class WebGPUAttributes {
 
 	remove( attribute ) {
 
-		if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
+		attribute = this._getAttribute( attribute );
 
 		const data = this.buffers.get( attribute );
 
@@ -33,7 +33,7 @@ class WebGPUAttributes {
 
 	update( attribute, isIndex = false, usage = null ) {
 
-		if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
+		attribute = this._getAttribute( attribute );
 
 		let data = this.buffers.get( attribute );
 
@@ -81,6 +81,7 @@ class WebGPUAttributes {
 		if ( gpuReadBuffer === null ) {
 
 			gpuReadBuffer = device.createBuffer( {
+				label: attribute.name,
 				size,
 				usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
 			} );
@@ -110,7 +111,15 @@ class WebGPUAttributes {
 
 		const arrayBuffer = gpuReadBuffer.getMappedRange();
 
-		return new Float32Array( arrayBuffer );
+		return arrayBuffer;
+
+	}
+
+	_getAttribute( attribute ) {
+
+		if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
+
+		return attribute;
 
 	}
 
@@ -120,6 +129,7 @@ class WebGPUAttributes {
 		const size = array.byteLength + ( ( 4 - ( array.byteLength % 4 ) ) % 4 ); // ensure 4 byte alignment, see #20441
 
 		const buffer = this.device.createBuffer( {
+			label: attribute.name,
 			size,
 			usage: usage | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
 			mappedAtCreation: true

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

@@ -1,17 +1,19 @@
 import { GPULoadOp, GPUStoreOp } from './constants.js';
-import { Color, Mesh, BoxGeometry, BackSide, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from 'three';
-import { context, vec2, invert, texture, cubeTexture, transformDirection, positionWorld, modelWorldMatrix, viewportBottomLeft, equirectUV, MeshBasicNodeMaterial } from 'three/nodes';
+import { Color, Mesh, BoxGeometry, BackSide } from 'three';
+import { context, positionWorldDirection, MeshBasicNodeMaterial } from '../../nodes/Nodes.js';
 
 let _clearAlpha;
 const _clearColor = new Color();
 
 class WebGPUBackground {
 
-	constructor( renderer ) {
+	constructor( renderer, properties ) {
 
 		this.renderer = renderer;
+		this.properties = properties;
 
 		this.boxMesh = null;
+		this.boxMeshNode = null;
 
 		this.forceClear = false;
 
@@ -23,10 +25,10 @@ class WebGPUBackground {
 
 	}
 
-	update( renderList, scene ) {
+	update( scene, renderList, renderState ) {
 
 		const renderer = this.renderer;
-		const background = ( scene.isScene === true ) ? scene.backgroundNode || scene.background : null;
+		const background = ( scene.isScene === true ) ? scene.backgroundNode || this.properties.get( scene ).backgroundNode || scene.background : null;
 
 		let forceClear = this.forceClear;
 
@@ -45,7 +47,10 @@ class WebGPUBackground {
 			_clearAlpha = 1;
 			forceClear = true;
 
-		} else if ( background.isNode === true || background.isTexture === true ) {
+		} else if ( background.isNode === true ) {
+
+			const sceneProperties = this.properties.get( scene );
+			const backgroundNode = background;
 
 			_clearColor.copy( renderer._clearColor );
 			_clearAlpha = renderer._clearAlpha;
@@ -54,56 +59,43 @@ class WebGPUBackground {
 
 			if ( boxMesh === null ) {
 
-				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 )
-					} );
-
-				}
+				this.boxMeshNode = context( backgroundNode, {
+					// @TODO: Add Texture2D support using node context
+					getUVNode: () => positionWorldDirection
+				} );
 
 				const nodeMaterial = new MeshBasicNodeMaterial();
-				nodeMaterial.colorNode = node;
+				nodeMaterial.colorNode = this.boxMeshNode;
 				nodeMaterial.side = BackSide;
 				nodeMaterial.depthTest = false;
 				nodeMaterial.depthWrite = false;
 				nodeMaterial.fog = false;
 
 				this.boxMesh = boxMesh = new Mesh( new BoxGeometry( 1, 1, 1 ), nodeMaterial );
+				boxMesh.frustumCulled = false;
 
 				boxMesh.onBeforeRender = function ( renderer, scene, camera ) {
 
-					this.matrixWorld.copyPosition( camera.matrixWorld );
+					const scale = camera.far;
+
+					this.matrixWorld.makeScale( scale, scale, scale ).copyPosition( camera.matrixWorld );
 
 				};
 
 			}
 
+			const backgroundCacheKey = backgroundNode.getCacheKey();
+
+			if ( sceneProperties.backgroundCacheKey !== backgroundCacheKey ) {
+
+				this.boxMeshNode.node = backgroundNode;
+
+				boxMesh.material.needsUpdate = true;
+
+				sceneProperties.backgroundCacheKey = backgroundCacheKey;
+
+			}
+
 			renderList.unshift( boxMesh, boxMesh.geometry, boxMesh.material, 0, 0, null );
 
 		} else {
@@ -114,9 +106,8 @@ class WebGPUBackground {
 
 		// configure render pass descriptor
 
-		const renderPassDescriptor = renderer._renderPassDescriptor;
-		const colorAttachment = renderPassDescriptor.colorAttachments[ 0 ];
-		const depthStencilAttachment = renderPassDescriptor.depthStencilAttachment;
+		const colorAttachment = renderState.descriptorGPU.colorAttachments[ 0 ];
+		const depthStencilAttachment = renderState.descriptorGPU.depthStencilAttachment;
 
 		if ( renderer.autoClear === true || forceClear === true ) {
 
@@ -131,36 +122,62 @@ class WebGPUBackground {
 			} else {
 
 				colorAttachment.loadOp = GPULoadOp.Load;
+				colorAttachment.storeOp = GPUStoreOp.Store;
 
 			}
 
-			if ( renderer.autoClearDepth === true ) {
+			if ( renderState.depth ) {
 
-				depthStencilAttachment.depthClearValue = renderer._clearDepth;
-				depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
+				if ( renderer.autoClearDepth === true ) {
 
-			} else {
+					depthStencilAttachment.depthClearValue = renderer._clearDepth;
+					depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
+					depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
 
-				depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+				} else {
+
+					depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+					depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+
+				}
 
 			}
 
-			if ( renderer.autoClearStencil === true ) {
+			if ( renderState.stencil ) {
 
-				depthStencilAttachment.stencilClearValue = renderer._clearStencil;
-				depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
+				if ( renderer.autoClearStencil === true ) {
 
-			} else {
+					depthStencilAttachment.stencilClearValue = renderer._clearStencil;
+					depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
+					depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
 
-				depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
+				} else {
+
+					depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
+					depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+
+				}
 
 			}
 
 		} else {
 
 			colorAttachment.loadOp = GPULoadOp.Load;
-			depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
-			depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
+			colorAttachment.storeOp = GPUStoreOp.Store;
+
+			if ( renderState.depth ) {
+
+				depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+				depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+
+			}
+
+			if ( renderState.stencil ) {
+
+				depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
+				depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+
+			}
 
 		}
 

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

@@ -17,20 +17,20 @@ class WebGPUBindings {
 
 	}
 
-	get( object ) {
+	get( renderObject ) {
 
-		let data = this.uniformsData.get( object );
+		let data = this.uniformsData.get( renderObject );
 
 		if ( data === undefined ) {
 
 			// each object defines an array of bindings (ubos, textures, samplers etc.)
 
-			const nodeBuilder = this.nodes.get( object );
+			const nodeBuilder = this.nodes.get( renderObject );
 			const bindings = nodeBuilder.getBindings();
 
 			// setup (static) binding layout and (dynamic) binding group
 
-			const pipeline = object.isNode ? this.computePipelines.get( object ) : this.renderPipelines.get( object ).pipeline;
+			const pipeline = this.renderPipelines.get( renderObject ).pipeline;
 
 			const bindLayout = pipeline.getBindGroupLayout( 0 );
 			const bindGroup = this._createBindGroup( bindings, bindLayout );
@@ -41,7 +41,7 @@ class WebGPUBindings {
 				bindings: bindings
 			};
 
-			this.uniformsData.set( object, data );
+			this.uniformsData.set( renderObject, data );
 
 		}
 
@@ -49,25 +49,22 @@ class WebGPUBindings {
 
 	}
 
-	remove( object ) {
-
-		this.uniformsData.delete( object );
-
-	}
-
-	getForCompute( param ) {
+	getForCompute( computeNode ) {
 
-		let data = this.uniformsData.get( param );
+		let data = this.uniformsData.get( computeNode );
 
 		if ( data === undefined ) {
 
-			// bindings are not yet retrieved via node material
+			// each object defines an array of bindings (ubos, textures, samplers etc.)
+
+			const nodeBuilder = this.nodes.getForCompute( computeNode );
+			const bindings = nodeBuilder.getBindings();
 
-			const bindings = param.bindings !== undefined ? param.bindings.slice() : [];
+			// setup (static) binding layout and (dynamic) binding group
 
-			const computePipeline = this.computePipelines.get( param );
+			const pipeline = this.computePipelines.get( computeNode );
 
-			const bindLayout = computePipeline.getBindGroupLayout( 0 );
+			const bindLayout = pipeline.getBindGroupLayout( 0 );
 			const bindGroup = this._createBindGroup( bindings, bindLayout );
 
 			data = {
@@ -76,7 +73,7 @@ class WebGPUBindings {
 				bindings: bindings
 			};
 
-			this.uniformsData.set( param, data );
+			this.uniformsData.set( computeNode, data );
 
 		}
 
@@ -84,6 +81,12 @@ class WebGPUBindings {
 
 	}
 
+	remove( object ) {
+
+		this.uniformsData.delete( object );
+
+	}
+
 	update( object ) {
 
 		const textures = this.textures;
@@ -144,6 +147,7 @@ class WebGPUBindings {
 				const texture = binding.getTexture();
 
 				const needsTextureRefresh = textures.updateTexture( texture );
+
 				const textureGPU = textures.getTextureGPU( texture );
 
 				if ( textureGPU !== undefined && binding.textureGPU !== textureGPU || needsTextureRefresh === true ) {
@@ -188,6 +192,7 @@ class WebGPUBindings {
 					const byteLength = binding.getByteLength();
 
 					binding.bufferGPU = this.device.createBuffer( {
+						label: 'bindingBuffer',
 						size: byteLength,
 						usage: binding.usage
 					} );
@@ -227,6 +232,14 @@ class WebGPUBindings {
 
 						binding.textureGPU = this.textures.getDefaultCubeTexture();
 
+					} else if ( binding.texture.isVideoTexture ) {
+
+						binding.textureGPU = this.textures.getDefaultVideoTexture();
+
+					} else if ( binding.texture.isDepthTexture ) {
+
+						binding.textureGPU = this.textures.getDefaultDepthTexture();
+
 					} else {
 
 						binding.textureGPU = this.textures.getDefaultTexture();
@@ -235,7 +248,9 @@ class WebGPUBindings {
 
 				}
 
-				entries.push( { binding: bindingPoint, resource: binding.textureGPU.createView( { dimension: binding.dimension } ) } );
+				const resource = binding.textureGPU instanceof GPUTexture ? binding.textureGPU.createView( { aspect: binding.aspect, dimension: binding.dimension } ) : binding.textureGPU;
+
+				entries.push( { binding: bindingPoint, resource } );
 
 			}
 

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

@@ -32,7 +32,7 @@ class WebGPUComputePipelines {
 
 			// get shader
 
-			const nodeBuilder = this.nodes.get( computeNode );
+			const nodeBuilder = this.nodes.getForCompute( computeNode );
 			const computeShader = nodeBuilder.computeShader;
 
 			const shader = {