@gnsx/three 0.184.0

package/examples/jsm/utils/SortUtils.js

@@ -0,0 +1,175 @@
+
+/**
+ * @module SortUtils
+ * @three_import import * as SortUtils from 'three/addons/utils/SortUtils.js';
+ */
+
+const POWER = 3;
+const BIT_MAX = 32;
+const BIN_BITS = 1 << POWER;
+const BIN_SIZE = 1 << BIN_BITS;
+const BIN_MAX = BIN_SIZE - 1;
+const ITERATIONS = BIT_MAX / BIN_BITS;
+
+const bins = new Array( ITERATIONS );
+const bins_buffer = new ArrayBuffer( ( ITERATIONS + 1 ) * BIN_SIZE * 4 );
+
+let c = 0;
+for ( let i = 0; i < ( ITERATIONS + 1 ); i ++ ) {
+
+	bins[ i ] = new Uint32Array( bins_buffer, c, BIN_SIZE );
+	c += BIN_SIZE * 4;
+
+}
+
+const defaultGet = ( el ) => el;
+
+/**
+ * Hybrid radix sort from.
+ *
+ * - {@link https://gist.github.com/sciecode/93ed864dd77c5c8803c6a86698d68dab}
+ * - {@link https://github.com/mrdoob/three.js/pull/27202#issuecomment-1817640271}
+ *
+ * Expects unsigned 32b integer values.
+ *
+ * @function
+ * @param {Array<Object>} arr - The array to sort.
+ * @param {Object} opt - The options
+ */
+export const radixSort = ( arr, opt ) => {
+
+	const len = arr.length;
+
+	const options = opt || {};
+	const aux = options.aux || new arr.constructor( len );
+	const get = options.get || defaultGet;
+
+	const data = [ arr, aux ];
+
+	let compare, accumulate, recurse;
+
+	if ( options.reversed ) {
+
+		compare = ( a, b ) => a < b;
+		accumulate = ( bin ) => {
+
+			for ( let j = BIN_SIZE - 2; j >= 0; j -- )
+				bin[ j ] += bin[ j + 1 ];
+
+		};
+
+		recurse = ( cache, depth, start ) => {
+
+			let prev = 0;
+			for ( let j = BIN_MAX; j >= 0; j -- ) {
+
+				const cur = cache[ j ], diff = cur - prev;
+				if ( diff != 0 ) {
+
+					if ( diff > 32 )
+						radixSortBlock( depth + 1, start + prev, diff );
+					else
+						insertionSortBlock( depth + 1, start + prev, diff );
+					prev = cur;
+
+				}
+
+			}
+
+		};
+
+	} else {
+
+		compare = ( a, b ) => a > b;
+		accumulate = ( bin ) => {
+
+			for ( let j = 1; j < BIN_SIZE; j ++ )
+				bin[ j ] += bin[ j - 1 ];
+
+		};
+
+		recurse = ( cache, depth, start ) => {
+
+			let prev = 0;
+			for ( let j = 0; j < BIN_SIZE; j ++ ) {
+
+				const cur = cache[ j ], diff = cur - prev;
+				if ( diff != 0 ) {
+
+					if ( diff > 32 )
+						radixSortBlock( depth + 1, start + prev, diff );
+					else
+						insertionSortBlock( depth + 1, start + prev, diff );
+					prev = cur;
+
+				}
+
+			}
+
+		};
+
+	}
+
+	const insertionSortBlock = ( depth, start, len ) => {
+
+		const a = data[ depth & 1 ];
+		const b = data[ ( depth + 1 ) & 1 ];
+
+		for ( let j = start + 1; j < start + len; j ++ ) {
+
+			const p = a[ j ], t = get( p ) >>> 0;
+			let i = j;
+			while ( i > start ) {
+
+				if ( compare( get( a[ i - 1 ] ) >>> 0, t ) )
+					a[ i ] = a[ -- i ];
+				else
+					break;
+
+			}
+
+			a[ i ] = p;
+
+		}
+
+		if ( ( depth & 1 ) == 1 ) {
+
+			for ( let i = start; i < start + len; i ++ )
+				b[ i ] = a[ i ];
+
+		}
+
+	};
+
+	const radixSortBlock = ( depth, start, len ) => {
+
+		const a = data[ depth & 1 ];
+		const b = data[ ( depth + 1 ) & 1 ];
+
+		const shift = ( 3 - depth ) << POWER;
+		const end = start + len;
+
+		const cache = bins[ depth ];
+		const bin = bins[ depth + 1 ];
+
+		bin.fill( 0 );
+
+		for ( let j = start; j < end; j ++ )
+			bin[ ( get( a[ j ] ) >>> shift ) & BIN_MAX ] ++;
+
+		accumulate( bin );
+
+		cache.set( bin );
+
+		for ( let j = end - 1; j >= start; j -- )
+			b[ start + -- bin[ ( get( a[ j ] ) >>> shift ) & BIN_MAX ] ] = a[ j ];
+
+		if ( depth == ITERATIONS - 1 ) return;
+
+		recurse( cache, depth, start );
+
+	};
+
+	radixSortBlock( 0, 0, len );
+
+};

package/examples/jsm/utils/UVsDebug.js

@@ -0,0 +1,173 @@
+import {
+	Vector2
+} from 'three';
+
+/**
+ * @module UVsDebug
+ * @three_import import { UVsDebug } from 'three/addons/utils/UVsDebug.js';
+ */
+
+/**
+ * Function for "unwrapping" and debugging three.js geometries UV mapping.
+ *
+ * ```js
+ * document.body.appendChild( UVsDebug( new THREE.SphereGeometry() ) );
+ * ```
+ *
+ * @param {BufferGeometry} geometry - The geometry whose uv coordinates should be inspected.
+ * @param {number} [size=1024] - The size of the debug canvas.
+ * @return {HTMLCanvasElement} A canvas element with visualized uv coordinates.
+ */
+function UVsDebug( geometry, size = 1024 ) {
+
+	// handles wrapping of uv.x > 1 only
+
+	const abc = 'abc';
+	const a = new Vector2();
+	const b = new Vector2();
+
+	const uvs = [
+		new Vector2(),
+		new Vector2(),
+		new Vector2()
+	];
+
+	const face = [];
+
+	const canvas = document.createElement( 'canvas' );
+	const width = size; // power of 2 required for wrapping
+	const height = size;
+	canvas.width = width;
+	canvas.height = height;
+
+	const ctx = canvas.getContext( '2d' );
+	ctx.lineWidth = 1;
+	ctx.strokeStyle = 'rgb( 63, 63, 63 )';
+	ctx.textAlign = 'center';
+
+	// paint background white
+
+	ctx.fillStyle = 'rgb( 255, 255, 255 )';
+	ctx.fillRect( 0, 0, width, height );
+
+	const index = geometry.index;
+	const uvAttribute = geometry.attributes.uv;
+
+	if ( index ) {
+
+		// indexed geometry
+
+		for ( let i = 0, il = index.count; i < il; i += 3 ) {
+
+			face[ 0 ] = index.getX( i );
+			face[ 1 ] = index.getX( i + 1 );
+			face[ 2 ] = index.getX( i + 2 );
+
+			uvs[ 0 ].fromBufferAttribute( uvAttribute, face[ 0 ] );
+			uvs[ 1 ].fromBufferAttribute( uvAttribute, face[ 1 ] );
+			uvs[ 2 ].fromBufferAttribute( uvAttribute, face[ 2 ] );
+
+			processFace( face, uvs, i / 3 );
+
+		}
+
+	} else {
+
+		// non-indexed geometry
+
+		for ( let i = 0, il = uvAttribute.count; i < il; i += 3 ) {
+
+			face[ 0 ] = i;
+			face[ 1 ] = i + 1;
+			face[ 2 ] = i + 2;
+
+			uvs[ 0 ].fromBufferAttribute( uvAttribute, face[ 0 ] );
+			uvs[ 1 ].fromBufferAttribute( uvAttribute, face[ 1 ] );
+			uvs[ 2 ].fromBufferAttribute( uvAttribute, face[ 2 ] );
+
+			processFace( face, uvs, i / 3 );
+
+		}
+
+	}
+
+	return canvas;
+
+	function processFace( face, uvs, index ) {
+
+		// draw contour of face
+
+		ctx.beginPath();
+
+		a.set( 0, 0 );
+
+		for ( let j = 0, jl = uvs.length; j < jl; j ++ ) {
+
+			const uv = uvs[ j ];
+
+			a.x += uv.x;
+			a.y += uv.y;
+
+			if ( j === 0 ) {
+
+				ctx.moveTo( uv.x * ( width - 2 ) + 0.5, ( 1 - uv.y ) * ( height - 2 ) + 0.5 );
+
+			} else {
+
+				ctx.lineTo( uv.x * ( width - 2 ) + 0.5, ( 1 - uv.y ) * ( height - 2 ) + 0.5 );
+
+			}
+
+		}
+
+		ctx.closePath();
+		ctx.stroke();
+
+		// calculate center of face
+
+		a.divideScalar( uvs.length );
+
+		// label the face number
+
+		ctx.font = '18px Arial';
+		ctx.fillStyle = 'rgb( 63, 63, 63 )';
+		ctx.fillText( index, a.x * width, ( 1 - a.y ) * height );
+
+		if ( a.x > 0.95 ) {
+
+			// wrap x // 0.95 is arbitrary
+
+			ctx.fillText( index, ( a.x % 1 ) * width, ( 1 - a.y ) * height );
+
+		}
+
+		//
+
+		ctx.font = '12px Arial';
+		ctx.fillStyle = 'rgb( 191, 191, 191 )';
+
+		// label uv edge orders
+
+		for ( let j = 0, jl = uvs.length; j < jl; j ++ ) {
+
+			const uv = uvs[ j ];
+			b.addVectors( a, uv ).divideScalar( 2 );
+
+			const vnum = face[ j ];
+			ctx.fillText( abc[ j ] + vnum, b.x * width, ( 1 - b.y ) * height );
+
+			if ( b.x > 0.95 ) {
+
+				// wrap x
+
+				ctx.fillText( abc[ j ] + vnum, ( b.x % 1 ) * width, ( 1 - b.y ) * height );
+
+			}
+
+		}
+
+	}
+
+}
+
+export { UVsDebug };

package/examples/jsm/utils/WebGLTextureUtils.js

@@ -0,0 +1,115 @@
+import {
+	PlaneGeometry,
+	ShaderMaterial,
+	Uniform,
+	Mesh,
+	PerspectiveCamera,
+	Scene,
+	WebGLRenderer,
+	CanvasTexture,
+	SRGBColorSpace
+} from 'three';
+
+/**
+ * @module WebGLTextureUtils
+ * @three_import import * as WebGLTextureUtils from 'three/addons/utils/WebGLTextureUtils.js';
+ */
+
+let _renderer;
+let fullscreenQuadGeometry;
+let fullscreenQuadMaterial;
+let fullscreenQuad;
+
+/**
+ * Returns an uncompressed version of the given compressed texture.
+ *
+ * This module can only be used with {@link WebGLRenderer}. When using {@link WebGPURenderer},
+ * import the function from {@link WebGPUTextureUtils}.
+ *
+ * @param {CompressedTexture} texture - The compressed texture.
+ * @param {number} [maxTextureSize=Infinity] - The maximum size of the uncompressed texture.
+ * @param {?WebGLRenderer} [renderer=null] - A reference to a renderer.
+ * @return {CanvasTexture} The uncompressed texture.
+ */
+export function decompress( texture, maxTextureSize = Infinity, renderer = null ) {
+
+	if ( ! fullscreenQuadGeometry ) fullscreenQuadGeometry = new PlaneGeometry( 2, 2, 1, 1 );
+	if ( ! fullscreenQuadMaterial ) fullscreenQuadMaterial = new ShaderMaterial( {
+		uniforms: { blitTexture: new Uniform( texture ) },
+		vertexShader: `
+			varying vec2 vUv;
+			void main(){
+				vUv = uv;
+				gl_Position = vec4(position.xy * 1.0,0.,.999999);
+			}`,
+		fragmentShader: `
+			uniform sampler2D blitTexture; 
+			varying vec2 vUv;
+
+			void main(){ 
+				gl_FragColor = vec4(vUv.xy, 0, 1);
+				
+				#ifdef IS_SRGB
+				gl_FragColor = sRGBTransferOETF( texture2D( blitTexture, vUv) );
+				#else
+				gl_FragColor = texture2D( blitTexture, vUv);
+				#endif
+			}`
+	} );
+
+	fullscreenQuadMaterial.uniforms.blitTexture.value = texture;
+	fullscreenQuadMaterial.defines.IS_SRGB = texture.colorSpace == SRGBColorSpace;
+	fullscreenQuadMaterial.needsUpdate = true;
+
+	if ( ! fullscreenQuad ) {
+
+		fullscreenQuad = new Mesh( fullscreenQuadGeometry, fullscreenQuadMaterial );
+		fullscreenQuad.frustumCulled = false;
+
+	}
+
+	const _camera = new PerspectiveCamera();
+	const _scene = new Scene();
+	_scene.add( fullscreenQuad );
+
+	if ( renderer === null ) {
+
+		renderer = _renderer = new WebGLRenderer( { antialias: false } );
+
+	}
+
+	const width = Math.min( texture.image.width, maxTextureSize );
+	const height = Math.min( texture.image.height, maxTextureSize );
+
+	renderer.setSize( width, height );
+	renderer.clear();
+	renderer.render( _scene, _camera );
+
+	const canvas = document.createElement( 'canvas' );
+	const context = canvas.getContext( '2d' );
+
+	canvas.width = width;
+	canvas.height = height;
+
+	context.drawImage( renderer.domElement, 0, 0, width, height );
+
+	const readableTexture = new CanvasTexture( canvas );
+
+	readableTexture.minFilter = texture.minFilter;
+	readableTexture.magFilter = texture.magFilter;
+	readableTexture.wrapS = texture.wrapS;
+	readableTexture.wrapT = texture.wrapT;
+	readableTexture.colorSpace = texture.colorSpace;
+	readableTexture.name = texture.name;
+
+	if ( _renderer ) {
+
+		_renderer.forceContextLoss();
+		_renderer.dispose();
+		_renderer = null;
+
+	}
+
+	return readableTexture;
+
+}

package/examples/jsm/utils/WebGPUTextureUtils.js

@@ -0,0 +1,81 @@
+import {
+	QuadMesh,
+	NodeMaterial,
+	WebGPURenderer,
+	CanvasTexture
+} from 'three/webgpu';
+import { texture, uv } from 'three/tsl';
+
+/**
+ * @module WebGPUTextureUtils
+ * @three_import import * as WebGPUTextureUtils from 'three/addons/utils/WebGPUTextureUtils.js';
+ */
+
+let _renderer;
+const _quadMesh = /*@__PURE__*/ new QuadMesh();
+
+/**
+ * Returns an uncompressed version of the given compressed texture.
+ *
+ * This module can only be used with {@link WebGPURenderer}. When using {@link WebGLRenderer},
+ * import the function from {@link WebGLTextureUtils}.
+ *
+ * @async
+ * @param {CompressedTexture} blitTexture - The compressed texture.
+ * @param {number} [maxTextureSize=Infinity] - The maximum size of the uncompressed texture.
+ * @param {?WebGPURenderer} [renderer=null] - A reference to a renderer.
+ * @return {Promise<CanvasTexture>} A Promise that resolved with the uncompressed texture.
+ */
+export async function decompress( blitTexture, maxTextureSize = Infinity, renderer = null ) {
+
+	if ( renderer === null ) {
+
+		renderer = _renderer = new WebGPURenderer();
+		await renderer.init();
+
+	}
+
+	const material = new NodeMaterial();
+
+	material.fragmentNode = texture( blitTexture, uv().flipY() );
+
+	const width = Math.min( blitTexture.image.width, maxTextureSize );
+	const height = Math.min( blitTexture.image.height, maxTextureSize );
+
+	const currentOutputColorSpace = renderer.outputColorSpace;
+
+	renderer.setSize( width, height );
+	renderer.outputColorSpace = blitTexture.colorSpace;
+
+	_quadMesh.material = material;
+	_quadMesh.render( renderer );
+
+	renderer.outputColorSpace = currentOutputColorSpace;
+
+	const canvas = document.createElement( 'canvas' );
+	const context = canvas.getContext( '2d' );
+
+	canvas.width = width;
+	canvas.height = height;
+
+	context.drawImage( renderer.domElement, 0, 0, width, height );
+
+	const readableTexture = new CanvasTexture( canvas );
+
+	readableTexture.minFilter = blitTexture.minFilter;
+	readableTexture.magFilter = blitTexture.magFilter;
+	readableTexture.wrapS = blitTexture.wrapS;
+	readableTexture.wrapT = blitTexture.wrapT;
+	readableTexture.colorSpace = blitTexture.colorSpace;
+	readableTexture.name = blitTexture.name;
+
+	if ( _renderer !== null ) {
+
+		_renderer.dispose();
+		_renderer = null;
+
+	}
+
+	return readableTexture;
+
+}

package/examples/jsm/utils/WorkerPool.js

@@ -0,0 +1,167 @@
+/**
+ * A simple pool for managing Web Workers.
+ *
+ * @three_import import { WorkerPool } from 'three/addons/utils/WorkerPool.js';
+ */
+export class WorkerPool {
+
+	/**
+	 * Constructs a new Worker pool.
+	 *
+	 * @param {number} [pool=4] - The size of the pool.
+	 */
+	constructor( pool = 4 ) {
+
+		/**
+		 * The size of the pool.
+		 *
+		 * @type {number}
+		 * @default 4
+		 */
+		this.pool = pool;
+
+		/**
+		 * A message queue.
+		 *
+		 * @type {Array<Object>}
+		 */
+		this.queue = [];
+
+		/**
+		 * An array of Workers.
+		 *
+		 * @type {Array<Worker>}
+		 */
+		this.workers = [];
+
+		/**
+		 * An array with resolve functions for messages.
+		 *
+		 * @type {Array<Function>}
+		 */
+		this.workersResolve = [];
+
+		/**
+		 * The current worker status.
+		 *
+		 * @type {number}
+		 */
+		this.workerStatus = 0;
+
+		/**
+		 * A factory function for creating workers.
+		 *
+		 * @type {?Function}
+		 */
+		this.workerCreator = null;
+
+	}
+
+	_initWorker( workerId ) {
+
+		if ( ! this.workers[ workerId ] ) {
+
+			const worker = this.workerCreator();
+			worker.addEventListener( 'message', this._onMessage.bind( this, workerId ) );
+			this.workers[ workerId ] = worker;
+
+		}
+
+	}
+
+	_getIdleWorker() {
+
+		for ( let i = 0; i < this.pool; i ++ )
+			if ( ! ( this.workerStatus & ( 1 << i ) ) ) return i;
+
+		return - 1;
+
+	}
+
+	_onMessage( workerId, msg ) {
+
+		const resolve = this.workersResolve[ workerId ];
+		resolve && resolve( msg );
+
+		if ( this.queue.length ) {
+
+			const { resolve, msg, transfer } = this.queue.shift();
+			this.workersResolve[ workerId ] = resolve;
+			this.workers[ workerId ].postMessage( msg, transfer );
+
+		} else {
+
+			this.workerStatus ^= 1 << workerId;
+
+		}
+
+	}
+
+	/**
+	 * Sets a function that is responsible for creating Workers.
+	 *
+	 * @param {Function} workerCreator - The worker creator function.
+	 */
+	setWorkerCreator( workerCreator ) {
+
+		this.workerCreator = workerCreator;
+
+	}
+
+	/**
+	 * Sets the Worker limit
+	 *
+	 * @param {number} pool - The size of the pool.
+	 */
+	setWorkerLimit( pool ) {
+
+		this.pool = pool;
+
+	}
+
+	/**
+	 * Post a message to an idle Worker. If no Worker is available,
+	 * the message is pushed into a message queue for later processing.
+	 *
+	 * @param {Object} msg - The message.
+	 * @param {Array<ArrayBuffer>} transfer - An array with array buffers for data transfer.
+	 * @return {Promise} A Promise that resolves when the message has been processed.
+	 */
+	postMessage( msg, transfer ) {
+
+		return new Promise( ( resolve ) => {
+
+			const workerId = this._getIdleWorker();
+
+			if ( workerId !== - 1 ) {
+
+				this._initWorker( workerId );
+				this.workerStatus |= 1 << workerId;
+				this.workersResolve[ workerId ] = resolve;
+				this.workers[ workerId ].postMessage( msg, transfer );
+
+			} else {
+
+				this.queue.push( { resolve, msg, transfer } );
+
+			}
+
+		} );
+
+	}
+
+	/**
+	 * Terminates all Workers of this pool. Call this  method whenever this
+	 * Worker pool is no longer used in your app.
+	 */
+	dispose() {
+
+		this.workers.forEach( ( worker ) => worker.terminate() );
+		this.workersResolve.length = 0;
+		this.workers.length = 0;
+		this.queue.length = 0;
+		this.workerStatus = 0;
+
+	}
+
+}