super-three 0.179.0 → 0.184.0

package/examples/jsm/objects/WaterMesh.js

@@ -2,10 +2,10 @@ import {
 	Color,
 	Mesh,
 	Vector3,
-	MeshLambertNodeMaterial
+	NodeMaterial
 } from 'three/webgpu';
 
-import { Fn, add, cameraPosition, div, normalize, positionWorld, sub, time, texture, vec2, vec3, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix, diffuseColor } from 'three/tsl';
+import { Fn, add, cameraPosition, div, normalize, positionWorld, sub, time, texture, vec2, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix } from 'three/tsl';
 
 /**
  * A basic flat, reflective water effect.
@@ -15,9 +15,9 @@ import { Fn, add, cameraPosition, div, normalize, positionWorld, sub, time, text
  *
  * References:
  *
- * - [Flat mirror for three.js]{@link https://github.com/Slayvin}
- * - [An implementation of water shader based on the flat mirror]{@link https://home.adelphi.edu/~stemkoski/}
- * - [Water shader explanations in WebGL]{@link http://29a.ch/slides/2012/webglwater/ }
+ * - [Flat mirror for three.js](https://github.com/Slayvin)
+ * - [An implementation of water shader based on the flat mirror](https://home.adelphi.edu/~stemkoski/)
+ * - [Water shader explanations in WebGL](http://29a.ch/slides/2012/webglwater/ )
  *
  * @augments Mesh
  * @three_import import { WaterMesh } from 'three/addons/objects/WaterMesh.js';
@@ -32,7 +32,7 @@ class WaterMesh extends Mesh {
 	 */
 	constructor( geometry, options ) {
 
-		const material = new MeshLambertNodeMaterial();
+		const material = new NodeMaterial();
 
 		super( geometry, material );
 
@@ -51,7 +51,7 @@ class WaterMesh extends Mesh {
 		 * @type {number}
 		 * @default 0.5
 		 */
-		this.resolution = options.resolution !== undefined ? options.resolution : 0.5;
+		this.resolutionScale = options.resolutionScale !== undefined ? options.resolutionScale : 0.5;
 
 		// Uniforms
 
@@ -155,21 +155,19 @@ class WaterMesh extends Mesh {
 
 		material.receivedShadowPositionNode = positionWorld.add( distortion );
 
-		material.setupOutgoingLight = () => diffuseColor.rgb; // backwards compatibility
-
 		material.colorNode = Fn( () => {
 
 			const mirrorSampler = reflector();
 			mirrorSampler.uvNode = mirrorSampler.uvNode.add( distortion );
-			mirrorSampler.resolution = this.resolution;
+			mirrorSampler.reflector.resolutionScale = this.resolutionScale;
 
 			this.add( mirrorSampler.target );
 
 			const theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );
-			const rf0 = float( 0.3 );
+			const rf0 = float( 0.02 );
 			const reflectance = mul( pow( float( 1.0 ).sub( theta ), 5.0 ), float( 1.0 ).sub( rf0 ) ).add( rf0 );
 			const scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ).mul( this.waterColor );
-			const albedo = mix( this.sunColor.mul( diffuseLight ).mul( 0.3 ).add( scatter ), mirrorSampler.rgb.mul( specularLight ).add( mirrorSampler.rgb.mul( 0.9 ) ).add( vec3( 0.1 ) ), reflectance );
+			const albedo = mix( this.sunColor.mul( diffuseLight ).mul( 0.3 ).add( scatter ), mirrorSampler.rgb.add( specularLight ), reflectance );
 
 			return albedo;
 
@@ -183,7 +181,7 @@ class WaterMesh extends Mesh {
  * Constructor options of `WaterMesh`.
  *
  * @typedef {Object} WaterMesh~Options
- * @property {number} [resolution=0.5] - The resolution scale.
+ * @property {number} [resolutionScale=0.5] - The resolution scale.
  * @property {?Texture} [waterNormals=null] - The water's normal map.
  * @property {number} [alpha=1] - The alpha value.
  * @property {number} [size=1] - The size value.

package/examples/jsm/physics/AmmoPhysics.js

@@ -23,7 +23,7 @@ async function AmmoPhysics() {
 
 	}
 
-	const AmmoLib = await Ammo(); // eslint-disable-line no-undef
+	const AmmoLib = await Ammo();
 
 	const frameRate = 60;
 
@@ -66,6 +66,8 @@ async function AmmoPhysics() {
 
 		}
 
+		console.error( 'AmmoPhysics: Unsupported geometry type:', geometry.type );
+
 		return null;
 
 	}
@@ -83,7 +85,7 @@ async function AmmoPhysics() {
 
 				if ( physics ) {
 
-					addMesh( child, physics.mass );
+					addMesh( child, physics.mass, physics.restitution );
 
 				}
 
@@ -93,7 +95,7 @@ async function AmmoPhysics() {
 
 	}
 
-	function addMesh( mesh, mass = 0 ) {
+	function addMesh( mesh, mass = 0, restitution = 0 ) {
 
 		const shape = getShape( mesh.geometry );
 
@@ -101,11 +103,11 @@ async function AmmoPhysics() {
 
 			if ( mesh.isInstancedMesh ) {
 
-				handleInstancedMesh( mesh, mass, shape );
+				handleInstancedMesh( mesh, shape, mass, restitution );
 
 			} else if ( mesh.isMesh ) {
 
-				handleMesh( mesh, mass, shape );
+				handleMesh( mesh, shape, mass, restitution );
 
 			}
 
@@ -113,7 +115,7 @@ async function AmmoPhysics() {
 
 	}
 
-	function handleMesh( mesh, mass, shape ) {
+	function handleMesh( mesh, shape, mass, restitution ) {
 
 		const position = mesh.position;
 		const quaternion = mesh.quaternion;
@@ -129,6 +131,7 @@ async function AmmoPhysics() {
 		shape.calculateLocalInertia( mass, localInertia );
 
 		const rbInfo = new AmmoLib.btRigidBodyConstructionInfo( mass, motionState, shape, localInertia );
+		rbInfo.set_m_restitution( restitution );
 
 		const body = new AmmoLib.btRigidBody( rbInfo );
 		// body.setFriction( 4 );
@@ -144,7 +147,7 @@ async function AmmoPhysics() {
 
 	}
 
-	function handleInstancedMesh( mesh, mass, shape ) {
+	function handleInstancedMesh( mesh, shape, mass, restitution ) {
 
 		const array = mesh.instanceMatrix.array;
 
@@ -163,6 +166,7 @@ async function AmmoPhysics() {
 			shape.calculateLocalInertia( mass, localInertia );
 
 			const rbInfo = new AmmoLib.btRigidBodyConstructionInfo( mass, motionState, shape, localInertia );
+			rbInfo.set_m_restitution( restitution );
 
 			const body = new AmmoLib.btRigidBody( rbInfo );
 			world.addRigidBody( body );
@@ -302,6 +306,7 @@ async function AmmoPhysics() {
 		 * @name AmmoPhysics#addMesh
 		 * @param {Mesh} mesh The mesh to add.
 		 * @param {number} [mass=0] The mass in kg of the mesh.
+		 * @param {number} [restitution=0] The restitution of the mesh, usually from 0 to 1. Represents how "bouncy" objects are when they collide with each other.
 		 */
 		addMesh: addMesh,
 

package/examples/jsm/physics/JoltPhysics.js

@@ -1,6 +1,6 @@
-import { Clock, Vector3, Quaternion, Matrix4 } from 'three';
+import { Timer, Vector3, Quaternion, Matrix4 } from 'three';
 
-const JOLT_PATH = 'https://cdn.jsdelivr.net/npm/jolt-physics@0.23.0/dist/jolt-physics.wasm-compat.js';
+const JOLT_PATH = 'https://cdn.jsdelivr.net/npm/jolt-physics@1.0.0/dist/jolt-physics.wasm-compat.js';
 
 const frameRate = 60;
 
@@ -28,6 +28,8 @@ function getShape( geometry ) {
 
 	}
 
+	console.error( 'JoltPhysics: Unsupported geometry type:', geometry.type );
+
 	return null;
 
 }
@@ -75,7 +77,7 @@ async function JoltPhysics() {
 
 	if ( Jolt === null ) {
 
-		const { default: initJolt } = await import( `${JOLT_PATH}` );
+		const { default: initJolt } = await import( JOLT_PATH /* @vite-ignore */ );
 		Jolt = await initJolt();
 
 	}
@@ -220,11 +222,13 @@ async function JoltPhysics() {
 
 	//
 
-	const clock = new Clock();
+	const timer = new Timer();
 
 	function step() {
 
-		let deltaTime = clock.getDelta();
+		timer.update();
+
+		let deltaTime = timer.getDelta();
 
 		// Don't go below 30 Hz to prevent spiral of death
 		deltaTime = Math.min( deltaTime, 1.0 / 30.0 );
@@ -305,7 +309,7 @@ async function JoltPhysics() {
 		 * @name JoltPhysics#addMesh
 		 * @param {Mesh} mesh The mesh to add.
 		 * @param {number} [mass=0] The mass in kg of the mesh.
-		 * @param {number} [restitution=0] The restitution/friction of the mesh.
+		 * @param {number} [restitution=0] The restitution of the mesh, usually from 0 to 1. Represents how "bouncy" objects are when they collide with each other.
 		 */
 		addMesh: addMesh,
 

package/examples/jsm/physics/RapierPhysics.js

@@ -1,4 +1,4 @@
-import { Clock, Vector3, Quaternion, Matrix4 } from 'three';
+import { Timer, Vector3, Quaternion, Matrix4 } from 'three';
 
 const RAPIER_PATH = 'https://cdn.skypack.dev/@dimforge/rapier3d-compat@0.17.3';
 
@@ -73,6 +73,8 @@ function getShape( geometry ) {
 
 	}
 
+	console.error( 'RapierPhysics: Unsupported geometry type:', geometry.type );
+
 	return null;
 
 }
@@ -95,7 +97,7 @@ async function RapierPhysics() {
 
 	if ( RAPIER === null ) {
 
-		RAPIER = await import( `${RAPIER_PATH}` );
+		RAPIER = await import( RAPIER_PATH /* @vite-ignore */ );
 		await RAPIER.init();
 
 	}
@@ -299,11 +301,13 @@ async function RapierPhysics() {
 
 	//
 
-	const clock = new Clock();
+	const timer = new Timer();
 
 	function step() {
 
-		world.timestep = clock.getDelta();
+		timer.update();
+
+		world.timestep = timer.getDelta();
 		world.step();
 
 		//
@@ -372,7 +376,7 @@ async function RapierPhysics() {
 		 * @name RapierPhysics#addMesh
 		 * @param {Mesh} mesh The mesh to add.
 		 * @param {number} [mass=0] The mass in kg of the mesh.
-		 * @param {number} [restitution=0] The restitution/friction of the mesh.
+		 * @param {number} [restitution=0] The restitution of the mesh, usually from 0 to 1. Represents how "bouncy" objects are when they collide with each other.
 		 */
 		addMesh: addMesh,
 

package/examples/jsm/postprocessing/EffectComposer.js

@@ -1,7 +1,7 @@
 import {
-	Clock,
 	HalfFloatType,
 	NoBlending,
+	Timer,
 	Vector2,
 	WebGLRenderTarget
 } from 'three';
@@ -123,12 +123,12 @@ class EffectComposer {
 		this.copyPass.material.blending = NoBlending;
 
 		/**
-		 * The internal clock for managing time data.
+		 * The internal timer for managing time data.
 		 *
 		 * @private
-		 * @type {Clock}
+		 * @type {Timer}
 		 */
-		this.clock = new Clock();
+		this.timer = new Timer();
 
 		this.onSessionStateChange = this.onSessionStateChange.bind( this );
 		this.renderer.xr.addEventListener( 'sessionstart', this.onSessionStateChange );
@@ -233,9 +233,11 @@ class EffectComposer {
 
 		// deltaTime value is in seconds
 
+		this.timer.update();
+
 		if ( deltaTime === undefined ) {
 
-			deltaTime = this.clock.getDelta();
+			deltaTime = this.timer.getDelta();
 
 		}
 

package/examples/jsm/postprocessing/GlitchPass.js

@@ -61,7 +61,7 @@ class GlitchPass extends Pass {
 		// internals
 
 		this._heightMap = this._generateHeightmap( dt_size );
-		this.uniforms[ 'tDisp' ].value = this.heightMap;
+		this.uniforms[ 'tDisp' ].value = this._heightMap;
 
 		this._fsQuad = new FullScreenQuad( this.material );
 
@@ -140,7 +140,7 @@ class GlitchPass extends Pass {
 
 		this.material.dispose();
 
-		this.heightMap.dispose();
+		this._heightMap.dispose();
 
 		this._fsQuad.dispose();
 

package/examples/jsm/postprocessing/OutlinePass.js

@@ -510,7 +510,7 @@ class OutlinePass extends Pass {
 
 				}
 
-			} else if ( object.isMesh || object.isSprite) {
+			} else if ( object.isMesh || object.isSprite ) {
 
 				// only meshes and sprites are supported by OutlinePass
 

package/examples/jsm/postprocessing/OutputPass.js

@@ -39,6 +39,15 @@ class OutputPass extends Pass {
 
 		super();
 
+		/**
+		 * This flag indicates that this is an output pass.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isOutputPass = true;
+
 		/**
 		 * The pass uniforms.
 		 *

package/examples/jsm/postprocessing/RenderPass.js

@@ -93,6 +93,16 @@ class RenderPass extends Pass {
 		 * @default false
 		 */
 		this.needsSwap = false;
+
+		/**
+		 * This flag indicates that this pass renders the scene itself.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isRenderPass = true;
+
 		this._oldClearColor = new Color();
 
 	}

package/examples/jsm/postprocessing/RenderTransitionPass.js

@@ -114,7 +114,7 @@ class RenderTransitionPass extends Pass {
 	}
 
 	/**
-	 * Sets the texture threshold. This value defined how strong the texture effects
+	 * Sets the texture threshold. This value defines how strong the texture effects
 	 * the transition. Must be in the range `[0,1]` (0 means full effect, 1 means no effect).
 	 *
 	 * @param {boolean|number} value - The threshold value.

package/examples/jsm/postprocessing/SSRPass.js

@@ -137,6 +137,8 @@ class SSRPass extends Pass {
 
 		this._selects = selects;
 
+		this._resolutionScale = 1;
+
 		/**
 		 * Whether the pass is selective or not.
 		 *
@@ -457,6 +459,29 @@ class SSRPass extends Pass {
 
 	}
 
+
+	/**
+	 * The resolution scale. Valid values are in the range
+	 * `[0,1]`. `1` means best quality but also results in
+	 * more computational overhead. Setting to `0.5` means
+	 * the effect is computed in half-resolution.
+	 *
+	 * @type {number}
+	 * @default 1
+	 */
+	get resolutionScale() {
+
+		return this._resolutionScale;
+
+	}
+
+	set resolutionScale( value ) {
+
+		this._resolutionScale = value;
+		this.setSize( this.width, this.height ); // force a resize when resolution scaling changes
+
+	}
+
 	/**
 	 * Frees the GPU-related resources allocated by this instance. Call this
 	 * method whenever the pass is no longer used in your app.
@@ -661,23 +686,27 @@ class SSRPass extends Pass {
 		this.width = width;
 		this.height = height;
 
-		this.ssrMaterial.defines.MAX_STEP = Math.sqrt( width * width + height * height );
+		const effectiveWidth = Math.round( this.resolutionScale * width );
+		const effectiveHeight = Math.round( this.resolutionScale * height );
+
+		this.ssrMaterial.defines.MAX_STEP = Math.sqrt( effectiveWidth * effectiveWidth + effectiveHeight * effectiveHeight );
 		this.ssrMaterial.needsUpdate = true;
+
 		this.beautyRenderTarget.setSize( width, height );
-		this.prevRenderTarget.setSize( width, height );
-		this.ssrRenderTarget.setSize( width, height );
 		this.normalRenderTarget.setSize( width, height );
 		this.metalnessRenderTarget.setSize( width, height );
-		this.blurRenderTarget.setSize( width, height );
-		this.blurRenderTarget2.setSize( width, height );
+		this.ssrRenderTarget.setSize( effectiveWidth, effectiveHeight );
+		this.prevRenderTarget.setSize( effectiveWidth, effectiveHeight );
+		this.blurRenderTarget.setSize( effectiveWidth, effectiveHeight );
+		this.blurRenderTarget2.setSize( effectiveWidth, effectiveHeight );
 		// this.blurRenderTarget3.setSize(width, height);
 
-		this.ssrMaterial.uniforms[ 'resolution' ].value.set( width, height );
+		this.ssrMaterial.uniforms[ 'resolution' ].value.set( effectiveWidth, effectiveHeight );
 		this.ssrMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
 		this.ssrMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
 
-		this.blurMaterial.uniforms[ 'resolution' ].value.set( width, height );
-		this.blurMaterial2.uniforms[ 'resolution' ].value.set( width, height );
+		this.blurMaterial.uniforms[ 'resolution' ].value.set( effectiveWidth, effectiveHeight );
+		this.blurMaterial2.uniforms[ 'resolution' ].value.set( effectiveWidth, effectiveHeight );
 
 	}
 

package/examples/jsm/postprocessing/UnrealBloomPass.js

@@ -22,7 +22,7 @@ import { LuminosityHighPassShader } from '../shaders/LuminosityHighPassShader.js
  * When using this pass, tone mapping must be enabled in the renderer settings.
  *
  * Reference:
- * - [Bloom in Unreal Engine]{@link https://docs.unrealengine.com/latest/INT/Engine/Rendering/PostProcessEffects/Bloom/}
+ * - [Bloom in Unreal Engine](https://docs.unrealengine.com/latest/INT/Engine/Rendering/PostProcessEffects/Bloom/)
  *
  * ```js
  * const resolution = new THREE.Vector2( window.innerWidth, window.innerHeight );
@@ -56,7 +56,7 @@ class UnrealBloomPass extends Pass {
 		this.strength = strength;
 
 		/**
-		 * The Bloom radius.
+		 * The Bloom radius. Must be in the range `[0,1]`.
 		 *
 		 * @type {number}
 		 */
@@ -145,7 +145,9 @@ class UnrealBloomPass extends Pass {
 		// gaussian blur materials
 
 		this.separableBlurMaterials = [];
-		const kernelSizeArray = [ 3, 5, 7, 9, 11 ];
+		// These sizes have been changed to account for the altered coefficients-calculation to avoid blockiness,
+		// while retaining the same blur-strength. For details see https://github.com/mrdoob/three.js/pull/31528
+		const kernelSizeArray = [ 6, 10, 14, 18, 22 ];
 		resx = Math.round( this.resolution.x / 2 );
 		resy = Math.round( this.resolution.y / 2 );
 
@@ -185,6 +187,7 @@ class UnrealBloomPass extends Pass {
 			uniforms: this.copyUniforms,
 			vertexShader: CopyShader.vertexShader,
 			fragmentShader: CopyShader.fragmentShader,
+			premultipliedAlpha: true,
 			blending: AdditiveBlending,
 			depthTest: false,
 			depthWrite: false,
@@ -376,10 +379,11 @@ class UnrealBloomPass extends Pass {
 	_getSeparableBlurMaterial( kernelRadius ) {
 
 		const coefficients = [];
+		const sigma = kernelRadius / 3;
 
 		for ( let i = 0; i < kernelRadius; i ++ ) {
 
-			coefficients.push( 0.39894 * Math.exp( - 0.5 * i * i / ( kernelRadius * kernelRadius ) ) / kernelRadius );
+			coefficients.push( 0.39894 * Math.exp( - 0.5 * i * i / ( sigma * sigma ) ) / sigma );
 
 		}
 
@@ -396,34 +400,46 @@ class UnrealBloomPass extends Pass {
 				'gaussianCoefficients': { value: coefficients } // precomputed Gaussian coefficients
 			},
 
-			vertexShader:
-				`varying vec2 vUv;
+			vertexShader: /* glsl */`
+
+				varying vec2 vUv;
+
 				void main() {
+
 					vUv = uv;
 					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
 				}`,
 
-			fragmentShader:
-				`#include <common>
+			fragmentShader: /* glsl */`
+
+				#include <common>
+
 				varying vec2 vUv;
+
 				uniform sampler2D colorTexture;
 				uniform vec2 invSize;
 				uniform vec2 direction;
 				uniform float gaussianCoefficients[KERNEL_RADIUS];
 
 				void main() {
+
 					float weightSum = gaussianCoefficients[0];
 					vec3 diffuseSum = texture2D( colorTexture, vUv ).rgb * weightSum;
-					for( int i = 1; i < KERNEL_RADIUS; i ++ ) {
-						float x = float(i);
+
+					for ( int i = 1; i < KERNEL_RADIUS; i ++ ) {
+
+						float x = float( i );
 						float w = gaussianCoefficients[i];
 						vec2 uvOffset = direction * invSize * x;
 						vec3 sample1 = texture2D( colorTexture, vUv + uvOffset ).rgb;
 						vec3 sample2 = texture2D( colorTexture, vUv - uvOffset ).rgb;
-						diffuseSum += (sample1 + sample2) * w;
-						weightSum += 2.0 * w;
+						diffuseSum += ( sample1 + sample2 ) * w;
+
 					}
-					gl_FragColor = vec4(diffuseSum/weightSum, 1.0);
+
+					gl_FragColor = vec4( diffuseSum, 1.0 );
+
 				}`
 		} );
 
@@ -449,15 +465,21 @@ class UnrealBloomPass extends Pass {
 				'bloomRadius': { value: 0.0 }
 			},
 
-			vertexShader:
-				`varying vec2 vUv;
+			vertexShader: /* glsl */`
+
+				varying vec2 vUv;
+
 				void main() {
+
 					vUv = uv;
 					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
 				}`,
 
-			fragmentShader:
-				`varying vec2 vUv;
+			fragmentShader: /* glsl */`
+
+				varying vec2 vUv;
+
 				uniform sampler2D blurTexture1;
 				uniform sampler2D blurTexture2;
 				uniform sampler2D blurTexture3;
@@ -468,17 +490,27 @@ class UnrealBloomPass extends Pass {
 				uniform float bloomFactors[NUM_MIPS];
 				uniform vec3 bloomTintColors[NUM_MIPS];
 
-				float lerpBloomFactor(const in float factor) {
+				float lerpBloomFactor( const in float factor ) {
+
 					float mirrorFactor = 1.2 - factor;
-					return mix(factor, mirrorFactor, bloomRadius);
+					return mix( factor, mirrorFactor, bloomRadius );
+
 				}
 
 				void main() {
-					gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) +
-						lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) +
-						lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) +
-						lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) +
-						lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) );
+
+					// 3.0 for backwards compatibility with previous alpha-based intensity
+					vec3 bloom = 3.0 * bloomStrength * (
+						lerpBloomFactor( bloomFactors[ 0 ] ) * bloomTintColors[ 0 ] * texture2D( blurTexture1, vUv ).rgb +
+						lerpBloomFactor( bloomFactors[ 1 ] ) * bloomTintColors[ 1 ] * texture2D( blurTexture2, vUv ).rgb +
+						lerpBloomFactor( bloomFactors[ 2 ] ) * bloomTintColors[ 2 ] * texture2D( blurTexture3, vUv ).rgb +
+						lerpBloomFactor( bloomFactors[ 3 ] ) * bloomTintColors[ 3 ] * texture2D( blurTexture4, vUv ).rgb +
+						lerpBloomFactor( bloomFactors[ 4 ] ) * bloomTintColors[ 4 ] * texture2D( blurTexture5, vUv ).rgb
+					);
+
+					float bloomAlpha = max( bloom.r, max( bloom.g, bloom.b ) );
+					gl_FragColor = vec4( bloom, bloomAlpha );
+
 				}`
 		} );
 

package/examples/jsm/renderers/CSS2DRenderer.js

@@ -16,7 +16,7 @@ class CSS2DObject extends Object3D {
 	/**
 	 * Constructs a new CSS2D object.
 	 *
-	 * @param {DOMElement} [element] - The DOM element.
+	 * @param {HTMLElement} [element] - The DOM element.
 	 */
 	constructor( element = document.createElement( 'div' ) ) {
 
@@ -34,7 +34,7 @@ class CSS2DObject extends Object3D {
 		/**
 		 * The DOM element which defines the appearance of this 3D object.
 		 *
-		 * @type {DOMElement}
+		 * @type {HTMLElement}
 		 * @readonly
 		 * @default true
 		 */
@@ -59,6 +59,7 @@ class CSS2DObject extends Object3D {
 			this.traverse( function ( object ) {
 
 				if (
+					object.element &&
 					object.element instanceof object.element.ownerDocument.defaultView.Element &&
 					object.element.parentNode !== null
 				) {
@@ -132,10 +133,20 @@ class CSS2DRenderer {
 		/**
 		 * The DOM where the renderer appends its child-elements.
 		 *
-		 * @type {DOMElement}
+		 * @type {HTMLElement}
 		 */
 		this.domElement = domElement;
 
+		/**
+		 * Controls whether the renderer assigns `z-index` values to CSS2DObject DOM elements.
+		 * If set to `true`, z-index values are assigned first based on the `renderOrder`
+		 * and secondly - the distance to the camera. If set to `false`, no z-index values are assigned.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
+		this.sortObjects = true;
+
 		/**
 		 * Returns an object containing the width and height of the renderer.
 		 *
@@ -165,7 +176,7 @@ class CSS2DRenderer {
 			_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
 
 			renderObject( scene, scene, camera );
-			zOrder( scene );
+			if ( this.sortObjects ) zOrder( scene );
 
 		};
 
@@ -310,7 +321,7 @@ class CSS2DRenderer {
  * Constructor parameters of `CSS2DRenderer`.
  *
  * @typedef {Object} CSS2DRenderer~Parameters
- * @property {DOMElement} [element] - A DOM element where the renderer appends its child-elements.
+ * @property {HTMLElement} [element] - A DOM element where the renderer appends its child-elements.
  * If not passed in here, a new div element will be created.
  **/