super-three 0.136.1 → 0.144.0

package/examples/jsm/objects/GroundProjectedEnv.js

@@ -0,0 +1,186 @@
+import { Mesh, IcosahedronGeometry, ShaderMaterial, DoubleSide } from 'three';
+
+/**
+ * Ground projected env map adapted from @react-three/drei.
+ * https://github.com/pmndrs/drei/blob/master/src/core/Environment.tsx
+ */
+export class GroundProjectedEnv extends 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 IcosahedronGeometry( 1, 16 );
+		const material = new ShaderMaterial( {
+			uniforms,
+			fragmentShader,
+			vertexShader,
+			side: 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;
+
+	}
+
+}

package/examples/jsm/objects/Lensflare.js

@@ -21,6 +21,8 @@ class Lensflare extends Mesh {
 
 		super( Lensflare.Geometry, new MeshBasicMaterial( { opacity: 0, transparent: true } ) );
 
+		this.isLensflare = true;
+
 		this.type = 'Lensflare';
 		this.frustumCulled = false;
 		this.renderOrder = Infinity;
@@ -265,8 +267,6 @@ class Lensflare extends Mesh {
 
 }
 
-Lensflare.prototype.isLensflare = true;
-
 //
 
 class LensflareElement {

package/examples/jsm/objects/LightningStorm.js

@@ -58,6 +58,8 @@ class LightningStorm extends Object3D {
 
 		super();
 
+		this.isLightningStorm = true;
+
 		// Parameters
 
 		this.stormParams = stormParams;
@@ -205,9 +207,9 @@ class LightningStorm extends Object3D {
 
 	}
 
-	copy( source ) {
+	copy( source, recursive ) {
 
-		super.copy( source );
+		super.copy( source, recursive );
 
 		this.stormParams.size = source.stormParams.size;
 		this.stormParams.minHeight = source.stormParams.minHeight;
@@ -240,6 +242,4 @@ class LightningStorm extends Object3D {
 
 }
 
-LightningStorm.prototype.isLightningStorm = true;
-
 export { LightningStorm };

package/examples/jsm/objects/MarchingCubes.js

@@ -18,6 +18,8 @@ class MarchingCubes extends Mesh {
 
 		super( geometry, material );
 
+		this.isMarchingCubes = true;
+
 		const scope = this;
 
 		// temp buffers used in polygonize
@@ -812,7 +814,7 @@ class MarchingCubes extends Mesh {
 
 		};
 
-		this.onBeforeRender = function () {
+		this.update = function () {
 
 			this.count = 0;
 
@@ -843,13 +845,9 @@ class MarchingCubes extends Mesh {
 
 			}
 
-			// reset unneeded data
-
-			for ( let i = this.count * 3; i < this.positionArray.length; i ++ ) {
+			// set the draw range to only the processed triangles
 
-				this.positionArray[ i ] = 0.0;
-
-			}
+			this.geometry.setDrawRange( 0, this.count );
 
 			// update geometry data
 
@@ -871,8 +869,6 @@ class MarchingCubes extends Mesh {
 
 }
 
-MarchingCubes.prototype.isMarchingCubes = true;
-
 /////////////////////////////////////
 // Marching cubes lookup tables
 /////////////////////////////////////

package/examples/jsm/objects/Reflector.js

@@ -8,7 +8,10 @@ import {
 	UniformsUtils,
 	Vector3,
 	Vector4,
-	WebGLRenderTarget
+	WebGLRenderTarget,
+	HalfFloatType,
+	NoToneMapping,
+	LinearEncoding
 } from 'three';
 
 class Reflector extends Mesh {
@@ -17,7 +20,10 @@ class Reflector extends Mesh {
 
 		super( geometry );
 
+		this.isReflector = true;
+
 		this.type = 'Reflector';
+		this.camera = new PerspectiveCamera();
 
 		const scope = this;
 
@@ -26,6 +32,7 @@ class Reflector extends Mesh {
 		const textureHeight = options.textureHeight || 512;
 		const clipBias = options.clipBias || 0;
 		const shader = options.shader || Reflector.ReflectorShader;
+		const multisample = ( options.multisample !== undefined ) ? options.multisample : 4;
 
 		//
 
@@ -42,9 +49,9 @@ class Reflector extends Mesh {
 		const q = new Vector4();
 
 		const textureMatrix = new Matrix4();
-		const virtualCamera = new PerspectiveCamera();
+		const virtualCamera = this.camera;
 
-		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight );
+		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { samples: multisample, type: HalfFloatType } );
 
 		const material = new ShaderMaterial( {
 			uniforms: UniformsUtils.clone( shader.uniforms ),
@@ -133,18 +140,19 @@ class Reflector extends Mesh {
 			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 = LinearEncoding;
+			renderer.toneMapping = NoToneMapping;
 
 			renderer.setRenderTarget( renderTarget );
 
@@ -155,6 +163,8 @@ class Reflector extends Mesh {
 
 			renderer.xr.enabled = currentXrEnabled;
 			renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+			renderer.outputEncoding = currentOutputEncoding;
+			renderer.toneMapping = currentToneMapping;
 
 			renderer.setRenderTarget( currentRenderTarget );
 
@@ -189,8 +199,6 @@ class Reflector extends Mesh {
 
 }
 
-Reflector.prototype.isReflector = true;
-
 Reflector.ReflectorShader = {
 
 	uniforms: {
@@ -252,6 +260,9 @@ Reflector.ReflectorShader = {
 			vec4 base = texture2DProj( tDiffuse, vUv );
 			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
 
+			#include <tonemapping_fragment>
+			#include <encodings_fragment>
+
 		}`
 };
 

package/examples/jsm/objects/ReflectorForSSRPass.js

@@ -11,7 +11,8 @@ import {
 	DepthTexture,
 	UnsignedShortType,
 	NearestFilter,
-	Plane
+	Plane,
+	HalfFloatType
 } from 'three';
 
 class ReflectorForSSRPass extends Mesh {
@@ -20,6 +21,8 @@ class ReflectorForSSRPass extends Mesh {
 
 		super( geometry );
 
+		this.isReflectorForSSRPass = true;
+
 		this.type = 'ReflectorForSSRPass';
 
 		const scope = this;
@@ -102,6 +105,7 @@ class ReflectorForSSRPass extends Mesh {
 
 		const parameters = {
 			depthTexture: useDepthTexture ? depthTexture : null,
+			type: HalfFloatType
 		};
 
 		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, parameters );
@@ -196,10 +200,6 @@ class ReflectorForSSRPass extends Mesh {
 			textureMatrix.multiply( virtualCamera.matrixWorldInverse );
 			textureMatrix.multiply( scope.matrixWorld );
 
-			// Render
-
-			renderTarget.texture.encoding = renderer.outputEncoding;
-
 			// scope.visible = false;
 
 			const currentRenderTarget = renderer.getRenderTarget();
@@ -249,8 +249,6 @@ class ReflectorForSSRPass extends Mesh {
 
 }
 
-ReflectorForSSRPass.prototype.isReflectorForSSRPass = true;
-
 ReflectorForSSRPass.ReflectorShader = {
 
 	defines: {

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 {
@@ -18,7 +21,10 @@ class Refractor extends Mesh {
 
 		super( geometry );
 
+		this.isRefractor = true;
+
 		this.type = 'Refractor';
+		this.camera = new PerspectiveCamera();
 
 		const scope = this;
 
@@ -27,10 +33,11 @@ class Refractor extends Mesh {
 		const textureHeight = options.textureHeight || 512;
 		const clipBias = options.clipBias || 0;
 		const shader = options.shader || Refractor.RefractorShader;
+		const multisample = ( options.multisample !== undefined ) ? options.multisample : 4;
 
 		//
 
-		const virtualCamera = new PerspectiveCamera();
+		const virtualCamera = this.camera;
 		virtualCamera.matrixAutoUpdate = false;
 		virtualCamera.userData.refractor = true;
 
@@ -41,7 +48,7 @@ class Refractor extends Mesh {
 
 		// render target
 
-		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight );
+		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { samples: multisample, type: HalfFloatType } );
 
 		// material
 
@@ -187,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();
@@ -197,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
@@ -217,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;
@@ -258,8 +267,6 @@ class Refractor extends Mesh {
 
 }
 
-Refractor.prototype.isRefractor = true;
-
 Refractor.RefractorShader = {
 
 	uniforms: {
@@ -315,6 +322,9 @@ 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,12 +21,18 @@ class ShadowMesh extends Mesh {
 			color: 0x000000,
 			transparent: true,
 			opacity: 0.6,
-			depthWrite: false
+			depthWrite: false,
+			stencilWrite: true,
+            		stencilFunc: EqualStencilFunc,
+            		stencilRef: 0,
+            		stencilZPass: IncrementStencilOp
 
 		} );
 
 		super( mesh.geometry, shadowMaterial );
 
+		this.isShadowMesh = true;
+
 		this.meshMatrix = mesh.matrixWorld;
 
 		this.frustumCulled = false;
@@ -69,6 +77,4 @@ class ShadowMesh extends Mesh {
 
 }
 
-ShadowMesh.prototype.isShadowMesh = true;
-
 export { ShadowMesh };

package/examples/jsm/objects/Sky.js

@@ -38,12 +38,12 @@ class Sky extends Mesh {
 
 		super( new BoxGeometry( 1, 1, 1 ), material );
 
+		this.isSky = true;
+
 	}
 
 }
 
-Sky.prototype.isSky = true;
-
 Sky.SkyShader = {
 
 	uniforms: {

package/examples/jsm/objects/Water.js

@@ -26,6 +26,8 @@ class Water extends Mesh {
 
 		super( geometry );
 
+		this.isWater = true;
+
 		const scope = this;
 
 		const textureWidth = options.textureWidth !== undefined ? options.textureWidth : 512;
@@ -324,6 +326,4 @@ class Water extends Mesh {
 
 }
 
-Water.prototype.isWater = true;
-
 export { Water };

package/examples/jsm/objects/Water2.js

@@ -27,6 +27,8 @@ class Water extends Mesh {
 
 		super( geometry );
 
+		this.isWater = true;
+
 		this.type = 'Water';
 
 		const scope = this;
@@ -201,8 +203,6 @@ class Water extends Mesh {
 
 }
 
-Water.prototype.isWater = true;
-
 Water.WaterShader = {
 
 	uniforms: {

package/examples/jsm/offscreen/jank.js

@@ -1,9 +1,9 @@
-var interval = null;
-var result = null;
+let interval = null;
+let result = null;
 
 function initJank() {
 
-	var button = document.getElementById( 'button' );
+	const button = document.getElementById( 'button' );
 	button.addEventListener( 'click', function () {
 
 		if ( interval === null ) {
@@ -30,9 +30,9 @@ function initJank() {
 
 function jank() {
 
-	var number = 0;
+	let number = 0;
 
-	for ( var i = 0; i < 10000000; i ++ ) {
+	for ( let i = 0; i < 10000000; i ++ ) {
 
 		number += Math.random();
 

package/examples/jsm/offscreen/offscreen.js

@@ -2,7 +2,7 @@ import init from './scene.js';
 
 self.onmessage = function ( message ) {
 
-	var data = message.data;
+	const data = message.data;
 	init( data.drawingSurface, data.width, data.height, data.pixelRatio, data.path );
 
 };

package/examples/jsm/offscreen/scene.js

@@ -1,6 +1,6 @@
-import * as THREE from 'three';
+import * as THREE from '../../../build/three.module.js';
 
-var camera, scene, renderer, group;
+let camera, scene, renderer, group;
 
 function init( canvas, width, height, pixelRatio, path ) {
 
@@ -16,24 +16,24 @@ function init( canvas, width, height, pixelRatio, path ) {
 
 	// we don't use ImageLoader since it has a DOM dependency (HTML5 image element)
 
-	var loader = new THREE.ImageBitmapLoader().setPath( path );
+	const loader = new THREE.ImageBitmapLoader().setPath( path );
 	loader.setOptions( { imageOrientation: 'flipY' } );
 	loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function ( imageBitmap ) {
 
-		var texture = new THREE.CanvasTexture( imageBitmap );
+		const texture = new THREE.CanvasTexture( imageBitmap );
 
-		var geometry = new THREE.IcosahedronGeometry( 5, 8 );
-		var materials = [
+		const geometry = new THREE.IcosahedronGeometry( 5, 8 );
+		const materials = [
 			new THREE.MeshMatcapMaterial( { color: 0xaa24df, matcap: texture } ),
 			new THREE.MeshMatcapMaterial( { color: 0x605d90, matcap: texture } ),
 			new THREE.MeshMatcapMaterial( { color: 0xe04a3f, matcap: texture } ),
 			new THREE.MeshMatcapMaterial( { color: 0xe30456, matcap: texture } )
 		];
 
-		for ( var i = 0; i < 100; i ++ ) {
+		for ( let i = 0; i < 100; i ++ ) {
 
-			var material = materials[ i % materials.length ];
-			var mesh = new THREE.Mesh( geometry, material );
+			const material = materials[ i % materials.length ];
+			const mesh = new THREE.Mesh( geometry, material );
 			mesh.position.x = random() * 200 - 100;
 			mesh.position.y = random() * 200 - 100;
 			mesh.position.z = random() * 200 - 100;
@@ -73,11 +73,11 @@ function animate() {
 
 // PRNG
 
-var seed = 1;
+let seed = 1;
 
 function random() {
 
-	var x = Math.sin( seed ++ ) * 10000;
+	const x = Math.sin( seed ++ ) * 10000;
 
 	return x - Math.floor( x );