@plastic-software/three 0.179.0 → 0.180.0

package/examples/jsm/tsl/display/hashBlur.js

@@ -1,8 +1,15 @@
-import { float, Fn, vec2, uv, sin, rand, degrees, cos, Loop, vec4, premultiplyAlpha, unpremultiplyAlpha } from 'three/tsl';
+import { float, Fn, vec2, uv, sin, rand, degrees, cos, Loop, vec4, premultiplyAlpha, unpremultiplyAlpha, convertToTexture, nodeObject } from 'three/tsl';
 
 /**
  * Applies a hash blur effect to the given texture node.
  *
+ * The approach of this blur is different compared to Gaussian and box blur since
+ * it does not rely on a kernel to apply a convolution. Instead, it reads the base
+ * texture multiple times in a random pattern and then averages the samples. A
+ * typical artifact of this technique is a slightly noisy appearance of the blur which
+ * can be mitigated by increasing the number of iterations (see `repeats` parameter).
+ * Compared to Gaussian blur, hash blur requires just a single pass.
+ *
  * Reference: {@link https://www.shadertoy.com/view/4lXXWn}.
  *
  * @function
@@ -10,42 +17,32 @@ import { float, Fn, vec2, uv, sin, rand, degrees, cos, Loop, vec4, premultiplyAl
  * @param {Node<float>} [bluramount=float(0.1)] - This node determines the amount of blur.
  * @param {Object} [options={}] - Additional options for the hash blur effect.
  * @param {Node<float>} [options.repeats=float(45)] - The number of iterations for the blur effect.
- * @param {Node<vec4>} [options.mask=null] - A mask node to control the alpha blending of the blur.
  * @param {boolean} [options.premultipliedAlpha=false] - Whether to use premultiplied alpha for the blur effect.
  * @return {Node<vec4>} The blurred texture node.
  */
 export const hashBlur = /*#__PURE__*/ Fn( ( [ textureNode, bluramount = float( 0.1 ), options = {} ] ) => {
 
-	const {
-		repeats = float( 45 ),
-		mask = null,
-		premultipliedAlpha = false
-	} = options;
-
-	const draw = ( uv ) => {
-
-		let sample = textureNode.sample( uv );
-
-		if ( mask !== null ) {
+	textureNode = convertToTexture( textureNode );
 
-			const alpha = mask.sample( uv ).x;
+	const repeats = nodeObject( options.repeats ) || float( 45 );
+	const premultipliedAlpha = options.premultipliedAlpha || false;
 
-			sample = vec4( sample.rgb, sample.a.mul( alpha ) );
+	const tap = ( uv ) => {
 
-		}
+		const sample = textureNode.sample( uv );
 
 		return premultipliedAlpha ? premultiplyAlpha( sample ) : sample;
 
 	};
 
 	const targetUV = textureNode.uvNode || uv();
-	const blurred_image = vec4( 0. ).toVar();
+	const blurred_image = vec4( 0. );
 
 	Loop( { start: 0., end: repeats, type: 'float' }, ( { i } ) => {
 
 		const q = vec2( vec2( cos( degrees( i.div( repeats ).mul( 360. ) ) ), sin( degrees( i.div( repeats ).mul( 360. ) ) ) ).mul( rand( vec2( i, targetUV.x.add( targetUV.y ) ) ).add( bluramount ) ) );
 		const uv2 = vec2( targetUV.add( q.mul( bluramount ) ) );
-		blurred_image.addAssign( draw( uv2 ) );
+		blurred_image.addAssign( tap( uv2 ) );
 
 	} );
 

package/examples/jsm/utils/BufferGeometryUtils.js

@@ -446,7 +446,7 @@ function deepCloneAttribute( attribute ) {
  * single {@link InterleavedBuffer} instance. All attributes must have compatible types.
  *
  * @param {Array<BufferAttribute>} attributes - The attributes to interleave.
- * @return {Array<InterleavedBufferAttribute>} An array of interleaved attributes. If interleave does not succeed, the method returns `null`.
+ * @return {?Array<InterleavedBufferAttribute>} An array of interleaved attributes. If interleave does not succeed, the method returns `null`.
  */
 function interleaveAttributes( attributes ) {
 

package/examples/jsm/utils/ShadowMapViewerGPU.js

@@ -7,9 +7,10 @@ import {
 	OrthographicCamera,
 	PlaneGeometry,
 	Scene,
-	Texture
+	DepthTexture,
+	Vector2
 } from 'three';
-import { texture } from 'three/tsl';
+import { uv, uniform, textureLoad } from 'three/tsl';
 
 /**
  * This is a helper for visualising a given light's shadow map.
@@ -60,8 +61,10 @@ class ShadowMapViewer {
 
 		const material = new NodeMaterial();
 
-		const shadowMapUniform = texture( new Texture() );
-		material.fragmentNode = shadowMapUniform;
+		const textureDimension = uniform( new Vector2() );
+
+		const shadowMapUniform = textureLoad( new DepthTexture(), uv().flipY().mul( textureDimension ) );
+		material.fragmentNode = shadowMapUniform.x.oneMinus();
 
 		const plane = new PlaneGeometry( frame.width, frame.height );
 		const mesh = new Mesh( plane, material );
@@ -173,7 +176,11 @@ class ShadowMapViewer {
 				//always end up with the scene's first added shadow casting light's shadowMap
 				//in the shader
 				//See: https://github.com/mrdoob/three.js/issues/5932
-				shadowMapUniform.value = light.shadow.map.texture;
+
+				const depthTexture = light.shadow.map.depthTexture;
+
+				shadowMapUniform.value = depthTexture;
+				textureDimension.value.set( depthTexture.width, depthTexture.height );
 
 				currentAutoClear = renderer.autoClear;
 				renderer.autoClear = false; // To allow render overlay

package/examples/jsm/webxr/OculusHandModel.js

@@ -122,7 +122,7 @@ class OculusHandModel extends Object3D {
 	/**
 	 * Returns the pointer position which is the position of the index finger tip.
 	 *
-	 * @return {Vector3|null} The pointer position. Returns `null` if not index finger tip joint was found.
+	 * @return {?Vector3} The pointer position. Returns `null` if not index finger tip joint was found.
 	 */
 	getPointerPosition() {
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-software/three",
-  "version": "0.179.0",
+  "version": "0.180.0",
   "description": "JavaScript 3D library",
   "type": "module",
   "main": "./build/three.cjs",

package/src/Three.Core.js

@@ -34,6 +34,7 @@ export { CompressedCubeTexture } from './textures/CompressedCubeTexture.js';
 export { CubeTexture } from './textures/CubeTexture.js';
 export { CanvasTexture } from './textures/CanvasTexture.js';
 export { DepthTexture } from './textures/DepthTexture.js';
+export { ExternalTexture } from './textures/ExternalTexture.js';
 export { Texture } from './textures/Texture.js';
 export * from './geometries/Geometries.js';
 export * from './materials/Materials.js';

package/src/Three.TSL.js

@@ -97,6 +97,7 @@ export const buffer = TSL.buffer;
 export const bufferAttribute = TSL.bufferAttribute;
 export const bumpMap = TSL.bumpMap;
 export const burn = TSL.burn;
+export const builtin = TSL.builtin;
 export const bvec2 = TSL.bvec2;
 export const bvec3 = TSL.bvec3;
 export const bvec4 = TSL.bvec4;
@@ -111,6 +112,7 @@ export const cameraPosition = TSL.cameraPosition;
 export const cameraProjectionMatrix = TSL.cameraProjectionMatrix;
 export const cameraProjectionMatrixInverse = TSL.cameraProjectionMatrixInverse;
 export const cameraViewMatrix = TSL.cameraViewMatrix;
+export const cameraViewport = TSL.cameraViewport;
 export const cameraWorldMatrix = TSL.cameraWorldMatrix;
 export const cbrt = TSL.cbrt;
 export const cdl = TSL.cdl;
@@ -177,6 +179,8 @@ export const faceDirection = TSL.faceDirection;
 export const faceForward = TSL.faceForward;
 export const faceforward = TSL.faceforward;
 export const float = TSL.float;
+export const floatBitsToInt = TSL.floatBitsToInt;
+export const floatBitsToUint = TSL.floatBitsToUint;
 export const floor = TSL.floor;
 export const fog = TSL.fog;
 export const fract = TSL.fract;
@@ -219,6 +223,7 @@ export const instancedBufferAttribute = TSL.instancedBufferAttribute;
 export const instancedDynamicBufferAttribute = TSL.instancedDynamicBufferAttribute;
 export const instancedMesh = TSL.instancedMesh;
 export const int = TSL.int;
+export const intBitsToFloat = TSL.intBitsToFloat;
 export const inverse = TSL.inverse;
 export const inverseSqrt = TSL.inverseSqrt;
 export const inversesqrt = TSL.inversesqrt;
@@ -465,6 +470,7 @@ export const saturate = TSL.saturate;
 export const saturation = TSL.saturation;
 export const screen = TSL.screen;
 export const screenCoordinate = TSL.screenCoordinate;
+export const screenDPR = TSL.screenDPR;
 export const screenSize = TSL.screenSize;
 export const screenUV = TSL.screenUV;
 export const scriptable = TSL.scriptable;
@@ -504,15 +510,35 @@ export const storageTexture = TSL.storageTexture;
 export const string = TSL.string;
 export const struct = TSL.struct;
 export const sub = TSL.sub;
+export const subgroupAdd = TSL.subgroupAdd;
+export const subgroupAll = TSL.subgroupAll;
+export const subgroupAnd = TSL.subgroupAnd;
+export const subgroupAny = TSL.subgroupAny;
+export const subgroupBallot = TSL.subgroupBallot;
+export const subgroupBroadcast = TSL.subgroupBroadcast;
+export const subgroupBroadcastFirst = TSL.subgroupBroadcastFirst;
 export const subBuild = TSL.subBuild;
+export const subgroupElect = TSL.subgroupElect;
+export const subgroupExclusiveAdd = TSL.subgroupExclusiveAdd;
+export const subgroupExclusiveMul = TSL.subgroupExclusiveMul;
+export const subgroupInclusiveAdd = TSL.subgroupInclusiveAdd;
+export const subgroupInclusiveMul = TSL.subgroupInclusiveMul;
 export const subgroupIndex = TSL.subgroupIndex;
+export const subgroupMax = TSL.subgroupMax;
+export const subgroupMin = TSL.subgroupMin;
+export const subgroupMul = TSL.subgroupMul;
+export const subgroupOr = TSL.subgroupOr;
+export const subgroupShuffle = TSL.subgroupShuffle;
+export const subgroupShuffleDown = TSL.subgroupShuffleDown;
+export const subgroupShuffleUp = TSL.subgroupShuffleUp;
+export const subgroupShuffleXor = TSL.subgroupShuffleXor;
 export const subgroupSize = TSL.subgroupSize;
+export const subgroupXor = TSL.subgroupXor;
 export const tan = TSL.tan;
 export const tangentGeometry = TSL.tangentGeometry;
 export const tangentLocal = TSL.tangentLocal;
 export const tangentView = TSL.tangentView;
 export const tangentWorld = TSL.tangentWorld;
-export const temp = TSL.temp;
 export const texture = TSL.texture;
 export const texture3D = TSL.texture3D;
 export const textureBarrier = TSL.textureBarrier;
@@ -524,9 +550,6 @@ export const textureSize = TSL.textureSize;
 export const textureStore = TSL.textureStore;
 export const thickness = TSL.thickness;
 export const time = TSL.time;
-export const timerDelta = TSL.timerDelta;
-export const timerGlobal = TSL.timerGlobal;
-export const timerLocal = TSL.timerLocal;
 export const toneMapping = TSL.toneMapping;
 export const toneMappingExposure = TSL.toneMappingExposure;
 export const toonOutlinePass = TSL.toonOutlinePass;
@@ -543,10 +566,12 @@ export const triplanarTexture = TSL.triplanarTexture;
 export const triplanarTextures = TSL.triplanarTextures;
 export const trunc = TSL.trunc;
 export const uint = TSL.uint;
+export const uintBitsToFloat = TSL.uintBitsToFloat;
 export const uniform = TSL.uniform;
 export const uniformArray = TSL.uniformArray;
 export const uniformCubeTexture = TSL.uniformCubeTexture;
 export const uniformGroup = TSL.uniformGroup;
+export const uniformFlow = TSL.uniformFlow;
 export const uniformTexture = TSL.uniformTexture;
 export const unpremultiplyAlpha = TSL.unpremultiplyAlpha;
 export const userData = TSL.userData;

package/src/animation/AnimationClip.js

@@ -67,6 +67,14 @@ class AnimationClip {
 		 */
 		this.uuid = generateUUID();
 
+		/**
+		 * An object that can be used to store custom data about the animation clip.
+		 * It should not hold references to functions as these will not be cloned.
+		 *
+		 * @type {Object}
+		 */
+		this.userData = {};
+
 		// this means it should figure out its duration by scanning the tracks
 		if ( this.duration < 0 ) {
 
@@ -98,6 +106,8 @@ class AnimationClip {
 		const clip = new this( json.name, json.duration, tracks, json.blendMode );
 		clip.uuid = json.uuid;
 
+		clip.userData = JSON.parse( json.userData || '{}' );
+
 		return clip;
 
 	}
@@ -120,7 +130,8 @@ class AnimationClip {
 			'duration': clip.duration,
 			'tracks': tracks,
 			'uuid': clip.uuid,
-			'blendMode': clip.blendMode
+			'blendMode': clip.blendMode,
+			'userData': JSON.stringify( clip.userData ),
 
 		};
 
@@ -515,7 +526,11 @@ class AnimationClip {
 
 		}
 
-		return new this.constructor( this.name, this.duration, tracks, this.blendMode );
+		const clip = new this.constructor( this.name, this.duration, tracks, this.blendMode );
+
+		clip.userData = JSON.parse( JSON.stringify( this.userData ) );
+
+		return clip;
 
 	}
 

package/src/constants.js

@@ -1,4 +1,4 @@
-export const REVISION = '179';
+export const REVISION = '180';
 
 /**
  * Represents mouse buttons and interaction types in context of controls.
@@ -724,6 +724,14 @@ export const UnsignedInt248Type = 1020;
  */
 export const UnsignedInt5999Type = 35902;
 
+/**
+ * An unsigned int 10_11_11 (packed) data type for textures.
+ *
+ * @type {number}
+ * @constant
+ */
+export const UnsignedInt101111Type = 35899;
+
 /**
  * Discards the red, green and blue components and reads just the alpha component.
  *
@@ -1665,6 +1673,6 @@ export const InterpolationSamplingMode = {
  * @property {string} NORMAL - Normal sampling mode.
  * @property {string} CENTROID - Centroid sampling mode.
  * @property {string} SAMPLE - Sample-specific sampling mode.
- * @property {string} FLAT_FIRST - Flat interpolation using the first vertex.
- * @property {string} FLAT_EITHER - Flat interpolation using either vertex.
+ * @property {string} FIRST - Flat interpolation using the first vertex.
+ * @property {string} EITHER - Flat interpolation using either vertex.
  */

package/src/core/BufferGeometry.js

@@ -156,7 +156,7 @@ class BufferGeometry extends EventDispatcher {
 		/**
 		 * Bounding box for the geometry which can be calculated with `computeBoundingBox()`.
 		 *
-		 * @type {Box3}
+		 * @type {?Box3}
 		 * @default null
 		 */
 		this.boundingBox = null;
@@ -164,7 +164,7 @@ class BufferGeometry extends EventDispatcher {
 		/**
 		 * Bounding sphere for the geometry which can be calculated with `computeBoundingSphere()`.
 		 *
-		 * @type {Sphere}
+		 * @type {?Sphere}
 		 * @default null
 		 */
 		this.boundingSphere = null;

package/src/extras/TextureUtils.js

@@ -1,4 +1,4 @@
-import { AlphaFormat, RedFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBFormat, RGBAFormat, RGBAIntegerFormat, RGB_S3TC_DXT1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGB_PVRTC_2BPPV1_Format, RGBA_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGB_ETC1_Format, RGB_ETC2_Format, RGBA_ETC2_EAC_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_10x10_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_BPTC_Format, RGB_BPTC_SIGNED_Format, RGB_BPTC_UNSIGNED_Format, RED_RGTC1_Format, SIGNED_RED_RGTC1_Format, RED_GREEN_RGTC2_Format, SIGNED_RED_GREEN_RGTC2_Format, UnsignedByteType, ByteType, UnsignedShortType, ShortType, HalfFloatType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedIntType, IntType, FloatType, UnsignedInt5999Type } from '../constants.js';
+import { AlphaFormat, RedFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBFormat, RGBAFormat, RGBAIntegerFormat, RGB_S3TC_DXT1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGB_PVRTC_2BPPV1_Format, RGBA_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGB_ETC1_Format, RGB_ETC2_Format, RGBA_ETC2_EAC_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_10x10_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_BPTC_Format, RGB_BPTC_SIGNED_Format, RGB_BPTC_UNSIGNED_Format, RED_RGTC1_Format, SIGNED_RED_RGTC1_Format, RED_GREEN_RGTC2_Format, SIGNED_RED_GREEN_RGTC2_Format, UnsignedByteType, ByteType, UnsignedShortType, ShortType, HalfFloatType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedIntType, IntType, FloatType, UnsignedInt5999Type, UnsignedInt101111Type } from '../constants.js';
 
 /**
  * Scales the texture as large as possible within its surface without cropping
@@ -215,6 +215,7 @@ function getTextureTypeByteLength( type ) {
 		case FloatType:
 			return { byteLength: 4, components: 1 };
 		case UnsignedInt5999Type:
+		case UnsignedInt101111Type:
 			return { byteLength: 4, components: 3 };
 
 	}

package/src/extras/lib/earcut.js

@@ -487,7 +487,7 @@ function pointInTriangleExceptFirst(ax, ay, bx, by, cx, cy, px, py) {
 
 // check if a diagonal between two polygon nodes is valid (lies in polygon interior)
 function isValidDiagonal(a, b) {
-    return a.next.i !== b.i && a.prev.i !== b.i && !intersectsPolygon(a, b) && // dones't intersect other edges
+    return a.next.i !== b.i && a.prev.i !== b.i && !intersectsPolygon(a, b) && // doesn't intersect other edges
            (locallyInside(a, b) && locallyInside(b, a) && middleInside(a, b) && // locally visible
             (area(a.prev, a, b.prev) || area(a, b.prev, b)) || // does not create opposite-facing sectors
             equals(a, b) && area(a.prev, a, a.next) > 0 && area(b.prev, b, b.next) > 0); // special zero-length case

package/src/lights/webgpu/ProjectorLight.js

@@ -24,7 +24,7 @@ class ProjectorLight extends SpotLight {
 		/**
 		 * Aspect ratio of the light. Set to `null` to use the texture aspect ratio.
 		 *
-		 * @type {number}
+		 * @type {?number}
 		 * @default null
 		 */
 		this.aspect = null;

package/src/materials/Material.js

@@ -664,6 +664,18 @@ class Material extends EventDispatcher {
 
 		}
 
+		if ( this.sheenColorMap && this.sheenColorMap.isTexture ) {
+
+			data.sheenColorMap = this.sheenColorMap.toJSON( meta ).uuid;
+
+		}
+
+		if ( this.sheenRoughnessMap && this.sheenRoughnessMap.isTexture ) {
+
+			data.sheenRoughnessMap = this.sheenRoughnessMap.toJSON( meta ).uuid;
+
+		}
+
 		if ( this.dispersion !== undefined ) data.dispersion = this.dispersion;
 
 		if ( this.iridescence !== undefined ) data.iridescence = this.iridescence;

package/src/materials/MeshDistanceMaterial.js

@@ -7,7 +7,7 @@ import { Material } from './Material.js';
  * Can also be used to customize the shadow casting of an object by assigning
  * an instance of `MeshDistanceMaterial` to {@link Object3D#customDistanceMaterial}.
  * The following examples demonstrates this approach in order to ensure
- * transparent parts of objects do no cast shadows.
+ * transparent parts of objects do not cast shadows.
  *
  * @augments Material
  */

package/src/materials/nodes/PointsNodeMaterial.js

@@ -1,18 +1,36 @@
 import SpriteNodeMaterial from './SpriteNodeMaterial.js';
-import { viewport } from '../../nodes/display/ScreenNode.js';
+import { viewportSize, screenDPR } from '../../nodes/display/ScreenNode.js';
 import { positionGeometry, positionLocal, positionView } from '../../nodes/accessors/Position.js';
 import { modelViewMatrix } from '../../nodes/accessors/ModelNode.js';
 import { materialPointSize } from '../../nodes/accessors/MaterialNode.js';
 import { rotate } from '../../nodes/utils/RotateNode.js';
-import { float, vec2, vec3, vec4 } from '../../nodes/tsl/TSLBase.js';
+import { float, uniform, vec2, vec3, vec4 } from '../../nodes/tsl/TSLBase.js';
 
 import { PointsMaterial } from '../PointsMaterial.js';
+import { Vector2 } from '../../math/Vector2.js';
 
 const _defaultValues = /*@__PURE__*/ new PointsMaterial();
+const _size = /*@__PURE__*/ new Vector2();
 
 /**
  * Node material version of {@link PointsMaterial}.
  *
+ * This material can be used in two ways:
+ *
+ * - By rendering point primitives with {@link Points}. Since WebGPU only supports point primitives
+ * with a pixel size of `1`, it's not possible to define a size.
+ *
+ * ```js
+ * const pointCloud = new THREE.Points( geometry, new THREE.PointsNodeMaterial() );
+ * ```
+ *
+ * - By rendering point primitives with {@link Sprites}. In this case, size is honored,
+ * see {@link PointsNodeMaterial#sizeNode}.
+ *
+ * ```js
+ * const instancedPoints = new THREE.Sprite( new THREE.PointsNodeMaterial( { positionNode: instancedBufferAttribute( positionAttribute ) } ) );
+ * ```
+ *
  * @augments SpriteNodeMaterial
  */
 class PointsNodeMaterial extends SpriteNodeMaterial {
@@ -68,68 +86,95 @@ class PointsNodeMaterial extends SpriteNodeMaterial {
 
 	}
 
-	setupVertex( builder ) {
+	setupVertexSprite( builder ) {
 
-		const mvp = super.setupVertex( builder );
+		const { material, camera } = builder;
+
+		const { rotationNode, scaleNode, sizeNode, sizeAttenuation } = this;
+
+		let mvp = super.setupVertex( builder );
 
 		// skip further processing if the material is not a node material
 
-		if ( builder.material.isNodeMaterial !== true ) {
+		if ( material.isNodeMaterial !== true ) {
 
 			return mvp;
 
 		}
 
-		// ndc space
+		// point size
 
-		const { rotationNode, scaleNode, sizeNode } = this;
+		let pointSize = sizeNode !== null ? vec2( sizeNode ) : materialPointSize;
 
-		const alignedPosition = positionGeometry.xy.toVar();
-		const aspect = viewport.z.div( viewport.w );
+		pointSize = pointSize.mul( screenDPR );
 
-		// rotation
+		// size attenuation
 
-		if ( rotationNode && rotationNode.isNode ) {
+		if ( camera.isPerspectiveCamera && sizeAttenuation === true ) {
 
-			const rotation = float( rotationNode );
+			// follow WebGLRenderer's implementation, and scale by half the canvas height in logical units
 
-			alignedPosition.assign( rotate( alignedPosition, rotation ) );
+			pointSize = pointSize.mul( scale.div( positionView.z.negate() ) );
 
 		}
 
-		// point size
-
-		let pointSize = sizeNode !== null ? vec2( sizeNode ) : materialPointSize;
+		// scale
 
-		if ( this.sizeAttenuation === true ) {
+		if ( scaleNode && scaleNode.isNode ) {
 
-			pointSize = pointSize.mul( pointSize.div( positionView.z.negate() ) );
+			pointSize = pointSize.mul( vec2( scaleNode ) );
 
 		}
 
-		// scale
+		// compute offset
 
-		if ( scaleNode && scaleNode.isNode ) {
+		let offset = positionGeometry.xy;
 
-			pointSize = pointSize.mul( vec2( scaleNode ) );
+		// apply rotation
+
+		if ( rotationNode && rotationNode.isNode ) {
+
+			const rotation = float( rotationNode );
+
+			offset = rotate( offset, rotation );
 
 		}
 
-		alignedPosition.mulAssign( pointSize.mul( 2 ) );
+		// account for point size
+
+		offset = offset.mul( pointSize );
+
+		// scale by viewport size
+
+		offset = offset.div( viewportSize.div( 2 ) );
 
-		alignedPosition.assign( alignedPosition.div( viewport.z ) );
-		alignedPosition.y.assign( alignedPosition.y.mul( aspect ) );
+		// compensate for the perspective divide
 
-		// back to clip space
-		alignedPosition.assign( alignedPosition.mul( mvp.w ) );
+		offset = offset.mul( mvp.w );
 
-		//clipPos.xy += offset;
-		mvp.addAssign( vec4( alignedPosition, 0, 0 ) );
+		// add offset
+
+		mvp = mvp.add( vec4( offset, 0, 0 ) );
 
 		return mvp;
 
 	}
 
+	setupVertex( builder ) {
+
+		if ( builder.object.isPoints ) {
+
+			return super.setupVertex( builder );
+
+
+		} else {
+
+			return this.setupVertexSprite( builder );
+
+		}
+
+	}
+
 	/**
 	 * Whether alpha to coverage should be used or not.
 	 *
@@ -155,4 +200,12 @@ class PointsNodeMaterial extends SpriteNodeMaterial {
 
 }
 
+const scale = /*@__PURE__*/ uniform( 1 ).onFrameUpdate( function ( { renderer } ) {
+
+	const size = renderer.getSize( _size ); // logical units
+
+	this.value = 0.5 * size.y;
+
+} );
+
 export default PointsNodeMaterial;

package/src/materials/nodes/SpriteNodeMaterial.js

@@ -1,5 +1,4 @@
 import NodeMaterial from './NodeMaterial.js';
-import { cameraProjectionMatrix } from '../../nodes/accessors/Camera.js';
 import { materialRotation } from '../../nodes/accessors/MaterialNode.js';
 import { modelViewMatrix, modelWorldMatrix } from '../../nodes/accessors/ModelNode.js';
 import { positionGeometry } from '../../nodes/accessors/Position.js';
@@ -111,9 +110,7 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 		const { object, camera } = builder;
 
-		const sizeAttenuation = this.sizeAttenuation;
-
-		const { positionNode, rotationNode, scaleNode } = this;
+		const { positionNode, rotationNode, scaleNode, sizeAttenuation } = this;
 
 		const mvPosition = modelViewMatrix.mul( vec3( positionNode || 0 ) );
 
@@ -125,18 +122,9 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 		}
 
-		if ( sizeAttenuation === false ) {
-
-			if ( camera.isPerspectiveCamera ) {
-
-				scale = scale.mul( mvPosition.z.negate() );
-
-			} else {
-
-				const orthoScale = float( 2.0 ).div( cameraProjectionMatrix.element( 1 ).element( 1 ) );
-				scale = scale.mul( orthoScale.mul( 2 ) );
+		if ( camera.isPerspectiveCamera && sizeAttenuation === false ) {
 
-			}
+			scale = scale.mul( mvPosition.z.negate() );
 
 		}
 

package/src/materials/nodes/manager/NodeMaterialObserver.js

@@ -548,7 +548,7 @@ class NodeMaterialObserver {
 	 *
 	 * @param {LightsNode} lightsNode - The lights node.
 	 * @param {number} renderId - The render ID.
-	 * @return {Array} The lights for the given lights node and render ID.
+	 * @return {Array<Object>} The lights for the given lights node and render ID.
 	 */
 	getLights( lightsNode, renderId ) {
 

package/src/math/ColorManagement.js

@@ -34,7 +34,7 @@ function createColorManagement() {
 		 *	- luminanceCoefficients: RGB luminance coefficients
 		 *
 		 * Optional:
-		 *  - outputColorSpaceConfig: { drawingBufferColorSpace: ColorSpace }
+		 *  - outputColorSpaceConfig: { drawingBufferColorSpace: ColorSpace, toneMappingMode: 'extended' | 'standard' }
 		 *  - workingColorSpaceConfig: { unpackColorSpace: ColorSpace }
 		 *
 		 * Reference:
@@ -103,6 +103,12 @@ function createColorManagement() {
 
 		},
 
+		getToneMappingMode: function ( colorSpace ) {
+
+			return this.spaces[ colorSpace ].outputColorSpaceConfig.toneMappingMode || 'standard';
+
+		},
+
 		getLuminanceCoefficients: function ( target, colorSpace = this.workingColorSpace ) {
 
 			return target.fromArray( this.spaces[ colorSpace ].luminanceCoefficients );

package/src/nodes/Nodes.js

@@ -57,6 +57,9 @@ export { default as MemberNode } from './utils/MemberNode.js';
 export { default as DebugNode } from './utils/DebugNode.js';
 export { default as EventNode } from './utils/EventNode.js';
 
+// math
+export { default as BitcastNode } from './math/BitcastNode.js';
+
 // accessors
 export { default as UniformArrayNode } from './accessors/UniformArrayNode.js';
 export { default as BufferAttributeNode } from './accessors/BufferAttributeNode.js';