super-three 0.141.0 → 0.144.0

package/examples/js/misc/VolumeSlice.js

@@ -9,103 +9,103 @@
  * @see Volume
  */
 
-	function VolumeSlice( volume, index, axis ) {
+	class VolumeSlice {
 
-		const slice = this;
-		/**
-   * @member {Volume} volume The associated volume
-   */
-
-		this.volume = volume;
-		/**
-   * @member {Number} index The index of the slice, if changed, will automatically call updateGeometry at the next repaint
-   */
-
-		index = index || 0;
-		Object.defineProperty( this, 'index', {
-			get: function () {
+		constructor( volume, index, axis ) {
 
-				return index;
-
-			},
-			set: function ( value ) {
-
-				index = value;
-				slice.geometryNeedsUpdate = true;
-				return index;
-
-			}
-		} );
-		/**
-   * @member {String} axis The normal axis
-   */
+			const slice = this;
+			/**
+     * @member {Volume} volume The associated volume
+     */
 
-		this.axis = axis || 'z';
-		/**
-   * @member {HTMLCanvasElement} canvas The final canvas used for the texture
-   */
+			this.volume = volume;
+			/**
+     * @member {Number} index The index of the slice, if changed, will automatically call updateGeometry at the next repaint
+     */
 
-		/**
-   * @member {CanvasRenderingContext2D} ctx Context of the canvas
-   */
+			index = index || 0;
+			Object.defineProperty( this, 'index', {
+				get: function () {
 
-		this.canvas = document.createElement( 'canvas' );
-		/**
-   * @member {HTMLCanvasElement} canvasBuffer The intermediary canvas used to paint the data
-   */
+					return index;
 
-		/**
-   * @member {CanvasRenderingContext2D} ctxBuffer Context of the canvas buffer
-   */
+				},
+				set: function ( value ) {
 
-		this.canvasBuffer = document.createElement( 'canvas' );
-		this.updateGeometry();
-		const canvasMap = new THREE.Texture( this.canvas );
-		canvasMap.minFilter = THREE.LinearFilter;
-		canvasMap.wrapS = canvasMap.wrapT = THREE.ClampToEdgeWrapping;
-		const material = new THREE.MeshBasicMaterial( {
-			map: canvasMap,
-			side: THREE.DoubleSide,
-			transparent: true
-		} );
-		/**
-   * @member {Mesh} mesh The mesh ready to get used in the scene
-   */
+					index = value;
+					slice.geometryNeedsUpdate = true;
+					return index;
 
-		this.mesh = new THREE.Mesh( this.geometry, material );
-		this.mesh.matrixAutoUpdate = false;
-		/**
-   * @member {Boolean} geometryNeedsUpdate If set to true, updateGeometry will be triggered at the next repaint
-   */
-
-		this.geometryNeedsUpdate = true;
-		this.repaint();
-		/**
-   * @member {Number} iLength Width of slice in the original coordinate system, corresponds to the width of the buffer canvas
-   */
-
-		/**
-   * @member {Number} jLength Height of slice in the original coordinate system, corresponds to the height of the buffer canvas
-   */
-
-		/**
-   * @member {Function} sliceAccess Function that allow the slice to access right data
-   * @see Volume.extractPerpendicularPlane
-   * @param {Number} i The first coordinate
-   * @param {Number} j The second coordinate
-   * @returns {Number} the index corresponding to the voxel in volume.data of the given position in the slice
-   */
-
-	}
-
-	VolumeSlice.prototype = {
-		constructor: VolumeSlice,
+				}
+			} );
+			/**
+     * @member {String} axis The normal axis
+     */
+
+			this.axis = axis || 'z';
+			/**
+     * @member {HTMLCanvasElement} canvas The final canvas used for the texture
+     */
+
+			/**
+     * @member {CanvasRenderingContext2D} ctx Context of the canvas
+     */
+
+			this.canvas = document.createElement( 'canvas' );
+			/**
+     * @member {HTMLCanvasElement} canvasBuffer The intermediary canvas used to paint the data
+     */
+
+			/**
+     * @member {CanvasRenderingContext2D} ctxBuffer Context of the canvas buffer
+     */
+
+			this.canvasBuffer = document.createElement( 'canvas' );
+			this.updateGeometry();
+			const canvasMap = new THREE.Texture( this.canvas );
+			canvasMap.minFilter = THREE.LinearFilter;
+			canvasMap.wrapS = canvasMap.wrapT = THREE.ClampToEdgeWrapping;
+			const material = new THREE.MeshBasicMaterial( {
+				map: canvasMap,
+				side: THREE.DoubleSide,
+				transparent: true
+			} );
+			/**
+     * @member {Mesh} mesh The mesh ready to get used in the scene
+     */
+
+			this.mesh = new THREE.Mesh( this.geometry, material );
+			this.mesh.matrixAutoUpdate = false;
+			/**
+     * @member {Boolean} geometryNeedsUpdate If set to true, updateGeometry will be triggered at the next repaint
+     */
+
+			this.geometryNeedsUpdate = true;
+			this.repaint();
+			/**
+     * @member {Number} iLength Width of slice in the original coordinate system, corresponds to the width of the buffer canvas
+     */
+
+			/**
+     * @member {Number} jLength Height of slice in the original coordinate system, corresponds to the height of the buffer canvas
+     */
+
+			/**
+     * @member {Function} sliceAccess Function that allow the slice to access right data
+     * @see Volume.extractPerpendicularPlane
+     * @param {Number} i The first coordinate
+     * @param {Number} j The second coordinate
+     * @returns {Number} the index corresponding to the voxel in volume.data of the given position in the slice
+     */
 
+		}
 		/**
    * @member {Function} repaint Refresh the texture and the geometry if geometryNeedsUpdate is set to true
    * @memberof VolumeSlice
    */
-		repaint: function () {
+
+
+		repaint() {
 
 			if ( this.geometryNeedsUpdate ) {
 
@@ -179,14 +179,15 @@
 			this.ctx.drawImage( canvas, 0, 0, iLength, jLength, 0, 0, this.canvas.width, this.canvas.height );
 			this.mesh.material.map.needsUpdate = true;
 
-		},
-
+		}
 		/**
    * @member {Function} Refresh the geometry according to axis and index
    * @see Volume.extractPerpendicularPlane
    * @memberof VolumeSlice
    */
-		updateGeometry: function () {
+
+
+		updateGeometry() {
 
 			const extracted = this.volume.extractPerpendicularPlane( this.axis, this.index );
 			this.sliceAccess = extracted.sliceAccess;
@@ -215,7 +216,8 @@
 			this.geometryNeedsUpdate = false;
 
 		}
-	};
+
+	}
 
 	THREE.VolumeSlice = VolumeSlice;
 

package/examples/js/modifiers/SimplifyModifier.js

@@ -306,7 +306,7 @@
 
 		for ( let i = u.faces.length - 1; i >= 0; i -- ) {
 
-			if ( u.faces[ i ].hasVertex( v ) ) {
+			if ( u.faces[ i ] && u.faces[ i ].hasVertex( v ) ) {
 
 				removeFace( u.faces[ i ], faces );
 

package/examples/js/objects/GroundProjectedEnv.js

@@ -0,0 +1,193 @@
+( function () {
+
+	/**
+ * Ground projected env map adapted from @react-three/drei.
+ * https://github.com/pmndrs/drei/blob/master/src/core/Environment.tsx
+ */
+
+	class GroundProjectedEnv extends THREE.Mesh {
+
+		constructor( texture, options ) {
+
+			const isCubeMap = texture.isCubeTexture;
+			const w = ( isCubeMap ? texture.image[ 0 ]?.width : texture.image.width ) ?? 1024;
+			const cubeSize = w / 4;
+
+			const _lodMax = Math.floor( Math.log2( cubeSize ) );
+
+			const _cubeSize = Math.pow( 2, _lodMax );
+
+			const width = 3 * Math.max( _cubeSize, 16 * 7 );
+			const height = 4 * _cubeSize;
+			const defines = [ isCubeMap ? '#define ENVMAP_TYPE_CUBE' : '', `#define CUBEUV_TEXEL_WIDTH ${1.0 / width}`, `#define CUBEUV_TEXEL_HEIGHT ${1.0 / height}`, `#define CUBEUV_MAX_MIP ${_lodMax}.0` ];
+			const vertexShader =
+    /* glsl */
+    `
+        varying vec3 vWorldPosition;
+
+        void main() 
+        {
+
+            vec4 worldPosition = ( modelMatrix * vec4( position, 1.0 ) );
+            vWorldPosition = worldPosition.xyz;
+            
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+        }
+        `;
+			const fragmentShader = defines.join( '\n' ) +
+    /* glsl */
+    `
+        #define ENVMAP_TYPE_CUBE_UV
+
+        varying vec3 vWorldPosition;
+
+        uniform float radius;
+        uniform float height;
+        uniform float angle;
+
+        #ifdef ENVMAP_TYPE_CUBE
+
+            uniform samplerCube map;
+
+        #else
+
+            uniform sampler2D map;
+
+        #endif
+
+        // From: https://www.shadertoy.com/view/4tsBD7
+        float diskIntersectWithBackFaceCulling( vec3 ro, vec3 rd, vec3 c, vec3 n, float r ) 
+        {
+
+            float d = dot ( rd, n );
+            
+            if( d > 0.0 ) { return 1e6; }
+            
+            vec3  o = ro - c;
+            float t = - dot( n, o ) / d;
+            vec3  q = o + rd * t;
+            
+            return ( dot( q, q ) < r * r ) ? t : 1e6;
+
+        }
+
+        // From: https://www.iquilezles.org/www/articles/intersectors/intersectors.htm
+        float sphereIntersect( vec3 ro, vec3 rd, vec3 ce, float ra ) 
+        {
+
+            vec3 oc = ro - ce;
+            float b = dot( oc, rd );
+            float c = dot( oc, oc ) - ra * ra;
+            float h = b * b - c;
+            
+            if( h < 0.0 ) { return -1.0; }
+            
+            h = sqrt( h );
+            
+            return - b + h;
+
+        }
+
+        vec3 project() 
+        {
+
+            vec3 p = normalize( vWorldPosition );
+            vec3 camPos = cameraPosition;
+            camPos.y -= height;
+
+            float intersection = sphereIntersect( camPos, p, vec3( 0.0 ), radius );
+            if( intersection > 0.0 ) {
+                
+                vec3 h = vec3( 0.0, - height, 0.0 );
+                float intersection2 = diskIntersectWithBackFaceCulling( camPos, p, h, vec3( 0.0, 1.0, 0.0 ), radius );
+                p = ( camPos + min( intersection, intersection2 ) * p ) / radius;
+
+            } else {
+
+                p = vec3( 0.0, 1.0, 0.0 );
+
+            }
+
+            return p;
+
+        }
+
+        #include <common>
+        #include <cube_uv_reflection_fragment>
+
+        void main() 
+        {
+
+            vec3 projectedWorldPosition = project();
+            
+            #ifdef ENVMAP_TYPE_CUBE
+
+                vec3 outcolor = textureCube( map, projectedWorldPosition ).rgb;
+
+            #else
+
+                vec3 direction = normalize( projectedWorldPosition );
+                vec2 uv = equirectUv( direction );
+                vec3 outcolor = texture2D( map, uv ).rgb;
+
+            #endif
+
+            gl_FragColor = vec4( outcolor, 1.0 );
+
+            #include <tonemapping_fragment>
+            #include <encodings_fragment>
+
+        }
+        `;
+			const uniforms = {
+				map: {
+					value: texture
+				},
+				height: {
+					value: options?.height || 15
+				},
+				radius: {
+					value: options?.radius || 100
+				}
+			};
+			const geometry = new THREE.IcosahedronGeometry( 1, 16 );
+			const material = new THREE.ShaderMaterial( {
+				uniforms,
+				fragmentShader,
+				vertexShader,
+				side: THREE.DoubleSide
+			} );
+			super( geometry, material );
+
+		}
+
+		set radius( radius ) {
+
+			this.material.uniforms.radius.value = radius;
+
+		}
+
+		get radius() {
+
+			return this.material.uniforms.radius.value;
+
+		}
+
+		set height( height ) {
+
+			this.material.uniforms.height.value = height;
+
+		}
+
+		get height() {
+
+			return this.material.uniforms.height.value;
+
+		}
+
+	}
+
+	THREE.GroundProjectedEnv = GroundProjectedEnv;
+
+} )();

package/examples/js/objects/Reflector.js

@@ -29,7 +29,8 @@
 			const textureMatrix = new THREE.Matrix4();
 			const virtualCamera = this.camera;
 			const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, {
-				samples: multisample
+				samples: multisample,
+				type: THREE.HalfFloatType
 			} );
 			const material = new THREE.ShaderMaterial( {
 				uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
@@ -92,15 +93,18 @@
 				projectionMatrix.elements[ 10 ] = clipPlane.z + 1.0 - clipBias;
 				projectionMatrix.elements[ 14 ] = clipPlane.w; // Render
 
-				renderTarget.texture.encoding = renderer.outputEncoding;
 				scope.visible = false;
 				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 = THREE.LinearEncoding;
+				renderer.toneMapping = THREE.NoToneMapping;
 				renderer.setRenderTarget( renderTarget );
 				renderer.state.buffers.depth.setMask( true ); // make sure the depth buffer is writable so it can be properly cleared, see #18897
 
@@ -108,6 +112,8 @@
 				renderer.render( scene, virtualCamera );
 				renderer.xr.enabled = currentXrEnabled;
 				renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+				renderer.outputEncoding = currentOutputEncoding;
+				renderer.toneMapping = currentToneMapping;
 				renderer.setRenderTarget( currentRenderTarget ); // Restore viewport
 
 				const viewport = camera.viewport;
@@ -197,6 +203,7 @@
 			vec4 base = texture2DProj( tDiffuse, vUv );
 			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
 
+			#include <tonemapping_fragment>
 			#include <encodings_fragment>
 
 		}`

package/examples/js/objects/ReflectorForSSRPass.js

@@ -80,7 +80,8 @@
 			}
 
 			const parameters = {
-				depthTexture: useDepthTexture ? depthTexture : null
+				depthTexture: useDepthTexture ? depthTexture : null,
+				type: THREE.HalfFloatType
 			};
 			const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );
 			const material = new THREE.ShaderMaterial( {
@@ -151,9 +152,7 @@
 				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 );
 				textureMatrix.multiply( virtualCamera.projectionMatrix );
 				textureMatrix.multiply( virtualCamera.matrixWorldInverse );
-				textureMatrix.multiply( scope.matrixWorld ); // Render
-
-				renderTarget.texture.encoding = renderer.outputEncoding; // scope.visible = false;
+				textureMatrix.multiply( scope.matrixWorld ); // scope.visible = false;
 
 				const currentRenderTarget = renderer.getRenderTarget();
 				const currentXrEnabled = renderer.xr.enabled;

package/examples/js/objects/Refractor.js

@@ -24,7 +24,8 @@
 			const textureMatrix = new THREE.Matrix4(); // render target
 
 			const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, {
-				samples: multisample
+				samples: multisample,
+				type: THREE.HalfFloatType
 			} ); // material
 
 			this.material = new THREE.ShaderMaterial( {
@@ -136,15 +137,21 @@
 				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 = THREE.LinearEncoding;
+				renderer.toneMapping = THREE.NoToneMapping;
 				renderer.setRenderTarget( renderTarget );
 				if ( renderer.autoClear === false ) renderer.clear();
 				renderer.render( scene, virtualCamera );
 				renderer.xr.enabled = currentXrEnabled;
 				renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+				renderer.outputEncoding = currentOutputEncoding;
+				renderer.toneMapping = currentToneMapping;
 				renderer.setRenderTarget( currentRenderTarget ); // restore viewport
 
 				const viewport = camera.viewport;
@@ -162,9 +169,7 @@
 
 			this.onBeforeRender = function ( renderer, scene, camera ) {
 
-				// Render
-				renderTarget.texture.encoding = renderer.outputEncoding; // ensure refractors are rendered only once per frame
-
+				// ensure refractors are rendered only once per frame
 				if ( camera.userData.refractor === true ) return; // avoid rendering when the refractor is viewed from behind
 
 				if ( ! visible( camera ) === true ) return; // update
@@ -245,6 +250,7 @@
 			vec4 base = texture2DProj( tDiffuse, vUv );
 			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
 
+			#include <tonemapping_fragment>
 			#include <encodings_fragment>
 
 		}`

package/examples/js/objects/ShadowMesh.js

@@ -14,7 +14,11 @@
 				color: 0x000000,
 				transparent: true,
 				opacity: 0.6,
-				depthWrite: false
+				depthWrite: false,
+				stencilWrite: true,
+				stencilFunc: THREE.EqualStencilFunc,
+				stencilRef: 0,
+				stencilZPass: THREE.IncrementStencilOp
 			} );
 			super( mesh.geometry, shadowMaterial );
 			this.isShadowMesh = true;

package/examples/js/postprocessing/OutlinePass.js

@@ -384,9 +384,9 @@
 					#include <morphtarget_vertex>
 					#include <skinning_vertex>
 					#include <project_vertex>
+					#include <worldpos_vertex>
 
 					vPosition = mvPosition;
-					vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );
 					projTexCoord = textureMatrix * worldPosition;
 
 				}`,
@@ -497,12 +497,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);

package/examples/js/renderers/CSS2DRenderer.js

@@ -75,8 +75,8 @@
 
 			this.render = function ( scene, camera ) {
 
-				if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
-				if ( camera.parent === null ) camera.updateMatrixWorld();
+				if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+				if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 
 				_viewMatrix.copy( camera.matrixWorldInverse );
 

package/examples/js/renderers/CSS3DRenderer.js

@@ -117,8 +117,8 @@
 
 				}
 
-				if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
-				if ( camera.parent === null ) camera.updateMatrixWorld();
+				if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+				if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 				let tx, ty;
 
 				if ( camera.isOrthographicCamera ) {

package/examples/js/renderers/Projector.js

@@ -135,27 +135,6 @@
 				_spritePool = []; //
 
 
-			this.projectVector = function ( vector, camera ) {
-
-				console.warn( 'THREE.Projector: .projectVector() is now vector.project().' );
-				vector.project( camera );
-
-			};
-
-			this.unprojectVector = function ( vector, camera ) {
-
-				console.warn( 'THREE.Projector: .unprojectVector() is now vector.unproject().' );
-				vector.unproject( camera );
-
-			};
-
-			this.pickingRay = function () {
-
-				console.error( 'THREE.Projector: .pickingRay() is now raycaster.setFromCamera().' );
-
-			}; //
-
-
 			function RenderList() {
 
 				const normals = [];
@@ -399,8 +378,8 @@
 				_lineCount = 0;
 				_spriteCount = 0;
 				_renderData.elements.length = 0;
-				if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
-				if ( camera.parent === null ) camera.updateMatrixWorld();
+				if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+				if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 
 				_viewMatrix.copy( camera.matrixWorldInverse );
 

package/examples/js/shaders/LuminosityShader.js

@@ -37,7 +37,7 @@
 
 			vec4 texel = texture2D( tDiffuse, vUv );
 
-			float l = linearToRelativeLuminance( texel.rgb );
+			float l = luminance( texel.rgb );
 
 			gl_FragColor = vec4( l, l, l, texel.w );
 

package/examples/js/shaders/MMDToonShader.js

@@ -14,7 +14,9 @@
  *    (Replace lights_phong_pars_fragment with lights_mmd_toon_pars_fragment)
  *  * Add mmd_toon_matcap_fragment.
  */
-	const lights_mmd_toon_pars_fragment = `
+	const lights_mmd_toon_pars_fragment =
+/* glsl */
+`
 varying vec3 vViewPosition;
 
 struct BlinnPhongMaterial {
@@ -47,7 +49,9 @@ void RE_IndirectDiffuse_BlinnPhong( const in vec3 irradiance, const in Geometric
 
 #define Material_LightProbeLOD( material )	(0)
 `;
-	const mmd_toon_matcap_fragment = `
+	const mmd_toon_matcap_fragment =
+/* glsl */
+`
 #ifdef USE_MATCAP
 
 	vec3 viewDir = normalize( vViewPosition );

package/examples/js/shaders/ToneMapShader.js

@@ -64,7 +64,7 @@
 			#endif
 
 			// Calculate the luminance of the current pixel
-			float fLumPixel = linearToRelativeLuminance( vColor );
+			float fLumPixel = luminance( vColor );
 
 			// Apply the modified operator (Eq. 4)
 			float fLumScaled = (fLumPixel * middleGrey) / max( minLuminance, fLumAvg );