@plastic-software/three 0.180.0 → 0.181.2

package/examples/jsm/misc/TubePainter.js

@@ -42,9 +42,7 @@ function TubePainter() {
 	geometry.setAttribute( 'color', colors );
 	geometry.drawRange.count = 0;
 
-	const material = new MeshStandardMaterial( {
-		vertexColors: true
-	} );
+	const material = new MeshStandardMaterial( { vertexColors: true } );
 
 	const mesh = new Mesh( geometry, material );
 	mesh.frustumCulled = false;
@@ -55,7 +53,7 @@ function TubePainter() {
 
 		const PI2 = Math.PI * 2;
 
-		const sides = 10;
+		const sides = 15;
 		const array = [];
 		const radius = 0.01 * size;
 
@@ -72,33 +70,263 @@ function TubePainter() {
 
 	//
 
+	const vector = new Vector3();
+
 	const vector1 = new Vector3();
 	const vector2 = new Vector3();
 	const vector3 = new Vector3();
 	const vector4 = new Vector3();
 
-	const color = new Color( 0xffffff );
-	let size = 1;
+	const color1 = new Color( 0xffffff );
+	const color2 = new Color( 0xffffff );
 
-	function stroke( position1, position2, matrix1, matrix2 ) {
+	let size1 = 1;
+	let size2 = 1;
 
-		if ( position1.distanceToSquared( position2 ) === 0 ) return;
+	function addCap( position, matrix, isEndCap, capSize ) {
 
 		let count = geometry.drawRange.count;
 
-		const points = getPoints( size );
+		const points = getPoints( capSize );
+		const sides = points.length;
+		const radius = 0.01 * capSize;
+		const latSegments = 4;
+		const directionSign = isEndCap ? - 1 : 1;
+
+		for ( let lat = 0; lat < latSegments; lat ++ ) {
+
+			const phi1 = ( lat / latSegments ) * Math.PI * 0.5;
+			const phi2 = ( ( lat + 1 ) / latSegments ) * Math.PI * 0.5;
+
+			const z1 = Math.sin( phi1 ) * radius * directionSign;
+			const r1 = Math.cos( phi1 ) * radius;
+
+			const z2 = Math.sin( phi2 ) * radius * directionSign;
+			const r2 = Math.cos( phi2 ) * radius;
+
+			for ( let i = 0; i < sides; i ++ ) {
+
+				const theta1 = ( i / sides ) * Math.PI * 2;
+				const theta2 = ( ( i + 1 ) / sides ) * Math.PI * 2;
+
+				// First ring
+				const x1 = Math.sin( theta1 ) * r1;
+				const y1 = Math.cos( theta1 ) * r1;
+
+				const x2 = Math.sin( theta2 ) * r1;
+				const y2 = Math.cos( theta2 ) * r1;
+
+				// Second ring
+				const x3 = Math.sin( theta1 ) * r2;
+				const y3 = Math.cos( theta1 ) * r2;
+
+				const x4 = Math.sin( theta2 ) * r2;
+				const y4 = Math.cos( theta2 ) * r2;
+
+				// Transform to world space
+				vector1.set( x1, y1, z1 ).applyMatrix4( matrix ).add( position );
+				vector2.set( x2, y2, z1 ).applyMatrix4( matrix ).add( position );
+				vector3.set( x3, y3, z2 ).applyMatrix4( matrix ).add( position );
+				vector4.set( x4, y4, z2 ).applyMatrix4( matrix ).add( position );
+
+				// First triangle
+				normal.set( x1, y1, z1 ).normalize().transformDirection( matrix );
+				vector.set( x2, y2, z1 ).normalize().transformDirection( matrix );
+				side.set( x3, y3, z2 ).normalize().transformDirection( matrix );
+
+				if ( isEndCap ) {
+
+					vector1.toArray( positions.array, count * 3 );
+					vector2.toArray( positions.array, ( count + 1 ) * 3 );
+					vector3.toArray( positions.array, ( count + 2 ) * 3 );
+
+					normal.toArray( normals.array, count * 3 );
+					vector.toArray( normals.array, ( count + 1 ) * 3 );
+					side.toArray( normals.array, ( count + 2 ) * 3 );
+
+				} else {
+
+					vector1.toArray( positions.array, count * 3 );
+					vector3.toArray( positions.array, ( count + 1 ) * 3 );
+					vector2.toArray( positions.array, ( count + 2 ) * 3 );
+
+					normal.toArray( normals.array, count * 3 );
+					side.toArray( normals.array, ( count + 1 ) * 3 );
+					vector.toArray( normals.array, ( count + 2 ) * 3 );
+
+				}
+
+				color1.toArray( colors.array, count * 3 );
+				color1.toArray( colors.array, ( count + 1 ) * 3 );
+				color1.toArray( colors.array, ( count + 2 ) * 3 );
+
+				count += 3;
+
+				// Second triangle
+				if ( r2 > 0.001 ) {
+
+					normal.set( x2, y2, z1 ).normalize().transformDirection( matrix );
+					vector.set( x4, y4, z2 ).normalize().transformDirection( matrix );
+					side.set( x3, y3, z2 ).normalize().transformDirection( matrix );
+
+					if ( isEndCap ) {
+
+						vector2.toArray( positions.array, count * 3 );
+						vector4.toArray( positions.array, ( count + 1 ) * 3 );
+						vector3.toArray( positions.array, ( count + 2 ) * 3 );
+
+						normal.toArray( normals.array, count * 3 );
+						vector.toArray( normals.array, ( count + 1 ) * 3 );
+						side.toArray( normals.array, ( count + 2 ) * 3 );
+
+					} else {
+
+						vector3.toArray( positions.array, count * 3 );
+						vector4.toArray( positions.array, ( count + 1 ) * 3 );
+						vector2.toArray( positions.array, ( count + 2 ) * 3 );
+
+						side.toArray( normals.array, count * 3 );
+						vector.toArray( normals.array, ( count + 1 ) * 3 );
+						normal.toArray( normals.array, ( count + 2 ) * 3 );
+
+					}
+
+					color1.toArray( colors.array, count * 3 );
+					color1.toArray( colors.array, ( count + 1 ) * 3 );
+					color1.toArray( colors.array, ( count + 2 ) * 3 );
+
+					count += 3;
+
+				}
+
+			}
+
+		}
+
+		geometry.drawRange.count = count;
+
+	}
+
+	function updateEndCap( position, matrix, capSize ) {
+
+		if ( endCapStartIndex === null ) return;
+
+		const points = getPoints( capSize );
+		const sides = points.length;
+		const radius = 0.01 * capSize;
+		const latSegments = 4;
+
+		let count = endCapStartIndex;
+
+		for ( let lat = 0; lat < latSegments; lat ++ ) {
+
+			const phi1 = ( lat / latSegments ) * Math.PI * 0.5;
+			const phi2 = ( ( lat + 1 ) / latSegments ) * Math.PI * 0.5;
+
+			const z1 = - Math.sin( phi1 ) * radius;
+			const r1 = Math.cos( phi1 ) * radius;
+
+			const z2 = - Math.sin( phi2 ) * radius;
+			const r2 = Math.cos( phi2 ) * radius;
+
+			for ( let i = 0; i < sides; i ++ ) {
+
+				const theta1 = ( i / sides ) * Math.PI * 2;
+				const theta2 = ( ( i + 1 ) / sides ) * Math.PI * 2;
+
+				// First ring
+				const x1 = Math.sin( theta1 ) * r1;
+				const y1 = Math.cos( theta1 ) * r1;
+
+				const x2 = Math.sin( theta2 ) * r1;
+				const y2 = Math.cos( theta2 ) * r1;
+
+				// Second ring
+				const x3 = Math.sin( theta1 ) * r2;
+				const y3 = Math.cos( theta1 ) * r2;
+
+				const x4 = Math.sin( theta2 ) * r2;
+				const y4 = Math.cos( theta2 ) * r2;
+
+				// Transform positions to world space
+				vector1.set( x1, y1, z1 ).applyMatrix4( matrix ).add( position );
+				vector2.set( x2, y2, z1 ).applyMatrix4( matrix ).add( position );
+				vector3.set( x3, y3, z2 ).applyMatrix4( matrix ).add( position );
+				vector4.set( x4, y4, z2 ).applyMatrix4( matrix ).add( position );
+
+				// Transform normals to world space
+				normal.set( x1, y1, z1 ).normalize().transformDirection( matrix );
+				vector.set( x2, y2, z1 ).normalize().transformDirection( matrix );
+				side.set( x3, y3, z2 ).normalize().transformDirection( matrix );
+
+				// First triangle
+				vector1.toArray( positions.array, count * 3 );
+				vector2.toArray( positions.array, ( count + 1 ) * 3 );
+				vector3.toArray( positions.array, ( count + 2 ) * 3 );
+
+				normal.toArray( normals.array, count * 3 );
+				vector.toArray( normals.array, ( count + 1 ) * 3 );
+				side.toArray( normals.array, ( count + 2 ) * 3 );
+
+				color1.toArray( colors.array, count * 3 );
+				color1.toArray( colors.array, ( count + 1 ) * 3 );
+				color1.toArray( colors.array, ( count + 2 ) * 3 );
+
+				count += 3;
+
+				// Second triangle
+				if ( r2 > 0.001 ) {
+
+					normal.set( x2, y2, z1 ).normalize().transformDirection( matrix );
+					vector.set( x4, y4, z2 ).normalize().transformDirection( matrix );
+					side.set( x3, y3, z2 ).normalize().transformDirection( matrix );
+
+					vector2.toArray( positions.array, count * 3 );
+					vector4.toArray( positions.array, ( count + 1 ) * 3 );
+					vector3.toArray( positions.array, ( count + 2 ) * 3 );
+
+					normal.toArray( normals.array, count * 3 );
+					vector.toArray( normals.array, ( count + 1 ) * 3 );
+					side.toArray( normals.array, ( count + 2 ) * 3 );
+
+					color1.toArray( colors.array, count * 3 );
+					color1.toArray( colors.array, ( count + 1 ) * 3 );
+					color1.toArray( colors.array, ( count + 2 ) * 3 );
+
+					count += 3;
+
+				}
+
+			}
+
+		}
+
+		positions.addUpdateRange( endCapStartIndex * 3, endCapVertexCount * 3 );
+		normals.addUpdateRange( endCapStartIndex * 3, endCapVertexCount * 3 );
+		colors.addUpdateRange( endCapStartIndex * 3, endCapVertexCount * 3 );
+
+	}
+
+	function stroke( position1, position2, matrix1, matrix2, size1, size2 ) {
+
+		if ( position1.distanceToSquared( position2 ) === 0 ) return;
+
+		let count = geometry.drawRange.count;
 
-		for ( let i = 0, il = points.length; i < il; i ++ ) {
+		const points1 = getPoints( size1 );
+		const points2 = getPoints( size2 );
 
-			const vertex1 = points[ i ];
-			const vertex2 = points[ ( i + 1 ) % il ];
+		for ( let i = 0, il = points2.length; i < il; i ++ ) {
 
-			// positions
+			const vertex1_2 = points2[ i ];
+			const vertex2_2 = points2[ ( i + 1 ) % il ];
+			const vertex1_1 = points1[ i ];
+			const vertex2_1 = points1[ ( i + 1 ) % il ];
 
-			vector1.copy( vertex1 ).applyMatrix4( matrix2 ).add( position2 );
-			vector2.copy( vertex2 ).applyMatrix4( matrix2 ).add( position2 );
-			vector3.copy( vertex2 ).applyMatrix4( matrix1 ).add( position1 );
-			vector4.copy( vertex1 ).applyMatrix4( matrix1 ).add( position1 );
+			vector1.copy( vertex1_2 ).applyMatrix4( matrix2 ).add( position2 );
+			vector2.copy( vertex2_2 ).applyMatrix4( matrix2 ).add( position2 );
+			vector3.copy( vertex2_1 ).applyMatrix4( matrix1 ).add( position1 );
+			vector4.copy( vertex1_1 ).applyMatrix4( matrix1 ).add( position1 );
 
 			vector1.toArray( positions.array, ( count + 0 ) * 3 );
 			vector2.toArray( positions.array, ( count + 1 ) * 3 );
@@ -108,12 +336,10 @@ function TubePainter() {
 			vector3.toArray( positions.array, ( count + 4 ) * 3 );
 			vector4.toArray( positions.array, ( count + 5 ) * 3 );
 
-			// normals
-
-			vector1.copy( vertex1 ).applyMatrix4( matrix2 ).normalize();
-			vector2.copy( vertex2 ).applyMatrix4( matrix2 ).normalize();
-			vector3.copy( vertex2 ).applyMatrix4( matrix1 ).normalize();
-			vector4.copy( vertex1 ).applyMatrix4( matrix1 ).normalize();
+			vector1.copy( vertex1_2 ).applyMatrix4( matrix2 ).normalize();
+			vector2.copy( vertex2_2 ).applyMatrix4( matrix2 ).normalize();
+			vector3.copy( vertex2_1 ).applyMatrix4( matrix1 ).normalize();
+			vector4.copy( vertex1_1 ).applyMatrix4( matrix1 ).normalize();
 
 			vector1.toArray( normals.array, ( count + 0 ) * 3 );
 			vector2.toArray( normals.array, ( count + 1 ) * 3 );
@@ -123,15 +349,13 @@ function TubePainter() {
 			vector3.toArray( normals.array, ( count + 4 ) * 3 );
 			vector4.toArray( normals.array, ( count + 5 ) * 3 );
 
-			// colors
-
-			color.toArray( colors.array, ( count + 0 ) * 3 );
-			color.toArray( colors.array, ( count + 1 ) * 3 );
-			color.toArray( colors.array, ( count + 2 ) * 3 );
+			color2.toArray( colors.array, ( count + 0 ) * 3 );
+			color2.toArray( colors.array, ( count + 1 ) * 3 );
+			color1.toArray( colors.array, ( count + 2 ) * 3 );
 
-			color.toArray( colors.array, ( count + 3 ) * 3 );
-			color.toArray( colors.array, ( count + 4 ) * 3 );
-			color.toArray( colors.array, ( count + 5 ) * 3 );
+			color2.toArray( colors.array, ( count + 3 ) * 3 );
+			color1.toArray( colors.array, ( count + 4 ) * 3 );
+			color1.toArray( colors.array, ( count + 5 ) * 3 );
 
 			count += 6;
 
@@ -143,7 +367,9 @@ function TubePainter() {
 
 	//
 
-	const up = new Vector3( 0, 1, 0 );
+	const direction = new Vector3();
+	const normal = new Vector3();
+	const side = new Vector3();
 
 	const point1 = new Vector3();
 	const point2 = new Vector3();
@@ -151,31 +377,139 @@ function TubePainter() {
 	const matrix1 = new Matrix4();
 	const matrix2 = new Matrix4();
 
-	function moveTo( position ) {
+	const lastNormal = new Vector3();
+	const prevDirection = new Vector3();
+	const rotationAxis = new Vector3();
 
-		point1.copy( position );
-		matrix1.lookAt( point2, point1, up );
+	let isFirstSegment = true;
+
+	let endCapStartIndex = null;
+	let endCapVertexCount = 0;
+
+	function calculateRMF() {
+
+		if ( isFirstSegment === true ) {
+
+			if ( Math.abs( direction.y ) < 0.99 ) {
+
+				vector.copy( direction ).multiplyScalar( direction.y );
+				normal.set( 0, 1, 0 ).sub( vector ).normalize();
+
+			} else {
+
+				vector.copy( direction ).multiplyScalar( direction.x );
+				normal.set( 1, 0, 0 ).sub( vector ).normalize();
+
+			}
+
+		} else {
+
+			rotationAxis.crossVectors( prevDirection, direction );
+
+			const rotAxisLength = rotationAxis.length();
+
+			if ( rotAxisLength > 0.0001 ) {
+
+				rotationAxis.divideScalar( rotAxisLength );
+				vector.addVectors( prevDirection, direction );
+				const c1 = - 2.0 / ( 1.0 + prevDirection.dot( direction ) );
+				const dot = lastNormal.dot( vector );
+				normal.copy( lastNormal ).addScaledVector( vector, c1 * dot );
+
+			} else {
+
+				normal.copy( lastNormal );
+
+			}
+
+		}
+
+		side.crossVectors( direction, normal ).normalize();
+		normal.crossVectors( side, direction ).normalize();
+
+		if ( isFirstSegment === false ) {
+
+			const smoothFactor = 0.3;
+
+			normal.lerp( lastNormal, smoothFactor ).normalize();
+			side.crossVectors( direction, normal ).normalize();
+			normal.crossVectors( side, direction ).normalize();
+
+		}
+
+		lastNormal.copy( normal );
+		prevDirection.copy( direction );
+
+		matrix1.makeBasis( side, normal, vector.copy( direction ).negate() );
+
+	}
+
+	function moveTo( position ) {
 
 		point2.copy( position );
-		matrix2.copy( matrix1 );
+
+		lastNormal.set( 0, 1, 0 );
+
+		isFirstSegment = true;
+
+		endCapStartIndex = null;
+		endCapVertexCount = 0;
 
 	}
 
 	function lineTo( position ) {
 
 		point1.copy( position );
-		matrix1.lookAt( point2, point1, up );
 
-		stroke( point1, point2, matrix1, matrix2 );
+		direction.subVectors( point1, point2 );
+
+		const length = direction.length();
+
+		if ( length === 0 ) return;
+
+		direction.normalize();
+
+		calculateRMF();
+
+		if ( isFirstSegment === true ) {
+
+			color2.copy( color1 );
+			size2 = size1;
+
+			matrix2.copy( matrix1 );
+
+			addCap( point2, matrix2, false, size2 );
+
+			// End cap is added immediately after start cap and updated in-place
+			endCapStartIndex = geometry.drawRange.count;
+			addCap( point1, matrix1, true, size1 );
+			endCapVertexCount = geometry.drawRange.count - endCapStartIndex;
+
+		}
+
+		stroke( point1, point2, matrix1, matrix2, size1, size2 );
+
+		updateEndCap( point1, matrix1, size1 );
 
 		point2.copy( point1 );
 		matrix2.copy( matrix1 );
 
+		color2.copy( color1 );
+		size2 = size1;
+
+		isFirstSegment = false;
+
 	}
 
 	function setSize( value ) {
 
-		size = value;
+		size1 = value;
+
+	}
+
+	function setColor( value ) {
+
+		color1.copy( value );
 
 	}
 
@@ -199,7 +533,7 @@ function TubePainter() {
 		colors.addUpdateRange( start * 3, ( end - start ) * 3 );
 		colors.needsUpdate = true;
 
-		count = geometry.drawRange.count;
+		count = end;
 
 	}
 
@@ -241,6 +575,15 @@ function TubePainter() {
 		 */
 		setSize: setSize,
 
+		/**
+		 * Sets the color of newly rendered tube segments.
+		 *
+		 * @method
+		 * @name TubePainter#setColor
+		 * @param {Color} color The color.
+		 */
+		setColor: setColor,
+
 		/**
 		 * Updates the internal geometry buffers so the new painted
 		 * segments are rendered.

package/examples/jsm/modifiers/SimplifyModifier.js

@@ -14,7 +14,7 @@ const _cb = new Vector3(), _ab = new Vector3();
  * This class can be used to modify a geometry by simplifying it. A typical use
  * case for such a modifier is automatic LOD generation.
  *
- * The implementation is based on [Progressive Mesh type Polygon Reduction Algorithm]{@link https://web.archive.org/web/20230610044040/http://www.melax.com/polychop/}
+ * The implementation is based on [Progressive Mesh type Polygon Reduction Algorithm](https://web.archive.org/web/20230610044040/http://www.melax.com/polychop/)
  * by Stan Melax in 1998.
  *
  * ```js

package/examples/jsm/objects/ReflectorForSSRPass.js

@@ -387,6 +387,7 @@ ReflectorForSSRPass.ReflectorShader = {
  * @property {number} [clipBias=0] - The clip bias.
  * @property {Object} [shader] - Can be used to pass in a custom shader that defines how the reflective view is projected onto the reflector's geometry.
  * @property {boolean} [useDepthTexture=true] - Whether to store depth values in a texture or not.
+ * @property {Vector2} [resolution] - Resolution for the Reflector Pass.
  **/
 
 export { ReflectorForSSRPass };

package/examples/jsm/objects/Sky.js

@@ -8,7 +8,7 @@ import {
 } from 'three';
 
 /**
- * Represents a skydome for scene backgrounds. Based on [A Practical Analytic Model for Daylight]{@link https://www.researchgate.net/publication/220720443_A_Practical_Analytic_Model_for_Daylight}
+ * Represents a skydome for scene backgrounds. Based on [A Practical Analytic Model for Daylight](https://www.researchgate.net/publication/220720443_A_Practical_Analytic_Model_for_Daylight)
  * aka The Preetham Model, the de facto standard for analytical skydomes.
  *
  * Note that this class can only be used with {@link WebGLRenderer}.

package/examples/jsm/objects/SkyMesh.js

@@ -9,7 +9,7 @@ import {
 import { Fn, float, vec3, acos, add, mul, clamp, cos, dot, exp, max, mix, modelViewProjection, normalize, positionWorld, pow, smoothstep, sub, varyingProperty, vec4, uniform, cameraPosition } from 'three/tsl';
 
 /**
- * Represents a skydome for scene backgrounds. Based on [A Practical Analytic Model for Daylight]{@link https://www.researchgate.net/publication/220720443_A_Practical_Analytic_Model_for_Daylight}
+ * Represents a skydome for scene backgrounds. Based on [A Practical Analytic Model for Daylight](https://www.researchgate.net/publication/220720443_A_Practical_Analytic_Model_for_Daylight)
  * aka The Preetham Model, the de facto standard for analytical skydomes.
  *
  * Note that this class can only be used with {@link WebGLRenderer}.

package/examples/jsm/objects/Water.js

@@ -21,9 +21,9 @@ import {
  *
  * 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 { Water } from 'three/addons/objects/Water.js';

package/examples/jsm/objects/WaterMesh.js

@@ -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';
@@ -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
 
@@ -161,7 +161,7 @@ class WaterMesh extends Mesh {
 
 			const mirrorSampler = reflector();
 			mirrorSampler.uvNode = mirrorSampler.uvNode.add( distortion );
-			mirrorSampler.resolution = this.resolution;
+			mirrorSampler.reflector.resolutionScale = this.resolutionScale;
 
 			this.add( mirrorSampler.target );
 
@@ -183,7 +183,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/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/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 );
@@ -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 );
 
@@ -376,10 +378,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 );
 
 		}
 
@@ -420,10 +423,9 @@ class UnrealBloomPass extends Pass {
 						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 );
 				}`
 		} );