VRMLLoader: Move to sRGB. (#26111)

* VRMLLoader: Move to sRGB.

* Examples: Update screenshots.

Author: Mugen87

examples/jsm/loaders/VRMLLoader.js

@@ -28,6 +28,7 @@ import {
 	Scene,
 	ShapeUtils,
 	SphereGeometry,
+	SRGBColorSpace,
 	TextureLoader,
 	Vector2,
 	Vector3
@@ -1370,6 +1371,7 @@ class VRMLLoader extends Loader {
 						}
 
 						texture = new DataTexture( data, width, height );
+						texture.colorSpace = SRGBColorSpace;
 						texture.needsUpdate = true;
 						texture.__type = textureType; // needed for material modifications
 						break;
@@ -1442,6 +1444,7 @@ class VRMLLoader extends Loader {
 
 				texture.wrapS = wrapS;
 				texture.wrapT = wrapT;
+				texture.colorSpace = SRGBColorSpace;
 
 			}
 
@@ -1700,6 +1703,8 @@ class VRMLLoader extends Loader {
 
 				}
 
+				convertColorsToLinearSRGB( colorAttribute );
+
 			}
 
 			if ( normal ) {
@@ -1901,6 +1906,8 @@ class VRMLLoader extends Loader {
 
 				}
 
+				convertColorsToLinearSRGB( colorAttribute );
+
 			}
 
 			//
@@ -1966,7 +1973,15 @@ class VRMLLoader extends Loader {
 			const geometry = new BufferGeometry();
 
 			geometry.setAttribute( 'position', new Float32BufferAttribute( coord, 3 ) );
-			if ( color ) geometry.setAttribute( 'color', new Float32BufferAttribute( color, 3 ) );
+
+			if ( color ) {
+
+				const colorAttribute = new Float32BufferAttribute( color, 3 );
+				convertColorsToLinearSRGB( colorAttribute );
+
+				geometry.setAttribute( 'color', colorAttribute );
+
+			}
 
 			geometry._type = 'points';
 
@@ -2380,6 +2395,8 @@ class VRMLLoader extends Loader {
 
 				}
 
+				convertColorsToLinearSRGB( colorAttribute );
+
 			}
 
 			// normal attribute
@@ -3067,6 +3084,21 @@ class VRMLLoader extends Loader {
 
 		}
 
+		function convertColorsToLinearSRGB( attribute ) {
+
+			const color = new Color();
+
+			for ( let i = 0; i < attribute.count; i ++ ) {
+
+				color.fromBufferAttribute( attribute, i );
+				color.convertSRGBToLinear();
+
+				attribute.setXYZ( i, color.r, color.g, color.b );
+
+			}
+
+		}
+
 		/**
 		 * Vertically paints the faces interpolating between the
 		 * specified colors at the specified angels. This is used for the Background
@@ -3164,7 +3196,7 @@ class VRMLLoader extends Loader {
 				const colorA = colors[ thresholdIndexA ];
 				const colorB = colors[ thresholdIndexB ];
 
-				color.copy( colorA ).lerp( colorB, t );
+				color.copy( colorA ).lerp( colorB, t ).convertSRGBToLinear();
 
 				colorAttribute.setXYZ( index, color.r, color.g, color.b );
 

examples/screenshots/webgl_loader_vrml.jpg

@@ -35,8 +35,6 @@
 			import { VRMLLoader } from 'three/addons/loaders/VRMLLoader.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer, stats, controls, loader;
 
 			const params = {
@@ -74,10 +72,10 @@
 
 				// light
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
-				scene.add( hemiLight );
+				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
+				scene.add( ambientLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
 				dirLight.position.set( 200, 200, 200 );
 				scene.add( dirLight );
 
@@ -87,7 +85,6 @@
 				// renderer
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );