@gnsx/three 0.185.16 → 0.186.1

package/examples/jsm/inspector/extensions/color-grading/modules/Module.js

@@ -0,0 +1,285 @@
+const _tempRgb = [ 0, 0, 0 ];
+
+/**
+ * Module.js - Base class for LUT 3D Generator Card Modules
+ */
+export class Module {
+
+	constructor( id, name, params = {} ) {
+
+		this.id = id;
+		this.name = name;
+		this.params = params;
+		this.enabled = true;
+		this.domElement = null;
+		this.onChange = null;
+		this.dragAndDrop = true;
+
+	}
+
+	/**
+	 * Applies module transformation directly onto a Float32Array 3D LUT buffer.
+	 * @param {Float32Array} buffer - Buffer of size x size x size x 4 RGBA elements
+	 * @param {number} size - LUT grid dimension
+	 * @returns {Float32Array}
+	 */
+	apply( buffer ) {
+
+		if ( ! this.enabled ) return buffer;
+
+		const len = buffer.length;
+		const target = _tempRgb;
+
+		for ( let i = 0; i < len; i += 4 ) {
+
+			this.applyPixel( buffer[ i ], buffer[ i + 1 ], buffer[ i + 2 ], target );
+			buffer[ i ] = target[ 0 ];
+			buffer[ i + 1 ] = target[ 1 ];
+			buffer[ i + 2 ] = target[ 2 ];
+
+		}
+
+		return buffer;
+
+	}
+
+	/**
+	 * Transforms a single RGB color pixel (0..1 range) into a reusable target array.
+	 * Virtual method to be overridden by sub-classes.
+	 */
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		target[ 0 ] = r;
+		target[ 1 ] = g;
+		target[ 2 ] = b;
+		return target;
+
+	}
+
+	/**
+	 * Helper to create standard card header with title, reset button, and optional remove button.
+	 */
+	createCardHeader( titleText, onReset, onRemove = null ) {
+
+		const header = document.createElement( 'div' );
+		header.className = 'lut-card-header';
+
+		const _createSvgIcon = ( svgPath, width = 11, height = 11, strokeWidth = 2.5 ) => {
+
+			const ns = 'http://www.w3.org/2000/svg';
+			const svg = document.createElementNS( ns, 'svg' );
+			svg.setAttribute( 'width', String( width ) );
+			svg.setAttribute( 'height', String( height ) );
+			svg.setAttribute( 'viewBox', '0 0 24 24' );
+			svg.setAttribute( 'fill', 'none' );
+			svg.setAttribute( 'stroke', 'currentColor' );
+			svg.setAttribute( 'stroke-width', String( strokeWidth ) );
+			svg.setAttribute( 'stroke-linecap', 'round' );
+			svg.setAttribute( 'stroke-linejoin', 'round' );
+			svg.style.display = 'block';
+			svg.innerHTML = svgPath;
+			return svg;
+
+		};
+
+		// Left Drag Handle + Reset Button
+		const dragHandle = document.createElement( 'div' );
+		dragHandle.className = 'lut-card-drag-handle';
+
+		if ( typeof onReset === 'function' ) {
+
+			const resetBtn = document.createElement( 'button' );
+			resetBtn.className = 'card-reset-btn lut-card-reset-btn';
+			resetBtn.appendChild( _createSvgIcon( '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>', 13, 13, 2.5 ) );
+			resetBtn.title = 'Reset Card';
+			resetBtn.onclick = ( e ) => {
+
+				e.stopPropagation();
+				onReset();
+
+			};
+
+			dragHandle.appendChild( resetBtn );
+
+		}
+
+		header.appendChild( dragHandle );
+
+		const titleLabel = document.createElement( 'span' );
+		titleLabel.className = 'lut-card-title';
+		titleLabel.textContent = titleText;
+		header.appendChild( titleLabel );
+
+		// Right Remove Button (where reset button was)
+		if ( onRemove ) {
+
+			const removeBtn = document.createElement( 'button' );
+			removeBtn.className = 'lut-card-remove-btn';
+			removeBtn.appendChild( _createSvgIcon( '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>', 13, 13, 2.5 ) );
+			removeBtn.title = 'Remove Card';
+			removeBtn.onclick = ( e ) => {
+
+				e.stopPropagation();
+				onRemove();
+
+			};
+
+			header.appendChild( removeBtn );
+
+		}
+
+		return header;
+
+	}
+
+	/**
+	 * Helper to create parameter box with label, draggable number input, and range slider.
+	 */
+	createSliderControl( { key, label, min, max, step, def } ) {
+
+		const paramBox = document.createElement( 'div' );
+		paramBox.className = 'param-control value-slider lut-param-box';
+
+		const top = document.createElement( 'div' );
+		top.className = 'lut-param-top';
+
+		const lbl = document.createElement( 'span' );
+		lbl.className = 'lut-param-label';
+		lbl.textContent = label;
+
+		const numInput = document.createElement( 'input' );
+		numInput.type = 'number';
+		numInput.min = min;
+		numInput.max = max;
+		numInput.step = step;
+		const initialVal = Number( this.params[ key ] !== undefined ? this.params[ key ] : def );
+		numInput.value = initialVal.toFixed( step < 0.1 ? 2 : 1 );
+		numInput.className = 'lut-num-input';
+
+		const slider = document.createElement( 'input' );
+		slider.type = 'range';
+		slider.className = 'inspector-slider';
+		slider.min = min;
+		slider.max = max;
+		slider.step = step;
+		slider.value = initialVal;
+
+		const updateVal = ( val ) => {
+
+			const clamped = Math.max( min, Math.min( max, val ) );
+			this.params[ key ] = clamped;
+			slider.value = clamped;
+			numInput.value = clamped.toFixed( step < 0.1 ? 2 : 1 );
+			this.onParamChange();
+
+		};
+
+		slider.oninput = () => {
+
+			updateVal( parseFloat( slider.value ) );
+
+		};
+
+		numInput.onchange = () => {
+
+			const val = parseFloat( numInput.value );
+			updateVal( isNaN( val ) ? def : val );
+
+		};
+
+		let isDragging = false;
+		let startY = 0;
+		let startVal = 0;
+
+		numInput.onpointerdown = ( e ) => {
+
+			isDragging = true;
+			startY = e.clientY;
+			startVal = parseFloat( numInput.value ) || def;
+			numInput.setPointerCapture( e.pointerId );
+
+		};
+
+		numInput.onpointermove = ( e ) => {
+
+			if ( isDragging ) {
+
+				const delta = ( startY - e.clientY ) * step;
+				updateVal( startVal + delta );
+
+			}
+
+		};
+
+		const stopDrag = ( e ) => {
+
+			if ( isDragging ) {
+
+				isDragging = false;
+				try {
+
+					numInput.releasePointerCapture( e.pointerId );
+
+				} catch ( _err ) { /* ignore */ }
+
+			}
+
+		};
+
+		numInput.onpointerup = stopDrag;
+		numInput.onpointercancel = stopDrag;
+
+		top.appendChild( lbl );
+		top.appendChild( numInput );
+		paramBox.appendChild( top );
+		paramBox.appendChild( slider );
+
+		paramBox._setValue = ( v ) => {
+
+			const formatted = Number( v ).toFixed( step < 0.1 ? 2 : 1 );
+			slider.value = v;
+			numInput.value = formatted;
+
+		};
+
+		return paramBox;
+
+	}
+
+	onParamChange() {
+
+		if ( this.onChange ) this.onChange( this );
+
+	}
+
+	reset() {
+
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+	}
+
+	toJSON() {
+
+		return {
+			id: this.id,
+			params: JSON.parse( JSON.stringify( this.params ) )
+		};
+
+	}
+
+	fromJSON( json ) {
+
+		if ( json && json.params ) {
+
+			Object.assign( this.params, json.params );
+			this.updateUI();
+
+		}
+
+	}
+
+}

package/examples/jsm/inspector/extensions/color-grading/modules/OutputModule.js

@@ -0,0 +1,101 @@
+import { Module } from './Module.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class OutputModule extends Module {
+
+	constructor( params = {}, onChange = null ) {
+
+		const initialFileName = params.fileName || 'My Color Grading';
+
+		super( 'output', 'Output', {
+			fileName: initialFileName
+		} );
+
+		this.dragAndDrop = false;
+
+		this.onChange = onChange;
+
+		const card = document.createElement( 'div' );
+		card.className = 'lut-card output-card';
+
+		card.appendChild( this.createCardHeader( this.name, () => this.reset() ) );
+
+		// File Name input control
+		const nameBox = document.createElement( 'div' );
+		nameBox.className = 'param-control lut-param-box';
+		nameBox.style.cssText = 'width: 100%; box-sizing: border-box;';
+
+		this.nameInput = document.createElement( 'input' );
+		this.nameInput.type = 'text';
+		this.nameInput.className = 'lut-input lut-text-input';
+		this.nameInput.style.cssText = 'width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.3); border: 1px solid rgba(74,74,90,0.5); border-radius: 4px; color: #e0e0e0; font-size: 11px; padding: 4px 6px; font-family: var(--font-family, sans-serif); text-align: center; outline: none; transition: border-color 0.15s;';
+		this.nameInput.value = this.params.fileName;
+		this.nameInput.placeholder = 'LUT name...';
+
+		this.nameInput.onfocus = () => {
+
+			this.nameInput.style.borderColor = 'var(--color-accent, #00aaff)';
+
+		};
+
+		this.nameInput.onblur = () => {
+
+			this.nameInput.style.borderColor = 'rgba(74,74,90,0.5)';
+
+		};
+
+		this.nameInput.oninput = () => {
+
+			const raw = this.nameInput.value;
+			this.params.fileName = raw || 'LUT3D';
+			this.onParamChange();
+
+		};
+
+		nameBox.appendChild( this.nameInput );
+		card.appendChild( nameBox );
+
+		const infoBox = document.createElement( 'div' );
+		infoBox.className = 'lut-output-info';
+		infoBox.style.cssText = 'display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px 0 2px 0;';
+
+		this.resVal = document.createElement( 'span' );
+		this.resVal.style.cssText = 'font-size: 11px; color: var(--text-secondary, #9a9aab); font-weight: 400; letter-spacing: 0.2px;';
+		this.resVal.textContent = '3D LUT / TSL';
+
+		infoBox.appendChild( this.resVal );
+		card.appendChild( infoBox );
+
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		target[ 0 ] = r;
+		target[ 1 ] = g;
+		target[ 2 ] = b;
+		return target;
+
+	}
+
+	reset() {
+
+		this.params.fileName = 'My Color Grading';
+		this.updateUI();
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		if ( this.nameInput ) {
+
+			this.nameInput.value = this.params.fileName;
+
+		}
+
+	}
+
+}

package/examples/jsm/inspector/extensions/color-grading/modules/RendererModule.js

@@ -0,0 +1,225 @@
+import { Module } from './Module.js';
+import {
+	NoToneMapping,
+	LinearToneMapping,
+	ReinhardToneMapping,
+	CineonToneMapping,
+	ACESFilmicToneMapping,
+	AgXToneMapping,
+	NeutralToneMapping
+} from '@gnsx/three/webgpu';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class RendererModule extends Module {
+
+	constructor( params = {}, onChange = null, onRendererChange = null ) {
+
+		const initialToneMapping = params.toneMapping ?? NoToneMapping;
+		const initialExposure = params.exposure ?? 1.0;
+
+		super( 'renderer', 'Renderer', {
+			toneMapping: initialToneMapping,
+			exposure: initialExposure
+		} );
+
+		this.dragAndDrop = false;
+
+		this.defaultToneMapping = initialToneMapping;
+		this.defaultExposure = initialExposure;
+
+		this.onChange = onChange;
+		this.onRendererChange = onRendererChange;
+
+		const card = document.createElement( 'div' );
+		card.className = 'lut-card renderer-card';
+
+		card.appendChild( this.createCardHeader( this.name, () => this.reset() ) );
+
+		// 1. Tone Mapping Dropdown
+		const tmBox = document.createElement( 'div' );
+		tmBox.className = 'param-control lut-param-box';
+
+		const tmTop = document.createElement( 'div' );
+		tmTop.className = 'lut-param-top';
+
+		const tmLabel = document.createElement( 'span' );
+		tmLabel.className = 'lut-param-label';
+		tmLabel.textContent = 'Tone Mapping';
+
+		this.toneMappingSelect = document.createElement( 'select' );
+		this.toneMappingSelect.className = 'lut-select lut-select-compact';
+
+		const toneMappingModes = [
+			{ name: 'None', value: NoToneMapping },
+			{ name: 'Linear', value: LinearToneMapping },
+			{ name: 'Reinhard', value: ReinhardToneMapping },
+			{ name: 'Cineon', value: CineonToneMapping },
+			{ name: 'ACES Filmic', value: ACESFilmicToneMapping },
+			{ name: 'AgX', value: AgXToneMapping },
+			{ name: 'Neutral', value: NeutralToneMapping }
+		];
+
+		toneMappingModes.forEach( mode => {
+
+			const opt = document.createElement( 'option' );
+			opt.value = mode.value;
+			opt.textContent = mode.name;
+			if ( mode.value === this.params.toneMapping ) opt.selected = true;
+			this.toneMappingSelect.appendChild( opt );
+
+		} );
+
+		this.toneMappingSelect.onchange = ( e ) => {
+
+			this.params.toneMapping = parseInt( e.target.value, 10 );
+			if ( this.onRendererChange ) this.onRendererChange( this );
+
+		};
+
+		tmTop.appendChild( tmLabel );
+		tmTop.appendChild( this.toneMappingSelect );
+		tmBox.appendChild( tmTop );
+		card.appendChild( tmBox );
+
+		// 2. Exposure Control
+		const expBox = document.createElement( 'div' );
+		expBox.className = 'param-control value-slider lut-param-box';
+
+		const expTop = document.createElement( 'div' );
+		expTop.className = 'lut-param-top';
+
+		const expLabel = document.createElement( 'span' );
+		expLabel.className = 'lut-param-label';
+		expLabel.textContent = 'Exposure';
+
+		this.exposureNumInput = document.createElement( 'input' );
+		this.exposureNumInput.type = 'number';
+		this.exposureNumInput.min = '0.1';
+		this.exposureNumInput.max = '5.0';
+		this.exposureNumInput.step = '0.05';
+		this.exposureNumInput.value = this.params.exposure.toFixed( 2 );
+		this.exposureNumInput.className = 'lut-num-input';
+
+		this.exposureSlider = document.createElement( 'input' );
+		this.exposureSlider.type = 'range';
+		this.exposureSlider.className = 'inspector-slider';
+		this.exposureSlider.min = '0.1';
+		this.exposureSlider.max = '5.0';
+		this.exposureSlider.step = '0.05';
+		this.exposureSlider.value = this.params.exposure;
+
+		const onExpChange = ( val ) => {
+
+			this.params.exposure = val;
+			if ( this.onRendererChange ) this.onRendererChange( this );
+
+		};
+
+		this.exposureSlider.oninput = () => {
+
+			const val = parseFloat( this.exposureSlider.value );
+			this.exposureNumInput.value = val.toFixed( 2 );
+			onExpChange( val );
+
+		};
+
+		this.exposureNumInput.onchange = () => {
+
+			const val = Math.max( 0.1, Math.min( 5.0, parseFloat( this.exposureNumInput.value ) || 1.0 ) );
+			this.exposureNumInput.value = val.toFixed( 2 );
+			this.exposureSlider.value = val;
+			onExpChange( val );
+
+		};
+
+		let isDragging = false;
+		let startX = 0;
+		let startVal = 1.0;
+
+		this.exposureNumInput.onmousedown = ( e ) => {
+
+			if ( document.activeElement === this.exposureNumInput ) return;
+
+			isDragging = true;
+			startX = e.clientX;
+			startVal = parseFloat( this.exposureSlider.value );
+
+			const onMouseMove = ( moveEvent ) => {
+
+				if ( ! isDragging ) return;
+				const deltaX = moveEvent.clientX - startX;
+				const newVal = Math.max( 0.1, Math.min( 5.0, startVal + deltaX * 0.01 ) );
+
+				this.exposureNumInput.value = newVal.toFixed( 2 );
+				this.exposureSlider.value = newVal;
+				onExpChange( newVal );
+
+			};
+
+			const onMouseUp = () => {
+
+				isDragging = false;
+				window.removeEventListener( 'mousemove', onMouseMove );
+				window.removeEventListener( 'mouseup', onMouseUp );
+
+			};
+
+			window.addEventListener( 'mousemove', onMouseMove );
+			window.addEventListener( 'mouseup', onMouseUp );
+
+		};
+
+		expTop.appendChild( expLabel );
+		expTop.appendChild( this.exposureNumInput );
+		expBox.appendChild( expTop );
+		expBox.appendChild( this.exposureSlider );
+		card.appendChild( expBox );
+
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		target[ 0 ] = r;
+		target[ 1 ] = g;
+		target[ 2 ] = b;
+		return target;
+
+	}
+
+	reset() {
+
+		this.params.toneMapping = this.defaultToneMapping;
+		this.params.exposure = this.defaultExposure;
+		this.updateUI();
+
+		if ( this.onRendererChange ) this.onRendererChange( this );
+
+	}
+
+	updateUI() {
+
+		this.toneMappingSelect.value = String( this.params.toneMapping );
+		this.exposureNumInput.value = this.params.exposure.toFixed( 2 );
+		this.exposureSlider.value = String( this.params.exposure );
+
+	}
+
+	fromJSON( json ) {
+
+		if ( json && json.params ) {
+
+			if ( json.params.toneMapping !== undefined ) this.params.toneMapping = json.params.toneMapping;
+			if ( json.params.exposure !== undefined ) this.params.exposure = json.params.exposure;
+
+		}
+
+		this.updateUI();
+
+		if ( this.onRendererChange ) this.onRendererChange( this );
+
+	}
+
+}

package/examples/jsm/inspector/extensions/color-grading/modules/SatVibranceModule.js

@@ -0,0 +1,102 @@
+import { Module } from './Module.js';
+import { rgbToHsv, hsvToRgb } from '../LUTMath.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class SatVibranceModule extends Module {
+
+	constructor( params = {}, onChange = null, onRemove = null, id = 'satVibrance' ) {
+
+		super( id, 'Sat & Vibrance', {
+			saturation: params.saturation ?? 1.0,
+			vibrance: params.vibrance ?? 0
+		} );
+
+		this.onChange = onChange;
+
+		const card = document.createElement( 'div' );
+		card.className = 'lut-card';
+
+		card.appendChild( this.createCardHeader( this.name, () => this.reset(), onRemove ) );
+
+		this.saturationControl = this.createSliderControl( {
+			key: 'saturation',
+			label: 'Saturation',
+			min: 0,
+			max: 2.0,
+			step: 0.01,
+			def: 1.0
+		} );
+
+		this.vibranceControl = this.createSliderControl( {
+			key: 'vibrance',
+			label: 'Vibrance',
+			min: - 1.0,
+			max: 1.0,
+			step: 0.01,
+			def: 0
+		} );
+
+		card.appendChild( this.saturationControl );
+		card.appendChild( this.vibranceControl );
+
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		const { saturation, vibrance } = this.params;
+
+		if ( saturation === 1.0 && vibrance === 0 ) {
+
+			target[ 0 ] = r;
+			target[ 1 ] = g;
+			target[ 2 ] = b;
+			return target;
+
+		}
+
+		const [ h, origS, origV ] = rgbToHsv( Math.max( 0, r ), Math.max( 0, g ), Math.max( 0, b ) );
+		let s = origS;
+
+		if ( saturation !== 1.0 ) {
+
+			s *= saturation;
+
+		}
+
+		if ( vibrance !== 0 ) {
+
+			s += ( vibrance > 0 ? ( 1 - s ) : s ) * vibrance * 0.5;
+
+		}
+
+		s = Math.max( 0, Math.min( 1, s ) );
+		const v = Math.max( 0, Math.min( 1, origV ) );
+
+		const [ nr, ng, nb ] = hsvToRgb( h, s, v );
+		target[ 0 ] = nr;
+		target[ 1 ] = ng;
+		target[ 2 ] = nb;
+		return target;
+
+	}
+
+	reset() {
+
+		this.params.saturation = 1.0;
+		this.params.vibrance = 0;
+		this.updateUI();
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		this.saturationControl._setValue( this.params.saturation );
+		this.vibranceControl._setValue( this.params.vibrance );
+
+	}
+
+}