WebGLRenderer: Default output to sRGB (#25783)

* WebGLRenderer: Default output to sRGB

* Examples: Update all for sRGB default renderer output.

* Revert changes in examples/webgl_points_sprites.html

* Clean up

* Revert changes to webgl_points_sprites screenshot.

---------

Co-authored-by: Michael Herzog <[email protected]>

examples/css2d_label.html

@@ -39,6 +39,8 @@
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let gui;
 
 			let camera, scene, renderer, labelRenderer;
@@ -108,6 +110,7 @@
 					normalMap: textureLoader.load( 'textures/planets/earth_normal_2048.jpg' ),
 					normalScale: new THREE.Vector2( 0.85, 0.85 )
 				} );
+				earthMaterial.map.colorSpace = THREE.SRGBColorSpace;
 				const earth = new THREE.Mesh( earthGeometry, earthMaterial );
 				scene.add( earth );
 
@@ -116,6 +119,7 @@
 					shininess: 5,
 					map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
 				} );
+				moonMaterial.map.colorSpace = THREE.SRGBColorSpace;
 				moon = new THREE.Mesh( moonGeometry, moonMaterial );
 				scene.add( moon );
 

examples/jsm/loaders/TiltLoader.js

@@ -1,6 +1,7 @@
 import {
 	BufferAttribute,
 	BufferGeometry,
+	Color,
 	DoubleSide,
 	FileLoader,
 	Group,
@@ -182,6 +183,8 @@ class StrokeGeometry extends BufferGeometry {
 		const vector3 = new Vector3();
 		const vector4 = new Vector3();
 
+		const color = new Color();
+
 		// size = size / 2;
 
 		for ( const k in strokes ) {
@@ -190,7 +193,10 @@ class StrokeGeometry extends BufferGeometry {
 			const positions = stroke[ 0 ];
 			const quaternions = stroke[ 1 ];
 			const size = stroke[ 2 ];
-			const color = stroke[ 3 ];
+			const rgba = stroke[ 3 ];
+			const alpha = stroke[ 3 ][ 3 ];
+
+			color.fromArray( rgba ).convertSRGBToLinear();
 
 			prevPosition.fromArray( positions, 0 );
 			prevQuaternion.fromArray( quaternions, 0 );
@@ -227,13 +233,13 @@ class StrokeGeometry extends BufferGeometry {
 				prevPosition.copy( position );
 				prevQuaternion.copy( quaternion );
 
-				colors.push( ...color );
-				colors.push( ...color );
-				colors.push( ...color );
+				colors.push( ...color, alpha );
+				colors.push( ...color, alpha );
+				colors.push( ...color, alpha );
 
-				colors.push( ...color );
-				colors.push( ...color );
-				colors.push( ...color );
+				colors.push( ...color, alpha );
+				colors.push( ...color, alpha );
+				colors.push( ...color, alpha );
 
 				const p1 = i / l;
 				const p2 = ( i - 3 ) / l;

examples/jsm/misc/RollerCoaster.js

@@ -1,8 +1,10 @@
 import {
 	BufferAttribute,
 	BufferGeometry,
+	Color,
 	Quaternion,
 	Raycaster,
+	SRGBColorSpace,
 	Vector3
 } from 'three';
 
@@ -513,6 +515,8 @@ class TreesGeometry extends BufferGeometry {
 		const raycaster = new Raycaster();
 		raycaster.ray.direction.set( 0, - 1, 0 );
 
+		const _color = new Color();
+
 		for ( let i = 0; i < 2000; i ++ ) {
 
 			const x = Math.random() * 500 - 250;
@@ -544,7 +548,9 @@ class TreesGeometry extends BufferGeometry {
 
 			for ( let j = 0; j < 6; j ++ ) {
 
-				colors.push( 0.2 + random, 0.4 + random, 0 );
+				_color.setRGB( 0.2 + random, 0.4 + random, 0, SRGBColorSpace );
+
+				colors.push( _color.r, _color.g, _color.b );
 
 			}
 

examples/jsm/offscreen/scene.js

@@ -1,5 +1,7 @@
 import * as THREE from '../../../build/three.module.js';
 
+THREE.ColorManagement.enabled = true;
+
 let camera, scene, renderer, group;
 
 function init( canvas, width, height, pixelRatio, path ) {

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -15,7 +15,7 @@ import WebGPUBackground from './WebGPUBackground.js';
 import WebGPUNodes from './nodes/WebGPUNodes.js';
 import WebGPUUtils from './WebGPUUtils.js';
 
-import { Frustum, Matrix4, Vector3, Color, LinearSRGBColorSpace, NoToneMapping, DepthFormat } from 'three';
+import { Frustum, Matrix4, Vector3, Color, SRGBColorSpace, NoToneMapping, DepthFormat } from 'three';
 
 console.info( 'THREE.WebGPURenderer: Modified Matrix4.makePerspective() and Matrix4.makeOrtographic() to work with WebGPU, see https://github.com/mrdoob/three.js/issues/20276.' );
 
@@ -98,7 +98,7 @@ class WebGPURenderer {
 		this.autoClearDepth = true;
 		this.autoClearStencil = true;
 
-		this.outputColorSpace = LinearSRGBColorSpace;
+		this.outputColorSpace = SRGBColorSpace;
 
 		this.toneMapping = NoToneMapping;
 		this.toneMappingExposure = 1.0;

examples/misc_boxselection.html

@@ -111,6 +111,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFShadowMap;
 

examples/misc_controls_drag.html

@@ -42,6 +42,8 @@
 
 			import { DragControls } from 'three/addons/controls/DragControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container;
 			let camera, scene, renderer;
 			let controls, group;

examples/misc_controls_map.html

@@ -58,6 +58,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );

examples/misc_controls_orbit.html

@@ -56,6 +56,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );

examples/misc_controls_pointerlock.html

@@ -264,6 +264,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				//

examples/misc_controls_trackball.html

@@ -104,6 +104,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();

examples/misc_controls_transform.html

@@ -36,6 +36,8 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { TransformControls } from 'three/addons/controls/TransformControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let cameraPersp, cameraOrtho, currentCamera;
 			let scene, renderer, control, orbit;
 
@@ -66,6 +68,7 @@
 				scene.add( light );
 
 				const texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
+				texture.colorSpace = THREE.SRGBColorSpace;
 				texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
 				const geometry = new THREE.BoxGeometry( 200, 200, 200 );

examples/misc_exporter_draco.html

@@ -100,6 +100,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 

examples/misc_exporter_stl.html

@@ -95,6 +95,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 

examples/physics_ammo_break.html

@@ -39,6 +39,8 @@
 		import { ConvexObjectBreaker } from 'three/addons/misc/ConvexObjectBreaker.js';
 		import { ConvexGeometry } from 'three/addons/geometries/ConvexGeometry.js';
 
+		THREE.ColorManagement.enabled = true;
+
 		// - Global variables -
 
 		// Graphics variables

examples/physics_ammo_cloth.html

@@ -37,6 +37,8 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			// Graphics variables
 			let container, stats;
 			let camera, controls, scene, renderer;
@@ -159,6 +161,7 @@
 				ground.receiveShadow = true;
 				textureLoader.load( 'textures/grid.png', function ( texture ) {
 
+					texture.colorSpace = THREE.SRGBColorSpace;
 					texture.wrapS = THREE.RepeatWrapping;
 					texture.wrapT = THREE.RepeatWrapping;
 					texture.repeat.set( 40, 40 );
@@ -242,6 +245,7 @@
 				scene.add( cloth );
 				textureLoader.load( 'textures/grid.png', function ( texture ) {
 
+					texture.colorSpace = THREE.SRGBColorSpace;
 					texture.wrapS = THREE.RepeatWrapping;
 					texture.wrapT = THREE.RepeatWrapping;
 					texture.repeat.set( clothNumSegmentsZ, clothNumSegmentsY );

examples/physics_ammo_rope.html

@@ -36,6 +36,8 @@
 
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+		THREE.ColorManagement.enabled = true;
+
 		// Graphics variables
 		let container, stats;
 		let camera, controls, scene, renderer;
@@ -163,6 +165,7 @@
 			ground.receiveShadow = true;
 			textureLoader.load( 'textures/grid.png', function ( texture ) {
 
+				texture.colorSpace = THREE.SRGBColorSpace;
 				texture.wrapS = THREE.RepeatWrapping;
 				texture.wrapT = THREE.RepeatWrapping;
 				texture.repeat.set( 40, 40 );

examples/physics_ammo_terrain.html

@@ -97,6 +97,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 

examples/physics_ammo_volume.html

@@ -41,6 +41,8 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			// Graphics variables
 			let container, stats;
 			let camera, controls, scene, renderer;
@@ -164,6 +166,7 @@
 				ground.receiveShadow = true;
 				textureLoader.load( 'textures/grid.png', function ( texture ) {
 
+					texture.colorSpace = THREE.SRGBColorSpace;
 					texture.wrapS = THREE.RepeatWrapping;
 					texture.wrapT = THREE.RepeatWrapping;
 					texture.repeat.set( 40, 40 );

examples/webaudio_sandbox.html

@@ -51,6 +51,8 @@
 
 			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, controls, scene, renderer, light;
 
 			let material1, material2, material3;

examples/webaudio_timing.html

@@ -35,6 +35,8 @@
 
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+		THREE.ColorManagement.enabled = true;
+
 		let scene, camera, renderer, clock;
 
 		const objects = [];

examples/webgl2_materials_texture3d_partialupdate.html

@@ -85,6 +85,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();

examples/webgl2_volume_cloud.html

@@ -50,6 +50,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();

examples/webgl_buffergeometry_compression.html

@@ -86,6 +86,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				container.appendChild( renderer.domElement );
 
 				//

examples/webgl_buffergeometry_glbufferattribute.html

@@ -30,6 +30,8 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -92,7 +94,7 @@
 					const vy = ( y / n ) + 0.5;
 					const vz = ( z / n ) + 0.5;
 
-					color.setRGB( vx, vy, vz );
+					color.setRGB( vx, vy, vz, THREE.SRGBColorSpace );
 
 					colors.push( color.r, color.g, color.b );
 

examples/webgl_buffergeometry_indexed.html

@@ -131,6 +131,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				//

examples/webgl_buffergeometry_instancing_interleaved.html

@@ -122,6 +122,7 @@
 
 			const material = new THREE.MeshBasicMaterial();
 			material.map = new THREE.TextureLoader().load( 'textures/crate.gif' );
+			material.map.colorSpace = THREE.SRGBColorSpace;
 			material.map.flipY = false;
 
 			// per instance data

examples/webgl_buffergeometry_points.html

@@ -30,6 +30,8 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -81,7 +83,7 @@
 					const vy = ( y / n ) + 0.5;
 					const vz = ( z / n ) + 0.5;
 
-					color.setRGB( vx, vy, vz );
+					color.setRGB( vx, vy, vz, THREE.SRGBColorSpace );
 
 					colors.push( color.r, color.g, color.b );
 

examples/webgl_buffergeometry_points_interleaved.html

@@ -30,6 +30,8 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -89,7 +91,7 @@
 					const vy = ( y / n ) + 0.5;
 					const vz = ( z / n ) + 0.5;
 
-					color.setRGB( vx, vy, vz );
+					color.setRGB( vx, vy, vz, THREE.SRGBColorSpace );
 
 					const j = ( i + 3 ) * 4;
 

examples/webgl_camera_array.html

@@ -25,6 +25,8 @@
 
 			import * as THREE from 'three';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer;
 			let mesh;
 			const AMOUNT = 6;

examples/webgl_clipping.html

@@ -30,6 +30,8 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer, startTime, object, stats;
 
 			init();

examples/webgl_clipping_advanced.html

@@ -30,6 +30,8 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			function planesFromMesh( vertices, indices ) {
 
 				// creates a clipping volume from a convex triangular mesh

examples/webgl_clipping_intersection.html

@@ -29,6 +29,8 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer;
 
 			const params = {
@@ -83,7 +85,7 @@
 
 					const material = new THREE.MeshLambertMaterial( {
 
-						color: new THREE.Color().setHSL( Math.random(), 0.5, 0.5 ),
+						color: new THREE.Color().setHSL( Math.random(), 0.5, 0.5, THREE.SRGBColorSpace ),
 						side: THREE.DoubleSide,
 						clippingPlanes: clipPlanes,
 						clipIntersection: params.clipIntersection

examples/webgl_clipping_stencil.html

@@ -29,6 +29,8 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import Stats from 'three/addons/libs/stats.module.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer, object, stats;
 			let planes, planeObjects, planeHelpers;
 			let clock;

examples/webgl_decals.html

@@ -38,6 +38,8 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { DecalGeometry } from 'three/addons/geometries/DecalGeometry.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			const container = document.getElementById( 'container' );
 
 			let renderer, scene, camera, stats;
@@ -55,6 +57,7 @@
 
 			const textureLoader = new THREE.TextureLoader();
 			const decalDiffuse = textureLoader.load( 'textures/decal/decal-diffuse.png' );
+			decalDiffuse.colorSpace = THREE.SRGBColorSpace;
 			const decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
 
 			const decalMaterial = new THREE.MeshPhongMaterial( {
@@ -227,6 +230,11 @@
 
 			function loadLeePerrySmith() {
 
+				const map = textureLoader.load( 'models/gltf/LeePerrySmith/Map-COL.jpg' );
+				map.colorSpace = THREE.SRGBColorSpace;
+				const specularMap = textureLoader.load( 'models/gltf/LeePerrySmith/Map-SPEC.jpg' );
+				const normalMap = textureLoader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' );
+
 				const loader = new GLTFLoader();
 
 				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
@@ -234,9 +242,9 @@
 					mesh = gltf.scene.children[ 0 ];
 					mesh.material = new THREE.MeshPhongMaterial( {
 						specular: 0x111111,
-						map: textureLoader.load( 'models/gltf/LeePerrySmith/Map-COL.jpg' ),
-						specularMap: textureLoader.load( 'models/gltf/LeePerrySmith/Map-SPEC.jpg' ),
-						normalMap: textureLoader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' ),
+						map: map,
+						specularMap: specularMap,
+						normalMap: normalMap,
 						shininess: 25
 					} );
 

examples/webgl_effects_stereo.html

@@ -31,6 +31,8 @@
 
 			import { StereoEffect } from 'three/addons/effects/StereoEffect.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, camera, scene, renderer, effect;
 
 			const spheres = [];
@@ -57,6 +59,7 @@
 				scene.background = new THREE.CubeTextureLoader()
 					.setPath( 'textures/cube/Park3Med/' )
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
+				scene.background.colorSpace = THREE.SRGBColorSpace;
 
 				const geometry = new THREE.SphereGeometry( 100, 32, 16 );
 
@@ -64,6 +67,7 @@
 					.setPath( 'textures/cube/Park3Med/' )
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 				textureCube.mapping = THREE.CubeRefractionMapping;
+				textureCube.colorSpace = THREE.SRGBColorSpace;
 
 				const material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
 

examples/webgl_framebuffer_texture.html

@@ -126,6 +126,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.autoClear = false;
 				document.body.appendChild( renderer.domElement );
 

examples/webgl_furnace_test.html

@@ -34,6 +34,8 @@
 
 			import * as THREE from 'three';
 
+			THREE.ColorManagement.enabled = true;
+
 			let scene, camera, renderer, radianceMap;
 
 			const COLOR = 0xcccccc;
@@ -51,8 +53,6 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				document.body.appendChild( renderer.domElement );
 
-				//renderer.outputColorSpace = THREE.SRGBColorSpace; // optional
-
 				window.addEventListener( 'resize', onWindowResize );
 
 				document.body.addEventListener( 'mouseover', function () {
@@ -122,7 +122,6 @@
 
 				const envScene = new THREE.Scene();
 				envScene.background = new THREE.Color( COLOR );
-				if ( renderer.outputColorSpace === THREE.SRGBColorSpace ) envScene.background.convertSRGBToLinear();
 
 				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				radianceMap = pmremGenerator.fromScene( envScene ).texture;

examples/webgl_geometries.html

@@ -29,6 +29,8 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer, stats;
 
 			init();
@@ -53,6 +55,7 @@
 				const map = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
 				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 				map.anisotropy = 16;
+				map.colorSpace = THREE.SRGBColorSpace;
 
 				const material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
 

examples/webgl_geometries_parametric.html

@@ -34,6 +34,8 @@
 			import { ParametricGeometry } from 'three/addons/geometries/ParametricGeometry.js';
 			import { ParametricGeometries } from 'three/addons/geometries/ParametricGeometries.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer, stats;
 
 			init();
@@ -62,6 +64,7 @@
 				const map = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
 				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 				map.anisotropy = 16;
+				map.colorSpace = THREE.SRGBColorSpace;
 
 				const material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
 

examples/webgl_geometry_colors.html

@@ -39,6 +39,8 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -123,13 +125,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 );
 
 				}

examples/webgl_geometry_colors_lookuptable.html

@@ -100,6 +100,7 @@
 				perpCamera.add( pointLight );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.autoClear = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );

examples/webgl_geometry_convex.html

@@ -31,6 +31,8 @@
 			import { ConvexGeometry } from 'three/addons/geometries/ConvexGeometry.js';
 			import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let group, camera, scene, renderer;
 
 			init();
@@ -75,6 +77,7 @@
 
 				const loader = new THREE.TextureLoader();
 				const texture = loader.load( 'textures/sprites/disc.png' );
+				texture.colorSpace = THREE.SRGBColorSpace;
 
 				group = new THREE.Group();
 				scene.add( group );

examples/webgl_geometry_csg.html

@@ -47,6 +47,8 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { SUBTRACTION, INTERSECTION, ADDITION, Brush, Evaluator } from 'three-bvh-csg';
 
+			THREE.ColorManagement.enabled = true;
+
 			let stats;
 			let camera, scene, renderer;
 			let baseBrush, brush;

examples/webgl_geometry_cube.html

@@ -25,6 +25,8 @@
 
 			import * as THREE from 'three';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer;
 			let mesh;
 
@@ -39,6 +41,7 @@
 				scene = new THREE.Scene();
 
 				const texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
+				texture.colorSpace = THREE.SRGBColorSpace;
 
 				const geometry = new THREE.BoxGeometry( 200, 200, 200 );
 				const material = new THREE.MeshBasicMaterial( { map: texture } );

examples/webgl_geometry_dynamic.html

@@ -39,6 +39,8 @@
 
 			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, controls, scene, renderer, stats;
 
 			let mesh, geometry, material, clock;
@@ -75,6 +77,7 @@
 				const texture = new THREE.TextureLoader().load( 'textures/water.jpg' );
 				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 				texture.repeat.set( 5, 5 );
+				texture.colorSpace = THREE.SRGBColorSpace;
 
 				material = new THREE.MeshBasicMaterial( { color: 0x0044ff, map: texture } );
 

examples/webgl_geometry_extrude_shapes.html

@@ -36,6 +36,8 @@
 
 			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer, controls;
 
 			init();

examples/webgl_geometry_extrude_shapes2.html

@@ -441,6 +441,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				container.appendChild( renderer.domElement );
 
 				//

examples/webgl_geometry_extrude_splines.html

@@ -45,6 +45,8 @@
 			import * as Curves from 'three/addons/curves/CurveExtras.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, stats;
 
 			let camera, scene, renderer, splineCamera, cameraHelper, cameraEye;

examples/webgl_geometry_minecraft.html

@@ -170,6 +170,7 @@
 				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 );

examples/webgl_geometry_nurbs.html

@@ -43,6 +43,8 @@
 			import { NURBSSurface } from 'three/addons/curves/NURBSSurface.js';
 			import { ParametricGeometry } from 'three/addons/geometries/ParametricGeometry.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -159,6 +161,7 @@
 				const map = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
 				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 				map.anisotropy = 16;
+				map.colorSpace = THREE.SRGBColorSpace;
 
 				function getSurfacePoint( u, v, target ) {
 

examples/webgl_geometry_shapes.html

@@ -35,6 +35,8 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -73,6 +75,7 @@
 
 				const loader = new THREE.TextureLoader();
 				const texture = loader.load( 'textures/uv_grid_opengl.jpg' );
+				texture.colorSpace = THREE.SRGBColorSpace;
 
 				// it's necessary to apply these settings in order to correctly display the texture on a shape geometry
 

examples/webgl_geometry_spline_editor.html

@@ -44,6 +44,8 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { TransformControls } from 'three/addons/controls/TransformControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container;
 			let camera, scene, renderer;
 			const splineHelperObjects = [];

examples/webgl_geometry_terrain.html

@@ -42,6 +42,8 @@
 			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
 			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, stats;
 			let camera, controls, scene, renderer;
 			let mesh, texture;
@@ -81,6 +83,7 @@
 				texture = new THREE.CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
 				texture.wrapS = THREE.ClampToEdgeWrapping;
 				texture.wrapT = THREE.ClampToEdgeWrapping;
+				texture.colorSpace = THREE.SRGBColorSpace;
 
 				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
 				scene.add( mesh );

examples/webgl_geometry_terrain_raycast.html

@@ -42,6 +42,8 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, stats;
 
 			let camera, controls, scene, renderer;
@@ -104,6 +106,7 @@
 				texture = new THREE.CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
 				texture.wrapS = THREE.ClampToEdgeWrapping;
 				texture.wrapT = THREE.ClampToEdgeWrapping;
+				texture.colorSpace = THREE.SRGBColorSpace;
 
 				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
 				scene.add( mesh );

examples/webgl_geometry_text.html

@@ -155,6 +155,7 @@
 				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

examples/webgl_geometry_text_shapes.html

@@ -40,6 +40,8 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer;
 
 			init();