super-three 0.160.1 → 0.162.0

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

@@ -11,6 +11,7 @@ import Textures from './Textures.js';
 import Background from './Background.js';
 import Nodes from './nodes/Nodes.js';
 import Color4 from './Color4.js';
+import ClippingContext from './ClippingContext.js';
 import { Scene, Frustum, Matrix4, Vector2, Vector3, Vector4, DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoToneMapping } from 'three';
 
 const _scene = new Scene();
@@ -30,6 +31,7 @@ class Renderer {
 
 		const {
 			logarithmicDepthBuffer = false,
+			alpha = true
 		} = parameters;
 
 		// public
@@ -43,6 +45,8 @@ class Renderer {
 		this.autoClearDepth = true;
 		this.autoClearStencil = true;
 
+		this.alpha = alpha;
+
 		this.logarithmicDepthBuffer = logarithmicDepthBuffer;
 
 		this.outputColorSpace = SRGBColorSpace;
@@ -55,6 +59,8 @@ class Renderer {
 		this.depth = true;
 		this.stencil = true;
 
+		this.clippingPlanes = [];
+
 		this.info = new Info();
 
 		// internals
@@ -67,7 +73,6 @@ class Renderer {
 		this._scissor = new Vector4( 0, 0, this._width, this._height );
 		this._scissorTest = false;
 
-		this._properties = null;
 		this._attributes = null;
 		this._geometries = null;
 		this._nodes = null;
@@ -85,7 +90,10 @@ class Renderer {
 		this._opaqueSort = null;
 		this._transparentSort = null;
 
-		this._clearColor = new Color4( 0x000000 );
+
+		const alphaClear = this.alpha === true ? 0 : 1;
+
+		this._clearColor = new Color4( 0, 0, 0, alphaClear );
 		this._clearDepth = 1;
 		this._clearStencil = 0;
 
@@ -96,9 +104,13 @@ class Renderer {
 		this._renderObjectFunction = null;
 		this._currentRenderObjectFunction = null;
 
+		this._handleObjectFunction = this._renderObjectDirect;
+
 		this._initialized = false;
 		this._initPromise = null;
 
+		this._compilationPromises = null;
+
 		// backwards compatibility
 
 		this.shadowMap = {
@@ -146,7 +158,7 @@ class Renderer {
 			this._attributes = new Attributes( backend );
 			this._background = new Background( this, this._nodes );
 			this._geometries = new Geometries( this._attributes, this.info );
-			this._textures = new Textures( backend, this.info );
+			this._textures = new Textures( this, backend, this.info );
 			this._pipelines = new Pipelines( backend, this._nodes );
 			this._bindings = new Bindings( backend, this._nodes, this._textures, this._attributes, this._pipelines, this.info );
 			this._objects = new RenderObjects( this, this._nodes, this._geometries, this._pipelines, this._bindings, this.info );
@@ -171,16 +183,156 @@ class Renderer {
 
 	}
 
-	async compile( /*scene, camera*/ ) {
+	async compileAsync( scene, camera, targetScene = null ) {
+
+		if ( this._initialized === false ) await this.init();
+
+		// preserve render tree
+
+		const nodeFrame = this._nodes.nodeFrame;
+
+		const previousRenderId = nodeFrame.renderId;
+		const previousRenderContext = this._currentRenderContext;
+		const previousRenderObjectFunction = this._currentRenderObjectFunction;
+		const previousCompilationPromises = this._compilationPromises;
+
+		//
+
+		const sceneRef = ( scene.isScene === true ) ? scene : _scene;
+
+		if ( targetScene === null ) targetScene = scene;
+
+		const renderTarget = this._renderTarget;
+		const renderContext = this._renderContexts.get( targetScene, camera, renderTarget );
+		const activeMipmapLevel = this._activeMipmapLevel;
+
+		const compilationPromises = [];
+
+		this._currentRenderContext = renderContext;
+		this._currentRenderObjectFunction = this.renderObject;
+
+		this._handleObjectFunction = this._createObjectPipeline;
+
+		this._compilationPromises = compilationPromises;
+
+		nodeFrame.renderId ++;
+
+		//
+
+		nodeFrame.update();
+
+		//
+
+		renderContext.depth = this.depth;
+		renderContext.stencil = this.stencil;
+
+		if ( ! renderContext.clippingContext ) renderContext.clippingContext = new ClippingContext();
+		renderContext.clippingContext.updateGlobal( this, camera );
+
+		//
+
+		sceneRef.onBeforeRender( this, scene, camera, renderTarget );
+
+		//
+
+		const renderList = this._renderLists.get( scene, camera );
+		renderList.begin();
+
+		this._projectObject( scene, camera, 0, renderList );
+
+		// include lights from target scene
+		if ( targetScene !== scene ) {
+
+			targetScene.traverseVisible( function ( object ) {
+
+				if ( object.isLight && object.layers.test( camera.layers ) ) {
+
+					renderList.pushLight( object );
+
+				}
+
+			} );
+
+		}
+
+		renderList.finish();
+
+		//
+
+		if ( renderTarget !== null ) {
+
+			this._textures.updateRenderTarget( renderTarget, activeMipmapLevel );
+
+			const renderTargetData = this._textures.get( renderTarget );
+
+			renderContext.textures = renderTargetData.textures;
+			renderContext.depthTexture = renderTargetData.depthTexture;
+
+		} else {
+
+			renderContext.textures = null;
+			renderContext.depthTexture = null;
+
+		}
 
-		console.warn( 'THREE.Renderer: .compile() is not implemented yet.' );
+		//
+
+		this._nodes.updateScene( sceneRef );
+
+		//
+
+		this._background.update( sceneRef, renderList, renderContext );
+
+		// process render lists
+
+		const opaqueObjects = renderList.opaque;
+		const transparentObjects = renderList.transparent;
+		const lightsNode = renderList.lightsNode;
+
+		if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
+		if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, sceneRef, lightsNode );
+
+		// restore render tree
+
+		nodeFrame.renderId = previousRenderId;
+
+		this._currentRenderContext = previousRenderContext;
+		this._currentRenderObjectFunction = previousRenderObjectFunction;
+		this._compilationPromises = previousCompilationPromises;
+
+		this._handleObjectFunction = this._renderObjectDirect;
+
+		// wait for all promises setup by backends awaiting compilation/linking/pipeline creation to complete
+
+		await Promise.all( compilationPromises );
 
 	}
 
-	async render( scene, camera ) {
+	async renderAsync( scene, camera ) {
 
 		if ( this._initialized === false ) await this.init();
 
+		const renderContext = this._renderContext( scene, camera );
+
+		await this.backend.resolveTimestampAsync( renderContext, 'render' );
+
+	}
+
+	render( scene, camera ) {
+
+		if ( this._initialized === false ) {
+
+			console.error( 'THREE.Renderer: .render() called before the backend is initialized. Try using .renderAsync() instead.' );
+			return;
+
+		}
+
+		this._renderContext( scene, camera );
+
+	}
+
+	_renderContext( scene, camera ) {
+
 		// preserve render tree
 
 		const nodeFrame = this._nodes.nodeFrame;
@@ -261,8 +413,8 @@ class Renderer {
 		renderContext.scissorValue.width >>= activeMipmapLevel;
 		renderContext.scissorValue.height >>= activeMipmapLevel;
 
-		renderContext.depth = this.depth;
-		renderContext.stencil = this.stencil;
+		if ( ! renderContext.clippingContext ) renderContext.clippingContext = new ClippingContext();
+		renderContext.clippingContext.updateGlobal( this, camera );
 
 		//
 
@@ -299,6 +451,8 @@ class Renderer {
 			renderContext.width = renderTargetData.width;
 			renderContext.height = renderTargetData.height;
 			renderContext.renderTarget = renderTarget;
+			renderContext.depth = renderTarget.depthBuffer;
+			renderContext.stencil = renderTarget.stencilBuffer;
 
 		} else {
 
@@ -306,6 +460,8 @@ class Renderer {
 			renderContext.depthTexture = null;
 			renderContext.width = this.domElement.width;
 			renderContext.height = this.domElement.height;
+			renderContext.depth = this.depth;
+			renderContext.stencil = this.stencil;
 
 		}
 
@@ -351,6 +507,10 @@ class Renderer {
 
 		sceneRef.onAfterRender( this, scene, camera, renderTarget );
 
+		//
+
+		return renderContext;
+
 	}
 
 	getMaxAnisotropy() {
@@ -395,7 +555,7 @@ class Renderer {
 
 	getContext() {
 
-		return this._context;
+		return this.backend.getContext();
 
 	}
 
@@ -513,6 +673,8 @@ class Renderer {
 
 		this._scissorTest = boolean;
 
+		this.backend.setScissorTest( boolean );
+
 	}
 
 	getViewport( target ) {
@@ -616,19 +778,45 @@ class Renderer {
 
 	clearColor() {
 
-		this.clear( true, false, false );
+		return this.clear( true, false, false );
 
 	}
 
 	clearDepth() {
 
-		this.clear( false, true, false );
+		return this.clear( false, true, false );
 
 	}
 
 	clearStencil() {
 
-		this.clear( false, false, true );
+		return this.clear( false, false, true );
+
+	}
+
+	async clearAsync( color = true, depth = true, stencil = true ) {
+
+		if ( this._initialized === false ) await this.init();
+
+		this.clear( color, depth, stencil );
+
+	}
+
+	clearColorAsync() {
+
+		return this.clearAsync( true, false, false );
+
+	}
+
+	clearDepthAsync() {
+
+		return this.clearAsync( false, true, false );
+
+	}
+
+	clearStencilAsync() {
+
+		return this.clearAsync( false, false, true );
 
 	}
 
@@ -654,7 +842,6 @@ class Renderer {
 
 		this._animation.dispose();
 		this._objects.dispose();
-		this._properties.dispose();
 		this._pipelines.dispose();
 		this._nodes.dispose();
 		this._bindings.dispose();
@@ -693,7 +880,7 @@ class Renderer {
 
 	}
 
-	async compute( computeNodes ) {
+	async computeAsync( computeNodes ) {
 
 		if ( this._initialized === false ) await this.init();
 
@@ -705,10 +892,12 @@ class Renderer {
 
 		this.info.calls ++;
 		this.info.compute.calls ++;
+		this.info.compute.computeCalls ++;
 
 		nodeFrame.renderId = this.info.calls;
 
 		//
+		if ( this.info.autoReset === true ) this.info.resetCompute();
 
 		const backend = this.backend;
 		const pipelines = this._pipelines;
@@ -760,12 +949,20 @@ class Renderer {
 
 		backend.finishCompute( computeNodes );
 
+		await this.backend.resolveTimestampAsync( computeNodes, 'compute' );
+
 		//
 
 		nodeFrame.renderId = previousRenderId;
 
 	}
 
+	hasFeatureAsync( name ) {
+
+		return this.backend.hasFeatureAsync( name );
+
+	}
+
 	hasFeature( name ) {
 
 		return this.backend.hasFeature( name );
@@ -943,6 +1140,7 @@ class Renderer {
 	renderObject( object, scene, camera, geometry, material, group, lightsNode ) {
 
 		let overridePositionNode;
+		let overrideFragmentNode;
 
 		//
 
@@ -964,6 +1162,45 @@ class Renderer {
 
 			}
 
+			if ( overrideMaterial.isShadowNodeMaterial ) {
+
+				overrideMaterial.side = material.shadowSide === null ? material.side : material.shadowSide;
+
+				if ( material.shadowNode && material.shadowNode.isNode ) {
+
+					overrideFragmentNode = overrideMaterial.fragmentNode;
+					overrideMaterial.fragmentNode = material.shadowNode;
+
+				}
+
+				if ( this.localClippingEnabled ) {
+
+					if ( material.clipShadows ) {
+
+						if ( overrideMaterial.clippingPlanes !== material.clippingPlanes ) {
+
+							overrideMaterial.clippingPlanes = material.clippingPlanes;
+							overrideMaterial.needsUpdate = true;
+
+						}
+
+						if ( overrideMaterial.clipIntersection !== material.clipIntersection ) {
+
+							overrideMaterial.clipIntersection = material.clipIntersection;
+
+						}
+
+					} else if ( Array.isArray( overrideMaterial.clippingPlanes ) ) {
+
+						overrideMaterial.clippingPlanes = null;
+						overrideMaterial.needsUpdate = true;
+
+					}
+
+				}
+
+			}
+
 			material = overrideMaterial;
 
 		}
@@ -973,16 +1210,16 @@ class Renderer {
 		if ( material.transparent === true && material.side === DoubleSide && material.forceSinglePass === false ) {
 
 			material.side = BackSide;
-			this._renderObjectDirect( object, material, scene, camera, lightsNode, 'backSide' ); // create backSide pass id
+			this._handleObjectFunction( object, material, scene, camera, lightsNode, 'backSide' ); // create backSide pass id
 
 			material.side = FrontSide;
-			this._renderObjectDirect( object, material, scene, camera, lightsNode ); // use default pass id
+			this._handleObjectFunction( object, material, scene, camera, lightsNode ); // use default pass id
 
 			material.side = DoubleSide;
 
 		} else {
 
-			this._renderObjectDirect( object, material, scene, camera, lightsNode );
+			this._handleObjectFunction( object, material, scene, camera, lightsNode );
 
 		}
 
@@ -994,6 +1231,12 @@ class Renderer {
 
 		}
 
+		if ( overrideFragmentNode !== undefined ) {
+
+			scene.overrideMaterial.fragmentNode = overrideFragmentNode;
+
+		}
+
 		//
 
 		object.onAfterRender( this, scene, camera, geometry, material, group );
@@ -1026,6 +1269,36 @@ class Renderer {
 
 	}
 
+	_createObjectPipeline( object, material, scene, camera, lightsNode, passId ) {
+
+		const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext, passId );
+
+		//
+
+		this._nodes.updateBefore( renderObject );
+
+		//
+
+		this._nodes.updateForRender( renderObject );
+		this._geometries.updateForRender( renderObject );
+		this._bindings.updateForRender( renderObject );
+
+		this._pipelines.getForRender( renderObject, this._compilationPromises );
+
+	}
+
+	get compute() {
+
+		return this.computeAsync;
+
+	}
+
+	get compile() {
+
+		return this.compileAsync;
+
+	}
+
 }
 
 export default Renderer;

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

@@ -0,0 +1,17 @@
+import { BufferAttribute } from 'three';
+
+class StorageBufferAttribute extends BufferAttribute {
+
+	constructor( array, itemSize, typeClass = Float32Array ) {
+
+		if ( ArrayBuffer.isView( array ) === false ) array = new typeClass( array * itemSize );
+
+		super( array, itemSize );
+
+		this.isStorageBufferAttribute = true;
+
+	}
+
+}
+
+export default StorageBufferAttribute;

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

@@ -0,0 +1,17 @@
+import { InstancedBufferAttribute } from 'three';
+
+class StorageInstancedBufferAttribute extends InstancedBufferAttribute {
+
+	constructor( array, itemSize, typeClass = Float32Array ) {
+
+		if ( ArrayBuffer.isView( array ) === false ) array = new typeClass( array * itemSize );
+
+		super( array, itemSize );
+
+		this.isStorageInstancedBufferAttribute = true;
+
+	}
+
+}
+
+export default StorageInstancedBufferAttribute;

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

@@ -1,15 +1,16 @@
 import DataMap from './DataMap.js';
 
-import { Vector3, DepthTexture, DepthStencilFormat, UnsignedInt248Type, LinearFilter, NearestFilter, EquirectangularReflectionMapping, EquirectangularRefractionMapping, CubeReflectionMapping, CubeRefractionMapping } from 'three';
+import { Vector3, DepthTexture, DepthStencilFormat, DepthFormat, UnsignedIntType, UnsignedInt248Type, LinearFilter, NearestFilter, EquirectangularReflectionMapping, EquirectangularRefractionMapping, CubeReflectionMapping, CubeRefractionMapping, UnsignedByteType } from 'three';
 
 const _size = new Vector3();
 
 class Textures extends DataMap {
 
-	constructor( backend, info ) {
+	constructor( renderer, backend, info ) {
 
 		super();
 
+		this.renderer = renderer;
 		this.backend = backend;
 		this.info = info;
 
@@ -22,19 +23,8 @@ class Textures extends DataMap {
 		const sampleCount = renderTarget.samples === 0 ? 1 : renderTarget.samples;
 		const depthTextureMips = renderTargetData.depthTextureMips || ( renderTargetData.depthTextureMips = {} );
 
-		let texture, textures;
-
-		if ( renderTarget.isWebGLMultipleRenderTargets ) {
-
-			textures = renderTarget.texture;
-			texture = renderTarget.texture[ 0 ];
-
-		} else {
-
-			textures = [ renderTarget.texture ];
-			texture = renderTarget.texture;
-
-		}
+		const texture = renderTarget.texture;
+		const textures = renderTarget.textures;
 
 		const size = this.getSize( texture );
 
@@ -47,8 +37,8 @@ class Textures extends DataMap {
 		if ( depthTexture === undefined ) {
 
 			depthTexture = new DepthTexture();
-			depthTexture.format = DepthStencilFormat;
-			depthTexture.type = UnsignedInt248Type;
+			depthTexture.format = renderTarget.stencilBuffer ? DepthStencilFormat : DepthFormat;
+			depthTexture.type = renderTarget.stencilBuffer ? UnsignedInt248Type : UnsignedIntType;
 			depthTexture.image.width = mipWidth;
 			depthTexture.image.height = mipHeight;
 
@@ -72,6 +62,7 @@ class Textures extends DataMap {
 		renderTargetData.depthTexture = depthTexture;
 		renderTargetData.depth = renderTarget.depthBuffer;
 		renderTargetData.stencil = renderTarget.stencilBuffer;
+		renderTargetData.renderTarget = renderTarget;
 
 		if ( renderTargetData.sampleCount !== sampleCount ) {
 
@@ -153,6 +144,25 @@ class Textures extends DataMap {
 
 		//
 
+		if ( texture.isFramebufferTexture ) {
+
+			const renderer = this.renderer;
+			const renderTarget = renderer.getRenderTarget();
+
+			if ( renderTarget ) {
+
+				texture.type = renderTarget.texture.type;
+
+			} else {
+
+				texture.type = UnsignedByteType;
+
+			}
+
+		}
+
+		//
+
 		const { width, height, depth } = this.getSize( texture );
 
 		options.width = width;
@@ -214,7 +224,7 @@ class Textures extends DataMap {
 
 					}
 
-					backend.updateTexture( texture, options );
+					if ( texture.source.dataReady === true ) backend.updateTexture( texture, options );
 
 					if ( options.needsMipmaps && texture.mipmaps.length === 0 ) backend.generateMipmaps( texture );
 

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

@@ -63,6 +63,8 @@ class UniformsGroup extends UniformBuffer {
 
 			const uniform = this.uniforms[ i ];
 
+			const { boundary, itemSize } = uniform;
+
 			// offset within a single chunk in bytes
 
 			const chunkOffset = offset % GPU_CHUNK_BYTES;
@@ -70,23 +72,23 @@ class UniformsGroup extends UniformBuffer {
 
 			// conformance tests
 
-			if ( chunkOffset !== 0 && ( remainingSizeInChunk - uniform.boundary ) < 0 ) {
+			if ( chunkOffset !== 0 && ( remainingSizeInChunk - boundary ) < 0 ) {
 
 				// check for chunk overflow
 
 				offset += ( GPU_CHUNK_BYTES - chunkOffset );
 
-			} else if ( chunkOffset % uniform.boundary !== 0 ) {
+			} else if ( chunkOffset % boundary !== 0 ) {
 
 				// check for correct alignment
 
-				offset += ( chunkOffset % uniform.boundary );
+				offset += ( chunkOffset % boundary );
 
 			}
 
 			uniform.offset = ( offset / this.bytesPerElement );
 
-			offset += ( uniform.itemSize * this.bytesPerElement );
+			offset += ( itemSize * this.bytesPerElement );
 
 		}
 

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

@@ -1,10 +1,11 @@
 class NodeBuilderState {
 
-	constructor( vertexShader, fragmentShader, computeShader, nodeAttributes, bindings, updateNodes, updateBeforeNodes ) {
+	constructor( vertexShader, fragmentShader, computeShader, nodeAttributes, bindings, updateNodes, updateBeforeNodes, transforms = [] ) {
 
 		this.vertexShader = vertexShader;
 		this.fragmentShader = fragmentShader;
 		this.computeShader = computeShader;
+		this.transforms = transforms;
 
 		this.nodeAttributes = nodeAttributes;
 		this.bindings = bindings;

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

@@ -0,0 +1,23 @@
+import StorageBuffer from '../StorageBuffer.js';
+
+let _id = 0;
+
+class NodeStorageBuffer extends StorageBuffer {
+
+	constructor( nodeUniform ) {
+
+		super( 'StorageBuffer_' + _id ++, nodeUniform ? nodeUniform.value : null );
+
+		this.nodeUniform = nodeUniform;
+
+	}
+
+	get buffer() {
+
+		return this.nodeUniform.value;
+
+	}
+
+}
+
+export default NodeStorageBuffer;