@gnsx/three 0.185.15 → 0.186.0

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

@@ -0,0 +1,72 @@
+import { Module } from './Module.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class BrightnessModule extends Module {
+
+	constructor( params = {}, onChange = null, onRemove = null, id = 'brightness' ) {
+
+		super( id, 'Brightness', {
+			brightness: params.brightness ?? 0
+		} );
+
+		this.onChange = onChange;
+
+		const card = document.createElement( 'div' );
+		card.className = 'lut-card';
+
+		card.appendChild( this.createCardHeader( this.name, () => this.reset(), onRemove ) );
+
+		this.brightnessControl = this.createSliderControl( {
+			key: 'brightness',
+			label: 'Brightness',
+			min: - 1,
+			max: 1,
+			step: 0.02,
+			def: 0
+		} );
+
+		card.appendChild( this.brightnessControl );
+
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		let cr = r;
+		let cg = g;
+		let cb = b;
+
+		const { brightness } = this.params;
+
+		if ( brightness !== 0 ) {
+
+			cr += brightness;
+			cg += brightness;
+			cb += brightness;
+
+		}
+
+		target[ 0 ] = cr;
+		target[ 1 ] = cg;
+		target[ 2 ] = cb;
+		return target;
+
+	}
+
+	reset() {
+
+		this.params.brightness = 0;
+		this.updateUI();
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		this.brightnessControl._setValue( this.params.brightness );
+
+	}
+
+}

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

@@ -0,0 +1,112 @@
+import { Module } from './Module.js';
+import { ColorWheel } from '../ColorWheel.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class ColorWheelModule extends Module {
+
+	constructor( mode, title, initialParams = {}, onChange = null, onRemove = null, id = null ) {
+
+		const defaultWheelParams = { r: 0, g: 0, b: 0, y: 0 };
+		const mergedParams = Object.assign( {}, defaultWheelParams, initialParams );
+
+		super( id || mode, title, mergedParams );
+
+		this.mode = mode; // 'lift', 'gammaBal', 'gain', 'offset'
+		this.onChange = onChange;
+		this.onRemove = onRemove;
+
+		this.wheel = new ColorWheel( this.name, this.params, ( updatedVal ) => {
+
+			Object.assign( this.params, updatedVal );
+			this.onParamChange();
+
+		}, onRemove );
+
+		this.domElement = this.wheel.domElement;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		const { r: pr, g: pg, b: pb, y: py } = this.params;
+
+		switch ( this.mode ) {
+
+			case 'lift': {
+
+				const lr = pr + py;
+				const lg = pg + py;
+				const lb = pb + py;
+
+				target[ 0 ] = r + lr * ( 1 - Math.max( 0, Math.min( 1, r ) ) );
+				target[ 1 ] = g + lg * ( 1 - Math.max( 0, Math.min( 1, g ) ) );
+				target[ 2 ] = b + lb * ( 1 - Math.max( 0, Math.min( 1, b ) ) );
+				return target;
+
+			}
+
+			case 'gammaBal': {
+
+				const gr = Math.pow( 2.0, - ( pr + py ) );
+				const gg = Math.pow( 2.0, - ( pg + py ) );
+				const gb = Math.pow( 2.0, - ( pb + py ) );
+
+				target[ 0 ] = r > 0 ? Math.pow( r, gr ) : r;
+				target[ 1 ] = g > 0 ? Math.pow( g, gg ) : g;
+				target[ 2 ] = b > 0 ? Math.pow( b, gb ) : b;
+				return target;
+
+			}
+
+			case 'gain': {
+
+				const sr = Math.max( 0, 1.0 + pr + py );
+				const sg = Math.max( 0, 1.0 + pg + py );
+				const sb = Math.max( 0, 1.0 + pb + py );
+
+				target[ 0 ] = r * sr;
+				target[ 1 ] = g * sg;
+				target[ 2 ] = b * sb;
+				return target;
+
+			}
+
+			case 'offset': {
+
+				target[ 0 ] = r + pr + py;
+				target[ 1 ] = g + pg + py;
+				target[ 2 ] = b + pb + py;
+				return target;
+
+			}
+
+			default:
+				target[ 0 ] = r;
+				target[ 1 ] = g;
+				target[ 2 ] = b;
+				return target;
+
+		}
+
+	}
+
+	reset() {
+
+		this.params.r = 0;
+		this.params.g = 0;
+		this.params.b = 0;
+		this.params.y = 0;
+
+		this.wheel.setValues( 0, 0, 0, 0 );
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		this.wheel.setValues( this.params.r, this.params.g, this.params.b, this.params.y );
+
+	}
+
+}

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

@@ -0,0 +1,82 @@
+import { Module } from './Module.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class ContrastModule extends Module {
+
+	constructor( params = {}, onChange = null, onRemove = null, id = 'contrast' ) {
+
+		super( id, 'Contrast & Pivot', {
+			contrast: params.contrast ?? 1.0,
+			contrastPivot: params.contrastPivot ?? 0.5
+		} );
+
+		this.onChange = onChange;
+
+		const card = document.createElement( 'div' );
+		card.className = 'lut-card';
+
+		card.appendChild( this.createCardHeader( this.name, () => this.reset(), onRemove ) );
+
+		this.contrastControl = this.createSliderControl( {
+			key: 'contrast',
+			label: 'Contrast',
+			min: 0.2,
+			max: 2.0,
+			step: 0.01,
+			def: 1.0
+		} );
+
+		this.pivotControl = this.createSliderControl( {
+			key: 'contrastPivot',
+			label: 'Pivot',
+			min: 0.1,
+			max: 0.9,
+			step: 0.01,
+			def: 0.5
+		} );
+
+		card.appendChild( this.contrastControl );
+		card.appendChild( this.pivotControl );
+
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		const { contrast, contrastPivot } = this.params;
+
+		if ( contrast === 1.0 ) {
+
+			target[ 0 ] = r;
+			target[ 1 ] = g;
+			target[ 2 ] = b;
+			return target;
+
+		}
+
+		target[ 0 ] = contrastPivot + ( r - contrastPivot ) * contrast;
+		target[ 1 ] = contrastPivot + ( g - contrastPivot ) * contrast;
+		target[ 2 ] = contrastPivot + ( b - contrastPivot ) * contrast;
+		return target;
+
+	}
+
+	reset() {
+
+		this.params.contrast = 1.0;
+		this.params.contrastPivot = 0.5;
+		this.updateUI();
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		this.contrastControl._setValue( this.params.contrast );
+		this.pivotControl._setValue( this.params.contrastPivot );
+
+	}
+
+}

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

@@ -0,0 +1,109 @@
+import { Module } from './Module.js';
+import { CurveEditor } from '../CurveEditor.js';
+import { evaluateSpline } from '../LUTMath.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class CurvesModule extends Module {
+
+	constructor( params = {}, onChange = null, onRemove = null, id = 'curves' ) {
+
+		const defaultCurves = {
+			rgb: [ { x: 0, y: 0 }, { x: 1, y: 1 } ],
+			red: [ { x: 0, y: 0 }, { x: 1, y: 1 } ],
+			green: [ { x: 0, y: 0 }, { x: 1, y: 1 } ],
+			blue: [ { x: 0, y: 0 }, { x: 1, y: 1 } ]
+		};
+
+		const initialCurves = params.curves ? params.curves : ( params.rgb ? params : defaultCurves );
+
+		super( id, 'Curves', { curves: JSON.parse( JSON.stringify( initialCurves ) ) } );
+
+		this.onChange = onChange;
+
+		const card = document.createElement( 'div' );
+		card.className = 'lut-card curves-card';
+
+		card.appendChild( this.createCardHeader( this.name, () => this.reset(), onRemove ) );
+
+		this.curveEditor = new CurveEditor( {
+			curves: this.params.curves,
+			onChange: ( updatedCurves ) => {
+
+				this.params.curves = updatedCurves;
+				this.onParamChange();
+
+			}
+		} );
+
+		card.appendChild( this.curveEditor.domElement );
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		let cr = Math.max( 0, Math.min( 1, r ) );
+		let cg = Math.max( 0, Math.min( 1, g ) );
+		let cb = Math.max( 0, Math.min( 1, b ) );
+
+		const { rgb, red, green, blue } = this.params.curves;
+
+		if ( rgb && rgb.length > 0 ) {
+
+			cr = evaluateSpline( cr, rgb );
+			cg = evaluateSpline( cg, rgb );
+			cb = evaluateSpline( cb, rgb );
+
+		}
+
+		if ( red && red.length > 0 ) {
+
+			cr = evaluateSpline( cr, red );
+
+		}
+
+		if ( green && green.length > 0 ) {
+
+			cg = evaluateSpline( cg, green );
+
+		}
+
+		if ( blue && blue.length > 0 ) {
+
+			cb = evaluateSpline( cb, blue );
+
+		}
+
+		target[ 0 ] = Math.max( 0, Math.min( 1, cr ) );
+		target[ 1 ] = Math.max( 0, Math.min( 1, cg ) );
+		target[ 2 ] = Math.max( 0, Math.min( 1, cb ) );
+		return target;
+
+	}
+
+	reset() {
+
+		const defaultCurves = {
+			rgb: [ { x: 0, y: 0 }, { x: 1, y: 1 } ],
+			red: [ { x: 0, y: 0 }, { x: 1, y: 1 } ],
+			green: [ { x: 0, y: 0 }, { x: 1, y: 1 } ],
+			blue: [ { x: 0, y: 0 }, { x: 1, y: 1 } ]
+		};
+
+		this.params.curves = JSON.parse( JSON.stringify( defaultCurves ) );
+
+		this.curveEditor.curves = this.params.curves;
+		this.curveEditor.render();
+
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		this.curveEditor.setCurves( this.params.curves );
+
+	}
+
+}

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

@@ -0,0 +1,110 @@
+import { Module } from './Module.js';
+import { rgbToHsv, hsvToRgb } from '../LUTMath.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class ExposureHueModule extends Module {
+
+	constructor( params = {}, onChange = null, onRemove = null, id = 'exposureHue' ) {
+
+		super( id, 'Exposure & Hue', {
+			exposure: params.exposure ?? 0,
+			brightness: params.brightness ?? 0,
+			hueShift: params.hueShift ?? 0
+		} );
+
+		this.onChange = onChange;
+
+		const card = document.createElement( 'div' );
+		card.className = 'lut-card';
+
+		card.appendChild( this.createCardHeader( this.name, () => this.reset(), onRemove ) );
+
+		this.exposureControl = this.createSliderControl( {
+			key: 'exposure',
+			label: 'Exposure',
+			min: - 3,
+			max: 3,
+			step: 0.05,
+			def: 0
+		} );
+
+		this.hueShiftControl = this.createSliderControl( {
+			key: 'hueShift',
+			label: 'Hue (°)',
+			min: - 180,
+			max: 180,
+			step: 1,
+			def: 0
+		} );
+
+		card.appendChild( this.exposureControl );
+		card.appendChild( this.hueShiftControl );
+
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		let cr = r;
+		let cg = g;
+		let cb = b;
+
+		const { exposure, brightness, hueShift } = this.params;
+
+		if ( exposure !== 0 ) {
+
+			const factor = Math.pow( 2, exposure );
+			cr *= factor;
+			cg *= factor;
+			cb *= factor;
+
+		}
+
+		if ( brightness !== 0 ) {
+
+			cr += brightness;
+			cg += brightness;
+			cb += brightness;
+
+		}
+
+		if ( hueShift !== 0 ) {
+
+			const [ origH, s, v ] = rgbToHsv( Math.max( 0, cr ), Math.max( 0, cg ), Math.max( 0, cb ) );
+			let h = ( origH + hueShift / 360 ) % 1;
+			if ( h < 0 ) h += 1;
+
+			const [ nr, ng, nb ] = hsvToRgb( h, s, v );
+			cr = nr;
+			cg = ng;
+			cb = nb;
+
+		}
+
+		target[ 0 ] = cr;
+		target[ 1 ] = cg;
+		target[ 2 ] = cb;
+		return target;
+
+	}
+
+	reset() {
+
+		this.params.exposure = 0;
+		this.params.brightness = 0;
+		this.params.hueShift = 0;
+		this.updateUI();
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		this.exposureControl._setValue( this.params.exposure );
+		this.hueShiftControl._setValue( this.params.hueShift );
+
+	}
+
+}

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

@@ -0,0 +1,73 @@
+import { Module } from './Module.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class ExposureModule extends Module {
+
+	constructor( params = {}, onChange = null, onRemove = null, id = 'exposure' ) {
+
+		super( id, 'Exposure', {
+			exposure: params.exposure ?? 0
+		} );
+
+		this.onChange = onChange;
+
+		const card = document.createElement( 'div' );
+		card.className = 'lut-card';
+
+		card.appendChild( this.createCardHeader( this.name, () => this.reset(), onRemove ) );
+
+		this.exposureControl = this.createSliderControl( {
+			key: 'exposure',
+			label: 'Exposure',
+			min: - 3,
+			max: 3,
+			step: 0.05,
+			def: 0
+		} );
+
+		card.appendChild( this.exposureControl );
+
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		let cr = r;
+		let cg = g;
+		let cb = b;
+
+		const { exposure } = this.params;
+
+		if ( exposure !== 0 ) {
+
+			const factor = Math.pow( 2, exposure );
+			cr *= factor;
+			cg *= factor;
+			cb *= factor;
+
+		}
+
+		target[ 0 ] = cr;
+		target[ 1 ] = cg;
+		target[ 2 ] = cb;
+		return target;
+
+	}
+
+	reset() {
+
+		this.params.exposure = 0;
+		this.updateUI();
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		this.exposureControl._setValue( this.params.exposure );
+
+	}
+
+}

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

@@ -0,0 +1,78 @@
+import { Module } from './Module.js';
+import { rgbToHsv, hsvToRgb } from '../LUTMath.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class HueModule extends Module {
+
+	constructor( params = {}, onChange = null, onRemove = null, id = 'hue' ) {
+
+		super( id, 'Hue Shift', {
+			hueShift: params.hueShift ?? 0
+		} );
+
+		this.onChange = onChange;
+
+		const card = document.createElement( 'div' );
+		card.className = 'lut-card';
+
+		card.appendChild( this.createCardHeader( this.name, () => this.reset(), onRemove ) );
+
+		this.hueShiftControl = this.createSliderControl( {
+			key: 'hueShift',
+			label: 'Hue (°)',
+			min: - 180,
+			max: 180,
+			step: 1,
+			def: 0
+		} );
+
+		card.appendChild( this.hueShiftControl );
+
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		let cr = r;
+		let cg = g;
+		let cb = b;
+
+		const { hueShift } = this.params;
+
+		if ( hueShift !== 0 ) {
+
+			const [ origH, s, v ] = rgbToHsv( Math.max( 0, cr ), Math.max( 0, cg ), Math.max( 0, cb ) );
+			let h = ( origH + hueShift / 360 ) % 1;
+			if ( h < 0 ) h += 1;
+
+			const [ nr, ng, nb ] = hsvToRgb( h, s, v );
+			cr = nr;
+			cg = ng;
+			cb = nb;
+
+		}
+
+		target[ 0 ] = cr;
+		target[ 1 ] = cg;
+		target[ 2 ] = cb;
+		return target;
+
+	}
+
+	reset() {
+
+		this.params.hueShift = 0;
+		this.updateUI();
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		this.hueShiftControl._setValue( this.params.hueShift );
+
+	}
+
+}

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

@@ -0,0 +1,89 @@
+import { Module } from './Module.js';
+import { sample3DLUT } from '../LUTMath.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class ImportedCubeModule extends Module {
+
+	constructor( id, cubeInfo = {}, onChange = null, onRemove = null ) {
+
+		super( id, cubeInfo.title || 'Imported LUT', {
+			title: cubeInfo.title || 'Imported LUT',
+			size: cubeInfo.size ?? 32,
+			dataLines: cubeInfo.dataLines || cubeInfo.data || [],
+			weight: cubeInfo.weight ?? 1.0
+		} );
+
+		this.onChange = onChange;
+		this.onRemove = onRemove;
+
+		const card = document.createElement( 'div' );
+		card.className = 'lut-card lut-imported-cube-card';
+
+		card.appendChild( this.createCardHeader(
+			this.name,
+			() => this.reset(),
+			this.onRemove ? () => this.onRemove( this.id ) : null
+		) );
+
+		const body = document.createElement( 'div' );
+		body.style.cssText = 'display: flex; flex-direction: column; gap: 8px; width: 100%;';
+
+		const infoLabel = document.createElement( 'div' );
+		infoLabel.style.cssText = 'font-size: 10px; color: var(--text-secondary, #9a9aab); text-align: center; font-weight: 500;';
+		infoLabel.textContent = `3D LUT Size: ${this.params.size}³`;
+		body.appendChild( infoLabel );
+
+		this.weightControl = this.createSliderControl( {
+			key: 'weight',
+			label: 'Mix Weight',
+			min: 0,
+			max: 1.0,
+			step: 0.01,
+			def: 1.0
+		} );
+
+		body.appendChild( this.weightControl );
+		card.appendChild( body );
+
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		const { dataLines, size, weight } = this.params;
+
+		if ( dataLines.length === 0 ) {
+
+			target[ 0 ] = r;
+			target[ 1 ] = g;
+			target[ 2 ] = b;
+			return target;
+
+		}
+
+		const [ lr, lg, lb ] = sample3DLUT( r, g, b, size, dataLines );
+
+		target[ 0 ] = r * ( 1 - weight ) + lr * weight;
+		target[ 1 ] = g * ( 1 - weight ) + lg * weight;
+		target[ 2 ] = b * ( 1 - weight ) + lb * weight;
+		return target;
+
+	}
+
+	reset() {
+
+		this.params.weight = 1.0;
+		this.updateUI();
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		this.weightControl._setValue( this.params.weight );
+
+	}
+
+}