super-three 0.155.0 → 0.156.0

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

@@ -1,4 +1,4 @@
-import { lights } from '../../nodes/Nodes.js';
+import { LightsNode } from '../../nodes/Nodes.js';
 
 function painterSortStable( a, b ) {
 
@@ -58,12 +58,14 @@ class RenderList {
 		this.opaque = [];
 		this.transparent = [];
 
-		this.lightsNode = lights( [] );
+		this.lightsNode = new LightsNode( [] );
 		this.lightsArray = [];
 
+		this.occlusionQueryCount = 0;
+
 	}
 
-	init() {
+	begin() {
 
 		this.renderItemsIndex = 0;
 
@@ -71,6 +73,8 @@ class RenderList {
 		this.transparent.length = 0;
 		this.lightsArray.length = 0;
 
+		this.occlusionQueryCount = 0;
+
 		return this;
 
 	}
@@ -117,6 +121,8 @@ class RenderList {
 
 		const renderItem = this.getNextRenderItem( object, geometry, material, groupOrder, z, group );
 
+		if ( object.occlusionTest === true ) this.occlusionQueryCount ++;
+
 		( material.transparent === true ? this.transparent : this.opaque ).push( renderItem );
 
 	}
@@ -166,7 +172,9 @@ class RenderList {
 			renderItem.object = null;
 			renderItem.geometry = null;
 			renderItem.material = null;
-			renderItem.program = null;
+			renderItem.groupOrder = null;
+			renderItem.renderOrder = null;
+			renderItem.z = null;
 			renderItem.group = null;
 
 		}

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

@@ -23,11 +23,15 @@ export default class RenderObject {
 		this.pipeline = null;
 		this.vertexBuffers = null;
 
+		this._nodeBuilder = null;
+		this._bindings = null;
 		this._materialVersion = - 1;
 		this._materialCacheKey = '';
 
 		this.onDispose = null;
 
+		this.isRenderObject = true;
+
 		this.onMaterialDispose = () => {
 
 			this.dispose();
@@ -40,13 +44,13 @@ export default class RenderObject {
 
 	getNodeBuilder() {
 
-		return this._nodes.getForRender( this );
+		return this._nodeBuilder || ( this._nodeBuilder = this._nodes.getForRender( this ) );
 
 	}
 
 	getBindings() {
 
-		return this.getNodeBuilder().getBindings();
+		return this._bindings || ( this._bindings = this.getNodeBuilder().createBindings() );
 
 	}
 

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

@@ -258,7 +258,7 @@ class Renderer {
 		_frustum.setFromProjectionMatrix( _projScreenMatrix, coordinateSystem );
 
 		const renderList = this._renderLists.get( scene, camera );
-		renderList.init();
+		renderList.begin();
 
 		this._projectObject( scene, camera, 0, renderList );
 
@@ -278,17 +278,18 @@ class Renderer {
 
 			const renderTargetData = this._textures.get( renderTarget );
 
-			renderContext.texture = renderTargetData.texture;
+			renderContext.textures = renderTargetData.textures;
 			renderContext.depthTexture = renderTargetData.depthTexture;
 
 		} else {
 
-			renderContext.texture = null;
+			renderContext.textures = null;
 			renderContext.depthTexture = null;
 
 		}
 
 		renderContext.activeCubeFace = activeCubeFace;
+		renderContext.occlusionQueryCount = renderList.occlusionQueryCount;
 
 		//
 
@@ -550,6 +551,14 @@ class Renderer {
 
 	}
 
+	isOccluded( object ) {
+
+		const renderContext = this._currentRenderContext || this._lastRenderContext;
+
+		return renderContext && this.backend.isOccluded( renderContext, object );
+
+	}
+
 	clear( color = true, depth = true, stencil = true ) {
 
 		const renderContext = this._currentRenderContext || this._lastRenderContext;

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

@@ -11,7 +11,8 @@ class SampledTexture extends Binding {
 		this.id = id ++;
 
 		this.texture = texture;
-		this.version = texture.version;
+		this.version = texture ? texture.version : 0;
+		this.store = false;
 
 		this.isSampledTexture = true;
 

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

@@ -7,7 +7,7 @@ class Sampler extends Binding {
 		super( name );
 
 		this.texture = texture;
-		this.version = texture.version;
+		this.version = texture ? texture.version : 0;
 
 		this.isSampler = true;
 

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

@@ -4,7 +4,7 @@ class StorageBuffer extends Buffer {
 
 	constructor( name, attribute ) {
 
-		super( name, attribute.array );
+		super( name, attribute ? attribute.array : null );
 
 		this.attribute = attribute;
 

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

@@ -1,7 +1,8 @@
 import DataMap from './DataMap.js';
-import { Vector2, DepthTexture, DepthStencilFormat, UnsignedInt248Type } from 'three';
 
-const _size = new Vector2();
+import { Vector3, DepthTexture, DepthStencilFormat, UnsignedInt248Type, LinearFilter, NearestFilter, EquirectangularReflectionMapping, EquirectangularRefractionMapping, CubeReflectionMapping, CubeRefractionMapping } from 'three';
+
+const _size = new Vector3();
 
 class Textures extends DataMap {
 
@@ -19,10 +20,24 @@ class Textures extends DataMap {
 		const renderTargetData = this.get( renderTarget );
 		const sampleCount = renderTarget.samples === 0 ? 1 : renderTarget.samples;
 
-		const texture = renderTarget.texture;
+		let texture, textures;
+
+		if ( renderTarget.isWebGLMultipleRenderTargets ) {
+
+			textures = renderTarget.texture;
+			texture = renderTarget.texture[ 0 ];
+
+		} else {
+
+			textures = [ renderTarget.texture ];
+			texture = renderTarget.texture;
+
+		}
+
 		const size = this.getSize( texture );
 
 		let depthTexture = renderTarget.depthTexture || renderTargetData.depthTexture;
+		let textureNeedsUpdate = false;
 
 		if ( depthTexture === undefined ) {
 
@@ -36,7 +51,7 @@ class Textures extends DataMap {
 
 		if ( renderTargetData.width !== size.width || size.height !== renderTargetData.height ) {
 
-			texture.needsUpdate = true;
+			textureNeedsUpdate = true;
 			depthTexture.needsUpdate = true;
 
 			depthTexture.image.width = size.width;
@@ -46,12 +61,12 @@ class Textures extends DataMap {
 
 		renderTargetData.width = size.width;
 		renderTargetData.height = size.height;
-		renderTargetData.texture = texture;
+		renderTargetData.textures = textures;
 		renderTargetData.depthTexture = depthTexture;
 
 		if ( renderTargetData.sampleCount !== sampleCount ) {
 
-			texture.needsUpdate = true;
+			textureNeedsUpdate = true;
 			depthTexture.needsUpdate = true;
 
 			renderTargetData.sampleCount = sampleCount;
@@ -60,7 +75,17 @@ class Textures extends DataMap {
 
 		const options = { sampleCount };
 
-		this.updateTexture( texture, options );
+
+		for ( let i = 0; i < textures.length; i ++ ) {
+
+			const texture = textures[ i ];
+
+			if ( textureNeedsUpdate ) texture.needsUpdate = true;
+
+			this.updateTexture( texture, options );
+
+		}
+
 		this.updateTexture( depthTexture, options );
 
 		// dispose handler
@@ -75,7 +100,20 @@ class Textures extends DataMap {
 
 				renderTarget.removeEventListener( 'dispose', onDispose );
 
-				this._destroyTexture( texture );
+				if ( textures !== undefined ) {
+
+					for ( let i = 0; i < textures.length; i ++ ) {
+
+						this._destroyTexture( textures[ i ] );
+
+					}
+
+				} else {
+
+					this._destroyTexture( texture );
+
+				}
+
 				this._destroyTexture( depthTexture );
 
 			};
@@ -105,7 +143,19 @@ class Textures extends DataMap {
 
 		//
 
-		if ( isRenderTarget ) {
+		const { width, height, depth } = this.getSize( texture );
+
+		options.width = width;
+		options.height = height;
+		options.depth = depth;
+		options.needsMipmaps = this.needsMipmaps( texture );
+		options.levels = options.needsMipmaps ? this.getMipLevels( texture, width, height ) : 1;
+
+		//
+
+		if ( isRenderTarget || options.store === true ) {
+
+			//if ( options.store === true ) options.levels = 1; /* no mipmaps? */
 
 			backend.createSampler( texture );
 			backend.createTexture( texture, options );
@@ -130,6 +180,24 @@ class Textures extends DataMap {
 
 				} else {
 
+					if ( texture.images ) {
+
+						const images = [];
+
+						for ( const image of texture.images ) {
+
+							images.push( this._getUploadImage( image ) );
+
+						}
+
+						options.images = images;
+
+					} else {
+
+						options.image = this._getUploadImage( image );
+
+					}
+
 					if ( textureData.isDefaultTexture === undefined || textureData.isDefaultTexture === true ) {
 
 						backend.createTexture( texture, options );
@@ -138,7 +206,9 @@ class Textures extends DataMap {
 
 					}
 
-					backend.updateTexture( texture );
+					backend.updateTexture( texture, options );
+
+					if ( options.needsMipmaps ) backend.generateMipmaps( texture );
 
 				}
 
@@ -188,15 +258,19 @@ class Textures extends DataMap {
 
 	getSize( texture, target = _size ) {
 
-		if ( texture.isCubeTexture ) {
+		let image = texture.images ? texture.images[ 0 ] : texture.image;
 
-			target.width = texture.image[ 0 ].width;
-			target.height = texture.image[ 0 ].height;
+		if ( image ) {
+
+			if ( image.image !== undefined ) image = image.image;
+
+			target.width = image.width;
+			target.height = image.height;
+			target.depth = texture.isCubeTexture ? 6 : ( image.depth || 1 );
 
 		} else {
 
-			target.width = texture.image.width;
-			target.height = texture.image.height;
+			target.width = target.height = target.depth = 1;
 
 		}
 
@@ -204,6 +278,72 @@ class Textures extends DataMap {
 
 	}
 
+	getMipLevels( texture, width, height ) {
+
+		let mipLevelCount;
+
+		if ( texture.isCompressedTexture ) {
+
+			mipLevelCount = texture.mipmaps.length;
+
+		} else {
+
+			mipLevelCount = Math.floor( Math.log2( Math.max( width, height ) ) ) + 1;
+
+		}
+
+		return mipLevelCount;
+
+	}
+
+	needsMipmaps( texture ) {
+
+		if ( this.isEnvironmentTexture( texture ) ) return true;
+
+		return ( texture.isCompressedTexture !== true ) /*&& ( texture.generateMipmaps === true )*/ && ( texture.minFilter !== NearestFilter ) && ( texture.minFilter !== LinearFilter );
+
+	}
+
+	isEnvironmentTexture( texture ) {
+
+		const mapping = texture.mapping;
+
+		return ( mapping === EquirectangularReflectionMapping || mapping === EquirectangularRefractionMapping ) || ( mapping === CubeReflectionMapping || mapping === CubeRefractionMapping );
+
+	}
+
+	_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/NodeSampledTexture.js

@@ -4,7 +4,7 @@ class NodeSampledTexture extends SampledTexture {
 
 	constructor( name, textureNode ) {
 
-		super( name, textureNode.value );
+		super( name, textureNode ? textureNode.value : null );
 
 		this.textureNode = textureNode;
 
@@ -22,7 +22,7 @@ class NodeSampledCubeTexture extends SampledCubeTexture {
 
 	constructor( name, textureNode ) {
 
-		super( name, textureNode.value );
+		super( name, textureNode ? textureNode.value : null );
 
 		this.textureNode = textureNode;
 

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

@@ -4,7 +4,7 @@ class NodeSampler extends Sampler {
 
 	constructor( name, textureNode ) {
 
-		super( name, textureNode.value );
+		super( name, textureNode ? textureNode.value : null );
 
 		this.textureNode = textureNode;
 

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

@@ -1,4 +1,5 @@
 import DataMap from '../DataMap.js';
+import ChainMap from '../ChainMap.js';
 import { NoToneMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from 'three';
 import { NodeFrame, cubeTexture, texture, rangeFog, densityFog, reference, toneMapping, equirectUV, viewportBottomLeft, normalWorld } from '../../../nodes/Nodes.js';
 
@@ -11,6 +12,15 @@ class Nodes extends DataMap {
 		this.renderer = renderer;
 		this.backend = backend;
 		this.nodeFrame = new NodeFrame();
+		this.cache = new ChainMap();
+
+	}
+
+	getForRenderChainKey( renderObject ) {
+
+		const { object, material, lightsNode, context } = renderObject;
+
+		return [ object.geometry, material, lightsNode, context ];
 
 	}
 
@@ -22,13 +32,25 @@ class Nodes extends DataMap {
 
 		if ( nodeBuilder === undefined ) {
 
-			nodeBuilder = this.backend.createNodeBuilder( renderObject.object, this.renderer, renderObject.scene );
-			nodeBuilder.material = renderObject.material;
-			nodeBuilder.lightsNode = renderObject.lightsNode;
-			nodeBuilder.environmentNode = this.getEnvironmentNode( renderObject.scene );
-			nodeBuilder.fogNode = this.getFogNode( renderObject.scene );
-			nodeBuilder.toneMappingNode = this.getToneMappingNode();
-			nodeBuilder.build();
+			const { cache } = this;
+
+			const chainKey = this.getForRenderChainKey( renderObject );
+
+			nodeBuilder = cache.get( chainKey );
+
+			if ( nodeBuilder === undefined ) {
+
+				nodeBuilder = this.backend.createNodeBuilder( renderObject.object, this.renderer, renderObject.scene );
+				nodeBuilder.material = renderObject.material;
+				nodeBuilder.lightsNode = renderObject.lightsNode;
+				nodeBuilder.environmentNode = this.getEnvironmentNode( renderObject.scene );
+				nodeBuilder.fogNode = this.getFogNode( renderObject.scene );
+				nodeBuilder.toneMappingNode = this.getToneMappingNode();
+				nodeBuilder.build();
+
+				cache.set( chainKey, nodeBuilder );
+
+			}
 
 			renderObjectData.nodeBuilder = nodeBuilder;
 
@@ -38,6 +60,18 @@ class Nodes extends DataMap {
 
 	}
 
+	delete( object ) {
+
+		if ( object.isRenderObject ) {
+
+			this.cache.delete( this.getForRenderChainKey( object ) );
+
+		}
+
+		return super.delete( object );
+
+	}
+
 	getForCompute( computeNode ) {
 
 		const computeData = this.get( computeNode );
@@ -292,7 +326,7 @@ class Nodes extends DataMap {
 	updateBefore( renderObject ) {
 
 		const nodeFrame = this.getNodeFrame( renderObject );
-		const nodeBuilder = this.getForRender( renderObject );
+		const nodeBuilder = renderObject.getNodeBuilder();
 
 		for ( const node of nodeBuilder.updateBeforeNodes ) {
 
@@ -307,7 +341,7 @@ class Nodes extends DataMap {
 	updateForRender( renderObject ) {
 
 		const nodeFrame = this.getNodeFrame( renderObject );
-		const nodeBuilder = this.getForRender( renderObject );
+		const nodeBuilder = renderObject.getNodeBuilder();
 
 		for ( const node of nodeBuilder.updateNodes ) {