Decouple gui colors from color mgmt (#31232)

examples/webgpu_compute_cloth.html

@@ -62,6 +62,11 @@
 				wind: 1.0,
 			};
 
+			const API = {
+				color: 0x204080, // sRGB
+				sheenColor: 0xffffff // sRGB
+			};
+
 			init();
 
 			async function init() {
@@ -99,12 +104,13 @@
 				gui.add( params, 'wireframe' );
 				gui.add( params, 'sphere' );
 				gui.add( params, 'wind', 0, 5, 0.1 );
+
 				const materialFolder = gui.addFolder( 'material' );
-				materialFolder.addColor( clothMaterial, 'color' );
+				materialFolder.addColor( API, 'color' ).onChange( function ( color ) { clothMaterial.color.setHex( color ); } );
 				materialFolder.add( clothMaterial, 'roughness', 0.0, 1, 0.01 );
 				materialFolder.add( clothMaterial, 'sheen', 0.0, 1, 0.01 );
 				materialFolder.add( clothMaterial, 'sheenRoughness', 0.0, 1, 0.01 );
-				materialFolder.addColor( clothMaterial, 'sheenColor' );
+				materialFolder.addColor( API, 'sheenColor' ).onChange( function ( color ) { clothMaterial.sheenColor.setHex( color ); } );
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -452,13 +458,13 @@
 				geometry.setIndex( indices );
 
 				clothMaterial = new THREE.MeshPhysicalNodeMaterial( {
-					color: 0x204080,
+					color: new THREE.Color().setHex( API.color ),
 					side: THREE.DoubleSide,
 					transparent: true,
 					opacity: 0.85,
 					sheen: 1.0,
 					sheenRoughness: 0.5,
-					sheenColor: 0xffffff
+					sheenColor: new THREE.Color().setHex( API.sheenColor ),
 				} );
 
 				clothMaterial.positionNode = Fn( ( { material } ) => {