super-three 0.162.0 → 0.164.0

package/examples/jsm/postprocessing/LUTPass.js

@@ -4,12 +4,7 @@ const LUTShader = {
 
 	name: 'LUTShader',
 
-	defines: {
-		USE_3DTEXTURE: 1,
-	},
-
 	uniforms: {
-		lut3d: { value: null },
 
 		lut: { value: null },
 		lutSize: { value: 0 },
@@ -34,45 +29,7 @@ const LUTShader = {
 	fragmentShader: /* glsl */`
 
 		uniform float lutSize;
-		#if USE_3DTEXTURE
-		precision highp sampler3D;
-		uniform sampler3D lut3d;
-		#else
-		uniform sampler2D lut;
-
-		vec3 lutLookup( sampler2D tex, float size, vec3 rgb ) {
-
-			float sliceHeight = 1.0 / size;
-			float yPixelHeight = 1.0 / ( size * size );
-
-			// Get the slices on either side of the sample
-			float slice = rgb.b * size;
-			float interp = fract( slice );
-			float slice0 = slice - interp;
-			float centeredInterp = interp - 0.5;
-
-			float slice1 = slice0 + sign( centeredInterp );
-
-			// Pull y sample in by half a pixel in each direction to avoid color
-			// bleeding from adjacent slices.
-			float greenOffset = clamp( rgb.g * sliceHeight, yPixelHeight * 0.5, sliceHeight - yPixelHeight * 0.5 );
-
-			vec2 uv0 = vec2(
-				rgb.r,
-				slice0 * sliceHeight + greenOffset
-			);
-			vec2 uv1 = vec2(
-				rgb.r,
-				slice1 * sliceHeight + greenOffset
-			);
-
-			vec3 sample0 = texture2D( tex, uv0 ).rgb;
-			vec3 sample1 = texture2D( tex, uv1 ).rgb;
-
-			return mix( sample0, sample1, abs( centeredInterp ) );
-
-		}
-		#endif
+		uniform sampler3D lut;
 
 		varying vec2 vUv;
 		uniform float intensity;
@@ -88,15 +45,8 @@ const LUTShader = {
 			float halfPixelWidth = 0.5 / lutSize;
 			vec3 uvw = vec3( halfPixelWidth ) + val.rgb * ( 1.0 - pixelWidth );
 
-			#if USE_3DTEXTURE
 
-			lutVal = vec4( texture( lut3d, uvw ).rgb, val.a );
-
-			#else
-
-			lutVal = vec4( lutLookup( lut, lutSize, uvw ), val.a );
-
-			#endif
+			lutVal = vec4( texture( lut, uvw ).rgb, val.a );
 
 			gl_FragColor = vec4( mix( val, lutVal, intensity ) );
 
@@ -111,31 +61,15 @@ class LUTPass extends ShaderPass {
 	set lut( v ) {
 
 		const material = this.material;
+
 		if ( v !== this.lut ) {
 
-			material.uniforms.lut3d.value = null;
 			material.uniforms.lut.value = null;
 
 			if ( v ) {
 
-				const is3dTextureDefine = v.isData3DTexture ? 1 : 0;
-				if ( is3dTextureDefine !== material.defines.USE_3DTEXTURE ) {
-
-					material.defines.USE_3DTEXTURE = is3dTextureDefine;
-					material.needsUpdate = true;
-
-				}
-
 				material.uniforms.lutSize.value = v.image.width;
-				if ( v.isData3DTexture ) {
-
-					material.uniforms.lut3d.value = v;
-
-				} else {
-
-					material.uniforms.lut.value = v;
-
-				}
+				material.uniforms.lut.value = v;
 
 			}
 
@@ -145,7 +79,7 @@ class LUTPass extends ShaderPass {
 
 	get lut() {
 
-		return this.material.uniforms.lut.value || this.material.uniforms.lut3d.value;
+		return this.material.uniforms.lut.value;
 
 	}
 

package/examples/jsm/postprocessing/RenderTransitionPass.js

@@ -0,0 +1,193 @@
+import {
+	HalfFloatType,
+	ShaderMaterial,
+	WebGLRenderTarget
+} from 'three';
+import { FullScreenQuad, Pass } from './Pass.js';
+
+class RenderTransitionPass extends Pass {
+
+	constructor( sceneA, cameraA, sceneB, cameraB ) {
+
+		super();
+
+		this.material = this.createMaterial();
+		this.fsQuad = new FullScreenQuad( this.material );
+
+		this.sceneA = sceneA;
+		this.cameraA = cameraA;
+		this.sceneB = sceneB;
+		this.cameraB = cameraB;
+
+		this.renderTargetA = new WebGLRenderTarget();
+		this.renderTargetA.texture.type = HalfFloatType;
+		this.renderTargetB = new WebGLRenderTarget();
+		this.renderTargetB.texture.type = HalfFloatType;
+
+	}
+
+	setTransition( value ) {
+
+		this.material.uniforms.mixRatio.value = value;
+
+	}
+
+	useTexture( value ) {
+
+		this.material.uniforms.useTexture.value = value ? 1 : 0;
+
+	}
+
+	setTexture( value ) {
+
+		this.material.uniforms.tMixTexture.value = value;
+
+	}
+
+	setTextureThreshold( value ) {
+
+		this.material.uniforms.threshold.value = value;
+
+	}
+
+	setSize( width, height ) {
+
+		this.renderTargetA.setSize( width, height );
+		this.renderTargetB.setSize( width, height );
+
+	}
+
+	render( renderer, writeBuffer ) {
+
+		const uniforms = this.fsQuad.material.uniforms;
+		const transition = uniforms.mixRatio.value;
+
+		// Prevent render both scenes when it's not necessary
+
+		if ( transition === 0 ) {
+
+			renderer.setRenderTarget( writeBuffer );
+			if ( this.clear ) renderer.clear();
+			renderer.render( this.sceneB, this.cameraB );
+
+		} else if ( transition === 1 ) {
+
+			renderer.setRenderTarget( writeBuffer );
+			if ( this.clear ) renderer.clear();
+			renderer.render( this.sceneA, this.cameraA );
+
+		} else {
+
+			// When 0 < transition < 1 render transition between two scenes
+
+			renderer.setRenderTarget( this.renderTargetA );
+			renderer.render( this.sceneA, this.cameraA );
+			renderer.setRenderTarget( this.renderTargetB );
+			renderer.render( this.sceneB, this.cameraB );
+
+			uniforms.tDiffuse1.value = this.renderTargetA.texture;
+			uniforms.tDiffuse2.value = this.renderTargetB.texture;
+
+			if ( this.renderToScreen ) {
+
+				renderer.setRenderTarget( null );
+				renderer.clear();
+
+			} else {
+
+				renderer.setRenderTarget( writeBuffer );
+				if ( this.clear ) renderer.clear();
+
+			}
+
+			this.fsQuad.render( renderer );
+
+		}
+
+	}
+
+	dispose() {
+
+		this.renderTargetA.dispose();
+		this.renderTargetB.dispose();
+		this.material.dispose();
+		this.fsQuad.dispose();
+
+	}
+
+	createMaterial() {
+
+		return new ShaderMaterial( {
+			uniforms: {
+				tDiffuse1: {
+					value: null
+				},
+				tDiffuse2: {
+					value: null
+				},
+				mixRatio: {
+					value: 0.0
+				},
+				threshold: {
+					value: 0.1
+				},
+				useTexture: {
+					value: 1
+				},
+				tMixTexture: {
+					value: null
+				}
+			},
+			vertexShader: /* glsl */`
+				varying vec2 vUv;
+
+				void main() {
+
+					vUv = vec2( uv.x, uv.y );
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+				}
+			`,
+			fragmentShader: /* glsl */`
+				uniform float mixRatio;
+
+				uniform sampler2D tDiffuse1;
+				uniform sampler2D tDiffuse2;
+				uniform sampler2D tMixTexture;
+
+				uniform int useTexture;
+				uniform float threshold;
+
+				varying vec2 vUv;
+
+				void main() {
+
+					vec4 texel1 = texture2D( tDiffuse1, vUv );
+					vec4 texel2 = texture2D( tDiffuse2, vUv );
+
+					if (useTexture == 1) {
+
+						vec4 transitionTexel = texture2D( tMixTexture, vUv );
+						float r = mixRatio * ( 1.0 + threshold * 2.0 ) - threshold;
+						float mixf = clamp( ( transitionTexel.r - r ) * ( 1.0 / threshold ), 0.0, 1.0 );
+
+						gl_FragColor = mix( texel1, texel2, mixf );
+
+					} else {
+
+						gl_FragColor = mix( texel2, texel1, mixRatio );
+
+					}
+
+					#include <tonemapping_fragment>
+					#include <colorspace_fragment>
+
+				}
+			`
+		} );
+
+	}
+
+}
+
+export { RenderTransitionPass };

package/examples/jsm/postprocessing/SAOPass.js

@@ -81,7 +81,6 @@ class SAOPass extends Pass {
 			vertexShader: SAOShader.vertexShader,
 			uniforms: UniformsUtils.clone( SAOShader.uniforms )
 		} );
-		this.saoMaterial.extensions.derivatives = true;
 		this.saoMaterial.defines[ 'PERSPECTIVE_CAMERA' ] = this.camera.isPerspectiveCamera ? 1 : 0;
 		this.saoMaterial.uniforms[ 'tDepth' ].value = depthTexture;
 		this.saoMaterial.uniforms[ 'tNormal' ].value = this.normalRenderTarget.texture;

package/examples/jsm/postprocessing/SSAOPass.js

@@ -13,7 +13,6 @@ import {
 	NearestFilter,
 	NoBlending,
 	RedFormat,
-	LuminanceFormat,
 	DepthStencilFormat,
 	UnsignedInt248Type,
 	RepeatWrapping,
@@ -177,8 +176,6 @@ class SSAOPass extends Pass {
 
 	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
 
-		if ( renderer.capabilities.isWebGL2 === false ) this.noiseTexture.format = LuminanceFormat;
-
 		// render normals and depth (honor only meshes, points and lines do not contribute to SSAO)
 
 		this.overrideVisibility();

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

@@ -18,6 +18,8 @@ class Animation {
 
 			this.requestId = self.requestAnimationFrame( update );
 
+			if ( this.info.autoReset === true ) this.info.reset();
+
 			this.nodes.nodeFrame.update();
 
 			this.info.frame = this.nodes.nodeFrame.frameId;
@@ -33,6 +35,7 @@ class Animation {
 	dispose() {
 
 		self.cancelAnimationFrame( this.requestId );
+		this.requestId = null;
 
 	}
 

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

@@ -1,7 +1,7 @@
 import DataMap from './DataMap.js';
 import Color4 from './Color4.js';
-import { Mesh, SphereGeometry, BackSide } from 'three';
-import { vec4, context, normalWorld, backgroundBlurriness, backgroundIntensity, NodeMaterial, modelViewProjection, maxMipLevel } from '../../nodes/Nodes.js';
+import { Mesh, SphereGeometry, BackSide, LinearSRGBColorSpace } from 'three';
+import { vec4, context, normalWorld, backgroundBlurriness, backgroundIntensity, NodeMaterial, modelViewProjection } from '../../nodes/Nodes.js';
 
 const _clearColor = new Color4();
 
@@ -27,14 +27,14 @@ class Background extends DataMap {
 
 			// no background settings, use clear color configuration from the renderer
 
-			renderer._clearColor.getRGB( _clearColor, this.renderer.currentColorSpace );
+			renderer._clearColor.getRGB( _clearColor, LinearSRGBColorSpace );
 			_clearColor.a = renderer._clearColor.a;
 
 		} else if ( background.isColor === true ) {
 
 			// background is an opaque color
 
-			background.getRGB( _clearColor, this.renderer.currentColorSpace );
+			background.getRGB( _clearColor, LinearSRGBColorSpace );
 			_clearColor.a = 1;
 
 			forceClear = true;
@@ -50,11 +50,11 @@ class Background extends DataMap {
 
 			if ( backgroundMesh === undefined ) {
 
-				const backgroundMeshNode = context( vec4( backgroundNode ), {
+				const backgroundMeshNode = context( vec4( backgroundNode ).mul( backgroundIntensity ), {
 					// @TODO: Add Texture2D support using node context
 					getUV: () => normalWorld,
-					getTextureLevel: ( textureNode ) => backgroundBlurriness.mul( maxMipLevel( textureNode ) )
-				} ).mul( backgroundIntensity );
+					getTextureLevel: () => backgroundBlurriness
+				} );
 
 				let viewProj = modelViewProjection();
 				viewProj = viewProj.setZ( viewProj.w );
@@ -83,7 +83,7 @@ class Background extends DataMap {
 
 			if ( sceneData.backgroundCacheKey !== backgroundCacheKey ) {
 
-				sceneData.backgroundMeshNode.node = vec4( backgroundNode );
+				sceneData.backgroundMeshNode.node = vec4( backgroundNode ).mul( backgroundIntensity );
 
 				backgroundMesh.material.needsUpdate = true;
 

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

@@ -101,7 +101,7 @@ class ClippingContext {
 
 		if ( this !== parent && parent.version !== this.parentVersion ) {
 
-			this.globalClippingCount =  material.isShadowNodeMaterial ? 0 : parent.globalClippingCount;
+			this.globalClippingCount = material.isShadowNodeMaterial ? 0 : parent.globalClippingCount;
 			this.localClippingEnabled = parent.localClippingEnabled;
 			this.planes = Array.from( parent.planes );
 			this.parentVersion = parent.version;

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

@@ -12,12 +12,14 @@ class Info {
 			drawCalls: 0,
 			triangles: 0,
 			points: 0,
-			lines: 0
+			lines: 0,
+			timestamp: 0
 		};
 
 		this.compute = {
 			calls: 0,
-			computeCalls: 0
+			computeCalls: 0,
+			timestamp: 0
 		};
 
 		this.memory = {
@@ -25,11 +27,6 @@ class Info {
 			textures: 0
 		};
 
-		this.timestamp = {
-			compute: 0,
-			render: 0
-		};
-
 	}
 
 	update( object, count, instanceCount ) {
@@ -62,26 +59,21 @@ class Info {
 
 	updateTimestamp( type, time ) {
 
-		this.timestamp[ type ] += time;
-
-	}
-
-	resetCompute() {
-
-		this.compute.computeCalls = 0;
-
-		this.timestamp.compute = 0;
+		this[ type ].timestamp += time;
 
 	}
 
 	reset() {
 
 		this.render.drawCalls = 0;
+		this.compute.computeCalls = 0;
+
 		this.render.triangles = 0;
 		this.render.points = 0;
 		this.render.lines = 0;
 
-		this.timestamp.render = 0;
+		this.render.timestamp = 0;
+		this.compute.timestamp = 0;
 
 	}
 
@@ -94,8 +86,8 @@ class Info {
 		this.render.calls = 0;
 		this.compute.calls = 0;
 
-		this.timestamp.compute = 0;
-		this.timestamp.render = 0;
+		this.render.timestamp = 0;
+		this.compute.timestamp = 0;
 		this.memory.geometries = 0;
 		this.memory.textures = 0;
 

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

@@ -1,7 +1,7 @@
-import { vec4, MeshBasicNodeMaterial } from '../../nodes/Nodes.js';
+import { vec4, NodeMaterial } from '../../nodes/Nodes.js';
 import QuadMesh from '../../objects/QuadMesh.js';
 
-const quadMesh = new QuadMesh( new MeshBasicNodeMaterial() );
+const quadMesh = new QuadMesh( new NodeMaterial() );
 
 class PostProcessing {
 
@@ -12,11 +12,19 @@ class PostProcessing {
 
 	}
 
-	async render() {
+	render() {
 
 		quadMesh.material.fragmentNode = this.outputNode;
 
-		await quadMesh.render( this.renderer );
+		quadMesh.render( this.renderer );
+
+	}
+
+	renderAsync() {
+
+		quadMesh.material.fragmentNode = this.outputNode;
+
+		return quadMesh.renderAsync( this.renderer );
 
 	}
 

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

@@ -16,7 +16,7 @@ class RenderContext {
 		this.clearDepth = true;
 		this.clearDepthValue = 1;
 
-		this.stencil = true;
+		this.stencil = false;
 		this.clearStencil = true;
 		this.clearStencilValue = 1;
 

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

@@ -123,7 +123,7 @@ class RenderList {
 
 		if ( object.occlusionTest === true ) this.occlusionQueryCount ++;
 
-		( material.transparent === true ? this.transparent : this.opaque ).push( renderItem );
+		( material.transparent === true || material.transmission > 0 ? this.transparent : this.opaque ).push( renderItem );
 
 	}
 

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

@@ -1,7 +1,41 @@
-import ClippingContext from "./ClippingContext.js";
+import ClippingContext from './ClippingContext.js';
 
 let id = 0;
 
+function getKeys( obj ) {
+
+	const keys = Object.keys( obj );
+
+	let proto = Object.getPrototypeOf( obj );
+
+	while ( proto ) {
+
+		const descriptors = Object.getOwnPropertyDescriptors( proto );
+
+		for ( const key in descriptors ) {
+
+			if ( descriptors[ key ] !== undefined ) {
+
+				const descriptor = descriptors[ key ];
+
+				if ( descriptor && typeof descriptor.get === 'function' ) {
+
+					keys.push( key );
+
+				}
+
+			}
+
+		}
+
+		proto = Object.getPrototypeOf( proto );
+
+	}
+
+	return keys;
+
+}
+
 export default class RenderObject {
 
 	constructor( nodes, geometries, renderer, object, material, scene, camera, lightsNode, renderContext ) {
@@ -22,6 +56,8 @@ export default class RenderObject {
 		this.geometry = object.geometry;
 		this.version = material.version;
 
+		this.drawRange = null;
+
 		this.attributes = null;
 		this.pipeline = null;
 		this.vertexBuffers = null;
@@ -75,7 +111,7 @@ export default class RenderObject {
 
 	}
 
-	clippingNeedsUpdate () {
+	get clippingNeedsUpdate() {
 
 		if ( this.clippingContext.version === this.clippingContextVersion ) return false;
 
@@ -153,9 +189,9 @@ export default class RenderObject {
 
 		let cacheKey = material.customProgramCacheKey();
 
-		for ( const property in material ) {
+		for ( const property of getKeys( material ) ) {
 
-			if ( /^(is[A-Z])|^(visible|version|uuid|name|opacity|userData)$/.test( property ) ) continue;
+			if ( /^(is[A-Z]|_)|^(visible|version|uuid|name|opacity|userData)$/.test( property ) ) continue;
 
 			let value = material[ property ];
 
@@ -186,13 +222,19 @@ export default class RenderObject {
 
 		}
 
+		if ( object.isBatchedMesh ) {
+
+			cacheKey += object._matricesTexture.uuid + ',';
+
+		}
+
 		return cacheKey;
 
 	}
 
 	get needsUpdate() {
 
-		return this.initialNodesCacheKey !== this.getNodesCacheKey();
+		return this.initialNodesCacheKey !== this.getNodesCacheKey() || this.clippingNeedsUpdate;
 
 	}
 

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

@@ -33,7 +33,7 @@ class RenderObjects {
 
 			renderObject.updateClipping( renderContext.clippingContext );
 
-			if ( renderObject.version !== material.version || renderObject.needsUpdate || renderObject.clippingNeedsUpdate() ) {
+			if ( renderObject.version !== material.version || renderObject.needsUpdate ) {
 
 				if ( renderObject.initialCacheKey !== renderObject.getCacheKey() ) {