super-three 0.155.0 → 0.157.0

package/examples/jsm/postprocessing/SSAOPass.js

@@ -32,7 +32,7 @@ import { CopyShader } from '../shaders/CopyShader.js';
 
 class SSAOPass extends Pass {
 
-	constructor( scene, camera, width, height ) {
+	constructor( scene, camera, width, height, kernelSize = 32 ) {
 
 		super();
 
@@ -45,7 +45,6 @@ class SSAOPass extends Pass {
 		this.scene = scene;
 
 		this.kernelRadius = 8;
-		this.kernelSize = 32;
 		this.kernel = [];
 		this.noiseTexture = null;
 		this.output = 0;
@@ -57,17 +56,15 @@ class SSAOPass extends Pass {
 
 		//
 
-		this.generateSampleKernel();
+		this.generateSampleKernel( kernelSize );
 		this.generateRandomKernelRotations();
 
-		// beauty render target
+		// depth texture
 
 		const depthTexture = new DepthTexture();
 		depthTexture.format = DepthStencilFormat;
 		depthTexture.type = UnsignedInt248Type;
 
-		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height, { type: HalfFloatType } );
-
 		// normal render target with depth buffer
 
 		this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {
@@ -93,7 +90,8 @@ class SSAOPass extends Pass {
 			blending: NoBlending
 		} );
 
-		this.ssaoMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
+		this.ssaoMaterial.defines[ 'KERNEL_SIZE' ] = kernelSize;
+
 		this.ssaoMaterial.uniforms[ 'tNormal' ].value = this.normalRenderTarget.texture;
 		this.ssaoMaterial.uniforms[ 'tDepth' ].value = this.normalRenderTarget.depthTexture;
 		this.ssaoMaterial.uniforms[ 'tNoise' ].value = this.noiseTexture;
@@ -160,7 +158,6 @@ class SSAOPass extends Pass {
 
 		// dispose render targets
 
-		this.beautyRenderTarget.dispose();
 		this.normalRenderTarget.dispose();
 		this.ssaoRenderTarget.dispose();
 		this.blurRenderTarget.dispose();
@@ -178,16 +175,10 @@ class SSAOPass extends Pass {
 
 	}
 
-	render( renderer, writeBuffer /*, readBuffer, deltaTime, maskActive */ ) {
+	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
 
 		if ( renderer.capabilities.isWebGL2 === false ) this.noiseTexture.format = LuminanceFormat;
 
-		// render beauty
-
-		renderer.setRenderTarget( this.beautyRenderTarget );
-		renderer.clear();
-		renderer.render( this.scene, this.camera );
-
 		// render normals and depth (honor only meshes, points and lines do not contribute to SSAO)
 
 		this.overrideVisibility();
@@ -225,14 +216,6 @@ class SSAOPass extends Pass {
 
 				break;
 
-			case SSAOPass.OUTPUT.Beauty:
-
-				this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
-				this.copyMaterial.blending = NoBlending;
-				this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
-
-				break;
-
 			case SSAOPass.OUTPUT.Depth:
 
 				this.renderPass( renderer, this.depthRenderMaterial, this.renderToScreen ? null : writeBuffer );
@@ -249,7 +232,7 @@ class SSAOPass extends Pass {
 
 			case SSAOPass.OUTPUT.Default:
 
-				this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
+				this.copyMaterial.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
 				this.copyMaterial.blending = NoBlending;
 				this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
 
@@ -332,7 +315,6 @@ class SSAOPass extends Pass {
 		this.width = width;
 		this.height = height;
 
-		this.beautyRenderTarget.setSize( width, height );
 		this.ssaoRenderTarget.setSize( width, height );
 		this.normalRenderTarget.setSize( width, height );
 		this.blurRenderTarget.setSize( width, height );
@@ -345,9 +327,8 @@ class SSAOPass extends Pass {
 
 	}
 
-	generateSampleKernel() {
+	generateSampleKernel( kernelSize ) {
 
-		const kernelSize = this.kernelSize;
 		const kernel = this.kernel;
 
 		for ( let i = 0; i < kernelSize; i ++ ) {
@@ -432,9 +413,8 @@ SSAOPass.OUTPUT = {
 	'Default': 0,
 	'SSAO': 1,
 	'Blur': 2,
-	'Beauty': 3,
-	'Depth': 4,
-	'Normal': 5
+	'Depth': 3,
+	'Normal': 4
 };
 
 export { SSAOPass };

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

@@ -1,7 +1,7 @@
 let vector2 = null;
 let vector4 = null;
 
-import { Vector2, Vector4 } from 'three';
+import { Vector2, Vector4, REVISION, createCanvasElement } from 'three';
 
 class Backend {
 
@@ -118,7 +118,12 @@ class Backend {
 
 		if ( domElement === null ) {
 
-			this.domElement = domElement = ( this.parameters.canvas !== undefined ) ? this.parameters.canvas : this.createCanvasElement();
+			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}` );
+
+			this.domElement = domElement;
 
 		}
 
@@ -126,16 +131,14 @@ class Backend {
 
 	}
 
-	createCanvasElement() {
+	// resource properties
+
+	set( object, value ) {
 
-		const canvas = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
-		canvas.style.display = 'block';
-		return canvas;
+		this.data.set( object, value );
 
 	}
 
-	// resource properties
-
 	get( object ) {
 
 		let map = this.data.get( object );

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

@@ -1,6 +1,6 @@
 import DataMap from './DataMap.js';
 import { Color, Mesh, SphereGeometry, BackSide } from 'three';
-import { vec4, context, normalWorld, backgroundBlurriness, backgroundIntensity, NodeMaterial, modelViewProjection } from '../../nodes/Nodes.js';
+import { context, normalWorld, backgroundBlurriness, backgroundIntensity, NodeMaterial, modelViewProjection } from '../../nodes/Nodes.js';
 
 let _clearAlpha;
 const _clearColor = new Color();
@@ -60,7 +60,7 @@ class Background extends DataMap {
 				} ).mul( backgroundIntensity );
 
 				let viewProj = modelViewProjection();
-				viewProj = vec4( viewProj.x, viewProj.y, viewProj.w, viewProj.w );
+				viewProj = viewProj.setZ( viewProj.w );
 
 				const nodeMaterial = new NodeMaterial();
 				nodeMaterial.outputNode = this.backgroundMeshNode;

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

@@ -14,6 +14,12 @@ class Binding {
 
 	}
 
+	clone() {
+
+		return Object.assign( new this.constructor(), this );
+
+	}
+
 }
 
 export default Binding;

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

@@ -48,9 +48,9 @@ class Bindings extends DataMap {
 
 		if ( data.bindings === undefined ) {
 
-			const nodeBuilder = this.nodes.getForCompute( computeNode );
+			const nodeBuilderState = this.nodes.getForCompute( computeNode );
 
-			const bindings = nodeBuilder.getBindings();
+			const bindings = nodeBuilderState.bindings;
 
 			data.bindings = bindings;
 
@@ -80,7 +80,7 @@ class Bindings extends DataMap {
 
 		for ( const binding of bindings ) {
 
-			if ( binding.isSampler || binding.isSampledTexture ) {
+			if ( binding.isSampledTexture ) {
 
 				this.textures.updateTexture( binding.texture );
 
@@ -109,10 +109,9 @@ class Bindings extends DataMap {
 
 		for ( const binding of bindings ) {
 
-			const isShared = binding.isShared;
 			const isUpdated = updateMap.get( binding ) === frame;
 
-			if ( isShared && isUpdated ) continue;
+			if ( isUpdated ) continue;
 
 			if ( binding.isUniformBuffer ) {
 

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

@@ -109,31 +109,31 @@ class Pipelines extends DataMap {
 
 			// get shader
 
-			const nodeBuilder = this.nodes.getForRender( renderObject );
+			const nodeBuilderState = renderObject.getNodeBuilderState();
 
 			// programmable stages
 
-			let stageVertex = this.programs.vertex.get( nodeBuilder.vertexShader );
+			let stageVertex = this.programs.vertex.get( nodeBuilderState.vertexShader );
 
 			if ( stageVertex === undefined ) {
 
 				if ( previousPipeline && previousPipeline.vertexProgram.usedTimes === 0 ) this._releaseProgram( previousPipeline.vertexProgram );
 
-				stageVertex = new ProgrammableStage( nodeBuilder.vertexShader, 'vertex' );
-				this.programs.vertex.set( nodeBuilder.vertexShader, stageVertex );
+				stageVertex = new ProgrammableStage( nodeBuilderState.vertexShader, 'vertex' );
+				this.programs.vertex.set( nodeBuilderState.vertexShader, stageVertex );
 
 				backend.createProgram( stageVertex );
 
 			}
 
-			let stageFragment = this.programs.fragment.get( nodeBuilder.fragmentShader );
+			let stageFragment = this.programs.fragment.get( nodeBuilderState.fragmentShader );
 
 			if ( stageFragment === undefined ) {
 
 				if ( previousPipeline && previousPipeline.fragmentProgram.usedTimes === 0 ) this._releaseProgram( previousPipeline.fragmentProgram );
 
-				stageFragment = new ProgrammableStage( nodeBuilder.fragmentShader, 'fragment' );
-				this.programs.fragment.set( nodeBuilder.fragmentShader, stageFragment );
+				stageFragment = new ProgrammableStage( nodeBuilderState.fragmentShader, 'fragment' );
+				this.programs.fragment.set( nodeBuilderState.fragmentShader, stageFragment );
 
 				backend.createProgram( stageFragment );
 
@@ -343,7 +343,7 @@ class Pipelines extends DataMap {
 			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.side !== material.side || data.alphaToCoverage !== material.alphaToCoverage
 		) {
 
 			data.material = material; data.materialVersion = material.version;
@@ -355,7 +355,7 @@ class Pipelines extends DataMap {
 			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.side = material.side; data.alphaToCoverage = material.alphaToCoverage;
 
 			needsUpdate = true;
 

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

@@ -31,6 +31,9 @@ class RenderContext {
 		this.activeCubeFace = 0;
 		this.sampleCount = 1;
 
+		this.width = 0;
+		this.height = 0;
+
 	}
 
 }

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

@@ -12,7 +12,32 @@ class RenderContexts {
 	get( scene, camera, renderTarget = null ) {
 
 		const chainKey = [ scene, camera ];
-		const attachmentState = renderTarget === null ? 'default' : `${renderTarget.texture.format}:${renderTarget.samples}:${renderTarget.depthBuffer}:${renderTarget.stencilBuffer}`;
+
+		let attachmentState;
+
+		if ( renderTarget === null ) {
+
+			attachmentState = 'default';
+
+		} else {
+
+			let format, count;
+
+			if ( renderTarget.isWebGLMultipleRenderTargets ) {
+
+				format = renderTarget.texture[ 0 ].format;
+				count = renderTarget.texture.length;
+
+			} else {
+
+				format = renderTarget.texture.format;
+				count = 1;
+
+			}
+
+			attachmentState = `${count}:${format}:${renderTarget.samples}:${renderTarget.depthBuffer}:${renderTarget.stencilBuffer}`;
+
+		}
 
 		const chainMap = this.getChainMap( attachmentState );
 

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

@@ -18,16 +18,21 @@ export default class RenderObject {
 		this.context = renderContext;
 
 		this.geometry = object.geometry;
+		this.version = material.version;
 
 		this.attributes = null;
 		this.pipeline = null;
 		this.vertexBuffers = null;
 
-		this._materialVersion = - 1;
-		this._materialCacheKey = '';
+		this.initialCacheKey = this.getCacheKey();
+
+		this._nodeBuilderState = null;
+		this._bindings = null;
 
 		this.onDispose = null;
 
+		this.isRenderObject = true;
+
 		this.onMaterialDispose = () => {
 
 			this.dispose();
@@ -38,15 +43,15 @@ export default class RenderObject {
 
 	}
 
-	getNodeBuilder() {
+	getNodeBuilderState() {
 
-		return this._nodes.getForRender( this );
+		return this._nodeBuilderState || ( this._nodeBuilderState = this._nodes.getForRender( this ) );
 
 	}
 
 	getBindings() {
 
-		return this.getNodeBuilder().getBindings();
+		return this._bindings || ( this._bindings = this.getNodeBuilderState().createBindings() );
 
 	}
 
@@ -66,7 +71,7 @@ export default class RenderObject {
 
 		if ( this.attributes !== null ) return this.attributes;
 
-		const nodeAttributes = this.getNodeBuilder().getAttributesArray();
+		const nodeAttributes = this.getNodeBuilderState().nodeAttributes;
 		const geometry = this.geometry;
 
 		const attributes = [];
@@ -98,23 +103,46 @@ export default class RenderObject {
 
 	}
 
-	getCacheKey() {
+	getMaterialCacheKey() {
+
+		const material = this.material;
+
+		let cacheKey = material.customProgramCacheKey();
+
+		for ( const property in material ) {
+
+			if ( /^(is[A-Z])|^(visible|version|uuid|name|opacity|userData)$/.test( property ) ) continue;
+
+			let value = material[ property ];
+
+			if ( value !== null ) {
 
-		const { material, scene, lightsNode } = this;
+				const type = typeof value;
 
-		if ( material.version !== this._materialVersion ) {
+				if ( type === 'number' ) value = value !== 0 ? '1' : '0'; // Convert to on/off, important for clearcoat, transmission, etc
+				else if ( type === 'object' ) value = '{}';
 
-			this._materialVersion = material.version;
-			this._materialCacheKey = material.customProgramCacheKey();
+			}
+
+			cacheKey += /*property + ':' +*/ value + ',';
 
 		}
 
-		const cacheKey = [];
+		return cacheKey;
+
+	}
+
+	getNodesCacheKey() {
+
+		// Environment Nodes Cache Key
 
-		cacheKey.push( 'material:' + this._materialCacheKey );
-		cacheKey.push( 'nodes:' + this._nodes.getCacheKey( scene, lightsNode ) );
+		return this._nodes.getCacheKey( this.scene, this.lightsNode );
+
+	}
+
+	getCacheKey() {
 
-		return '{' + cacheKey.join( ',' ) + '}';
+		return `{material:${ this.getMaterialCacheKey() },nodes:${ this.getNodesCacheKey()}`;
 
 	}
 

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

@@ -1,4 +1,3 @@
-import DataMap from './DataMap.js';
 import ChainMap from './ChainMap.js';
 import RenderObject from './RenderObject.js';
 
@@ -14,7 +13,6 @@ class RenderObjects {
 		this.info = info;
 
 		this.chainMaps = {};
-		this.dataMap = new DataMap();
 
 	}
 
@@ -33,14 +31,17 @@ class RenderObjects {
 
 		} else {
 
-			const data = this.dataMap.get( renderObject );
-			const cacheKey = renderObject.getCacheKey();
+			if ( renderObject.version !== material.version ) {
 
-			if ( data.cacheKey !== cacheKey ) {
+				renderObject.version = material.version;
 
-				renderObject.dispose();
+				if ( renderObject.initialCacheKey !== renderObject.getCacheKey() ) {
 
-				renderObject = this.get( object, material, scene, camera, lightsNode, renderContext, passId );
+					renderObject.dispose();
+
+					renderObject = this.get( object, material, scene, camera, lightsNode, renderContext, passId );
+
+				}
 
 			}
 
@@ -59,24 +60,17 @@ class RenderObjects {
 	dispose() {
 
 		this.chainMaps = {};
-		this.dataMap = new DataMap();
 
 	}
 
 	createRenderObject( nodes, geometries, renderer, object, material, scene, camera, lightsNode, renderContext, passId ) {
 
 		const chainMap = this.getChainMap( passId );
-		const dataMap = this.dataMap;
 
 		const renderObject = new RenderObject( nodes, geometries, renderer, object, material, scene, camera, lightsNode, renderContext );
 
-		const data = dataMap.get( renderObject );
-		data.cacheKey = renderObject.getCacheKey();
-
 		renderObject.onDispose = () => {
 
-			dataMap.delete( renderObject );
-
 			this.pipelines.delete( renderObject );
 			this.bindings.delete( renderObject );
 			this.nodes.delete( renderObject );