super-three 0.154.1 → 0.156.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/postprocessing/UnrealBloomPass.js

@@ -94,7 +94,7 @@ class UnrealBloomPass extends Pass {
 
 			this.separableBlurMaterials.push( this.getSeperableBlurMaterial( kernelSizeArray[ i ] ) );
 
-			this.separableBlurMaterials[ i ].uniforms[ 'texSize' ].value = new Vector2( resx, resy );
+			this.separableBlurMaterials[ i ].uniforms[ 'invSize' ].value = new Vector2( 1 / resx, 1 / resy );
 
 			resx = Math.round( resx / 2 );
 
@@ -192,7 +192,7 @@ class UnrealBloomPass extends Pass {
 			this.renderTargetsHorizontal[ i ].setSize( resx, resy );
 			this.renderTargetsVertical[ i ].setSize( resx, resy );
 
-			this.separableBlurMaterials[ i ].uniforms[ 'texSize' ].value = new Vector2( resx, resy );
+			this.separableBlurMaterials[ i ].uniforms[ 'invSize' ].value = new Vector2( 1 / resx, 1 / resy );
 
 			resx = Math.round( resx / 2 );
 			resy = Math.round( resy / 2 );
@@ -298,17 +298,25 @@ class UnrealBloomPass extends Pass {
 
 	getSeperableBlurMaterial( kernelRadius ) {
 
+		const coefficients = [];
+
+		for ( let i = 0; i < kernelRadius; i ++ ) {
+
+			coefficients.push( 0.39894 * Math.exp( - 0.5 * i * i / ( kernelRadius * kernelRadius ) ) / kernelRadius );
+
+		}
+
 		return new ShaderMaterial( {
 
 			defines: {
-				'KERNEL_RADIUS': kernelRadius,
-				'SIGMA': kernelRadius
+				'KERNEL_RADIUS': kernelRadius
 			},
 
 			uniforms: {
 				'colorTexture': { value: null },
-				'texSize': { value: new Vector2( 0.5, 0.5 ) },
-				'direction': { value: new Vector2( 0.5, 0.5 ) }
+				'invSize': { value: new Vector2( 0.5, 0.5 ) }, // inverse texture size
+				'direction': { value: new Vector2( 0.5, 0.5 ) },
+				'gaussianCoefficients': { value: coefficients } // precomputed Gaussian coefficients
 			},
 
 			vertexShader:
@@ -322,23 +330,19 @@ class UnrealBloomPass extends Pass {
 				`#include <common>
 				varying vec2 vUv;
 				uniform sampler2D colorTexture;
-				uniform vec2 texSize;
+				uniform vec2 invSize;
 				uniform vec2 direction;
+				uniform float gaussianCoefficients[KERNEL_RADIUS];
 
-				float gaussianPdf(in float x, in float sigma) {
-					return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
-				}
 				void main() {
-					vec2 invSize = 1.0 / texSize;
-					float fSigma = float(SIGMA);
-					float weightSum = gaussianPdf(0.0, fSigma);
-					vec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum;
+					float weightSum = gaussianCoefficients[0];
+					vec3 diffuseSum = texture2D( colorTexture, vUv ).rgb * weightSum;
 					for( int i = 1; i < KERNEL_RADIUS; i ++ ) {
 						float x = float(i);
-						float w = gaussianPdf(x, fSigma);
+						float w = gaussianCoefficients[i];
 						vec2 uvOffset = direction * invSize * x;
-						vec3 sample1 = texture2D( colorTexture, vUv + uvOffset).rgb;
-						vec3 sample2 = texture2D( colorTexture, vUv - uvOffset).rgb;
+						vec3 sample1 = texture2D( colorTexture, vUv + uvOffset ).rgb;
+						vec3 sample2 = texture2D( colorTexture, vUv - uvOffset ).rgb;
 						diffuseSum += (sample1 + sample2) * w;
 						weightSum += 2.0 * w;
 					}

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 { context, positionWorldDirection, backgroundBlurriness, MeshBasicNodeMaterial } from '../../nodes/Nodes.js';
+import { vec4, context, normalWorld, backgroundBlurriness, backgroundIntensity, NodeMaterial, modelViewProjection } from '../../nodes/Nodes.js';
 
 let _clearAlpha;
 const _clearColor = new Color();
@@ -14,15 +14,15 @@ class Background extends DataMap {
 		this.renderer = renderer;
 		this.nodes = nodes;
 
-		this.boxMesh = null;
-		this.boxMeshNode = null;
+		this.backgroundMesh = null;
+		this.backgroundMeshNode = null;
 
 	}
 
 	update( scene, renderList, renderContext ) {
 
 		const renderer = this.renderer;
-		const background = ( scene.isScene === true ) ? this.nodes.getBackgroundNode( scene ) || scene.background : null;
+		const background = this.nodes.getBackgroundNode( scene ) || scene.background;
 
 		let forceClear = false;
 
@@ -49,31 +49,33 @@ class Background extends DataMap {
 			_clearColor.copy( renderer._clearColor );
 			_clearAlpha = renderer._clearAlpha;
 
-			let boxMesh = this.boxMesh;
+			let backgroundMesh = this.backgroundMesh;
 
-			if ( boxMesh === null ) {
+			if ( backgroundMesh === null ) {
 
-				this.boxMeshNode = context( backgroundNode, {
+				this.backgroundMeshNode = context( backgroundNode, {
 					// @TODO: Add Texture2D support using node context
-					getUVNode: () => positionWorldDirection,
+					getUVNode: () => normalWorld,
 					getSamplerLevelNode: () => backgroundBlurriness
-				} );
+				} ).mul( backgroundIntensity );
 
-				const nodeMaterial = new MeshBasicNodeMaterial();
-				nodeMaterial.colorNode = this.boxMeshNode;
+				let viewProj = modelViewProjection();
+				viewProj = vec4( viewProj.x, viewProj.y, viewProj.w, 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;
 
-				this.boxMesh = boxMesh = new Mesh( new SphereGeometry( 1, 32, 32 ), nodeMaterial );
-				boxMesh.frustumCulled = false;
-
-				boxMesh.onBeforeRender = function ( renderer, scene, camera ) {
+				this.backgroundMesh = backgroundMesh = new Mesh( new SphereGeometry( 1, 32, 32 ), nodeMaterial );
+				backgroundMesh.frustumCulled = false;
 
-					const scale = camera.far;
+				backgroundMesh.onBeforeRender = function ( renderer, scene, camera ) {
 
-					this.matrixWorld.makeScale( scale, scale, scale ).copyPosition( camera.matrixWorld );
+					this.matrixWorld.copyPosition( camera.matrixWorld );
 
 				};
 
@@ -83,15 +85,15 @@ class Background extends DataMap {
 
 			if ( sceneData.backgroundCacheKey !== backgroundCacheKey ) {
 
-				this.boxMeshNode.node = backgroundNode;
+				this.backgroundMeshNode.node = backgroundNode;
 
-				boxMesh.material.needsUpdate = true;
+				backgroundMesh.material.needsUpdate = true;
 
 				sceneData.backgroundCacheKey = backgroundCacheKey;
 
 			}
 
-			renderList.unshift( boxMesh, boxMesh.geometry, boxMesh.material, 0, 0, null );
+			renderList.unshift( backgroundMesh, backgroundMesh.geometry, backgroundMesh.material, 0, 0, null );
 
 		} else {
 

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

@@ -4,6 +4,20 @@ class Binding {
 
 		this.name = name;
 
+		this.visibility = 0;
+
+	}
+
+	setVisibility( visibility ) {
+
+		this.visibility |= visibility;
+
+	}
+
+	clone() {
+
+		return Object.assign( new this.constructor(), this );
+
 	}
 
 }

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

@@ -34,9 +34,7 @@ class Bindings extends DataMap {
 
 			this._init( bindings );
 
-			const pipeline = this.pipelines.getForRender( renderObject );
-
-			this.backend.createBindings( bindings, pipeline );
+			this.backend.createBindings( bindings );
 
 		}
 
@@ -58,9 +56,7 @@ class Bindings extends DataMap {
 
 			this._init( bindings );
 
-			const pipeline = this.pipelines.getForCompute( computeNode );
-
-			this.backend.createBindings( bindings, pipeline );
+			this.backend.createBindings( bindings );
 
 		}
 
@@ -84,9 +80,11 @@ class Bindings extends DataMap {
 
 		for ( const binding of bindings ) {
 
-			if ( binding.isSampler || binding.isSampledTexture ) {
+			if ( binding.isSampledTexture ) {
+
+				const store = binding.store === true;
 
-				this.textures.updateTexture( binding.texture );
+				this.textures.updateTexture( binding.texture, { store } );
 
 			} else if ( binding.isStorageBuffer ) {
 
@@ -113,10 +111,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/Geometries.js

@@ -88,7 +88,7 @@ class Geometries extends DataMap {
 
 	}
 
-	update( renderObject ) {
+	updateForRender( renderObject ) {
 
 		if ( this.has( renderObject ) === false ) this.initGeometry( renderObject );