diff --git a/examples/jsm/loaders/VRMLLoader.js b/examples/jsm/loaders/VRMLLoader.js index 5ae51ec04ef566..dbb3b5cf92a75f 100644 --- a/examples/jsm/loaders/VRMLLoader.js +++ b/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 ); diff --git a/examples/screenshots/webgl_loader_vrml.jpg b/examples/screenshots/webgl_loader_vrml.jpg index 4ad6380eef5979..3123ec34c08e69 100644 Binary files a/examples/screenshots/webgl_loader_vrml.jpg and b/examples/screenshots/webgl_loader_vrml.jpg differ diff --git a/examples/webgl_loader_vrml.html b/examples/webgl_loader_vrml.html index d92ac66fcbc047..f4ce21059bde66 100644 --- a/examples/webgl_loader_vrml.html +++ b/examples/webgl_loader_vrml.html @@ -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 );