@gnsx/three 0.185.15 → 0.186.0

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

@@ -0,0 +1,76 @@
+import { Module } from './Module.js';
+import { rgbToHsv, hsvToRgb } from '../LUTMath.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class SaturationModule extends Module {
+
+	constructor( params = {}, onChange = null, onRemove = null, id = 'saturation' ) {
+
+		super( id, 'Saturation', {
+			saturation: params.saturation ?? 1.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
+		} );
+
+		card.appendChild( this.saturationControl );
+
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		const { saturation } = this.params;
+
+		if ( saturation === 1.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 * saturation;
+		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.updateUI();
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		this.saturationControl._setValue( this.params.saturation );
+
+	}
+
+}

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

@@ -0,0 +1,76 @@
+import { Module } from './Module.js';
+import { rgbToHsv, hsvToRgb } from '../LUTMath.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class VibranceModule extends Module {
+
+	constructor( params = {}, onChange = null, onRemove = null, id = 'vibrance' ) {
+
+		super( id, 'Vibrance', {
+			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.vibranceControl = this.createSliderControl( {
+			key: 'vibrance',
+			label: 'Vibrance',
+			min: - 1.0,
+			max: 1.0,
+			step: 0.01,
+			def: 0
+		} );
+
+		card.appendChild( this.vibranceControl );
+
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		const { vibrance } = this.params;
+
+		if ( 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 + ( vibrance > 0 ? ( 1 - origS ) : origS ) * 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.vibrance = 0;
+		this.updateUI();
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		this.vibranceControl._setValue( this.params.vibrance );
+
+	}
+
+}

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

@@ -0,0 +1,86 @@
+import { Module } from './Module.js';
+
+const _tempRgb = [ 0, 0, 0 ];
+
+export class WhiteBalanceModule extends Module {
+
+	constructor( params = {}, onChange = null, onRemove = null, id = 'whiteBalance' ) {
+
+		super( id, 'White Balance', {
+			temperature: params.temperature ?? 0,
+			tint: params.tint ?? 0
+		} );
+
+		this.onChange = onChange;
+
+		const card = document.createElement( 'div' );
+		card.className = 'lut-card';
+
+		card.appendChild( this.createCardHeader( this.name, () => this.reset(), onRemove ) );
+
+		this.temperatureControl = this.createSliderControl( {
+			key: 'temperature',
+			label: 'Temp (K)',
+			min: - 100,
+			max: 100,
+			step: 1,
+			def: 0
+		} );
+
+		this.tintControl = this.createSliderControl( {
+			key: 'tint',
+			label: 'Tint',
+			min: - 100,
+			max: 100,
+			step: 1,
+			def: 0
+		} );
+
+		card.appendChild( this.temperatureControl );
+		card.appendChild( this.tintControl );
+
+		this.domElement = card;
+
+	}
+
+	applyPixel( r, g, b, target = _tempRgb ) {
+
+		const { temperature, tint } = this.params;
+
+		if ( temperature === 0 && tint === 0 ) {
+
+			target[ 0 ] = r;
+			target[ 1 ] = g;
+			target[ 2 ] = b;
+			return target;
+
+		}
+
+		const temp = temperature / 100;
+		const t = tint / 100;
+
+		target[ 0 ] = r + temp * 0.1;
+		target[ 1 ] = g - t * 0.1;
+		target[ 2 ] = b - temp * 0.1;
+
+		return target;
+
+	}
+
+	reset() {
+
+		this.params.temperature = 0;
+		this.params.tint = 0;
+		this.updateUI();
+		this.onParamChange();
+
+	}
+
+	updateUI() {
+
+		this.temperatureControl._setValue( this.params.temperature );
+		this.tintControl._setValue( this.params.tint );
+
+	}
+
+}

package/examples/jsm/inspector/extensions/tsl-graph/TSLGraphEditor.js

@@ -194,60 +194,55 @@ class TSLGraphEditor extends Extension {
 
 		renderer.domElement.addEventListener( 'pointerup', ( e ) => {
 
-			const frame = inspector.getFrame();
-
-			for ( const render of frame.renders ) {
-
-				const scene = render.scene;
-
-				if ( scene.isScene !== true ) continue;
+			const primaryPass = inspector.getPrimaryPass();
 
-				const camera = render.camera;
+			if ( primaryPass === null ) return;
 
-				if ( pointerDownPosition.distanceTo( pointer.set( e.clientX, e.clientY ) ) > 2 ) return;
+			const scene = primaryPass.scene;
+			const camera = primaryPass.camera;
 
-				const rect = renderer.domElement.getBoundingClientRect();
-				pointer.x = ( ( e.clientX - rect.left ) / rect.width ) * 2 - 1;
-				pointer.y = - ( ( e.clientY - rect.top ) / rect.height ) * 2 + 1;
+			if ( pointerDownPosition.distanceTo( pointer.set( e.clientX, e.clientY ) ) > 2 ) return;
 
-				raycaster.setFromCamera( pointer, camera );
+			const rect = renderer.domElement.getBoundingClientRect();
+			pointer.x = ( ( e.clientX - rect.left ) / rect.width ) * 2 - 1;
+			pointer.y = - ( ( e.clientY - rect.top ) / rect.height ) * 2 + 1;
 
-				const intersects = raycaster.intersectObjects( scene.children, true );
+			raycaster.setFromCamera( pointer, camera );
 
-				let graphMaterial = null;
+			const intersects = raycaster.intersectObjects( scene.children, true );
 
-				if ( intersects.length > 0 ) {
+			let graphMaterial = null;
 
-					for ( const intersect of intersects ) {
+			if ( intersects.length > 0 ) {
 
-						const object = intersect.object;
-						const material = object.material;
+				for ( const intersect of intersects ) {
 
-						if ( material && material.isNodeMaterial ) {
+					const object = intersect.object;
+					const material = object.material;
 
-							removeBoundingBox();
+					if ( material && material.isNodeMaterial ) {
 
-							boundingBox = new BoxHelper( object, 0xffff00 );
-							scene.add( boundingBox );
+						removeBoundingBox();
 
-							graphMaterial = material;
+						boundingBox = new BoxHelper( object, 0xffff00 );
+						scene.add( boundingBox );
 
-						}
+						graphMaterial = material;
 
-						if ( object.isMesh || object.isSprite ) {
+					}
 
-							break;
+					if ( object.isMesh || object.isSprite ) {
 
-						}
+						break;
 
 					}
 
 				}
 
-				this.setMaterial( graphMaterial );
-
 			}
 
+			this.setMaterial( graphMaterial );
+
 		} );
 
 	}
@@ -473,7 +468,7 @@ class TSLGraphEditor extends Extension {
 
 			await this.command( 'clear-graph' );
 
-			await this.command( 'set-root-material', { materialType: this._getGraphType( this.material ) } );
+			await this.command( 'set-root-material', { materialType: this._getGraphType( material ) } );
 
 		}
 

package/examples/jsm/inspector/extensions/tsl-graph/TSLGraphLoader.js

@@ -4,6 +4,7 @@ import * as THREE from '@gnsx/three';
 import * as TSL from '@gnsx/three/tsl';
 
 const _library = {
+	'three': { ...THREE },
 	'three/tsl': { ...TSL }
 };
 

package/examples/jsm/inspector/tabs/Memory.js

@@ -80,7 +80,6 @@ class Memory extends Tab {
 	updateGraph( inspector ) {
 
 		const renderer = inspector.getRenderer();
-		if ( ! renderer ) return;
 
 		const memory = renderer.info.memory;
 
@@ -95,7 +94,6 @@ class Memory extends Tab {
 	updateText( inspector ) {
 
 		const renderer = inspector.getRenderer();
-		if ( ! renderer ) return;
 
 		const memory = renderer.info.memory;
 

package/examples/jsm/inspector/tabs/Settings.js

@@ -3,6 +3,10 @@ import { WebGPURenderer, WebGLBackend, Node } from '@gnsx/three/webgpu';
 import { getItem, setItem } from '../Inspector.js';
 
 const _extensions = [
+	{
+		name: 'Color Grading',
+		url: '../extensions/color-grading/ColorGrading.js'
+	},
 	{
 		name: 'TSL Graph',
 		url: '../extensions/tsl-graph/TSLGraphEditor.js'