diff --git a/examples/screenshots/webgl_materials.jpg b/examples/screenshots/webgl_materials.jpg index 3d55038c3b74df..ca8e9ccd675c2f 100644 Binary files a/examples/screenshots/webgl_materials.jpg and b/examples/screenshots/webgl_materials.jpg differ diff --git a/examples/screenshots/webgl_materials_blending.jpg b/examples/screenshots/webgl_materials_blending.jpg index bc4ed3540a7897..5bd5e9dc02c317 100644 Binary files a/examples/screenshots/webgl_materials_blending.jpg and b/examples/screenshots/webgl_materials_blending.jpg differ diff --git a/examples/screenshots/webgl_materials_blending_custom.jpg b/examples/screenshots/webgl_materials_blending_custom.jpg index 6b8e0444ed3367..5dad6e1798ff8c 100644 Binary files a/examples/screenshots/webgl_materials_blending_custom.jpg and b/examples/screenshots/webgl_materials_blending_custom.jpg differ diff --git a/examples/screenshots/webgl_materials_cubemap.jpg b/examples/screenshots/webgl_materials_cubemap.jpg index cfaa04c7623afc..07c50a4f828026 100644 Binary files a/examples/screenshots/webgl_materials_cubemap.jpg and b/examples/screenshots/webgl_materials_cubemap.jpg differ diff --git a/examples/screenshots/webgl_materials_cubemap_refraction.jpg b/examples/screenshots/webgl_materials_cubemap_refraction.jpg index 9ddcc268e6da02..91fa4cce07a678 100644 Binary files a/examples/screenshots/webgl_materials_cubemap_refraction.jpg and b/examples/screenshots/webgl_materials_cubemap_refraction.jpg differ diff --git a/examples/screenshots/webgl_materials_texture_filters.jpg b/examples/screenshots/webgl_materials_texture_filters.jpg index 9646e138e9d2d6..4f89adcd320330 100644 Binary files a/examples/screenshots/webgl_materials_texture_filters.jpg and b/examples/screenshots/webgl_materials_texture_filters.jpg differ diff --git a/examples/screenshots/webgl_materials_texture_manualmipmap.jpg b/examples/screenshots/webgl_materials_texture_manualmipmap.jpg index 9126c298c6aaed..334478c64ddab4 100644 Binary files a/examples/screenshots/webgl_materials_texture_manualmipmap.jpg and b/examples/screenshots/webgl_materials_texture_manualmipmap.jpg differ diff --git a/examples/screenshots/webgl_modifier_curve.jpg b/examples/screenshots/webgl_modifier_curve.jpg index fbd845e15306e3..a5b6ed301e2fa0 100644 Binary files a/examples/screenshots/webgl_modifier_curve.jpg and b/examples/screenshots/webgl_modifier_curve.jpg differ diff --git a/examples/screenshots/webgl_modifier_curve_instanced.jpg b/examples/screenshots/webgl_modifier_curve_instanced.jpg index 23ca4e60e24407..af0baca8dd44ba 100644 Binary files a/examples/screenshots/webgl_modifier_curve_instanced.jpg and b/examples/screenshots/webgl_modifier_curve_instanced.jpg differ diff --git a/examples/screenshots/webgl_modifier_edgesplit.jpg b/examples/screenshots/webgl_modifier_edgesplit.jpg index 247769225bdf5e..b30671ed231f07 100644 Binary files a/examples/screenshots/webgl_modifier_edgesplit.jpg and b/examples/screenshots/webgl_modifier_edgesplit.jpg differ diff --git a/examples/screenshots/webgl_modifier_simplifier.jpg b/examples/screenshots/webgl_modifier_simplifier.jpg index e511507da19eca..e36787ea47d83f 100644 Binary files a/examples/screenshots/webgl_modifier_simplifier.jpg and b/examples/screenshots/webgl_modifier_simplifier.jpg differ diff --git a/examples/screenshots/webgl_multiple_canvases_circle.jpg b/examples/screenshots/webgl_multiple_canvases_circle.jpg index fb3d6d07f43074..ff9aa51b2eaa15 100644 Binary files a/examples/screenshots/webgl_multiple_canvases_circle.jpg and b/examples/screenshots/webgl_multiple_canvases_circle.jpg differ diff --git a/examples/screenshots/webgl_multiple_canvases_complex.jpg b/examples/screenshots/webgl_multiple_canvases_complex.jpg index 70e2662aa5d1a9..0918981c9826d6 100644 Binary files a/examples/screenshots/webgl_multiple_canvases_complex.jpg and b/examples/screenshots/webgl_multiple_canvases_complex.jpg differ diff --git a/examples/screenshots/webgl_multiple_canvases_grid.jpg b/examples/screenshots/webgl_multiple_canvases_grid.jpg index c486709ac99f95..035f5cd5f12f27 100644 Binary files a/examples/screenshots/webgl_multiple_canvases_grid.jpg and b/examples/screenshots/webgl_multiple_canvases_grid.jpg differ diff --git a/examples/screenshots/webgl_multiple_elements_text.jpg b/examples/screenshots/webgl_multiple_elements_text.jpg index efd90b7d9f2a13..9f39d8f744b751 100644 Binary files a/examples/screenshots/webgl_multiple_elements_text.jpg and b/examples/screenshots/webgl_multiple_elements_text.jpg differ diff --git a/examples/webgl_materials.html b/examples/webgl_materials.html index 050b4513385e8f..6790c63dd456cd 100644 --- a/examples/webgl_materials.html +++ b/examples/webgl_materials.html @@ -30,8 +30,6 @@ import Stats from 'three/addons/libs/stats.module.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let stats; let camera, scene, renderer; @@ -61,6 +59,7 @@ // Materials const texture = new THREE.Texture( generateTexture() ); + texture.colorSpace = THREE.SRGBColorSpace; texture.needsUpdate = true; materials.push( new THREE.MeshLambertMaterial( { map: texture, transparent: true } ) ); @@ -110,7 +109,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 ); // diff --git a/examples/webgl_materials_blending.html b/examples/webgl_materials_blending.html index c1f7824d1b9e31..c64b51f5bda708 100644 --- a/examples/webgl_materials_blending.html +++ b/examples/webgl_materials_blending.html @@ -25,8 +25,6 @@ import * as THREE from 'three'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let camera, scene, renderer; let mapBg; @@ -63,6 +61,7 @@ ctx.fillRect( 96, 96, 32, 32 ); mapBg = new THREE.CanvasTexture( canvas ); + mapBg.colorSpace = THREE.SRGBColorSpace; mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping; mapBg.repeat.set( 64, 32 ); @@ -78,11 +77,13 @@ { name: 'Multiply', constant: THREE.MultiplyBlending } ]; - const map0 = textureLoader.load( 'textures/uv_grid_opengl.jpg' ); - const map1 = textureLoader.load( 'textures/sprite0.jpg' ); - const map2 = textureLoader.load( 'textures/sprite0.png' ); - const map3 = textureLoader.load( 'textures/lensflare/lensflare0.png' ); - const map4 = textureLoader.load( 'textures/lensflare/lensflare0_alpha.png' ); + const assignSRGB = ( texture ) => { texture.colorSpace = THREE.SRGBColorSpace; }; + + const map0 = textureLoader.load( 'textures/uv_grid_opengl.jpg', assignSRGB ); + const map1 = textureLoader.load( 'textures/sprite0.jpg', assignSRGB ); + const map2 = textureLoader.load( 'textures/sprite0.png', assignSRGB ); + const map3 = textureLoader.load( 'textures/lensflare/lensflare0.png', assignSRGB ); + const map4 = textureLoader.load( 'textures/lensflare/lensflare0_alpha.png', assignSRGB ); const geo1 = new THREE.PlaneGeometry( 100, 100 ); const geo2 = new THREE.PlaneGeometry( 100, 25 ); @@ -121,7 +122,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 ); @@ -162,6 +162,7 @@ ctx.fillText( text, 10, 22 ); const map = new THREE.CanvasTexture( canvas ); + map.colorSpace = THREE.SRGBColorSpace; const material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); diff --git a/examples/webgl_materials_blending_custom.html b/examples/webgl_materials_blending_custom.html index 3187e35d4bfded..a8d948e485b789 100644 --- a/examples/webgl_materials_blending_custom.html +++ b/examples/webgl_materials_blending_custom.html @@ -27,8 +27,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; let mapBg; @@ -71,6 +69,7 @@ ctx.fillRect( 96, 96, 32, 32 ); mapBg = new THREE.CanvasTexture( canvas ); + mapBg.colorSpace = THREE.SRGBColorSpace; mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping; mapBg.repeat.set( 64, 32 ); @@ -109,6 +108,7 @@ const geo2 = new THREE.PlaneGeometry( 100, 25 ); const texture = new THREE.TextureLoader().load( 'textures/lensflare/lensflare0_alpha.png' ); + texture.colorSpace = THREE.SRGBColorSpace; for ( let i = 0; i < dst.length; i ++ ) { @@ -177,7 +177,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 ); @@ -224,6 +223,7 @@ ctx.fillText( text, 8, 22 ); const map = new THREE.CanvasTexture( canvas ); + map.colorSpace = THREE.SRGBColorSpace; const material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); return material; diff --git a/examples/webgl_materials_cubemap.html b/examples/webgl_materials_cubemap.html index 8a63fc9182156a..9a2994df1f91cd 100644 --- a/examples/webgl_materials_cubemap.html +++ b/examples/webgl_materials_cubemap.html @@ -65,7 +65,9 @@ ]; const reflectionCube = new THREE.CubeTextureLoader().load( urls ); + reflectionCube.colorSpace = THREE.SRGBColorSpace; const refractionCube = new THREE.CubeTextureLoader().load( urls ); + refractionCube.colorSpace = THREE.SRGBColorSpace; refractionCube.mapping = THREE.CubeRefractionMapping; scene = new THREE.Scene(); @@ -109,7 +111,6 @@ //renderer renderer = new THREE.WebGLRenderer(); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); diff --git a/examples/webgl_materials_cubemap_mipmaps.html b/examples/webgl_materials_cubemap_mipmaps.html index d92516fb5e8a81..7fcfff32a38701 100644 --- a/examples/webgl_materials_cubemap_mipmaps.html +++ b/examples/webgl_materials_cubemap_mipmaps.html @@ -34,8 +34,6 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let container; let camera, scene, renderer; @@ -93,6 +91,7 @@ const customizedCubeTexture = mipmaps.shift(); customizedCubeTexture.mipmaps = mipmaps; + customizedCubeTexture.colorSpace = THREE.SRGBColorSpace; customizedCubeTexture.minFilter = THREE.LinearMipMapLinearFilter; customizedCubeTexture.magFilter = THREE.LinearFilter; customizedCubeTexture.generateMipmaps = false; @@ -145,7 +144,6 @@ //renderer renderer = new THREE.WebGLRenderer( { antialias: true } ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); diff --git a/examples/webgl_materials_cubemap_refraction.html b/examples/webgl_materials_cubemap_refraction.html index 2a6067b43f6a88..c69cf2867b0fc7 100644 --- a/examples/webgl_materials_cubemap_refraction.html +++ b/examples/webgl_materials_cubemap_refraction.html @@ -35,8 +35,6 @@ import { PLYLoader } from 'three/addons/loaders/PLYLoader.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let container, stats; let camera, scene, renderer; @@ -70,6 +68,7 @@ ]; const textureCube = new THREE.CubeTextureLoader().load( urls ); + textureCube.colorSpace = THREE.SRGBColorSpace; textureCube.mapping = THREE.CubeRefractionMapping; scene = new THREE.Scene(); @@ -100,7 +99,6 @@ // renderer = new THREE.WebGLRenderer(); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); diff --git a/examples/webgl_materials_texture_filters.html b/examples/webgl_materials_texture_filters.html index 1922ec47bfc4df..da02aaf1a8edcf 100644 --- a/examples/webgl_materials_texture_filters.html +++ b/examples/webgl_materials_texture_filters.html @@ -60,8 +60,6 @@ import * as THREE from 'three'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - const SCREEN_WIDTH = window.innerWidth; const SCREEN_HEIGHT = window.innerHeight; @@ -109,6 +107,7 @@ context.fillRect( 64, 64, 64, 64 ); const textureCanvas = new THREE.CanvasTexture( imageCanvas ); + textureCanvas.colorSpace = THREE.SRGBColorSpace; textureCanvas.repeat.set( 1000, 1000 ); textureCanvas.wrapS = THREE.RepeatWrapping; textureCanvas.wrapT = THREE.RepeatWrapping; @@ -117,7 +116,7 @@ textureCanvas2.magFilter = THREE.NearestFilter; textureCanvas2.minFilter = THREE.NearestFilter; - const materialCanvas = new THREE.MeshBasicMaterial( { map: textureCanvas } ); + const materialCanvas = new THREE.MeshBasicMaterial( { map: textureCanvas } ); const materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } ); const geometry = new THREE.PlaneGeometry( 100, 100 ); @@ -181,16 +180,18 @@ const texturePainting = new THREE.TextureLoader().load( 'textures/758px-Canestra_di_frutta_(Caravaggio).jpg', callbackPainting ); const texturePainting2 = new THREE.Texture(); + const materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } ); const materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } ); + texturePainting.colorSpace = THREE.SRGBColorSpace; + texturePainting2.colorSpace = THREE.SRGBColorSpace; texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter; texturePainting.minFilter = texturePainting.magFilter = THREE.LinearFilter; texturePainting.mapping = THREE.UVMapping; renderer = new THREE.WebGLRenderer( { antialias: true } ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); renderer.autoClear = false; diff --git a/examples/webgl_materials_texture_manualmipmap.html b/examples/webgl_materials_texture_manualmipmap.html index 3611aa4d1bac7b..ff2c7b02699f74 100644 --- a/examples/webgl_materials_texture_manualmipmap.html +++ b/examples/webgl_materials_texture_manualmipmap.html @@ -60,8 +60,6 @@ import * as THREE from 'three'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - const SCREEN_WIDTH = window.innerWidth; const SCREEN_HEIGHT = window.innerHeight; @@ -123,6 +121,7 @@ textureCanvas1.mipmaps[ 5 ] = mipmap( 4, '#004' ); textureCanvas1.mipmaps[ 6 ] = mipmap( 2, '#044' ); textureCanvas1.mipmaps[ 7 ] = mipmap( 1, '#404' ); + textureCanvas1.colorSpace = THREE.SRGBColorSpace; textureCanvas1.repeat.set( 1000, 1000 ); textureCanvas1.wrapS = THREE.RepeatWrapping; textureCanvas1.wrapT = THREE.RepeatWrapping; @@ -198,12 +197,13 @@ const materialPainting1 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting1 } ); const materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } ); + texturePainting1.colorSpace = THREE.SRGBColorSpace; + texturePainting2.colorSpace = THREE.SRGBColorSpace; texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter; texturePainting1.minFilter = texturePainting1.magFilter = THREE.LinearFilter; texturePainting1.mapping = THREE.UVMapping; renderer = new THREE.WebGLRenderer( { antialias: true } ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); renderer.autoClear = false; diff --git a/examples/webgl_materials_wireframe.html b/examples/webgl_materials_wireframe.html index 75286503fc0fb7..6a2a58ea99b619 100644 --- a/examples/webgl_materials_wireframe.html +++ b/examples/webgl_materials_wireframe.html @@ -68,8 +68,6 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - const API = { thickness: 1 }; @@ -81,7 +79,6 @@ function init() { renderer = new THREE.WebGLRenderer( { antialias: true } ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); diff --git a/examples/webgl_modifier_curve.html b/examples/webgl_modifier_curve.html index 5cc8e5bfc548ac..c44e881b81a383 100644 --- a/examples/webgl_modifier_curve.html +++ b/examples/webgl_modifier_curve.html @@ -35,8 +35,6 @@ import { FontLoader } from 'three/addons/loaders/FontLoader.js'; import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - const ACTION_SELECT = 1, ACTION_NONE = 0; const curveHandles = []; const mouse = new THREE.Vector2(); @@ -144,7 +142,6 @@ // renderer = new THREE.WebGLRenderer( { antialias: true } ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); diff --git a/examples/webgl_modifier_curve_instanced.html b/examples/webgl_modifier_curve_instanced.html index fc557f49bf9c2c..7de59bd1a3c1cd 100644 --- a/examples/webgl_modifier_curve_instanced.html +++ b/examples/webgl_modifier_curve_instanced.html @@ -35,8 +35,6 @@ import { FontLoader } from 'three/addons/loaders/FontLoader.js'; import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - const ACTION_SELECT = 1, ACTION_NONE = 0; const curveHandles = []; const mouse = new THREE.Vector2(); @@ -170,7 +168,6 @@ // renderer = new THREE.WebGLRenderer( { antialias: true } ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); diff --git a/examples/webgl_modifier_edgesplit.html b/examples/webgl_modifier_edgesplit.html index ebe188b11ed892..e7f324e3db1055 100644 --- a/examples/webgl_modifier_edgesplit.html +++ b/examples/webgl_modifier_edgesplit.html @@ -32,8 +32,6 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let renderer, scene, camera; let modifier, mesh, baseGeometry; let map; @@ -59,7 +57,6 @@ document.body.appendChild( info ); renderer = new THREE.WebGLRenderer( { antialias: true } ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); @@ -112,6 +109,7 @@ new THREE.TextureLoader().load( './models/obj/cerberus/Cerberus_A.jpg', function ( texture ) { map = texture; + map.colorSpace = THREE.SRGBColorSpace; if ( mesh !== undefined && params.showMap ) { diff --git a/examples/webgl_modifier_simplifier.html b/examples/webgl_modifier_simplifier.html index ce8489c12b7f6c..7350d989f6bb42 100644 --- a/examples/webgl_modifier_simplifier.html +++ b/examples/webgl_modifier_simplifier.html @@ -29,8 +29,6 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { SimplifyModifier } from 'three/addons/modifiers/SimplifyModifier.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let renderer, scene, camera; init(); @@ -46,7 +44,6 @@ document.body.appendChild( info ); renderer = new THREE.WebGLRenderer( { antialias: true } ); - renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); diff --git a/examples/webgl_multiple_canvases_circle.html b/examples/webgl_multiple_canvases_circle.html index 294635372fde66..861d4ae14f0f9f 100644 --- a/examples/webgl_multiple_canvases_circle.html +++ b/examples/webgl_multiple_canvases_circle.html @@ -147,8 +147,6 @@