super-three 0.141.0 → 0.147.0

package/examples/js/postprocessing/OutlinePass.js

@@ -56,10 +56,12 @@
 			this.separableBlurMaterial1.uniforms[ 'kernelRadius' ].value = 1;
 			this.separableBlurMaterial2 = this.getSeperableBlurMaterial( MAX_EDGE_GLOW );
 			this.separableBlurMaterial2.uniforms[ 'texSize' ].value.set( Math.round( resx / 2 ), Math.round( resy / 2 ) );
-			this.separableBlurMaterial2.uniforms[ 'kernelRadius' ].value = MAX_EDGE_GLOW; // Overlay material
+			this.separableBlurMaterial2.uniforms[ 'kernelRadius' ].value = MAX_EDGE_GLOW;
 
-			this.overlayMaterial = this.getOverlayMaterial(); // copy material
+			// Overlay material
+			this.overlayMaterial = this.getOverlayMaterial();
 
+			// copy material
 			if ( THREE.CopyShader === undefined ) console.error( 'THREE.OutlinePass relies on THREE.CopyShader' );
 			const copyShader = THREE.CopyShader;
 			this.copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms );
@@ -81,7 +83,6 @@
 			this.tempPulseColor1 = new THREE.Color();
 			this.tempPulseColor2 = new THREE.Color();
 			this.textureMatrix = new THREE.Matrix4();
-
 			function replaceDepthToViewZ( string, camera ) {
 
 				const type = camera.isPerspectiveCamera ? 'perspective' : 'orthographic';
@@ -90,7 +91,6 @@
 			}
 
 		}
-
 		dispose() {
 
 			this.renderTargetMaskBuffer.dispose();
@@ -100,9 +100,16 @@
 			this.renderTargetBlurBuffer2.dispose();
 			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 ) {
 
 			this.renderTargetMaskBuffer.setSize( width, height );
@@ -120,11 +127,9 @@
 			this.separableBlurMaterial2.uniforms[ 'texSize' ].value.set( resx, resy );
 
 		}
-
 		changeVisibilityOfSelectedObjects( bVisible ) {
 
 			const cache = this._visibilityCache;
-
 			function gatherSelectedMeshesCallBack( object ) {
 
 				if ( object.isMesh ) {
@@ -152,12 +157,10 @@
 			}
 
 		}
-
 		changeVisibilityOfNonSelectedObjects( bVisible ) {
 
 			const cache = this._visibilityCache;
 			const selectedMeshes = [];
-
 			function gatherSelectedMeshesCallBack( object ) {
 
 				if ( object.isMesh ) selectedMeshes.push( object );
@@ -176,12 +179,11 @@
 				if ( object.isMesh || object.isSprite ) {
 
 					// only meshes and sprites are supported by OutlinePass
-					let bFound = false;
 
+					let bFound = false;
 					for ( let i = 0; i < selectedMeshes.length; i ++ ) {
 
 						const selectedObjectId = selectedMeshes[ i ].id;
-
 						if ( selectedObjectId === object.id ) {
 
 							bFound = true;
@@ -194,7 +196,6 @@
 					if ( bFound === false ) {
 
 						const visibility = object.visible;
-
 						if ( bVisible === false || cache.get( object ) === true ) {
 
 							object.visible = bVisible;
@@ -209,6 +210,7 @@
 
 					// the visibilty of points and lines is always set to false in order to
 					// not affect the outline computation
+
 					if ( bVisible === true ) {
 
 						object.visible = cache.get( object ); // restore
@@ -227,7 +229,6 @@
 			this.renderScene.traverse( VisibilityChangeCallBack );
 
 		}
-
 		updateTextureMatrix() {
 
 			this.textureMatrix.set( 0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0 );
@@ -235,7 +236,6 @@
 			this.textureMatrix.multiply( this.renderCamera.matrixWorldInverse );
 
 		}
-
 		render( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
 
 			if ( this.selectedObjects.length > 0 ) {
@@ -245,24 +245,27 @@
 				const oldAutoClear = renderer.autoClear;
 				renderer.autoClear = false;
 				if ( maskActive ) renderer.state.buffers.stencil.setTest( false );
-				renderer.setClearColor( 0xffffff, 1 ); // Make selected objects invisible
+				renderer.setClearColor( 0xffffff, 1 );
 
+				// Make selected objects invisible
 				this.changeVisibilityOfSelectedObjects( false );
 				const currentBackground = this.renderScene.background;
-				this.renderScene.background = null; // 1. Draw Non Selected objects in the depth buffer
+				this.renderScene.background = null;
 
+				// 1. Draw Non Selected objects in the depth buffer
 				this.renderScene.overrideMaterial = this.depthMaterial;
 				renderer.setRenderTarget( this.renderTargetDepthBuffer );
 				renderer.clear();
-				renderer.render( this.renderScene, this.renderCamera ); // Make selected objects visible
+				renderer.render( this.renderScene, this.renderCamera );
 
+				// Make selected objects visible
 				this.changeVisibilityOfSelectedObjects( true );
+				this._visibilityCache.clear();
 
-				this._visibilityCache.clear(); // Update Texture Matrix for Depth compare
-
-
-				this.updateTextureMatrix(); // Make non selected objects invisible, and draw only the selected objects, by comparing the depth buffer of non selected objects
+				// Update Texture Matrix for Depth compare
+				this.updateTextureMatrix();
 
+				// Make non selected objects invisible, and draw only the selected objects, by comparing the depth buffer of non selected objects
 				this.changeVisibilityOfNonSelectedObjects( false );
 				this.renderScene.overrideMaterial = this.prepareMaskMaterial;
 				this.prepareMaskMaterial.uniforms[ 'cameraNearFar' ].value.set( this.renderCamera.near, this.renderCamera.far );
@@ -273,11 +276,10 @@
 				renderer.render( this.renderScene, this.renderCamera );
 				this.renderScene.overrideMaterial = null;
 				this.changeVisibilityOfNonSelectedObjects( true );
-
 				this._visibilityCache.clear();
+				this.renderScene.background = currentBackground;
 
-				this.renderScene.background = currentBackground; // 2. Downsample to Half resolution
-
+				// 2. Downsample to Half resolution
 				this.fsQuad.material = this.materialCopy;
 				this.copyUniforms[ 'tDiffuse' ].value = this.renderTargetMaskBuffer.texture;
 				renderer.setRenderTarget( this.renderTargetMaskDownSampleBuffer );
@@ -285,16 +287,15 @@
 				this.fsQuad.render( renderer );
 				this.tempPulseColor1.copy( this.visibleEdgeColor );
 				this.tempPulseColor2.copy( this.hiddenEdgeColor );
-
 				if ( this.pulsePeriod > 0 ) {
 
 					const scalar = ( 1 + 0.25 ) / 2 + Math.cos( performance.now() * 0.01 / this.pulsePeriod ) * ( 1.0 - 0.25 ) / 2;
 					this.tempPulseColor1.multiplyScalar( scalar );
 					this.tempPulseColor2.multiplyScalar( scalar );
 
-				} // 3. Apply Edge Detection THREE.Pass
-
+				}
 
+				// 3. Apply Edge Detection THREE.Pass
 				this.fsQuad.material = this.edgeDetectionMaterial;
 				this.edgeDetectionMaterial.uniforms[ 'maskTexture' ].value = this.renderTargetMaskDownSampleBuffer.texture;
 				this.edgeDetectionMaterial.uniforms[ 'texSize' ].value.set( this.renderTargetMaskDownSampleBuffer.width, this.renderTargetMaskDownSampleBuffer.height );
@@ -302,8 +303,9 @@
 				this.edgeDetectionMaterial.uniforms[ 'hiddenEdgeColor' ].value = this.tempPulseColor2;
 				renderer.setRenderTarget( this.renderTargetEdgeBuffer1 );
 				renderer.clear();
-				this.fsQuad.render( renderer ); // 4. Apply Blur on Half res
+				this.fsQuad.render( renderer );
 
+				// 4. Apply Blur on Half res
 				this.fsQuad.material = this.separableBlurMaterial1;
 				this.separableBlurMaterial1.uniforms[ 'colorTexture' ].value = this.renderTargetEdgeBuffer1.texture;
 				this.separableBlurMaterial1.uniforms[ 'direction' ].value = OutlinePass.BlurDirectionX;
@@ -315,8 +317,9 @@
 				this.separableBlurMaterial1.uniforms[ 'direction' ].value = OutlinePass.BlurDirectionY;
 				renderer.setRenderTarget( this.renderTargetEdgeBuffer1 );
 				renderer.clear();
-				this.fsQuad.render( renderer ); // Apply Blur on quarter res
+				this.fsQuad.render( renderer );
 
+				// Apply Blur on quarter res
 				this.fsQuad.material = this.separableBlurMaterial2;
 				this.separableBlurMaterial2.uniforms[ 'colorTexture' ].value = this.renderTargetEdgeBuffer1.texture;
 				this.separableBlurMaterial2.uniforms[ 'direction' ].value = OutlinePass.BlurDirectionX;
@@ -327,8 +330,9 @@
 				this.separableBlurMaterial2.uniforms[ 'direction' ].value = OutlinePass.BlurDirectionY;
 				renderer.setRenderTarget( this.renderTargetEdgeBuffer2 );
 				renderer.clear();
-				this.fsQuad.render( renderer ); // Blend it additively over the input texture
+				this.fsQuad.render( renderer );
 
+				// Blend it additively over the input texture
 				this.fsQuad.material = this.overlayMaterial;
 				this.overlayMaterial.uniforms[ 'maskTexture' ].value = this.renderTargetMaskBuffer.texture;
 				this.overlayMaterial.uniforms[ 'edgeTexture1' ].value = this.renderTargetEdgeBuffer1.texture;
@@ -355,7 +359,6 @@
 			}
 
 		}
-
 		getPrepareMaskMaterial() {
 
 			return new THREE.ShaderMaterial( {
@@ -386,7 +389,17 @@
 					#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;
 
 				}`,
@@ -407,7 +420,6 @@
 			} );
 
 		}
-
 		getEdgeDetectionMaterial() {
 
 			return new THREE.ShaderMaterial( {
@@ -457,7 +469,6 @@
 			} );
 
 		}
-
 		getSeperableBlurMaterial( maxRadius ) {
 
 			return new THREE.ShaderMaterial( {
@@ -497,12 +508,14 @@
 
 				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);
@@ -514,7 +527,6 @@
 			} );
 
 		}
-
 		getOverlayMaterial() {
 
 			return new THREE.ShaderMaterial( {
@@ -578,7 +590,6 @@
 		}
 
 	}
-
 	OutlinePass.BlurDirectionX = new THREE.Vector2( 1.0, 0.0 );
 	OutlinePass.BlurDirectionY = new THREE.Vector2( 0.0, 1.0 );
 

package/examples/js/postprocessing/Pass.js

@@ -5,36 +5,37 @@
 		constructor() {
 
 			// if set to true, the pass is processed by the composer
-			this.enabled = true; // if set to true, the pass indicates to swap read and write buffer after rendering
+			this.enabled = true;
 
-			this.needsSwap = true; // if set to true, the pass clears its buffer before rendering
+			// if set to true, the pass indicates to swap read and write buffer after rendering
+			this.needsSwap = true;
 
-			this.clear = false; // if set to true, the result of the pass is rendered to screen. This is set automatically by EffectComposer.
+			// if set to true, the pass clears its buffer before rendering
+			this.clear = false;
 
+			// if set to true, the result of the pass is rendered to screen. This is set automatically by EffectComposer.
 			this.renderToScreen = false;
 
 		}
-
 		setSize() {}
-
 		render() {
 
 			console.error( 'THREE.Pass: .render() must be implemented in derived pass.' );
 
 		}
+		dispose() {}
 
-	} // Helper for passes that need to fill the viewport with a single quad.
+	}
 
+	// Helper for passes that need to fill the viewport with a single quad.
 
-	const _camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 ); // https://github.com/mrdoob/three.js/pull/21358
+	const _camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 
+	// https://github.com/mrdoob/three.js/pull/21358
 
 	const _geometry = new THREE.BufferGeometry();
-
 	_geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ - 1, 3, 0, - 1, - 1, 0, 3, - 1, 0 ], 3 ) );
-
 	_geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );
-
 	class FullScreenQuad {
 
 		constructor( material ) {
@@ -42,25 +43,21 @@
 			this._mesh = new THREE.Mesh( _geometry, material );
 
 		}
-
 		dispose() {
 
 			this._mesh.geometry.dispose();
 
 		}
-
 		render( renderer ) {
 
 			renderer.render( this._mesh, _camera );
 
 		}
-
 		get material() {
 
 			return this._mesh.material;
 
 		}
-
 		set material( value ) {
 
 			this._mesh.material = value;

package/examples/js/postprocessing/RenderPass.js

@@ -16,15 +16,11 @@
 			this._oldClearColor = new THREE.Color();
 
 		}
-
-		render( renderer, writeBuffer, readBuffer
-			/*, deltaTime, maskActive */
-		) {
+		render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
 
 			const oldAutoClear = renderer.autoClear;
 			renderer.autoClear = false;
 			let oldClearAlpha, oldOverrideMaterial;
-
 			if ( this.overrideMaterial !== undefined ) {
 
 				oldOverrideMaterial = this.scene.overrideMaterial;
@@ -46,11 +42,11 @@
 
 			}
 
-			renderer.setRenderTarget( this.renderToScreen ? null : readBuffer ); // TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
+			renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );
 
+			// TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
 			if ( this.clear ) renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
 			renderer.render( this.scene, this.camera );
-
 			if ( this.clearColor ) {
 
 				renderer.setClearColor( this._oldClearColor, oldClearAlpha );

package/examples/js/postprocessing/RenderPixelatedPass.js

@@ -0,0 +1,215 @@
+( function () {
+
+	class RenderPixelatedPass extends THREE.Pass {
+
+		constructor( pixelSize, scene, camera, options = {} ) {
+
+			super();
+			this.pixelSize = pixelSize;
+			this.resolution = new THREE.Vector2();
+			this.renderResolution = new THREE.Vector2();
+			this.pixelatedMaterial = this.createPixelatedMaterial();
+			this.normalMaterial = new THREE.MeshNormalMaterial();
+			this.fsQuad = new THREE.FullScreenQuad( this.pixelatedMaterial );
+			this.scene = scene;
+			this.camera = camera;
+			this.normalEdgeStrength = options.normalEdgeStrength || 0.3;
+			this.depthEdgeStrength = options.depthEdgeStrength || 0.4;
+			this.beautyRenderTarget = new THREE.WebGLRenderTarget();
+			this.beautyRenderTarget.texture.minFilter = THREE.NearestFilter;
+			this.beautyRenderTarget.texture.magFilter = THREE.NearestFilter;
+			this.beautyRenderTarget.depthTexture = new THREE.DepthTexture();
+			this.normalRenderTarget = new THREE.WebGLRenderTarget();
+			this.normalRenderTarget.texture.minFilter = THREE.NearestFilter;
+			this.normalRenderTarget.texture.magFilter = THREE.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 THREE.ShaderMaterial( {
+				uniforms: {
+					tDiffuse: {
+						value: null
+					},
+					tDepth: {
+						value: null
+					},
+					tNormal: {
+						value: null
+					},
+					resolution: {
+						value: new THREE.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;
+
+				}
+			`
+			} );
+
+		}
+
+	}
+
+	THREE.RenderPixelatedPass = RenderPixelatedPass;
+
+} )();