super-three 0.141.0 → 0.147.0

package/examples/jsm/objects/Refractor.js

@@ -9,7 +9,10 @@ import {
 	UniformsUtils,
 	Vector3,
 	Vector4,
-	WebGLRenderTarget
+	WebGLRenderTarget,
+	LinearEncoding,
+	NoToneMapping,
+	HalfFloatType
 } from 'three';
 
 class Refractor extends Mesh {
@@ -45,7 +48,7 @@ class Refractor extends Mesh {
 
 		// render target
 
-		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { samples: multisample } );
+		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { samples: multisample, type: HalfFloatType } );
 
 		// material
 
@@ -191,9 +194,13 @@ class Refractor extends Mesh {
 			const currentRenderTarget = renderer.getRenderTarget();
 			const currentXrEnabled = renderer.xr.enabled;
 			const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
+			const currentOutputEncoding = renderer.outputEncoding;
+			const currentToneMapping = renderer.toneMapping;
 
 			renderer.xr.enabled = false; // avoid camera modification
 			renderer.shadowMap.autoUpdate = false; // avoid re-computing shadows
+			renderer.outputEncoding = LinearEncoding;
+			renderer.toneMapping = NoToneMapping;
 
 			renderer.setRenderTarget( renderTarget );
 			if ( renderer.autoClear === false ) renderer.clear();
@@ -201,6 +208,8 @@ class Refractor extends Mesh {
 
 			renderer.xr.enabled = currentXrEnabled;
 			renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+			renderer.outputEncoding = currentOutputEncoding;
+			renderer.toneMapping = currentToneMapping;
 			renderer.setRenderTarget( currentRenderTarget );
 
 			// restore viewport
@@ -221,10 +230,6 @@ class Refractor extends Mesh {
 
 		this.onBeforeRender = function ( renderer, scene, camera ) {
 
-			// Render
-
-			renderTarget.texture.encoding = renderer.outputEncoding;
-
 			// ensure refractors are rendered only once per frame
 
 			if ( camera.userData.refractor === true ) return;
@@ -317,6 +322,7 @@ Refractor.RefractorShader = {
 			vec4 base = texture2DProj( tDiffuse, vUv );
 			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
 
+			#include <tonemapping_fragment>
 			#include <encodings_fragment>
 
 		}`

package/examples/jsm/objects/ShadowMesh.js

@@ -1,7 +1,9 @@
 import {
 	Matrix4,
 	Mesh,
-	MeshBasicMaterial
+	MeshBasicMaterial,
+	EqualStencilFunc,
+	IncrementStencilOp
 } from 'three';
 
 /**
@@ -19,7 +21,11 @@ class ShadowMesh extends Mesh {
 			color: 0x000000,
 			transparent: true,
 			opacity: 0.6,
-			depthWrite: false
+			depthWrite: false,
+			stencilWrite: true,
+            		stencilFunc: EqualStencilFunc,
+            		stencilRef: 0,
+            		stencilZPass: IncrementStencilOp
 
 		} );
 

package/examples/jsm/postprocessing/AfterimagePass.js

@@ -30,7 +30,7 @@ class AfterimagePass extends Pass {
 			magFilter: NearestFilter,
 		} );
 
-		this.shaderMaterial = new ShaderMaterial( {
+		this.compFsMaterial = new ShaderMaterial( {
 
 			uniforms: this.uniforms,
 			vertexShader: this.shader.vertexShader,
@@ -38,10 +38,10 @@ class AfterimagePass extends Pass {
 
 		} );
 
-		this.compFsQuad = new FullScreenQuad( this.shaderMaterial );
+		this.compFsQuad = new FullScreenQuad( this.compFsMaterial );
 
-		const material = new MeshBasicMaterial();
-		this.copyFsQuad = new FullScreenQuad( material );
+		this.copyFsMaterial = new MeshBasicMaterial();
+		this.copyFsQuad = new FullScreenQuad( this.copyFsMaterial );
 
 	}
 
@@ -85,6 +85,19 @@ class AfterimagePass extends Pass {
 
 	}
 
+	dispose() {
+
+		this.textureComp.dispose();
+		this.textureOld.dispose();
+
+		this.compFsMaterial.dispose();
+		this.copyFsMaterial.dispose();
+
+		this.compFsQuad.dispose();
+		this.copyFsQuad.dispose();
+
+	}
+
 }
 
 export { AfterimagePass };

package/examples/jsm/postprocessing/BloomPass.js

@@ -10,15 +10,15 @@ import { ConvolutionShader } from '../shaders/ConvolutionShader.js';
 
 class BloomPass extends Pass {
 
-	constructor( strength = 1, kernelSize = 25, sigma = 4, resolution = 256 ) {
+	constructor( strength = 1, kernelSize = 25, sigma = 4 ) {
 
 		super();
 
 		// render targets
 
-		this.renderTargetX = new WebGLRenderTarget( resolution, resolution );
+		this.renderTargetX = new WebGLRenderTarget(); // will be resized later
 		this.renderTargetX.texture.name = 'BloomPass.x';
-		this.renderTargetY = new WebGLRenderTarget( resolution, resolution );
+		this.renderTargetY = new WebGLRenderTarget(); // will be resized later
 		this.renderTargetY.texture.name = 'BloomPass.y';
 
 		// combine material
@@ -105,6 +105,25 @@ class BloomPass extends Pass {
 
 	}
 
+	setSize( width, height ) {
+
+		this.renderTargetX.setSize( width, height );
+		this.renderTargetY.setSize( width, height );
+
+	}
+
+	dispose() {
+
+		this.renderTargetX.dispose();
+		this.renderTargetY.dispose();
+
+		this.materialCombine.dispose();
+		this.materialConvolution.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 const CombineShader = {

package/examples/jsm/postprocessing/BokehPass.js

@@ -31,10 +31,7 @@ class BokehPass extends Pass {
 
 		// render targets
 
-		const width = params.width || window.innerWidth || 1;
-		const height = params.height || window.innerHeight || 1;
-
-		this.renderTargetDepth = new WebGLRenderTarget( width, height, {
+		this.renderTargetDepth = new WebGLRenderTarget( 1, 1, { // will be resized later
 			minFilter: NearestFilter,
 			magFilter: NearestFilter
 		} );
@@ -126,6 +123,23 @@ class BokehPass extends Pass {
 
 	}
 
+	setSize( width, height ) {
+
+		this.renderTargetDepth.setSize( width, height );
+
+	}
+
+	dispose() {
+
+		this.renderTargetDepth.dispose();
+
+		this.materialDepth.dispose();
+		this.materialBokeh.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 export { BokehPass };

package/examples/jsm/postprocessing/CubeTexturePass.js

@@ -12,7 +12,7 @@ import { Pass } from './Pass.js';
 
 class CubeTexturePass extends Pass {
 
-	constructor( camera, envMap, opacity = 1 ) {
+	constructor( camera, tCube, opacity = 1 ) {
 
 		super();
 
@@ -37,13 +37,13 @@ class CubeTexturePass extends Pass {
 
 			get: function () {
 
-				return this.uniforms.envMap.value;
+				return this.uniforms.tCube.value;
 
 			}
 
 		} );
 
-		this.envMap = envMap;
+		this.tCube = tCube;
 		this.opacity = opacity;
 
 		this.cubeScene = new Scene();
@@ -60,8 +60,8 @@ class CubeTexturePass extends Pass {
 		this.cubeCamera.projectionMatrix.copy( this.camera.projectionMatrix );
 		this.cubeCamera.quaternion.setFromRotationMatrix( this.camera.matrixWorld );
 
-		this.cubeMesh.material.uniforms.envMap.value = this.envMap;
-		this.cubeMesh.material.uniforms.flipEnvMap.value = ( this.envMap.isCubeTexture && this.envMap.isRenderTargetTexture === false ) ? - 1 : 1;
+		this.cubeMesh.material.uniforms.tCube.value = this.tCube;
+		this.cubeMesh.material.uniforms.tFlip.value = ( this.tCube.isCubeTexture && this.tCube.isRenderTargetTexture === false ) ? - 1 : 1;
 		this.cubeMesh.material.uniforms.opacity.value = this.opacity;
 		this.cubeMesh.material.transparent = ( this.opacity < 1.0 );
 
@@ -73,6 +73,13 @@ class CubeTexturePass extends Pass {
 
 	}
 
+	dispose() {
+
+		this.cubeMesh.geometry.dispose();
+		this.cubeMesh.material.dispose();
+
+	}
+
 }
 
 export { CubeTexturePass };

package/examples/jsm/postprocessing/DotScreenPass.js

@@ -53,6 +53,14 @@ class DotScreenPass extends Pass {
 
 	}
 
+	dispose() {
+
+		this.material.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 export { DotScreenPass };

package/examples/jsm/postprocessing/EffectComposer.js

@@ -232,6 +232,15 @@ class EffectComposer {
 
 	}
 
+	dispose() {
+
+		this.renderTarget1.dispose();
+		this.renderTarget2.dispose();
+
+		this.copyPass.dispose();
+
+	}
+
 }
 
 

package/examples/jsm/postprocessing/FilmPass.js

@@ -54,6 +54,14 @@ class FilmPass extends Pass {
 
 	}
 
+	dispose() {
+
+		this.material.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 export { FilmPass };

package/examples/jsm/postprocessing/GlitchPass.js

@@ -22,7 +22,9 @@ class GlitchPass extends Pass {
 
 		this.uniforms = UniformsUtils.clone( shader.uniforms );
 
-		this.uniforms[ 'tDisp' ].value = this.generateHeightmap( dt_size );
+		this.heightMap = this.generateHeightmap( dt_size );
+
+		this.uniforms[ 'tDisp' ].value = this.heightMap;
 
 		this.material = new ShaderMaterial( {
 			uniforms: this.uniforms,
@@ -113,6 +115,16 @@ class GlitchPass extends Pass {
 
 	}
 
+	dispose() {
+
+		this.material.dispose();
+
+		this.heightMap.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 export { GlitchPass };

package/examples/jsm/postprocessing/HalftonePass.js

@@ -72,6 +72,14 @@ class HalftonePass extends Pass {
 
  	}
 
+	dispose() {
+
+		this.material.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 export { HalftonePass };

package/examples/jsm/postprocessing/OutlinePass.js

@@ -140,6 +140,16 @@ class OutlinePass extends Pass {
 		this.renderTargetEdgeBuffer1.dispose();
 		this.renderTargetEdgeBuffer2.dispose();
 
+		this.depthMaterial.dispose();
+		this.prepareMaskMaterial.dispose();
+		this.edgeDetectionMaterial.dispose();
+		this.separableBlurMaterial1.dispose();
+		this.separableBlurMaterial2.dispose();
+		this.overlayMaterial.dispose();
+		this.materialCopy.dispose();
+
+		this.fsQuad.dispose();
+
 	}
 
 	setSize( width, height ) {
@@ -446,7 +456,17 @@ class OutlinePass extends Pass {
 					#include <project_vertex>
 
 					vPosition = mvPosition;
-					vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );
+
+					vec4 worldPosition = vec4( transformed, 1.0 );
+
+					#ifdef USE_INSTANCING
+
+						worldPosition = instanceMatrix * worldPosition;
+
+					#endif
+					
+					worldPosition = modelMatrix * worldPosition;
+
 					projTexCoord = textureMatrix * worldPosition;
 
 				}`,
@@ -555,12 +575,14 @@ class OutlinePass extends Pass {
 
 				void main() {
 					vec2 invSize = 1.0 / texSize;
-					float weightSum = gaussianPdf(0.0, kernelRadius);
+					float sigma = kernelRadius/2.0;
+					float weightSum = gaussianPdf(0.0, sigma);
 					vec4 diffuseSum = texture2D( colorTexture, vUv) * weightSum;
 					vec2 delta = direction * invSize * kernelRadius/float(MAX_RADIUS);
 					vec2 uvOffset = delta;
 					for( int i = 1; i <= MAX_RADIUS; i ++ ) {
-						float w = gaussianPdf(uvOffset.x, kernelRadius);
+						float x = kernelRadius * float(i) / float(MAX_RADIUS);
+						float w = gaussianPdf(x, sigma);
 						vec4 sample1 = texture2D( colorTexture, vUv + uvOffset);
 						vec4 sample2 = texture2D( colorTexture, vUv - uvOffset);
 						diffuseSum += ((sample1 + sample2) * w);

package/examples/jsm/postprocessing/Pass.js

@@ -31,6 +31,8 @@ class Pass {
 
 	}
 
+	dispose() {}
+
 }
 
 // Helper for passes that need to fill the viewport with a single quad.

package/examples/jsm/postprocessing/RenderPixelatedPass.js

@@ -0,0 +1,234 @@
+import {
+	WebGLRenderTarget,
+	MeshNormalMaterial,
+	ShaderMaterial,
+	Vector2,
+	Vector4,
+	DepthTexture,
+	NearestFilter
+} from 'three';
+import { Pass, FullScreenQuad } from './Pass.js';
+
+class RenderPixelatedPass extends Pass {
+
+	constructor( pixelSize, scene, camera, options = {} ) {
+
+		super();
+
+		this.pixelSize = pixelSize;
+		this.resolution = new Vector2();
+		this.renderResolution = new Vector2();
+
+		this.pixelatedMaterial = this.createPixelatedMaterial();
+		this.normalMaterial = new MeshNormalMaterial();
+
+		this.fsQuad = new FullScreenQuad( this.pixelatedMaterial );
+		this.scene = scene;
+		this.camera = camera;
+
+		this.normalEdgeStrength = options.normalEdgeStrength || 0.3;
+		this.depthEdgeStrength = options.depthEdgeStrength || 0.4;
+
+		this.beautyRenderTarget = new WebGLRenderTarget();
+		this.beautyRenderTarget.texture.minFilter = NearestFilter;
+		this.beautyRenderTarget.texture.magFilter = NearestFilter;
+		this.beautyRenderTarget.depthTexture = new DepthTexture();
+
+		this.normalRenderTarget = new WebGLRenderTarget();
+		this.normalRenderTarget.texture.minFilter = NearestFilter;
+		this.normalRenderTarget.texture.magFilter = NearestFilter;
+
+
+
+	}
+
+	dispose() {
+
+		this.beautyRenderTarget.dispose();
+		this.normalRenderTarget.dispose();
+
+		this.pixelatedMaterial.dispose();
+		this.normalMaterial.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
+	setSize( width, height ) {
+
+		this.resolution.set( width, height );
+		this.renderResolution.set( ( width / this.pixelSize ) | 0, ( height / this.pixelSize ) | 0 );
+		const { x, y } = this.renderResolution;
+		this.beautyRenderTarget.setSize( x, y );
+		this.normalRenderTarget.setSize( x, y );
+		this.fsQuad.material.uniforms.resolution.value.set( x, y, 1 / x, 1 / y );
+
+	}
+
+	setPixelSize( pixelSize ) {
+
+		this.pixelSize = pixelSize;
+		this.setSize( this.resolution.x, this.resolution.y );
+
+	}
+
+	render( renderer, writeBuffer ) {
+
+		const uniforms = this.fsQuad.material.uniforms;
+		uniforms.normalEdgeStrength.value = this.normalEdgeStrength;
+		uniforms.depthEdgeStrength.value = this.depthEdgeStrength;
+
+		renderer.setRenderTarget( this.beautyRenderTarget );
+		renderer.render( this.scene, this.camera );
+
+		const overrideMaterial_old = this.scene.overrideMaterial;
+		renderer.setRenderTarget( this.normalRenderTarget );
+		this.scene.overrideMaterial = this.normalMaterial;
+		renderer.render( this.scene, this.camera );
+		this.scene.overrideMaterial = overrideMaterial_old;
+
+		uniforms.tDiffuse.value = this.beautyRenderTarget.texture;
+		uniforms.tDepth.value = this.beautyRenderTarget.depthTexture;
+		uniforms.tNormal.value = this.normalRenderTarget.texture;
+
+		if ( this.renderToScreen ) {
+
+			renderer.setRenderTarget( null );
+
+		} else {
+
+			renderer.setRenderTarget( writeBuffer );
+
+			if ( this.clear ) renderer.clear();
+
+		}
+
+		this.fsQuad.render( renderer );
+
+	}
+
+	createPixelatedMaterial() {
+
+		return new ShaderMaterial( {
+			uniforms: {
+				tDiffuse: { value: null },
+				tDepth: { value: null },
+				tNormal: { value: null },
+				resolution: {
+					value: new Vector4(
+						this.renderResolution.x,
+						this.renderResolution.y,
+						1 / this.renderResolution.x,
+						1 / this.renderResolution.y,
+					)
+				},
+				normalEdgeStrength: { value: 0 },
+				depthEdgeStrength: { value: 0 }
+			},
+			vertexShader: /* glsl */`
+				varying vec2 vUv;
+
+				void main() {
+
+					vUv = uv;
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+				}
+			`,
+			fragmentShader: /* glsl */`
+				uniform sampler2D tDiffuse;
+				uniform sampler2D tDepth;
+				uniform sampler2D tNormal;
+				uniform vec4 resolution;
+				uniform float normalEdgeStrength;
+				uniform float depthEdgeStrength;
+				varying vec2 vUv;
+
+				float getDepth(int x, int y) {
+
+					return texture2D( tDepth, vUv + vec2(x, y) * resolution.zw ).r;
+
+				}
+
+				vec3 getNormal(int x, int y) {
+
+					return texture2D( tNormal, vUv + vec2(x, y) * resolution.zw ).rgb * 2.0 - 1.0;
+
+				}
+
+				float depthEdgeIndicator(float depth, vec3 normal) {
+
+					float diff = 0.0;
+					diff += clamp(getDepth(1, 0) - depth, 0.0, 1.0);
+					diff += clamp(getDepth(-1, 0) - depth, 0.0, 1.0);
+					diff += clamp(getDepth(0, 1) - depth, 0.0, 1.0);
+					diff += clamp(getDepth(0, -1) - depth, 0.0, 1.0);
+					return floor(smoothstep(0.01, 0.02, diff) * 2.) / 2.;
+
+				}
+
+				float neighborNormalEdgeIndicator(int x, int y, float depth, vec3 normal) {
+
+					float depthDiff = getDepth(x, y) - depth;
+					vec3 neighborNormal = getNormal(x, y);
+
+					// Edge pixels should yield to faces who's normals are closer to the bias normal.
+					vec3 normalEdgeBias = vec3(1., 1., 1.); // This should probably be a parameter.
+					float normalDiff = dot(normal - neighborNormal, normalEdgeBias);
+					float normalIndicator = clamp(smoothstep(-.01, .01, normalDiff), 0.0, 1.0);
+
+					// Only the shallower pixel should detect the normal edge.
+					float depthIndicator = clamp(sign(depthDiff * .25 + .0025), 0.0, 1.0);
+
+					return (1.0 - dot(normal, neighborNormal)) * depthIndicator * normalIndicator;
+
+				}
+
+				float normalEdgeIndicator(float depth, vec3 normal) {
+
+					float indicator = 0.0;
+
+					indicator += neighborNormalEdgeIndicator(0, -1, depth, normal);
+					indicator += neighborNormalEdgeIndicator(0, 1, depth, normal);
+					indicator += neighborNormalEdgeIndicator(-1, 0, depth, normal);
+					indicator += neighborNormalEdgeIndicator(1, 0, depth, normal);
+
+					return step(0.1, indicator);
+
+				}
+
+				void main() {
+
+					vec4 texel = texture2D( tDiffuse, vUv );
+
+					float depth = 0.0;
+					vec3 normal = vec3(0.0);
+
+					if (depthEdgeStrength > 0.0 || normalEdgeStrength > 0.0) {
+
+						depth = getDepth(0, 0);
+						normal = getNormal(0, 0);
+
+					}
+
+					float dei = 0.0;
+					if (depthEdgeStrength > 0.0)
+						dei = depthEdgeIndicator(depth, normal);
+
+					float nei = 0.0;
+					if (normalEdgeStrength > 0.0)
+						nei = normalEdgeIndicator(depth, normal);
+
+					float Strength = dei > 0.0 ? (1.0 - depthEdgeStrength * dei) : (1.0 + normalEdgeStrength * nei);
+
+					gl_FragColor = texel * Strength;
+
+				}
+			`
+		} );
+
+	}
+
+}
+
+export { RenderPixelatedPass };

package/examples/jsm/postprocessing/SAOPass.js

@@ -400,6 +400,26 @@ class SAOPass extends Pass {
 
 	}
 
+	dispose() {
+
+		this.saoRenderTarget.dispose();
+		this.blurIntermediateRenderTarget.dispose();
+		this.beautyRenderTarget.dispose();
+		this.normalRenderTarget.dispose();
+		this.depthRenderTarget.dispose();
+
+		this.depthMaterial.dispose();
+		this.normalMaterial.dispose();
+		this.saoMaterial.dispose();
+		this.vBlurMaterial.dispose();
+		this.hBlurMaterial.dispose();
+		this.materialCopy.dispose();
+		this.depthCopy.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 SAOPass.OUTPUT = {

package/examples/jsm/postprocessing/SMAAPass.js

@@ -183,6 +183,22 @@ class SMAAPass extends Pass {
 
 	}
 
+	dispose() {
+
+		this.edgesRT.dispose();
+		this.weightsRT.dispose();
+
+		this.areaTexture.dispose();
+		this.searchTexture.dispose();
+
+		this.materialEdges.dispose();
+		this.materialWeights.dispose();
+		this.materialBlend.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
 }
 
 export { SMAAPass };