diff --git a/examples/screenshots/webgl_geometry_minecraft.jpg b/examples/screenshots/webgl_geometry_minecraft.jpg index a620b8fc8cfd8f..c4bb99daa2a630 100644 Binary files a/examples/screenshots/webgl_geometry_minecraft.jpg and b/examples/screenshots/webgl_geometry_minecraft.jpg differ diff --git a/examples/screenshots/webgl_geometry_text.jpg b/examples/screenshots/webgl_geometry_text.jpg index e963c8adc66e9b..a8ac08c2b41bcb 100644 Binary files a/examples/screenshots/webgl_geometry_text.jpg and b/examples/screenshots/webgl_geometry_text.jpg differ diff --git a/examples/screenshots/webgl_gpgpu_birds_gltf.jpg b/examples/screenshots/webgl_gpgpu_birds_gltf.jpg index ece7bc5c68f6f0..06d9290693d62d 100644 Binary files a/examples/screenshots/webgl_gpgpu_birds_gltf.jpg and b/examples/screenshots/webgl_gpgpu_birds_gltf.jpg differ diff --git a/examples/screenshots/webgl_gpgpu_water.jpg b/examples/screenshots/webgl_gpgpu_water.jpg index 6109550e7fc08c..c5d572d841122d 100644 Binary files a/examples/screenshots/webgl_gpgpu_water.jpg and b/examples/screenshots/webgl_gpgpu_water.jpg differ diff --git a/examples/screenshots/webgl_multiple_renderers.jpg b/examples/screenshots/webgl_multiple_renderers.jpg index 76f7aa0552a18c..86a82f1885de28 100644 Binary files a/examples/screenshots/webgl_multiple_renderers.jpg and b/examples/screenshots/webgl_multiple_renderers.jpg differ diff --git a/examples/screenshots/webgl_nodes_points.jpg b/examples/screenshots/webgl_nodes_points.jpg index 10f865654c9588..04ff84338a6a29 100644 Binary files a/examples/screenshots/webgl_nodes_points.jpg and b/examples/screenshots/webgl_nodes_points.jpg differ diff --git a/examples/screenshots/webgl_points_billboards.jpg b/examples/screenshots/webgl_points_billboards.jpg index 6010966f0403f5..ca85f98b0588ec 100644 Binary files a/examples/screenshots/webgl_points_billboards.jpg and b/examples/screenshots/webgl_points_billboards.jpg differ diff --git a/examples/screenshots/webgl_points_sprites.jpg b/examples/screenshots/webgl_points_sprites.jpg index 926d5167e8200e..bcc8b6adc7c66d 100644 Binary files a/examples/screenshots/webgl_points_sprites.jpg and b/examples/screenshots/webgl_points_sprites.jpg differ diff --git a/examples/screenshots/webgl_portal.jpg b/examples/screenshots/webgl_portal.jpg index bc399d371c0c43..ffc6bb1107055a 100644 Binary files a/examples/screenshots/webgl_portal.jpg and b/examples/screenshots/webgl_portal.jpg differ diff --git a/examples/screenshots/webgl_shadowmap_viewer.jpg b/examples/screenshots/webgl_shadowmap_viewer.jpg index 897a78046a4df3..51df2627017458 100644 Binary files a/examples/screenshots/webgl_shadowmap_viewer.jpg and b/examples/screenshots/webgl_shadowmap_viewer.jpg differ diff --git a/examples/screenshots/webgl_shadowmap_vsm.jpg b/examples/screenshots/webgl_shadowmap_vsm.jpg index acd9ca25697458..15300d96fde6f3 100644 Binary files a/examples/screenshots/webgl_shadowmap_vsm.jpg and b/examples/screenshots/webgl_shadowmap_vsm.jpg differ diff --git a/examples/webgl_geometry_minecraft.html b/examples/webgl_geometry_minecraft.html index f5b5fb0c99dfe2..d427e01b04e248 100644 --- a/examples/webgl_geometry_minecraft.html +++ b/examples/webgl_geometry_minecraft.html @@ -43,8 +43,6 @@ import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js'; import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let container, stats; let camera, controls, scene, renderer; @@ -157,22 +155,22 @@ geometry.computeBoundingSphere(); const texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' ); + texture.colorSpace = THREE.SRGBColorSpace; texture.magFilter = THREE.NearestFilter; const mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: texture, side: THREE.DoubleSide } ) ); scene.add( mesh ); - const ambientLight = new THREE.AmbientLight( 0xcccccc ); + const ambientLight = new THREE.AmbientLight( 0xeeeeee ); scene.add( ambientLight ); - const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 ); + const directionalLight = new THREE.DirectionalLight( 0xffffff, 4 ); directionalLight.position.set( 1, 1, 0.5 ).normalize(); scene.add( directionalLight ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; container.appendChild( renderer.domElement ); controls = new FirstPersonControls( camera, renderer.domElement ); diff --git a/examples/webgl_geometry_text.html b/examples/webgl_geometry_text.html index eb22b90bae422f..db8aebf8382cc6 100644 --- a/examples/webgl_geometry_text.html +++ b/examples/webgl_geometry_text.html @@ -36,7 +36,6 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; THREE.Cache.enabled = true; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. let container; @@ -156,7 +155,6 @@ renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; container.appendChild( renderer.domElement ); // EVENTS diff --git a/examples/webgl_gpgpu_birds_gltf.html b/examples/webgl_gpgpu_birds_gltf.html index 8c09f461c89ee4..3653378946afb4 100644 --- a/examples/webgl_gpgpu_birds_gltf.html +++ b/examples/webgl_gpgpu_birds_gltf.html @@ -228,8 +228,6 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - /* TEXTURE WIDTH FOR SIMULATION */ const WIDTH = 64; const BIRDS = WIDTH * WIDTH; @@ -382,13 +380,13 @@ // LIGHTS const hemiLight = new THREE.HemisphereLight( colors[ selectModel ], 0xffffff, 1.6 ); - hemiLight.color.setHSL( 0.6, 1, 0.6 ); - hemiLight.groundColor.setHSL( 0.095, 1, 0.75 ); + hemiLight.color.setHSL( 0.6, 1, 0.6, THREE.SRGBColorSpace ); + hemiLight.groundColor.setHSL( 0.095, 1, 0.75, THREE.SRGBColorSpace ); hemiLight.position.set( 0, 50, 0 ); scene.add( hemiLight ); const dirLight = new THREE.DirectionalLight( 0x00CED1, 0.6 ); - dirLight.color.setHSL( 0.1, 1, 0.95 ); + dirLight.color.setHSL( 0.1, 1, 0.95, THREE.SRGBColorSpace ); dirLight.position.set( - 1, 1.75, 1 ); dirLight.position.multiplyScalar( 30 ); scene.add( dirLight ); @@ -396,7 +394,6 @@ renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; container.appendChild( renderer.domElement ); initComputeRenderer(); diff --git a/examples/webgl_gpgpu_protoplanet.html b/examples/webgl_gpgpu_protoplanet.html index ab9be1edb48ea0..01805c75f31cc6 100644 --- a/examples/webgl_gpgpu_protoplanet.html +++ b/examples/webgl_gpgpu_protoplanet.html @@ -251,8 +251,6 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - // Texture width for simulation (each texel is a debris particle) const WIDTH = 64; @@ -285,7 +283,6 @@ renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; container.appendChild( renderer.domElement ); const controls = new OrbitControls( camera, renderer.domElement ); diff --git a/examples/webgl_gpgpu_water.html b/examples/webgl_gpgpu_water.html index a4046c2d1357c7..047b0da30cfae0 100644 --- a/examples/webgl_gpgpu_water.html +++ b/examples/webgl_gpgpu_water.html @@ -267,8 +267,6 @@ import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js'; import { SimplexNoise } from 'three/addons/math/SimplexNoise.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - // Texture width for simulation const WIDTH = 128; @@ -324,7 +322,6 @@ renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; container.appendChild( renderer.domElement ); stats = new Stats(); diff --git a/examples/webgl_multiple_renderers.html b/examples/webgl_multiple_renderers.html index e770a84c7468b8..730ffdd0465b71 100644 --- a/examples/webgl_multiple_renderers.html +++ b/examples/webgl_multiple_renderers.html @@ -36,8 +36,6 @@ import * as THREE from 'three'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let camera, scene, renderer1, renderer2; let mesh1, mesh2, mesh3; @@ -76,6 +74,7 @@ context.fillRect( 0, 0, canvas.width, canvas.height ); const shadowTexture = new THREE.CanvasTexture( canvas ); + shadowTexture.colorSpace = THREE.SRGBColorSpace; const shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } ); const shadowGeo = new THREE.PlaneGeometry( 300, 300, 1, 1 ); @@ -118,13 +117,13 @@ for ( let i = 0; i < count; i ++ ) { - color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 ); + color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5, THREE.SRGBColorSpace ); colors1.setXYZ( i, color.r, color.g, color.b ); - color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 ); + color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5, THREE.SRGBColorSpace ); colors2.setXYZ( i, color.r, color.g, color.b ); - color.setRGB( 1, 0.8 - ( positions3.getY( i ) / radius + 1 ) / 2, 0 ); + color.setRGB( 1, 0.8 - ( positions3.getY( i ) / radius + 1 ) / 2, 0, THREE.SRGBColorSpace ); colors3.setXYZ( i, color.r, color.g, color.b ); } @@ -164,13 +163,11 @@ renderer1 = new THREE.WebGLRenderer( { antialias: true } ); renderer1.setPixelRatio( window.devicePixelRatio ); renderer1.setSize( window.innerWidth, window.innerHeight / 2 ); - renderer1.outputColorSpace = THREE.LinearSRGBColorSpace; document.body.appendChild( renderer1.domElement ); renderer2 = new THREE.WebGLRenderer(); renderer2.setPixelRatio( window.devicePixelRatio ); renderer2.setSize( window.innerWidth, window.innerHeight / 2 ); - renderer2.outputColorSpace = THREE.LinearSRGBColorSpace; document.body.appendChild( renderer2.domElement ); } @@ -197,7 +194,7 @@ position.fromArray( positions.array, i * 3 ); - color.setRGB( 1, Math.sin( time + position.x ), Math.cos( time * 2.123 + position.x ) ); + color.setRGB( 1, Math.sin( time + position.x ), Math.cos( time * 2.123 + position.x ), THREE.SRGBColorSpace ); colors.setXYZ( i, color.r, color.g, color.b ); } diff --git a/examples/webgl_nodes_points.html b/examples/webgl_nodes_points.html index d27ec035909d4b..8b5a571b40d9d1 100644 --- a/examples/webgl_nodes_points.html +++ b/examples/webgl_nodes_points.html @@ -41,8 +41,6 @@ import { nodeFrame } from 'three/addons/renderers/webgl/nodes/WebGLNodes.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let camera, scene, renderer, stats; init(); @@ -78,7 +76,7 @@ speed.push( 20 + Math.random() * 50 ); - intensity.push( Math.random() * .15 ); + intensity.push( Math.random() * .04 ); size.push( 30 + Math.random() * 230 ); @@ -95,6 +93,7 @@ // Forked from: https://answers.unrealengine.com/questions/143267/emergency-need-help-with-fire-fx-weird-loop.html const fireMap = new THREE.TextureLoader().load( 'textures/sprites/firetorch_1.jpg' ); + fireMap.colorSpace = THREE.SRGBColorSpace; // nodes @@ -139,7 +138,6 @@ renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; document.body.appendChild( renderer.domElement ); // stats diff --git a/examples/webgl_points_billboards.html b/examples/webgl_points_billboards.html index 270a9da2b843fd..44b88747ad8fe5 100644 --- a/examples/webgl_points_billboards.html +++ b/examples/webgl_points_billboards.html @@ -33,8 +33,6 @@ 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, material; let mouseX = 0, mouseY = 0; @@ -56,6 +54,7 @@ const vertices = []; const sprite = new THREE.TextureLoader().load( 'textures/sprites/disc.png' ); + sprite.colorSpace = THREE.SRGBColorSpace; for ( let i = 0; i < 10000; i ++ ) { @@ -70,7 +69,7 @@ geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) ); material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite, alphaTest: 0.5, transparent: true } ); - material.color.setHSL( 1.0, 0.3, 0.7 ); + material.color.setHSL( 1.0, 0.3, 0.7, THREE.SRGBColorSpace ); const particles = new THREE.Points( geometry, material ); scene.add( particles ); @@ -80,7 +79,6 @@ renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; document.body.appendChild( renderer.domElement ); // diff --git a/examples/webgl_points_sprites.html b/examples/webgl_points_sprites.html index 71d412ee1ad376..224965dbe02ff4 100644 --- a/examples/webgl_points_sprites.html +++ b/examples/webgl_points_sprites.html @@ -34,8 +34,6 @@ 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, parameters; let mouseX = 0, mouseY = 0; @@ -60,11 +58,13 @@ const textureLoader = new THREE.TextureLoader(); - const sprite1 = textureLoader.load( 'textures/sprites/snowflake1.png' ); - const sprite2 = textureLoader.load( 'textures/sprites/snowflake2.png' ); - const sprite3 = textureLoader.load( 'textures/sprites/snowflake3.png' ); - const sprite4 = textureLoader.load( 'textures/sprites/snowflake4.png' ); - const sprite5 = textureLoader.load( 'textures/sprites/snowflake5.png' ); + const assignSRGB = ( texture ) => { texture.colorSpace = THREE.SRGBColorSpace; }; + + const sprite1 = textureLoader.load( 'textures/sprites/snowflake1.png', assignSRGB ); + const sprite2 = textureLoader.load( 'textures/sprites/snowflake2.png', assignSRGB ); + const sprite3 = textureLoader.load( 'textures/sprites/snowflake3.png', assignSRGB ); + const sprite4 = textureLoader.load( 'textures/sprites/snowflake4.png', assignSRGB ); + const sprite5 = textureLoader.load( 'textures/sprites/snowflake5.png', assignSRGB ); for ( let i = 0; i < 10000; i ++ ) { @@ -93,7 +93,7 @@ const size = parameters[ i ][ 2 ]; materials[ i ] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } ); - materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ] ); + materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ], THREE.SRGBColorSpace ); const particles = new THREE.Points( geometry, materials[ i ] ); @@ -110,7 +110,6 @@ renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; document.body.appendChild( renderer.domElement ); // @@ -206,7 +205,7 @@ const color = parameters[ i ][ 0 ]; const h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360; - materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ] ); + materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ], THREE.SRGBColorSpace ); } diff --git a/examples/webgl_portal.html b/examples/webgl_portal.html index 143cd2286acc6c..aa4271f0448f6b 100644 --- a/examples/webgl_portal.html +++ b/examples/webgl_portal.html @@ -40,8 +40,6 @@ import * as CameraUtils from 'three/addons/utils/CameraUtils.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let camera, scene, renderer; let cameraControls; @@ -60,7 +58,7 @@ // renderer renderer = new THREE.WebGLRenderer( { antialias: true } ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; + renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); diff --git a/examples/webgl_shadowmap_viewer.html b/examples/webgl_shadowmap_viewer.html index 173668196ac267..04423fb19bfd38 100644 --- a/examples/webgl_shadowmap_viewer.html +++ b/examples/webgl_shadowmap_viewer.html @@ -33,8 +33,6 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { ShadowMapViewer } from 'three/addons/utils/ShadowMapViewer.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let camera, scene, renderer, clock, stats; let dirLight, spotLight; let torusKnot, cube; @@ -146,7 +144,6 @@ renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.BasicShadowMap; diff --git a/examples/webgl_shadowmap_vsm.html b/examples/webgl_shadowmap_vsm.html index 16ac186426bf81..1570d9d3ccb216 100644 --- a/examples/webgl_shadowmap_vsm.html +++ b/examples/webgl_shadowmap_vsm.html @@ -33,8 +33,6 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let camera, scene, renderer, clock, stats; let dirLight, spotLight; let torusKnot, dirGroup; @@ -191,7 +189,6 @@ renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.VSMShadowMap; diff --git a/examples/webgpu_shadowmap.html b/examples/webgpu_shadowmap.html index 587b021b5decbe..fe5590d68d7060 100644 --- a/examples/webgpu_shadowmap.html +++ b/examples/webgpu_shadowmap.html @@ -34,8 +34,6 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let camera, scene, renderer, clock; let dirLight, spotLight; let torusKnot, dirGroup; @@ -148,7 +146,6 @@ renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setAnimationLoop( animate ); renderer.toneMapping = THREE.ACESFilmicToneMapping; - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; document.body.appendChild( renderer.domElement ); // Mouse control