super-three 0.157.1 → 0.158.0

package/examples/jsm/objects/Water.js

@@ -67,6 +67,8 @@ class Water extends Mesh {
 
 		const mirrorShader = {
 
+			name: 'MirrorShader',
+
 			uniforms: UniformsUtils.merge( [
 				UniformsLib[ 'fog' ],
 				UniformsLib[ 'lights' ],
@@ -188,9 +190,10 @@ class Water extends Mesh {
 		};
 
 		const material = new ShaderMaterial( {
-			fragmentShader: mirrorShader.fragmentShader,
-			vertexShader: mirrorShader.vertexShader,
+			name: mirrorShader.name,
 			uniforms: UniformsUtils.clone( mirrorShader.uniforms ),
+			vertexShader: mirrorShader.vertexShader,
+			fragmentShader: mirrorShader.fragmentShader,
 			lights: true,
 			side: side,
 			fog: fog

package/examples/jsm/objects/Water2.js

@@ -88,6 +88,7 @@ class Water extends Mesh {
 		// material
 
 		this.material = new ShaderMaterial( {
+			name: shader.name,
 			uniforms: UniformsUtils.merge( [
 				UniformsLib[ 'fog' ],
 				shader.uniforms
@@ -205,6 +206,8 @@ class Water extends Mesh {
 
 Water.WaterShader = {
 
+	name: 'WaterShader',
+
 	uniforms: {
 
 		'color': {

package/examples/jsm/physics/AmmoPhysics.js

@@ -57,6 +57,26 @@ async function AmmoPhysics() {
 	const meshes = [];
 	const meshMap = new WeakMap();
 
+	function addScene( scene ) {
+
+		scene.traverse( function ( child ) {
+
+			if ( child.isMesh ) {
+
+				const physics = child.userData.physics;
+
+				if ( physics ) {
+
+					addMesh( child, physics.mass );
+
+				}
+
+			}
+
+		} );
+
+	}
+
 	function addMesh( mesh, mass = 0 ) {
 
 		const shape = getShape( mesh.geometry );
@@ -245,6 +265,7 @@ async function AmmoPhysics() {
 	setInterval( step, 1000 / frameRate );
 
 	return {
+		addScene: addScene,
 		addMesh: addMesh,
 		setMeshPosition: setMeshPosition
 		// addCompoundMesh

package/examples/jsm/physics/RapierPhysics.js

@@ -55,6 +55,26 @@ async function RapierPhysics() {
 	const _quaternion = new Quaternion();
 	const _matrix = new Matrix4();
 
+	function addScene( scene ) {
+
+		scene.traverse( function ( child ) {
+
+			if ( child.isMesh ) {
+
+				const physics = child.userData.physics;
+
+				if ( physics ) {
+
+					addMesh( child, physics.mass, physics.restitution );
+
+				}
+
+			}
+
+		} );
+
+	}
+
 	function addMesh( mesh, mass = 0, restitution = 0 ) {
 
 		const shape = getCollider( mesh.geometry );
@@ -189,6 +209,7 @@ async function RapierPhysics() {
 	setInterval( step, 1000 / frameRate );
 
 	return {
+		addScene: addScene,
 		addMesh: addMesh,
 		setMeshPosition: setMeshPosition,
 		setMeshVelocity: setMeshVelocity

package/examples/jsm/postprocessing/BokehPass.js

@@ -26,7 +26,6 @@ class BokehPass extends Pass {
 		this.camera = camera;
 
 		const focus = ( params.focus !== undefined ) ? params.focus : 1.0;
-		const aspect = ( params.aspect !== undefined ) ? params.aspect : camera.aspect;
 		const aperture = ( params.aperture !== undefined ) ? params.aperture : 0.025;
 		const maxblur = ( params.maxblur !== undefined ) ? params.maxblur : 1.0;
 
@@ -54,7 +53,7 @@ class BokehPass extends Pass {
 		bokehUniforms[ 'tDepth' ].value = this.renderTargetDepth.texture;
 
 		bokehUniforms[ 'focus' ].value = focus;
-		bokehUniforms[ 'aspect' ].value = aspect;
+		bokehUniforms[ 'aspect' ].value = camera.aspect;
 		bokehUniforms[ 'aperture' ].value = aperture;
 		bokehUniforms[ 'maxblur' ].value = maxblur;
 		bokehUniforms[ 'nearClip' ].value = camera.near;
@@ -120,6 +119,8 @@ class BokehPass extends Pass {
 
 	setSize( width, height ) {
 
+		this.materialBokeh.uniforms[ 'aspect' ].value = width / height;
+
 		this.renderTargetDepth.setSize( width, height );
 
 	}

package/examples/jsm/postprocessing/LUTPass.js

@@ -2,6 +2,8 @@ import { ShaderPass } from './ShaderPass.js';
 
 const LUTShader = {
 
+	name: 'LUTShader',
+
 	defines: {
 		USE_3DTEXTURE: 1,
 	},
@@ -29,7 +31,6 @@ const LUTShader = {
 
 	`,
 
-
 	fragmentShader: /* glsl */`
 
 		uniform float lutSize;

package/examples/jsm/postprocessing/OutputPass.js

@@ -24,6 +24,7 @@ class OutputPass extends Pass {
 		this.uniforms = UniformsUtils.clone( shader.uniforms );
 
 		this.material = new RawShaderMaterial( {
+			name: shader.name,
 			uniforms: this.uniforms,
 			vertexShader: shader.vertexShader,
 			fragmentShader: shader.fragmentShader

package/examples/jsm/postprocessing/Pass.js

@@ -43,9 +43,20 @@ const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 
 // https://github.com/mrdoob/three.js/pull/21358
 
-const _geometry = new BufferGeometry();
-_geometry.setAttribute( 'position', new Float32BufferAttribute( [ - 1, 3, 0, - 1, - 1, 0, 3, - 1, 0 ], 3 ) );
-_geometry.setAttribute( 'uv', new Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );
+class FullscreenTriangleGeometry extends BufferGeometry {
+
+	constructor() {
+
+		super();
+
+		this.setAttribute( 'position', new Float32BufferAttribute( [ - 1, 3, 0, - 1, - 1, 0, 3, - 1, 0 ], 3 ) );
+		this.setAttribute( 'uv', new Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );
+
+	}
+
+}
+
+const _geometry = new FullscreenTriangleGeometry();
 
 class FullScreenQuad {
 

package/examples/jsm/postprocessing/SAOPass.js

@@ -314,7 +314,6 @@ class SAOPass extends Pass {
 		this.blurIntermediateRenderTarget.dispose();
 		this.normalRenderTarget.dispose();
 
-		this.depthMaterial.dispose();
 		this.normalMaterial.dispose();
 		this.saoMaterial.dispose();
 		this.vBlurMaterial.dispose();

package/examples/jsm/postprocessing/SMAAPass.js

@@ -110,8 +110,6 @@ class SMAAPass extends Pass {
 			fragmentShader: SMAABlendShader.fragmentShader
 		} );
 
-		this.needsSwap = false;
-
 		this.fsQuad = new FullScreenQuad( null );
 
 	}

package/examples/jsm/postprocessing/TAARenderPass.js

@@ -147,8 +147,7 @@ class TAARenderPass extends SSAARenderPass {
 
 		super.dispose();
 
-		if ( this.sampleRenderTarget !== undefined ) this.sampleRenderTarget.dispose();
-		if ( this.holdRenderTarget !== undefined ) this.holdRenderTarget.dispose();
+		if ( this.holdRenderTarget ) this.holdRenderTarget.dispose();
 
 	}
 

package/examples/jsm/renderers/CSS3DRenderer.js

@@ -95,7 +95,7 @@ class CSS3DRenderer {
 		let _widthHalf, _heightHalf;
 
 		const cache = {
-			camera: { fov: 0, style: '' },
+			camera: { style: '' },
 			objects: new WeakMap()
 		};
 
@@ -129,13 +129,6 @@ class CSS3DRenderer {
 
 			const fov = camera.projectionMatrix.elements[ 5 ] * _heightHalf;
 
-			if ( cache.camera.fov !== fov ) {
-
-				viewElement.style.perspective = camera.isPerspectiveCamera ? fov + 'px' : '';
-				cache.camera.fov = fov;
-
-			}
-
 			if ( camera.view && camera.view.enabled ) {
 
 				// view offset
@@ -166,8 +159,9 @@ class CSS3DRenderer {
 			const cameraCSSMatrix = camera.isOrthographicCamera ?
 				`scale( ${ scaleByViewOffset } )` + 'scale(' + fov + ')' + 'translate(' + epsilon( tx ) + 'px,' + epsilon( ty ) + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse ) :
 				`scale( ${ scaleByViewOffset } )` + 'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse );
+			const perspective = camera.isPerspectiveCamera ? 'perspective(' + fov + 'px) ' : '';
 
-			const style = cameraCSSMatrix +
+			const style = perspective + cameraCSSMatrix +
 				'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
 
 			if ( cache.camera.style !== style ) {

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/Bindings.js

@@ -50,7 +50,7 @@ class Bindings extends DataMap {
 
 			const nodeBuilderState = this.nodes.getForCompute( computeNode );
 
-			const bindings = nodeBuilderState.bindings;
+			const bindings = nodeBuilderState.bindings.compute;
 
 			data.bindings = bindings;
 

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

@@ -24,6 +24,7 @@ export default class RenderObject {
 		this.pipeline = null;
 		this.vertexBuffers = null;
 
+		this.initialNodesCacheKey = this.getNodesCacheKey();
 		this.initialCacheKey = this.getCacheKey();
 
 		this._nodeBuilderState = null;
@@ -132,6 +133,12 @@ export default class RenderObject {
 
 	}
 
+	get needsUpdate() {
+
+		return this.initialNodesCacheKey !== this.getNodesCacheKey();
+
+	}
+
 	getNodesCacheKey() {
 
 		// Environment Nodes Cache Key
@@ -142,7 +149,7 @@ export default class RenderObject {
 
 	getCacheKey() {
 
-		return `{material:${ this.getMaterialCacheKey() },nodes:${ this.getNodesCacheKey()}`;
+		return this.getMaterialCacheKey() + ',' + this.getNodesCacheKey();
 
 	}
 

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

@@ -31,7 +31,7 @@ class RenderObjects {
 
 		} else {
 
-			if ( renderObject.version !== material.version ) {
+			if ( renderObject.version !== material.version || renderObject.needsUpdate ) {
 
 				renderObject.version = material.version;
 

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

@@ -191,7 +191,7 @@ class Textures extends DataMap {
 
 						for ( const image of texture.images ) {
 
-							images.push( this._getUploadImage( image ) );
+							images.push( image );
 
 						}
 
@@ -199,7 +199,7 @@ class Textures extends DataMap {
 
 					} else {
 
-						options.image = this._getUploadImage( image );
+						options.image = image;
 
 					}
 
@@ -213,7 +213,7 @@ class Textures extends DataMap {
 
 					backend.updateTexture( texture, options );
 
-					if ( options.needsMipmaps ) backend.generateMipmaps( texture );
+					if ( options.needsMipmaps && texture.mipmaps.length === 0 ) backend.generateMipmaps( texture );
 
 				}
 
@@ -305,7 +305,7 @@ class Textures extends DataMap {
 
 		if ( this.isEnvironmentTexture( texture ) ) return true;
 
-		return ( texture.isCompressedTexture !== true ) /*&& ( texture.generateMipmaps === true )*/ && ( texture.minFilter !== NearestFilter ) && ( texture.minFilter !== LinearFilter );
+		return ( texture.isCompressedTexture === true ) || ( ( texture.minFilter !== NearestFilter ) && ( texture.minFilter !== LinearFilter ) );
 
 	}
 
@@ -317,38 +317,6 @@ class Textures extends DataMap {
 
 	}
 
-	_getUploadImage( image ) {
-
-		if ( this._isHTMLImage( image ) ) {
-
-			return this._imageToCanvas( image );
-
-		}
-
-		return image;
-
-	}
-
-	_imageToCanvas( image ) {
-
-		const { width, height } = image;
-
-		// eslint-disable-next-line compat/compat
-		const canvas = new OffscreenCanvas( width, height );
-
-		const context = canvas.getContext( '2d' );
-		context.drawImage( image, 0, 0, width, height );
-
-		return canvas;
-
-	}
-
-	_isHTMLImage( image ) {
-
-		return ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) || ( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement );
-
-	}
-
 	_destroyTexture( texture ) {
 
 		this.backend.destroySampler( texture );

package/examples/jsm/renderers/common/nodes/Nodes.js

@@ -1,4 +1,5 @@
 import DataMap from '../DataMap.js';
+import ChainMap from '../ChainMap.js';
 import NodeBuilderState from './NodeBuilderState.js';
 import { NoToneMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from 'three';
 import { NodeFrame, cubeTexture, texture, rangeFog, densityFog, reference, toneMapping, equirectUV, viewportBottomLeft, normalWorld } from '../../../nodes/Nodes.js';
@@ -13,6 +14,7 @@ class Nodes extends DataMap {
 		this.backend = backend;
 		this.nodeFrame = new NodeFrame();
 		this.nodeBuilderCache = new Map();
+		this.frameHashCache = new ChainMap();
 
 	}
 
@@ -145,18 +147,34 @@ class Nodes extends DataMap {
 
 	getCacheKey( scene, lightsNode ) {
 
-		const environmentNode = this.getEnvironmentNode( scene );
-		const fogNode = this.getFogNode( scene );
-		const toneMappingNode = this.getToneMappingNode();
+		const chain = [ scene, lightsNode ];
+		const frameId = this.nodeFrame.frameId;
 
-		const cacheKey = [];
+		let cacheKeyData = this.frameHashCache.get( chain );
 
-		if ( lightsNode ) cacheKey.push( 'lightsNode:' + lightsNode.getCacheKey() );
-		if ( environmentNode ) cacheKey.push( 'environmentNode:' + environmentNode.getCacheKey() );
-		if ( fogNode ) cacheKey.push( 'fogNode:' + fogNode.getCacheKey() );
-		if ( toneMappingNode ) cacheKey.push( 'toneMappingNode:' + toneMappingNode.getCacheKey() );
+		if ( cacheKeyData === undefined || cacheKeyData.frameId !== frameId ) {
 
-		return '{' + cacheKey.join( ',' ) + '}';
+			const environmentNode = this.getEnvironmentNode( scene );
+			const fogNode = this.getFogNode( scene );
+			const toneMappingNode = this.getToneMappingNode();
+
+			const cacheKey = [];
+
+			if ( lightsNode ) cacheKey.push( lightsNode.getCacheKey() );
+			if ( environmentNode ) cacheKey.push( environmentNode.getCacheKey() );
+			if ( fogNode ) cacheKey.push( fogNode.getCacheKey() );
+			if ( toneMappingNode ) cacheKey.push( toneMappingNode.getCacheKey() );
+
+			cacheKeyData = {
+				frameId,
+				cacheKey: cacheKey.join( ',' )
+			};
+
+			this.frameHashCache.set( chain, cacheKeyData );
+
+		}
+
+		return cacheKeyData.cacheKey;
 
 	}
 
@@ -336,22 +354,28 @@ class Nodes extends DataMap {
 
 	}
 
-	getNodeFrame( renderObject ) {
+	getNodeFrame( renderer = this.renderer, scene = null, object = null, camera = null, material = null ) {
 
 		const nodeFrame = this.nodeFrame;
-		nodeFrame.scene = renderObject.scene;
-		nodeFrame.object = renderObject.object;
-		nodeFrame.camera = renderObject.camera;
-		nodeFrame.renderer = renderObject.renderer;
-		nodeFrame.material = renderObject.material;
+		nodeFrame.renderer = renderer;
+		nodeFrame.scene = scene;
+		nodeFrame.object = object;
+		nodeFrame.camera = camera;
+		nodeFrame.material = material;
 
 		return nodeFrame;
 
 	}
 
+	getNodeFrameForRender( renderObject ) {
+
+		return this.getNodeFrame( renderObject.renderer, renderObject.scene, renderObject.object, renderObject.camera, renderObject.material );
+
+	}
+
 	updateBefore( renderObject ) {
 
-		const nodeFrame = this.getNodeFrame( renderObject );
+		const nodeFrame = this.getNodeFrameForRender( renderObject );
 		const nodeBuilder = renderObject.getNodeBuilderState();
 
 		for ( const node of nodeBuilder.updateBeforeNodes ) {
@@ -362,11 +386,22 @@ class Nodes extends DataMap {
 
 	}
 
-	updateForCompute( /*computeNode*/ ) { }
+	updateForCompute( computeNode ) {
+
+		const nodeFrame = this.getNodeFrame();
+		const nodeBuilder = this.getForCompute( computeNode );
+
+		for ( const node of nodeBuilder.updateNodes ) {
+
+			nodeFrame.updateNode( node );
+
+		}
+
+	}
 
 	updateForRender( renderObject ) {
 
-		const nodeFrame = this.getNodeFrame( renderObject );
+		const nodeFrame = this.getNodeFrameForRender( renderObject );
 		const nodeBuilder = renderObject.getNodeBuilderState();
 
 		for ( const node of nodeBuilder.updateNodes ) {