rayzee 5.10.2 → 6.0.0

package/src/Processor/createRenderTargetHelper.js

@@ -1,521 +0,0 @@
-/**
- * createRenderTargetHelper - A component for displaying Three.js render targets in a resizable window
- *
- * Uses async readback for pixel data.
- *
- * @param {THREE.WebGPURenderer} renderer - The renderer instance
- * @param {THREE.RenderTarget} renderTargetOrTexture - The render target to display
- * @param {Object} options - Optional configuration
- * @param {number} options.width - Initial width of the view (default: 200)
- * @param {number} options.height - Initial height of the view (default: 200)
- * @param {string} options.position - Position on screen ('bottom-right', 'bottom-left', 'top-right', 'top-left') (default: 'bottom-right')
- * @param {boolean} options.flipX - Flip the image horizontally (default: true)
- * @param {boolean} options.flipY - Flip the image vertically (default: true)
- * @param {boolean} options.autoUpdate - Whether to automatically update on animation frames (default: false)
- * @param {string} options.title - Title to display in the header (default: 'Render Target')
- * @param {number} options.textureIndex - For MRT render targets, which texture attachment to read (default: 0)
- * @param {string} options.transform - Optional shader transform: 'normal-remap' remaps [0,1] to visible range
- * @returns {HTMLElement} The container element with attached methods
- */
-export function createRenderTargetHelper( renderer, renderTargetOrTexture, options = {} ) {
-
-	// MRT texture index for readback
-	const textureIndex = options.textureIndex || 0;
-
-	// Detect if input is a Texture or RenderTarget
-	const isTexture = renderTargetOrTexture.isTexture === true;
-
-	let renderTarget;
-
-	if ( isTexture ) {
-
-		console.warn( 'RenderTargetHelper: Direct Texture input is not supported. Pass a RenderTarget instead.' );
-		renderTarget = null;
-
-	} else {
-
-		renderTarget = renderTargetOrTexture;
-
-	}
-
-	// Default options
-	const config = {
-		width: options.width || 200,
-		height: options.height || 200,
-		position: options.position || 'bottom-right',
-		flipX: options.flipX !== undefined ? options.flipX : false,
-		flipY: options.flipY !== undefined ? options.flipY : false,
-		autoUpdate: options.autoUpdate || false,
-		theme: options.theme || 'dark', // 'light' or 'dark' - changed default to dark to match the app's theme
-		title: options.title || renderTarget?.name || 'Render Target'
-	};
-
-	// Create container
-	const container = document.createElement( 'div' );
-	container.className = 'render-target-helper';
-
-	// Apply styles based on position
-	const positionStyles = {
-		'bottom-right': { bottom: '48px', right: '10px' }, // Adjusted for stats position
-		'bottom-left': { bottom: '10px', left: '10px' },
-		'top-right': { top: '10px', right: '10px' },
-		'top-left': { top: '10px', left: '10px' }
-	};
-
-	// Theme styles
-	const themeStyles = {
-		'light': {
-			backgroundColor: 'white',
-			border: '1px solid #ddd',
-			color: '#333'
-		},
-		'dark': {
-			backgroundColor: '#1e293b', // Match app's slate color
-			border: '1px solid #334155',
-			color: '#f8fafc'
-		}
-	};
-
-	Object.assign( container.style, {
-		display: 'flex',
-		flexDirection: 'column',
-		position: 'fixed',
-		resize: 'both',
-		overflow: 'hidden',
-		padding: '8px',
-		borderRadius: '4px',
-		boxShadow: '0 5px 15px rgba(0,0,0,0.3)',
-		transition: 'opacity 0.2s ease',
-		zIndex: '1000',
-		minWidth: '100px',
-		minHeight: '100px',
-		maxWidth: '500px',
-		maxHeight: '500px',
-		width: `${config.width}px`,
-		height: `${config.height}px`,
-		...positionStyles[ config.position ],
-		...themeStyles[ config.theme ]
-	} );
-
-	// Create title bar with controls
-	const titleBar = document.createElement( 'div' );
-	titleBar.style.display = 'flex';
-	titleBar.style.justifyContent = 'space-between';
-	titleBar.style.alignItems = 'center';
-	titleBar.style.marginBottom = '4px';
-	titleBar.style.cursor = 'move';
-	titleBar.style.userSelect = 'none';
-
-	// Title
-	const title = document.createElement( 'span' );
-	title.textContent = config.title;
-	title.style.fontSize = '12px';
-	title.style.fontFamily = 'monospace';
-	title.style.color = themeStyles[ config.theme ].color;
-
-	// Controls
-	const controls = document.createElement( 'div' );
-
-	// Close button
-	const closeBtn = document.createElement( 'button' );
-	closeBtn.innerHTML = '×';
-	closeBtn.style.background = 'none';
-	closeBtn.style.border = 'none';
-	closeBtn.style.cursor = 'pointer';
-	closeBtn.style.fontSize = '16px';
-	closeBtn.style.color = themeStyles[ config.theme ].color;
-	closeBtn.style.padding = '0 4px';
-	closeBtn.title = 'Close';
-
-	closeBtn.onclick = () => {
-
-		container.style.display = 'none';
-		if ( config.autoUpdate ) {
-
-			cancelAnimationFrame( animFrameId );
-			animFrameId = null;
-
-		}
-
-	};
-
-	// Add refresh button
-	const refreshBtn = document.createElement( 'button' );
-	refreshBtn.innerHTML = '⟳';
-	refreshBtn.style.background = 'none';
-	refreshBtn.style.border = 'none';
-	refreshBtn.style.cursor = 'pointer';
-	refreshBtn.style.fontSize = '14px';
-	refreshBtn.style.color = themeStyles[ config.theme ].color;
-	refreshBtn.style.padding = '0 4px';
-	refreshBtn.title = 'Refresh';
-
-	refreshBtn.onclick = () => {
-
-		container.update();
-
-	};
-
-	controls.appendChild( refreshBtn );
-	controls.appendChild( closeBtn );
-	titleBar.appendChild( title );
-	titleBar.appendChild( controls );
-	container.appendChild( titleBar );
-
-	// Canvas for displaying the render target
-	const domCanvas = document.createElement( 'canvas' );
-	domCanvas.style.width = '100%';
-	domCanvas.style.height = 'calc(100% - 20px)';
-
-
-	// Apply flipping if needed
-	let transform = '';
-	if ( config.flipX ) transform += 'scaleX(-1) ';
-	if ( config.flipY ) transform += 'scaleY(-1) ';
-	domCanvas.style.transform = transform.trim();
-
-	container.appendChild( domCanvas );
-
-	// Get render target dimensions
-	let width = renderTarget ? renderTarget.width : 1;
-	let height = renderTarget ? renderTarget.height : 1;
-
-	// Initialize canvas
-	domCanvas.width = width;
-	domCanvas.height = height;
-
-	const context = domCanvas.getContext( '2d' );
-
-	// Pixel data buffer
-	let clampedPixels = new Uint8ClampedArray( 4 * width * height );
-
-	// Guard against concurrent async reads (WebGPU)
-	let pendingRead = false;
-
-	// Make container draggable
-	let isDragging = false;
-	let dragOffsetX = 0;
-	let dragOffsetY = 0;
-
-	titleBar.addEventListener( 'pointerdown', ( e ) => {
-
-		isDragging = true;
-		dragOffsetX = e.clientX - container.offsetLeft;
-		dragOffsetY = e.clientY - container.offsetTop;
-		document.body.style.userSelect = 'none'; // Prevent text selection during drag
-
-	} );
-
-	function onPointerMove( e ) {
-
-		if ( ! isDragging ) return;
-
-		const newLeft = e.clientX - dragOffsetX;
-		const newTop = e.clientY - dragOffsetY;
-
-		const maxX = window.innerWidth - container.offsetWidth;
-		const maxY = window.innerHeight - container.offsetHeight;
-
-		container.style.left = `${Math.max( 0, Math.min( newLeft, maxX ) )}px`;
-		container.style.top = `${Math.max( 0, Math.min( newTop, maxY ) )}px`;
-
-		container.style.bottom = 'auto';
-		container.style.right = 'auto';
-
-	}
-
-	function onPointerUp() {
-
-		isDragging = false;
-		document.body.style.userSelect = '';
-
-	}
-
-	window.addEventListener( 'pointermove', onPointerMove );
-	window.addEventListener( 'pointerup', onPointerUp );
-
-	// Optimize resize handling
-	function handleResize() {
-
-		if ( ! renderTarget ) return;
-
-		// Get current dimensions from source
-		const currentWidth = renderTarget.width;
-		const currentHeight = renderTarget.height;
-
-		// Check if dimensions have changed
-		if ( width !== currentWidth || height !== currentHeight ) {
-
-			width = currentWidth;
-			height = currentHeight;
-
-			// Resize canvas to match dimensions
-			domCanvas.width = width;
-			domCanvas.height = height;
-
-			// Recreate pixel buffer
-			clampedPixels = new Uint8ClampedArray( 4 * width * height );
-
-		}
-
-		// Update dimensions display
-		title.textContent = `${config.title} (${width}×${height})`;
-
-	}
-
-	/**
-	 * Decode a 16-bit half-float to a 32-bit float.
-	 */
-	function halfToFloat( h ) {
-
-		const s = ( h & 0x8000 ) >> 15;
-		const e = ( h & 0x7C00 ) >> 10;
-		const f = h & 0x03FF;
-
-		if ( e === 0 ) return ( s ? - 1 : 1 ) * Math.pow( 2, - 14 ) * ( f / 1024 );
-		if ( e === 31 ) return f ? NaN : ( s ? - Infinity : Infinity );
-		return ( s ? - 1 : 1 ) * Math.pow( 2, e - 15 ) * ( 1 + f / 1024 );
-
-	}
-
-	/**
-	 * Draw a pixel buffer to the 2D canvas.
-	 * Handles Float32Array (float 0-1), Uint16Array (half-float), and Uint8Array (0-255).
-	 */
-	function drawPixelBuffer( buffer ) {
-
-		const len = Math.min( buffer.length, clampedPixels.length );
-
-		if ( buffer instanceof Uint8Array || buffer instanceof Uint8ClampedArray ) {
-
-			// Values already in 0-255 range
-			clampedPixels.set( buffer.subarray( 0, len ) );
-
-		} else if ( buffer instanceof Uint16Array ) {
-
-			// Half-float values — decode then scale to 0-255
-			for ( let i = 0; i < len; i ++ ) {
-
-				const val = halfToFloat( buffer[ i ] );
-				clampedPixels[ i ] = Math.min( 255, Math.max( 0, ( val || 0 ) * 255 ) );
-
-			}
-
-		} else {
-
-			// Float32 values — scale to 0-255
-			for ( let i = 0; i < len; i ++ ) {
-
-				clampedPixels[ i ] = Math.min( 255, Math.max( 0, buffer[ i ] * 255 ) );
-
-			}
-
-		}
-
-		if ( width === 0 || height === 0 ) return;
-
-		const imageData = new ImageData( clampedPixels, width, height );
-		context.putImageData( imageData, 0, 0 );
-
-	}
-
-	// Update the display with the current render target contents
-	container.update = function update() {
-
-		if ( ! renderTarget ) return;
-
-		handleResize();
-
-		try {
-
-			// Asynchronous pixel readback
-			if ( pendingRead ) return; // skip if previous read is still in flight
-			pendingRead = true;
-
-			renderer.readRenderTargetPixelsAsync( renderTarget, 0, 0, width, height, textureIndex )
-				.then( ( buffer ) => {
-
-					pendingRead = false;
-					drawPixelBuffer( buffer );
-
-				} )
-				.catch( ( err ) => {
-
-					pendingRead = false;
-					console.error( 'RenderTargetHelper: readback error:', err );
-
-				} );
-
-		} catch ( error ) {
-
-			console.error( 'Error updating render target helper:', error );
-
-		}
-
-	};
-
-	function onContainerMouseDown() {
-
-		window.addEventListener( 'mousemove', handleResize );
-
-	}
-
-	function onMouseUp() {
-
-		window.removeEventListener( 'mousemove', handleResize );
-
-	}
-
-	container.addEventListener( 'mousedown', onContainerMouseDown );
-	window.addEventListener( 'mouseup', onMouseUp );
-	window.addEventListener( 'resize', handleResize );
-
-	// Auto-update animation frame
-	let animFrameId = null;
-
-	/**
-     * Show the helper if hidden
-     */
-	container.show = function show() {
-
-		container.style.display = 'flex';
-		if ( config.autoUpdate && ! animFrameId ) {
-
-			container.startAutoUpdate();
-
-		}
-
-	};
-
-	/**
-     * Hide the helper
-     */
-	container.hide = function hide() {
-
-		container.style.display = 'none';
-		if ( config.autoUpdate && animFrameId ) {
-
-			cancelAnimationFrame( animFrameId );
-			animFrameId = null;
-
-		}
-
-	};
-
-	/**
-     * Toggle visibility
-     */
-	container.toggle = function toggle() {
-
-		if ( container.style.display === 'none' ) {
-
-			container.show();
-
-		} else {
-
-			container.hide();
-
-		}
-
-		return container.style.display !== 'none';
-
-	};
-
-	/**
-     * Start auto-updating
-     */
-	container.startAutoUpdate = function startAutoUpdate() {
-
-		if ( animFrameId ) return;
-
-		const updateLoop = () => {
-
-			container.update();
-			animFrameId = requestAnimationFrame( updateLoop );
-
-		};
-
-		animFrameId = requestAnimationFrame( updateLoop );
-
-	};
-
-	/**
-     * Stop auto-updating
-     */
-	container.stopAutoUpdate = function stopAutoUpdate() {
-
-		if ( animFrameId ) {
-
-			cancelAnimationFrame( animFrameId );
-			animFrameId = null;
-
-		}
-
-	};
-
-	/**
-     * Dispose and clean up resources
-     */
-	container.dispose = function dispose() {
-
-		if ( animFrameId ) {
-
-			cancelAnimationFrame( animFrameId );
-			animFrameId = null;
-
-		}
-
-		// Remove window listeners — these close over renderer/renderTarget/container
-		// and pin the entire helper graph alive until the page unloads if not cleaned up.
-		window.removeEventListener( 'pointermove', onPointerMove );
-		window.removeEventListener( 'pointerup', onPointerUp );
-		window.removeEventListener( 'mouseup', onMouseUp );
-		window.removeEventListener( 'mousemove', handleResize );
-		window.removeEventListener( 'resize', handleResize );
-
-		if ( container.parentNode ) {
-
-			container.parentNode.removeChild( container );
-
-		}
-
-		// Drop closures attached to the container. These close over `renderer`,
-		// `renderTargetOrTexture`, and the canvas — keeping them around after the
-		// owning stage has been disposed retains the entire Three.js WebGPU graph.
-		container.startAutoUpdate = null;
-		container.stopAutoUpdate = null;
-		container.show = null;
-		container.hide = null;
-		container.toggle = null;
-		container.update = null;
-		container.dispose = null;
-
-		if ( domCanvas ) {
-
-			domCanvas.width = 0;
-			domCanvas.height = 0;
-
-		}
-
-		clampedPixels = null;
-
-	};
-
-	// Start auto-update if configured
-	if ( config.autoUpdate ) {
-
-		container.startAutoUpdate();
-
-	}
-
-	// Maintain backward compatibility with original implementation
-	if ( container.style.display === 'none' ) {
-
-		container.style.display = 'flex';
-
-	}
-
-	return container;
-
-}
-

package/src/TSL/RayIntersection.js

@@ -1,162 +0,0 @@
-import { Fn, float, vec2, vec3, int, If, dot, cross, abs, normalize, sqrt, min, max, select } from 'three/tsl';
-
-import {
-	HitInfo,
-} from './Struct.js';
-
-// Optimized Intersection with Geometry only (no attributes)
-// Returns { hit, t, u, v }
-export const RayTriangleGeometry = Fn( ( [ ray, posA, posB, posC ] ) => {
-
-	const edge1 = posB.sub( posA );
-	const edge2 = posC.sub( posA );
-	const h = cross( ray.direction, edge2 );
-	const a = dot( edge1, h ).toVar();
-
-	const t = float( 0.0 ).toVar();
-	const u = float( 0.0 ).toVar();
-	const v = float( 0.0 ).toVar();
-	const hit = int( 0 ).toVar();
-
-	If( abs( a ).greaterThan( 1e-8 ), () => {
-
-		const f = float( 1.0 ).div( a );
-		const s = ray.origin.sub( posA );
-		u.assign( f.mul( dot( s, h ) ) );
-
-		If( u.greaterThanEqual( 0.0 ).and( u.lessThanEqual( 1.0 ) ), () => {
-
-			const q = cross( s, edge1 );
-			v.assign( f.mul( dot( ray.direction, q ) ) );
-
-			If( v.greaterThanEqual( 0.0 ).and( u.add( v ).lessThanEqual( 1.0 ) ), () => {
-
-				t.assign( f.mul( dot( edge2, q ) ) );
-
-				If( t.greaterThan( 1e-8 ), () => {
-
-					hit.assign( 1 );
-
-				} );
-
-			} );
-
-		} );
-
-	} );
-
-	return hit;
-
-} );
-
-// Calculate the intersection of a ray with a triangle using Möller-Trumbore algorithm
-export const RayTriangle = Fn( ( [ ray, tri ] ) => {
-
-	const didHit = int( 0 ).toVar();
-	const dst = float( 1.0e20 ).toVar();
-	const hitPoint = vec3( 0.0 ).toVar();
-	const normal = vec3( 0.0, 0.0, 1.0 ).toVar();
-	const uv = vec2( 0.0 ).toVar();
-	const material = int( - 1 ).toVar();
-
-	const edge1 = tri.posB.sub( tri.posA );
-	const edge2 = tri.posC.sub( tri.posA );
-	const h = cross( ray.direction, edge2 );
-	const a = dot( edge1, h ).toVar();
-
-	If( abs( a ).greaterThan( 1e-8 ), () => {
-
-		const f = float( 1.0 ).div( a );
-		const s = ray.origin.sub( tri.posA );
-		const u = f.mul( dot( s, h ) ).toVar();
-
-		If( u.greaterThanEqual( 0.0 ).and( u.lessThanEqual( 1.0 ) ), () => {
-
-			const q = cross( s, edge1 );
-			const v = f.mul( dot( ray.direction, q ) ).toVar();
-
-			If( v.greaterThanEqual( 0.0 ).and( u.add( v ).lessThanEqual( 1.0 ) ), () => {
-
-				const t = f.mul( dot( edge2, q ) ).toVar();
-
-				If( t.greaterThan( 1e-8 ).and( t.lessThan( dst ) ), () => {
-
-					didHit.assign( 1 );
-					dst.assign( t );
-					hitPoint.assign( ray.origin.add( ray.direction.mul( t ) ) );
-
-					// Interpolate normal using barycentric coordinates
-					const w = float( 1.0 ).sub( u ).sub( v );
-					normal.assign( normalize(
-						tri.normalA.mul( w ).add( tri.normalB.mul( u ) ).add( tri.normalC.mul( v ) )
-					) );
-
-					// Interpolate UV coordinates
-					uv.assign( tri.uvA.mul( w ).add( tri.uvB.mul( u ) ).add( tri.uvC.mul( v ) ) );
-
-					// Set material index
-					material.assign( tri.material );
-
-				} );
-
-			} );
-
-		} );
-
-	} );
-
-	return HitInfo( { didHit, dst, hitPoint, normal, uv, materialIndex: material, meshIndex: int( - 1 ), boxTests: int( 0 ), triTests: int( 0 ) } );
-
-} );
-
-// Ray-sphere intersection
-export const RaySphere = Fn( ( [ ray, sphere ] ) => {
-
-	const didHit = int( 0 ).toVar();
-	const dst = float( 1.0e20 ).toVar();
-	const hitPoint = vec3( 0.0 ).toVar();
-	const normal = vec3( 0.0, 0.0, 1.0 ).toVar();
-	const material = int( - 1 ).toVar();
-
-	const oc = ray.origin.sub( sphere.position );
-	const a = dot( ray.direction, ray.direction );
-	const b = float( 2.0 ).mul( dot( oc, ray.direction ) );
-	const c = dot( oc, oc ).sub( sphere.radius.mul( sphere.radius ) );
-	const discriminant = b.mul( b ).sub( float( 4.0 ).mul( a ).mul( c ) ).toVar();
-
-	If( discriminant.greaterThan( 0.0 ), () => {
-
-		const t = b.negate().sub( sqrt( discriminant ) ).div( float( 2.0 ).mul( a ) ).toVar();
-
-		If( t.greaterThan( 0.0 ), () => {
-
-			didHit.assign( 1 );
-			dst.assign( t );
-			hitPoint.assign( ray.origin.add( ray.direction.mul( t ) ) );
-			normal.assign( normalize( hitPoint.sub( sphere.position ) ) );
-			material.assign( sphere.material );
-
-		} );
-
-	} );
-
-	return HitInfo( { didHit, dst, hitPoint, normal, uv: vec2( 0.0 ), materialIndex: material, meshIndex: int( - 1 ), boxTests: int( 0 ), triTests: int( 0 ) } );
-
-} );
-
-// Fast ray-AABB distance calculation with early exit optimization
-export const fastRayAABBDst = Fn( ( [ ray, invDir, boxMin, boxMax ] ) => {
-
-	const t1 = boxMin.sub( ray.origin ).mul( invDir );
-	const t2 = boxMax.sub( ray.origin ).mul( invDir );
-
-	const tMin = min( t1, t2 );
-	const tMax = max( t1, t2 );
-
-	const dstNear = max( max( tMin.x, tMin.y ), tMin.z );
-	const dstFar = min( min( tMax.x, tMax.y ), tMax.z ).mul( 1.00000024 ); // Robust traversal: 2 ULP padding (Ize 2013)
-
-	// Optimized early rejection
-	return select( dstFar.greaterThanEqual( max( dstNear, 0.0 ) ), max( dstNear, 0.0 ), float( 1e20 ) );
-
-} );