@plastic-software/three 0.167.3 → 0.174.0

package/examples/jsm/tsl/lighting/TiledLightsNode.js

@@ -0,0 +1,395 @@
+import { DataTexture, FloatType, RGBAFormat, Vector2, Vector3, LightsNode, NodeUpdateType } from 'three/webgpu';
+
+import {
+	attributeArray, nodeProxy, int, float, vec2, ivec2, ivec4, uniform, Break, Loop, positionView,
+	Fn, If, Return, textureLoad, instanceIndex, screenCoordinate, directPointLight
+} from 'three/tsl';
+
+export const circleIntersectsAABB = /*@__PURE__*/ Fn( ( [ circleCenter, radius, minBounds, maxBounds ] ) => {
+
+	// Find the closest point on the AABB to the circle's center using method chaining
+	const closestX = minBounds.x.max( circleCenter.x.min( maxBounds.x ) );
+	const closestY = minBounds.y.max( circleCenter.y.min( maxBounds.y ) );
+
+	// Compute the distance between the circle's center and the closest point
+	const distX = circleCenter.x.sub( closestX );
+	const distY = circleCenter.y.sub( closestY );
+
+	// Calculate the squared distance
+	const distSquared = distX.mul( distX ).add( distY.mul( distY ) );
+
+	return distSquared.lessThanEqual( radius.mul( radius ) );
+
+} ).setLayout( {
+	name: 'circleIntersectsAABB',
+	type: 'bool',
+	inputs: [
+		{ name: 'circleCenter', type: 'vec2' },
+		{ name: 'radius', type: 'float' },
+		{ name: 'minBounds', type: 'vec2' },
+		{ name: 'maxBounds', type: 'vec2' }
+	]
+} );
+
+const _vector3 = /*@__PURE__*/ new Vector3();
+const _size = /*@__PURE__*/ new Vector2();
+
+class TiledLightsNode extends LightsNode {
+
+	static get type() {
+
+		return 'TiledLightsNode';
+
+	}
+
+	constructor( maxLights = 1024, tileSize = 32 ) {
+
+		super();
+
+		this.materialLights = [];
+		this.tiledLights = [];
+
+		this.maxLights = maxLights;
+		this.tileSize = tileSize;
+
+		this._bufferSize = null;
+		this._lightIndexes = null;
+		this._screenTileIndex = null;
+		this._compute = null;
+		this._lightsTexture = null;
+
+		this._lightsCount = uniform( 0, 'int' );
+		this._tileLightCount = 8;
+		this._screenSize = uniform( new Vector2() );
+		this._cameraProjectionMatrix = uniform( 'mat4' );
+		this._cameraViewMatrix = uniform( 'mat4' );
+
+		this.updateBeforeType = NodeUpdateType.RENDER;
+
+	}
+
+	customCacheKey() {
+
+		return this._compute.getCacheKey() + super.customCacheKey();
+
+	}
+
+	updateLightsTexture() {
+
+		const { _lightsTexture: lightsTexture, tiledLights } = this;
+
+		const data = lightsTexture.image.data;
+		const lineSize = lightsTexture.image.width * 4;
+
+		this._lightsCount.value = tiledLights.length;
+
+		for ( let i = 0; i < tiledLights.length; i ++ ) {
+
+			const light = tiledLights[ i ];
+
+			// world position
+
+			_vector3.setFromMatrixPosition( light.matrixWorld );
+
+			// store data
+
+			const offset = i * 4;
+
+			data[ offset + 0 ] = _vector3.x;
+			data[ offset + 1 ] = _vector3.y;
+			data[ offset + 2 ] = _vector3.z;
+			data[ offset + 3 ] = light.distance;
+
+			data[ lineSize + offset + 0 ] = light.color.r * light.intensity;
+			data[ lineSize + offset + 1 ] = light.color.g * light.intensity;
+			data[ lineSize + offset + 2 ] = light.color.b * light.intensity;
+			data[ lineSize + offset + 3 ] = light.decay;
+
+		}
+
+		lightsTexture.needsUpdate = true;
+
+	}
+
+	updateBefore( frame ) {
+
+		const { renderer, camera } = frame;
+
+		this.updateProgram( renderer );
+
+		this.updateLightsTexture( camera );
+
+		this._cameraProjectionMatrix.value = camera.projectionMatrix;
+		this._cameraViewMatrix.value = camera.matrixWorldInverse;
+
+		renderer.getDrawingBufferSize( _size );
+		this._screenSize.value.copy( _size );
+
+		renderer.compute( this._compute );
+
+	}
+
+	setLights( lights ) {
+
+		const { tiledLights, materialLights } = this;
+
+		let materialindex = 0;
+		let tiledIndex = 0;
+
+		for ( const light of lights ) {
+
+			if ( light.isPointLight === true ) {
+
+				tiledLights[ tiledIndex ++ ] = light;
+
+			} else {
+
+				materialLights[ materialindex ++ ] = light;
+
+			}
+
+		}
+
+		materialLights.length = materialindex;
+		tiledLights.length = tiledIndex;
+
+		return super.setLights( materialLights );
+
+	}
+
+	getBlock( block = 0 ) {
+
+		return this._lightIndexes.element( this._screenTileIndex.mul( int( 2 ).add( int( block ) ) ) );
+
+	}
+
+	getTile( element ) {
+
+		element = int( element );
+
+		const stride = int( 4 );
+		const tileOffset = element.div( stride );
+		const tileIndex = this._screenTileIndex.mul( int( 2 ) ).add( tileOffset );
+
+		return this._lightIndexes.element( tileIndex ).element( element.modInt( stride ) );
+
+	}
+
+	getLightData( index ) {
+
+		index = int( index );
+
+		const dataA = textureLoad( this._lightsTexture, ivec2( index, 0 ) );
+		const dataB = textureLoad( this._lightsTexture, ivec2( index, 1 ) );
+
+		const position = dataA.xyz;
+		const viewPosition = this._cameraViewMatrix.mul( position );
+		const distance = dataA.w;
+		const color = dataB.rgb;
+		const decay = dataB.w;
+
+		return {
+			position,
+			viewPosition,
+			distance,
+			color,
+			decay
+		};
+
+	}
+
+	setupLights( builder, lightNodes ) {
+
+		this.updateProgram( builder.renderer );
+
+		//
+
+		const lightingModel = builder.context.reflectedLight;
+
+		// force declaration order, before of the loop
+		lightingModel.directDiffuse.append();
+		lightingModel.directSpecular.append();
+
+		super.setupLights( builder, lightNodes );
+
+		Fn( () => {
+
+			Loop( this._tileLightCount, ( { i } ) => {
+
+				const lightIndex = this.getTile( i );
+
+				If( lightIndex.equal( int( 0 ) ), () => {
+
+					Break();
+
+				} );
+
+				const { color, decay, viewPosition, distance } = this.getLightData( lightIndex.sub( 1 ) );
+
+				builder.lightsNode.setupDirectLight( builder, this, directPointLight( {
+					color,
+					lightVector: viewPosition.sub( positionView ),
+					cutoffDistance: distance,
+					decayExponent: decay
+				} ) );
+
+			} );
+
+		} )().append();
+
+	}
+
+	getBufferFitSize( value ) {
+
+		const multiple = this.tileSize;
+
+		return Math.ceil( value / multiple ) * multiple;
+
+	}
+
+	setSize( width, height ) {
+
+		width = this.getBufferFitSize( width );
+		height = this.getBufferFitSize( height );
+
+		if ( ! this._bufferSize || this._bufferSize.width !== width || this._bufferSize.height !== height ) {
+
+			this.create( width, height );
+
+		}
+
+		return this;
+
+	}
+
+	updateProgram( renderer ) {
+
+		renderer.getDrawingBufferSize( _size );
+
+		const width = this.getBufferFitSize( _size.width );
+		const height = this.getBufferFitSize( _size.height );
+
+		if ( this._bufferSize === null ) {
+
+			this.create( width, height );
+
+		} else if ( this._bufferSize.width !== width || this._bufferSize.height !== height ) {
+
+			this.create( width, height );
+
+		}
+
+	}
+
+	create( width, height ) {
+
+		const { tileSize, maxLights } = this;
+
+		const bufferSize = new Vector2( width, height );
+		const lineSize = Math.floor( bufferSize.width / tileSize );
+		const count = Math.floor( ( bufferSize.width * bufferSize.height ) / tileSize );
+
+		// buffers
+
+		const lightsData = new Float32Array( maxLights * 4 * 2 ); // 2048 lights, 4 elements(rgba), 2 components, 1 component per line (position, distance, color, decay)
+		const lightsTexture = new DataTexture( lightsData, lightsData.length / 8, 2, RGBAFormat, FloatType );
+
+		const lightIndexesArray = new Int32Array( count * 4 * 2 );
+		const lightIndexes = attributeArray( lightIndexesArray, 'ivec4' ).label( 'lightIndexes' );
+
+		// compute
+
+		const getBlock = ( index ) => {
+
+			const tileIndex = instanceIndex.mul( int( 2 ) ).add( int( index ) );
+
+			return lightIndexes.element( tileIndex );
+
+		};
+
+		const getTile = ( elementIndex ) => {
+
+			elementIndex = int( elementIndex );
+
+			const stride = int( 4 );
+			const tileOffset = elementIndex.div( stride );
+			const tileIndex = instanceIndex.mul( int( 2 ) ).add( tileOffset );
+
+			return lightIndexes.element( tileIndex ).element( elementIndex.modInt( stride ) );
+
+		};
+
+		const compute = Fn( () => {
+
+			const { _cameraProjectionMatrix: cameraProjectionMatrix, _bufferSize: bufferSize, _screenSize: screenSize } = this;
+
+			const tiledBufferSize = bufferSize.clone().divideScalar( tileSize ).floor();
+
+			const tileScreen = vec2(
+				instanceIndex.modInt( tiledBufferSize.width ),
+				instanceIndex.div( tiledBufferSize.width )
+			).mul( tileSize ).div( screenSize );
+
+			const blockSize = float( tileSize ).div( screenSize );
+			const minBounds = tileScreen;
+			const maxBounds = minBounds.add( blockSize );
+
+			const index = int( 0 ).toVar();
+
+			getBlock( 0 ).assign( ivec4( 0 ) );
+			getBlock( 1 ).assign( ivec4( 0 ) );
+
+			Loop( this.maxLights, ( { i } ) => {
+
+				If( index.greaterThanEqual( this._tileLightCount ).or( int( i ).greaterThanEqual( int( this._lightsCount ) ) ), () => {
+
+					Return();
+
+				} );
+
+				const { viewPosition, distance } = this.getLightData( i );
+
+				const projectedPosition = cameraProjectionMatrix.mul( viewPosition );
+				const ndc = projectedPosition.div( projectedPosition.w );
+				const screenPosition = ndc.xy.mul( 0.5 ).add( 0.5 ).flipY();
+
+				const distanceFromCamera = viewPosition.z;
+				const pointRadius = distance.div( distanceFromCamera );
+
+				If( circleIntersectsAABB( screenPosition, pointRadius, minBounds, maxBounds ), () => {
+
+					getTile( index ).assign( i.add( int( 1 ) ) );
+					index.addAssign( int( 1 ) );
+
+				} );
+
+			} );
+
+		} )().compute( count );
+
+		// screen coordinate lighting indexes
+
+		const screenTile = screenCoordinate.div( tileSize ).floor().toVar();
+		const screenTileIndex = screenTile.x.add( screenTile.y.mul( lineSize ) );
+
+		// assigns
+
+		this._bufferSize = bufferSize;
+		this._lightIndexes = lightIndexes;
+		this._screenTileIndex = screenTileIndex;
+		this._compute = compute;
+		this._lightsTexture = lightsTexture;
+
+	}
+
+	get hasLights() {
+
+		return super.hasLights || this.tiledLights.length > 0;
+
+	}
+
+}
+
+export default TiledLightsNode;
+
+export const tiledLights = /*@__PURE__*/ nodeProxy( TiledLightsNode );

package/examples/jsm/tsl/math/Bayer.js

@@ -0,0 +1,18 @@
+import { TextureLoader } from 'three';
+import { Fn, int, ivec2, textureLoad } from 'three/tsl';
+
+let bayer16Texture = null;
+
+export const bayer16 = Fn( ( [ uv ] ) => {
+
+	if ( bayer16Texture === null ) {
+
+		const bayer16Base64 = 'data:image/png;base64,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';
+
+		bayer16Texture = new TextureLoader().load( bayer16Base64 );
+
+	}
+
+	return textureLoad( bayer16Texture, ivec2( uv ).modInt( int( 16 ) ) );
+
+} );

package/examples/jsm/tsl/utils/Raymarching.js

@@ -0,0 +1,65 @@
+import { varying, vec4, modelWorldMatrixInverse, cameraPosition, positionGeometry, float, Fn, Loop, max, min, vec2, vec3 } from 'three/tsl';
+
+const hitBox = /*@__PURE__*/ Fn( ( { orig, dir } ) => {
+
+	const box_min = vec3( - 0.5 );
+	const box_max = vec3( 0.5 );
+
+	const inv_dir = dir.reciprocal();
+
+	const tmin_tmp = box_min.sub( orig ).mul( inv_dir );
+	const tmax_tmp = box_max.sub( orig ).mul( inv_dir );
+
+	const tmin = min( tmin_tmp, tmax_tmp );
+	const tmax = max( tmin_tmp, tmax_tmp );
+
+	const t0 = max( tmin.x, max( tmin.y, tmin.z ) );
+	const t1 = min( tmax.x, min( tmax.y, tmax.z ) );
+
+	return vec2( t0, t1 );
+
+} );
+
+/**
+ * Performs raymarching box-area using the specified number of steps and a callback function.
+ *
+ * ```js
+ * RaymarchingBox( count, ( { positionRay } ) => {
+ *
+ * } );
+ * ```
+ *
+ * @tsl
+ * @function
+ * @param {number|Node} steps - The number of steps for raymarching.
+ * @param {Function|FunctionNode} callback - The callback function to execute at each step.
+ * @returns {void}
+ */
+export const RaymarchingBox = ( steps, callback ) => {
+
+	const vOrigin = varying( vec3( modelWorldMatrixInverse.mul( vec4( cameraPosition, 1.0 ) ) ) );
+	const vDirection = varying( positionGeometry.sub( vOrigin ) );
+
+	const rayDir = vDirection.normalize();
+	const bounds = vec2( hitBox( { orig: vOrigin, dir: rayDir } ) ).toVar();
+
+	bounds.x.greaterThan( bounds.y ).discard();
+
+	bounds.assign( vec2( max( bounds.x, 0.0 ), bounds.y ) );
+
+	const inc = vec3( rayDir.abs().reciprocal() ).toVar();
+	const delta = float( min( inc.x, min( inc.y, inc.z ) ) ).toVar( 'rayDelta' ); // used 'rayDelta' name in loop
+
+	delta.divAssign( float( steps ) );
+
+	const positionRay = vec3( vOrigin.add( bounds.x.mul( rayDir ) ) ).toVar();
+
+	Loop( { type: 'float', start: bounds.x, end: bounds.y, update: '+= rayDelta' }, () => {
+
+		callback( { positionRay } );
+
+		positionRay.addAssign( rayDir.mul( delta ) );
+
+	} );
+
+};

package/examples/jsm/utils/BufferGeometryUtils.js

@@ -101,7 +101,7 @@ function computeMikkTSpaceTangents( geometry, MikkTSpace, negateSign = true ) {
 
 /**
  * @param  {Array<BufferGeometry>} geometries
- * @param  {Boolean} useGroups
+ * @param  {boolean} useGroups
  * @return {BufferGeometry}
  */
 function mergeGeometries( geometries, useGroups = false ) {
@@ -389,7 +389,7 @@ function mergeAttributes( attributes ) {
 }
 
 /**
- * @param {BufferAttribute}
+ * @param {BufferAttribute} attribute
  * @return {BufferAttribute}
  */
 export function deepCloneAttribute( attribute ) {

package/examples/jsm/utils/CameraUtils.js

@@ -18,10 +18,13 @@ const _va = /*@__PURE__*/ new Vector3(), // from pe to pa
  * to exactly frame the corners of an arbitrary rectangle.
  * NOTE: This function ignores the standard parameters;
  * do not call updateProjectionMatrix() after this!
+ *
+ * @param {PerspectiveCamera} camera
  * @param {Vector3} bottomLeftCorner
  * @param {Vector3} bottomRightCorner
  * @param {Vector3} topLeftCorner
- * @param {boolean} estimateViewFrustum */
+ * @param {boolean} [estimateViewFrustum=false]
+ */
 function frameCorners( camera, bottomLeftCorner, bottomRightCorner, topLeftCorner, estimateViewFrustum = false ) {
 
 	const pa = bottomLeftCorner, pb = bottomRightCorner, pc = topLeftCorner;