Examples: Update FBXLoader examples to .outputEncoding = sRGBEncoding (#25441)

* Examples: Update FBXLoader examples to .outputEncoding = sRGBEncoding

Update screenshots

FBXLoader: Add sRGB -> Linear-sRGB conversion for material colors.

FBXLoader: Add sRGB -> Linear-sRGB conversion for vertex colors.

revert bvh screenshot

* Update screenshots

* Bump screenshots

examples/jsm/loaders/FBXLoader.js

@@ -542,12 +542,12 @@ class FBXTreeParser {
 
 		if ( materialNode.Diffuse ) {
 
-			parameters.color = new Color().fromArray( materialNode.Diffuse.value );
+			parameters.color = new Color().fromArray( materialNode.Diffuse.value ).convertSRGBToLinear();
 
 		} else if ( materialNode.DiffuseColor && ( materialNode.DiffuseColor.type === 'Color' || materialNode.DiffuseColor.type === 'ColorRGB' ) ) {
 
 			// The blender exporter exports diffuse here instead of in materialNode.Diffuse
-			parameters.color = new Color().fromArray( materialNode.DiffuseColor.value );
+			parameters.color = new Color().fromArray( materialNode.DiffuseColor.value ).convertSRGBToLinear();
 
 		}
 
@@ -559,12 +559,12 @@ class FBXTreeParser {
 
 		if ( materialNode.Emissive ) {
 
-			parameters.emissive = new Color().fromArray( materialNode.Emissive.value );
+			parameters.emissive = new Color().fromArray( materialNode.Emissive.value ).convertSRGBToLinear();
 
 		} else if ( materialNode.EmissiveColor && ( materialNode.EmissiveColor.type === 'Color' || materialNode.EmissiveColor.type === 'ColorRGB' ) ) {
 
 			// The blender exporter exports emissive color here instead of in materialNode.Emissive
-			parameters.emissive = new Color().fromArray( materialNode.EmissiveColor.value );
+			parameters.emissive = new Color().fromArray( materialNode.EmissiveColor.value ).convertSRGBToLinear();
 
 		}
 
@@ -600,12 +600,12 @@ class FBXTreeParser {
 
 		if ( materialNode.Specular ) {
 
-			parameters.specular = new Color().fromArray( materialNode.Specular.value );
+			parameters.specular = new Color().fromArray( materialNode.Specular.value ).convertSRGBToLinear();
 
 		} else if ( materialNode.SpecularColor && materialNode.SpecularColor.type === 'Color' ) {
 
 			// The blender exporter exports specular color here instead of in materialNode.Specular
-			parameters.specular = new Color().fromArray( materialNode.SpecularColor.value );
+			parameters.specular = new Color().fromArray( materialNode.SpecularColor.value ).convertSRGBToLinear();
 
 		}
 
@@ -1153,7 +1153,7 @@ class FBXTreeParser {
 
 			if ( lightAttribute.Color !== undefined ) {
 
-				color = new Color().fromArray( lightAttribute.Color.value );
+				color = new Color().fromArray( lightAttribute.Color.value ).convertSRGBToLinear();
 
 			}
 
@@ -1469,7 +1469,7 @@ class FBXTreeParser {
 
 			if ( r !== 0 || g !== 0 || b !== 0 ) {
 
-				const color = new Color( r, g, b );
+				const color = new Color( r, g, b ).convertSRGBToLinear();
 				sceneGraph.add( new AmbientLight( color, 1 ) );
 
 			}
@@ -2217,6 +2217,12 @@ class GeometryParser {
 
 		}
 
+		for ( let i = 0, c = new Color(); i < buffer.length; i += 4 ) {
+
+			c.fromArray( buffer, i ).convertSRGBToLinear().toArray( buffer, i );
+
+		}
+
 		return {
 			dataSize: 4,
 			buffer: buffer,

examples/webgl_loader_fbx.html

@@ -35,6 +35,8 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer, stats;
 
 			const clock = new THREE.Clock();
@@ -56,11 +58,11 @@
 				scene.background = new THREE.Color( 0xa0a0a0 );
 				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 1.5 );
 				hemiLight.position.set( 0, 200, 0 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				dirLight.position.set( 0, 200, 100 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 180;
@@ -109,6 +111,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 

examples/webgl_loader_fbx_nurbs.html

@@ -34,6 +34,8 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
 
+			THREE.ColorManagement.legacyMode = false;
+
 			let camera, scene, renderer, stats;
 
 			init();
@@ -76,6 +78,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );

examples/webgl_raycaster_bvh.html

@@ -47,6 +47,8 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			THREE.ColorManagement.legacyMode = false;
+
 			// Add the extension functions
 			THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
 			THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
@@ -97,6 +99,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();

examples/webgpu_skinning_points.html

@@ -93,6 +93,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );