super-three 0.157.1 → 0.160.0

package/examples/jsm/renderers/SVGRenderer.js

@@ -5,6 +5,7 @@ import {
 	Matrix3,
 	Matrix4,
 	Object3D,
+	SRGBColorSpace,
 	Vector3
 } from 'three';
 import { Projector } from '../renderers/Projector.js';
@@ -75,6 +76,8 @@ class SVGRenderer {
 
 		this.overdraw = 0.5;
 
+		this.outputColorSpace = SRGBColorSpace;
+
 		this.info = {
 
 			render: {
@@ -155,7 +158,7 @@ class SVGRenderer {
 		this.clear = function () {
 
 			removeChildNodes();
-			_svg.style.backgroundColor = _clearColor.getStyle();
+			_svg.style.backgroundColor = _clearColor.getStyle( _this.outputColorSpace );
 
 		};
 
@@ -173,7 +176,7 @@ class SVGRenderer {
 			if ( background && background.isColor ) {
 
 				removeChildNodes();
-				_svg.style.backgroundColor = background.getStyle();
+				_svg.style.backgroundColor = background.getStyle( _this.outputColorSpace );
 
 			} else if ( this.autoClear === true ) {
 
@@ -389,7 +392,7 @@ class SVGRenderer {
 
 			if ( material.isSpriteMaterial || material.isPointsMaterial ) {
 
-				style = 'fill:' + material.color.getStyle() + ';fill-opacity:' + material.opacity;
+				style = 'fill:' + material.color.getStyle( _this.outputColorSpace ) + ';fill-opacity:' + material.opacity;
 
 			}
 
@@ -403,7 +406,7 @@ class SVGRenderer {
 
 			if ( material.isLineBasicMaterial ) {
 
-				let style = 'fill:none;stroke:' + material.color.getStyle() + ';stroke-opacity:' + material.opacity + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap;
+				let style = 'fill:none;stroke:' + material.color.getStyle( _this.outputColorSpace ) + ';stroke-opacity:' + material.opacity + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap;
 
 				if ( material.isLineDashedMaterial ) {
 
@@ -463,11 +466,11 @@ class SVGRenderer {
 
 			if ( material.wireframe ) {
 
-				style = 'fill:none;stroke:' + _color.getStyle() + ';stroke-opacity:' + material.opacity + ';stroke-width:' + material.wireframeLinewidth + ';stroke-linecap:' + material.wireframeLinecap + ';stroke-linejoin:' + material.wireframeLinejoin;
+				style = 'fill:none;stroke:' + _color.getStyle( _this.outputColorSpace ) + ';stroke-opacity:' + material.opacity + ';stroke-width:' + material.wireframeLinewidth + ';stroke-linecap:' + material.wireframeLinecap + ';stroke-linejoin:' + material.wireframeLinejoin;
 
 			} else {
 
-				style = 'fill:' + _color.getStyle() + ';fill-opacity:' + material.opacity;
+				style = 'fill:' + _color.getStyle( _this.outputColorSpace ) + ';fill-opacity:' + material.opacity;
 
 			}
 

package/examples/jsm/renderers/common/Animation.js

@@ -1,23 +1,18 @@
 class Animation {
 
-	constructor() {
+	constructor( nodes, info ) {
 
-		this.nodes = null;
+		this.nodes = nodes;
+		this.info = info;
 
 		this.animationLoop = null;
 		this.requestId = null;
 
-		this.isAnimating = false;
-
-		this.context = self;
+		this._init();
 
 	}
 
-	start() {
-
-		if ( this.isAnimating === true || this.animationLoop === null || this.nodes === null ) return;
-
-		this.isAnimating = true;
+	_init() {
 
 		const update = ( time, frame ) => {
 
@@ -25,20 +20,20 @@ class Animation {
 
 			this.nodes.nodeFrame.update();
 
-			this.animationLoop( time, frame );
+			this.info.frame = this.nodes.nodeFrame.frameId;
+
+			if ( this.animationLoop !== null ) this.animationLoop( time, frame );
 
 		};
 
-		this.requestId = self.requestAnimationFrame( update );
+		update();
 
 	}
 
-	stop() {
+	dispose() {
 
 		self.cancelAnimationFrame( this.requestId );
 
-		this.isAnimating = false;
-
 	}
 
 	setAnimationLoop( callback ) {
@@ -47,12 +42,6 @@ class Animation {
 
 	}
 
-	setNodes( nodes ) {
-
-		this.nodes = nodes;
-
-	}
-
 }
 
 export default Animation;

package/examples/jsm/renderers/common/Backend.js

@@ -1,6 +1,8 @@
 let vector2 = null;
 let vector4 = null;
+let color4 = null;
 
+import Color4 from './Color4.js';
 import { Vector2, Vector4, REVISION, createCanvasElement } from 'three';
 
 class Backend {
@@ -52,9 +54,9 @@ class Backend {
 
 	// cache key
 
-	needsUpdate( renderObject ) { } // return Boolean ( fast test )
+	needsRenderUpdate( renderObject ) { } // return Boolean ( fast test )
 
-	getCacheKey( renderObject ) { } // return String
+	getRenderCacheKey( renderObject ) { } // return String
 
 	// node builder
 
@@ -112,6 +114,20 @@ class Backend {
 
 	}
 
+	getClearColor() {
+
+		const renderer = this.renderer;
+
+		color4 = color4 || new Color4();
+
+		renderer.getClearColor( color4 );
+
+		color4.getRGB( color4, this.renderer.currentColorSpace );
+
+		return color4;
+
+	}
+
 	getDomElement() {
 
 		let domElement = this.domElement;
@@ -121,7 +137,7 @@ class Backend {
 			domElement = ( this.parameters.canvas !== undefined ) ? this.parameters.canvas : createCanvasElement();
 
 			// OffscreenCanvas does not have setAttribute, see #22811
-			if ( 'setAttribute' in domElement ) domElement.setAttribute( 'data-engine', `three.js r${REVISION}` );
+			if ( 'setAttribute' in domElement ) domElement.setAttribute( 'data-engine', `three.js r${REVISION} webgpu` );
 
 			this.domElement = domElement;
 

package/examples/jsm/renderers/common/Background.js

@@ -1,9 +1,9 @@
 import DataMap from './DataMap.js';
-import { Color, Mesh, SphereGeometry, BackSide } from 'three';
-import { context, normalWorld, backgroundBlurriness, backgroundIntensity, NodeMaterial, modelViewProjection } from '../../nodes/Nodes.js';
+import Color4 from './Color4.js';
+import { Mesh, SphereGeometry, BackSide } from 'three';
+import { vec4, context, normalWorld, backgroundBlurriness, backgroundIntensity, NodeMaterial, modelViewProjection } from '../../nodes/Nodes.js';
 
-let _clearAlpha;
-const _clearColor = new Color();
+const _clearColor = new Color4();
 
 class Background extends DataMap {
 
@@ -14,9 +14,6 @@ class Background extends DataMap {
 		this.renderer = renderer;
 		this.nodes = nodes;
 
-		this.backgroundMesh = null;
-		this.backgroundMeshNode = null;
-
 	}
 
 	update( scene, renderList, renderContext ) {
@@ -30,15 +27,16 @@ class Background extends DataMap {
 
 			// no background settings, use clear color configuration from the renderer
 
-			_clearColor.copyLinearToSRGB( renderer._clearColor );
-			_clearAlpha = renderer._clearAlpha;
+			renderer._clearColor.getRGB( _clearColor, this.renderer.currentColorSpace );
+			_clearColor.a = renderer._clearColor.a;
 
 		} else if ( background.isColor === true ) {
 
 			// background is an opaque color
 
-			_clearColor.copyLinearToSRGB( background );
-			_clearAlpha = 1;
+			background.getRGB( _clearColor, this.renderer.currentColorSpace );
+			_clearColor.a = 1;
+
 			forceClear = true;
 
 		} else if ( background.isNode === true ) {
@@ -47,30 +45,30 @@ class Background extends DataMap {
 			const backgroundNode = background;
 
 			_clearColor.copy( renderer._clearColor );
-			_clearAlpha = renderer._clearAlpha;
 
-			let backgroundMesh = this.backgroundMesh;
+			let backgroundMesh = sceneData.backgroundMesh;
 
-			if ( backgroundMesh === null ) {
+			if ( backgroundMesh === undefined ) {
 
-				this.backgroundMeshNode = context( backgroundNode, {
+				const backgroundMeshNode = context( vec4( backgroundNode ), {
 					// @TODO: Add Texture2D support using node context
-					getUVNode: () => normalWorld,
-					getSamplerLevelNode: () => backgroundBlurriness
+					getUV: () => normalWorld,
+					getTextureLevel: () => backgroundBlurriness
 				} ).mul( backgroundIntensity );
 
 				let viewProj = modelViewProjection();
 				viewProj = viewProj.setZ( viewProj.w );
 
 				const nodeMaterial = new NodeMaterial();
-				nodeMaterial.outputNode = this.backgroundMeshNode;
 				nodeMaterial.side = BackSide;
 				nodeMaterial.depthTest = false;
 				nodeMaterial.depthWrite = false;
 				nodeMaterial.fog = false;
 				nodeMaterial.vertexNode = viewProj;
+				nodeMaterial.fragmentNode = backgroundMeshNode;
 
-				this.backgroundMesh = backgroundMesh = new Mesh( new SphereGeometry( 1, 32, 32 ), nodeMaterial );
+				sceneData.backgroundMeshNode = backgroundMeshNode;
+				sceneData.backgroundMesh = backgroundMesh = new Mesh( new SphereGeometry( 1, 32, 32 ), nodeMaterial );
 				backgroundMesh.frustumCulled = false;
 
 				backgroundMesh.onBeforeRender = function ( renderer, scene, camera ) {
@@ -85,7 +83,7 @@ class Background extends DataMap {
 
 			if ( sceneData.backgroundCacheKey !== backgroundCacheKey ) {
 
-				this.backgroundMeshNode.node = backgroundNode;
+				sceneData.backgroundMeshNode.node = vec4( backgroundNode );
 
 				backgroundMesh.material.needsUpdate = true;
 
@@ -105,14 +103,14 @@ class Background extends DataMap {
 
 		if ( renderer.autoClear === true || forceClear === true ) {
 
-			_clearColor.multiplyScalar( _clearAlpha );
+			_clearColor.multiplyScalar( _clearColor.a );
 
 			const clearColorValue = renderContext.clearColorValue;
 
 			clearColorValue.r = _clearColor.r;
 			clearColorValue.g = _clearColor.g;
 			clearColorValue.b = _clearColor.b;
-			clearColorValue.a = _clearAlpha;
+			clearColorValue.a = _clearColor.a;
 
 			renderContext.depthClearValue = renderer._clearDepth;
 			renderContext.stencilClearValue = renderer._clearStencil;

package/examples/jsm/renderers/common/Bindings.js

@@ -16,8 +16,6 @@ class Bindings extends DataMap {
 
 		this.pipelines.bindings = this; // assign bindings to pipelines
 
-		this.updateMap = new WeakMap();
-
 	}
 
 	getForRender( renderObject ) {
@@ -50,7 +48,7 @@ class Bindings extends DataMap {
 
 			const nodeBuilderState = this.nodes.getForCompute( computeNode );
 
-			const bindings = nodeBuilderState.bindings;
+			const bindings = nodeBuilderState.bindings.compute;
 
 			data.bindings = bindings;
 
@@ -100,24 +98,25 @@ class Bindings extends DataMap {
 
 		const { backend } = this;
 
-		const updateMap = this.updateMap;
-		const frame = this.info.render.frame;
-
 		let needsBindingsUpdate = false;
 
 		// iterate over all bindings and check if buffer updates or a new binding group is required
 
 		for ( const binding of bindings ) {
 
-			const isUpdated = updateMap.get( binding ) === frame;
+			if ( binding.isNodeUniformsGroup ) {
+
+				const updated = this.nodes.updateGroup( binding );
 
-			if ( isUpdated ) continue;
+				if ( ! updated ) continue;
+
+			}
 
 			if ( binding.isUniformBuffer ) {
 
-				const needsUpdate = binding.update();
+				const updated = binding.update();
 
-				if ( needsUpdate ) {
+				if ( updated ) {
 
 					backend.updateBinding( binding );
 
@@ -125,37 +124,47 @@ class Bindings extends DataMap {
 
 			} else if ( binding.isSampledTexture ) {
 
+				const texture = binding.texture;
+
 				if ( binding.needsBindingsUpdate ) needsBindingsUpdate = true;
 
-				const needsUpdate = binding.update();
+				const updated = binding.update();
 
-				if ( needsUpdate ) {
+				if ( updated ) {
 
 					this.textures.updateTexture( binding.texture );
 
 				}
 
-			}
+				if ( texture.isStorageTexture === true ) {
 
-			updateMap.set( binding, frame );
+					const textureData = this.get( texture );
 
-		}
+					if ( binding.store === true ) {
 
-		if ( needsBindingsUpdate === true ) {
+						textureData.needsMipmap = true;
 
-			const pipeline = this.pipelines.getForRender( object );
+					} else if ( texture.generateMipmaps === true && this.textures.needsMipmaps( texture ) && textureData.needsMipmap === true ) {
 
-			this.backend.updateBindings( bindings, pipeline );
+						this.backend.generateMipmaps( texture );
+
+						textureData.needsMipmap = false;
+
+					}
+
+				}
+
+			}
 
 		}
 
-	}
+		if ( needsBindingsUpdate === true ) {
 
-	dispose() {
+			const pipeline = this.pipelines.getForRender( object );
 
-		super.dispose();
+			this.backend.updateBindings( bindings, pipeline );
 
-		this.updateMap = new WeakMap();
+		}
 
 	}
 

package/examples/jsm/renderers/common/ChainMap.js

@@ -12,7 +12,7 @@ export default class ChainMap {
 
 			let map = this.weakMap;
 
-			for ( let i = 0; i < keys.length - 1; i ++ ) {
+			for ( let i = 0; i < keys.length; i ++ ) {
 
 				map = map.get( keys[ i ] );
 
@@ -36,7 +36,7 @@ export default class ChainMap {
 
 			let map = this.weakMap;
 
-			for ( let i = 0; i < keys.length - 1; i ++ ) {
+			for ( let i = 0; i < keys.length; i ++ ) {
 
 				const key = keys[ i ];
 
@@ -62,7 +62,7 @@ export default class ChainMap {
 
 			let map = this.weakMap;
 
-			for ( let i = 0; i < keys.length - 1; i ++ ) {
+			for ( let i = 0; i < keys.length; i ++ ) {
 
 				map = map.get( keys[ i ] );
 

package/examples/jsm/renderers/common/Color4.js

@@ -0,0 +1,37 @@
+import { Color } from 'three';
+
+class Color4 extends Color {
+
+	constructor( r, g, b, a = 1 ) {
+
+		super( r, g, b );
+
+		this.a = a;
+
+	}
+
+	set( r, g, b, a = 1 ) {
+
+		this.a = a;
+
+		return super.set( r, g, b );
+
+	}
+
+	copy( color ) {
+
+		if ( color.a !== undefined ) this.a = color.a;
+
+		return super.copy( color );
+
+	}
+
+	clone() {
+
+		return new this.constructor( this.r, this.g, this.b, this.a );
+
+	}
+
+}
+
+export default Color4;

package/examples/jsm/renderers/common/Geometries.js

@@ -76,7 +76,7 @@ class Geometries extends DataMap {
 		this.info = info;
 
 		this.wireframes = new WeakMap();
-		this.attributeFrame = new WeakMap();
+		this.attributeCall = new WeakMap();
 
 	}
 
@@ -162,13 +162,13 @@ class Geometries extends DataMap {
 
 	updateAttribute( attribute, type ) {
 
-		const frame = this.info.render.frame;
+		const callId = this.info.render.calls;
 
-		if ( this.attributeFrame.get( attribute ) !== frame ) {
+		if ( this.attributeCall.get( attribute ) !== callId ) {
 
 			this.attributes.update( attribute, type );
 
-			this.attributeFrame.set( attribute, frame );
+			this.attributeCall.set( attribute, callId );
 
 		}
 

package/examples/jsm/renderers/common/Info.js

@@ -4,14 +4,21 @@ class Info {
 
 		this.autoReset = true;
 
+		this.frame = 0;
+		this.calls = 0;
+
 		this.render = {
-			frame: 0,
+			calls: 0,
 			drawCalls: 0,
 			triangles: 0,
 			points: 0,
 			lines: 0
 		};
 
+		this.compute = {
+			calls: 0
+		};
+
 		this.memory = {
 			geometries: 0,
 			textures: 0
@@ -60,7 +67,10 @@ class Info {
 
 		this.reset();
 
-		this.render.frame = 0;
+		this.calls = 0;
+
+		this.render.calls = 0;
+		this.compute.calls = 0;
 
 		this.memory.geometries = 0;
 		this.memory.textures = 0;

package/examples/jsm/renderers/common/Pipelines.js

@@ -276,29 +276,13 @@ class Pipelines extends DataMap {
 
 	_getComputeCacheKey( computeNode, stageCompute ) {
 
-		return 'compute' + computeNode.id + stageCompute.id;
+		return computeNode.id + ',' + stageCompute.id;
 
 	}
 
 	_getRenderCacheKey( renderObject, stageVertex, stageFragment ) {
 
-		const { material } = renderObject;
-
-		const parameters = [
-			stageVertex.id, stageFragment.id,
-			material.transparent, material.blending, material.premultipliedAlpha,
-			material.blendSrc, material.blendDst, material.blendEquation,
-			material.blendSrcAlpha, material.blendDstAlpha, material.blendEquationAlpha,
-			material.colorWrite,
-			material.depthWrite, material.depthTest, material.depthFunc,
-			material.stencilWrite, material.stencilFunc,
-			material.stencilFail, material.stencilZFail, material.stencilZPass,
-			material.stencilFuncMask, material.stencilWriteMask,
-			material.side,
-			this.backend.getCacheKey( renderObject )
-		];
-
-		return parameters.join();
+		return stageVertex.id + ',' + stageFragment.id + ',' + this.backend.getRenderCacheKey( renderObject );
 
 	}
 
@@ -328,40 +312,8 @@ class Pipelines extends DataMap {
 	_needsRenderUpdate( renderObject ) {
 
 		const data = this.get( renderObject );
-		const material = renderObject.material;
-
-		let needsUpdate = this.backend.needsUpdate( renderObject );
-
-		// check material state
-
-		if ( data.material !== material || data.materialVersion !== material.version ||
-			data.transparent !== material.transparent || data.blending !== material.blending || data.premultipliedAlpha !== material.premultipliedAlpha ||
-			data.blendSrc !== material.blendSrc || data.blendDst !== material.blendDst || data.blendEquation !== material.blendEquation ||
-			data.blendSrcAlpha !== material.blendSrcAlpha || data.blendDstAlpha !== material.blendDstAlpha || data.blendEquationAlpha !== material.blendEquationAlpha ||
-			data.colorWrite !== material.colorWrite ||
-			data.depthWrite !== material.depthWrite || data.depthTest !== material.depthTest || data.depthFunc !== material.depthFunc ||
-			data.stencilWrite !== material.stencilWrite || data.stencilFunc !== material.stencilFunc ||
-			data.stencilFail !== material.stencilFail || data.stencilZFail !== material.stencilZFail || data.stencilZPass !== material.stencilZPass ||
-			data.stencilFuncMask !== material.stencilFuncMask || data.stencilWriteMask !== material.stencilWriteMask ||
-			data.side !== material.side || data.alphaToCoverage !== material.alphaToCoverage
-		) {
-
-			data.material = material; data.materialVersion = material.version;
-			data.transparent = material.transparent; data.blending = material.blending; data.premultipliedAlpha = material.premultipliedAlpha;
-			data.blendSrc = material.blendSrc; data.blendDst = material.blendDst; data.blendEquation = material.blendEquation;
-			data.blendSrcAlpha = material.blendSrcAlpha; data.blendDstAlpha = material.blendDstAlpha; data.blendEquationAlpha = material.blendEquationAlpha;
-			data.colorWrite = material.colorWrite;
-			data.depthWrite = material.depthWrite; data.depthTest = material.depthTest; data.depthFunc = material.depthFunc;
-			data.stencilWrite = material.stencilWrite; data.stencilFunc = material.stencilFunc;
-			data.stencilFail = material.stencilFail; data.stencilZFail = material.stencilZFail; data.stencilZPass = material.stencilZPass;
-			data.stencilFuncMask = material.stencilFuncMask; data.stencilWriteMask = material.stencilWriteMask;
-			data.side = material.side; data.alphaToCoverage = material.alphaToCoverage;
-
-			needsUpdate = true;
-
-		}
 
-		return needsUpdate || data.pipeline === undefined;
+		return data.pipeline === undefined || this.backend.needsRenderUpdate( renderObject );
 
 	}
 

package/examples/jsm/renderers/common/PostProcessing.js

@@ -0,0 +1,25 @@
+import { vec4, MeshBasicNodeMaterial } from '../../nodes/Nodes.js';
+import QuadMesh from '../../objects/QuadMesh.js';
+
+const quadMesh = new QuadMesh( new MeshBasicNodeMaterial() );
+
+class PostProcessing {
+
+	constructor( renderer, outputNode = vec4( 0, 0, 1, 1 ) ) {
+
+		this.renderer = renderer;
+		this.outputNode = outputNode;
+
+	}
+
+	render() {
+
+		quadMesh.material.fragmentNode = this.outputNode;
+
+		quadMesh.render( this.renderer );
+
+	}
+
+}
+
+export default PostProcessing;

package/examples/jsm/renderers/common/RenderContext.js

@@ -26,7 +26,7 @@ class RenderContext {
 		this.scissor = false;
 		this.scissorValue = new Vector4();
 
-		this.texture = null;
+		this.textures = null;
 		this.depthTexture = null;
 		this.activeCubeFace = 0;
 		this.sampleCount = 1;

package/examples/jsm/renderers/common/RenderContexts.js

@@ -35,7 +35,7 @@ class RenderContexts {
 
 			}
 
-			attachmentState = `${count}:${format}:${renderTarget.samples}:${renderTarget.depthBuffer}:${renderTarget.stencilBuffer}`;
+			attachmentState = `${ count }:${ format }:${ renderTarget.samples }:${ renderTarget.depthBuffer }:${ renderTarget.stencilBuffer }`;
 
 		}