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 <michael.herzog@human-interactive.org>
mrdoob · Apr 7, 2023 · 13397a8 · 13397a8
1 parent 435bcc6
commit 13397a8
Show file tree

Hide file tree

Showing 205 changed files with 340 additions and 40 deletions.
diff --git a/examples/css2d_label.html b/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 );
 

diff --git a/examples/jsm/loaders/TiltLoader.js b/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;

diff --git a/examples/jsm/misc/RollerCoaster.js b/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 );
 
 			}
 

diff --git a/examples/jsm/offscreen/scene.js 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 ) {

diff --git a/examples/jsm/renderers/webgpu/WebGPURenderer.js b/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;

diff --git a/examples/misc_boxselection.html b/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;
 

diff --git a/examples/misc_controls_drag.html b/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;

diff --git a/examples/misc_controls_map.html b/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 );

diff --git a/examples/misc_controls_orbit.html b/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 );

diff --git a/examples/misc_controls_pointerlock.html b/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 );
 
 				//

diff --git a/examples/misc_controls_trackball.html b/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();

diff --git a/examples/misc_controls_transform.html b/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 );

diff --git a/examples/misc_exporter_draco.html b/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 );
 

diff --git a/examples/misc_exporter_stl.html b/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 );
 

diff --git a/examples/physics_ammo_break.html b/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

diff --git a/examples/physics_ammo_cloth.html b/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 );

diff --git a/examples/physics_ammo_rope.html b/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 );

diff --git a/examples/physics_ammo_terrain.html b/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 );
 

diff --git a/examples/physics_ammo_volume.html b/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 );

diff --git a/examples/screenshots/css2d_label.jpg b/examples/screenshots/css2d_label.jpg
diff --git a/examples/screenshots/misc_controls_drag.jpg b/examples/screenshots/misc_controls_drag.jpg
diff --git a/examples/screenshots/physics_ammo_cloth.jpg b/examples/screenshots/physics_ammo_cloth.jpg
diff --git a/examples/screenshots/physics_ammo_rope.jpg b/examples/screenshots/physics_ammo_rope.jpg
diff --git a/examples/screenshots/physics_ammo_volume.jpg b/examples/screenshots/physics_ammo_volume.jpg
diff --git a/examples/screenshots/webaudio_timing.jpg b/examples/screenshots/webaudio_timing.jpg
diff --git a/examples/screenshots/webgl_clipping.jpg b/examples/screenshots/webgl_clipping.jpg
diff --git a/examples/screenshots/webgl_clipping_intersection.jpg b/examples/screenshots/webgl_clipping_intersection.jpg
diff --git a/examples/screenshots/webgl_decals.jpg b/examples/screenshots/webgl_decals.jpg
diff --git a/examples/screenshots/webgl_effects_peppersghost.jpg b/examples/screenshots/webgl_effects_peppersghost.jpg
diff --git a/examples/screenshots/webgl_furnace_test.jpg b/examples/screenshots/webgl_furnace_test.jpg
diff --git a/examples/screenshots/webgl_geometries.jpg b/examples/screenshots/webgl_geometries.jpg
diff --git a/examples/screenshots/webgl_geometries_parametric.jpg b/examples/screenshots/webgl_geometries_parametric.jpg
diff --git a/examples/screenshots/webgl_geometry_colors.jpg b/examples/screenshots/webgl_geometry_colors.jpg
diff --git a/examples/screenshots/webgl_geometry_convex.jpg b/examples/screenshots/webgl_geometry_convex.jpg
diff --git a/examples/screenshots/webgl_geometry_extrude_shapes.jpg b/examples/screenshots/webgl_geometry_extrude_shapes.jpg
diff --git a/examples/screenshots/webgl_geometry_extrude_splines.jpg b/examples/screenshots/webgl_geometry_extrude_splines.jpg
diff --git a/examples/screenshots/webgl_geometry_nurbs.jpg b/examples/screenshots/webgl_geometry_nurbs.jpg
diff --git a/examples/screenshots/webgl_geometry_shapes.jpg b/examples/screenshots/webgl_geometry_shapes.jpg
diff --git a/examples/screenshots/webgl_helpers.jpg b/examples/screenshots/webgl_helpers.jpg
diff --git a/examples/screenshots/webgl_instancing_scatter.jpg b/examples/screenshots/webgl_instancing_scatter.jpg
diff --git a/examples/screenshots/webgl_interactive_buffergeometry.jpg b/examples/screenshots/webgl_interactive_buffergeometry.jpg
diff --git a/examples/screenshots/webgl_interactive_cubes.jpg b/examples/screenshots/webgl_interactive_cubes.jpg
diff --git a/examples/screenshots/webgl_interactive_cubes_gpu.jpg b/examples/screenshots/webgl_interactive_cubes_gpu.jpg
diff --git a/examples/screenshots/webgl_interactive_cubes_ortho.jpg b/examples/screenshots/webgl_interactive_cubes_ortho.jpg
diff --git a/examples/screenshots/webgl_interactive_raycasting_points.jpg b/examples/screenshots/webgl_interactive_raycasting_points.jpg
diff --git a/examples/screenshots/webgl_layers.jpg b/examples/screenshots/webgl_layers.jpg
diff --git a/examples/screenshots/webgl_lights_pointlights.jpg b/examples/screenshots/webgl_lights_pointlights.jpg
diff --git a/examples/screenshots/webgl_loader_amf.jpg b/examples/screenshots/webgl_loader_amf.jpg
diff --git a/examples/screenshots/webgl_loader_ttf.jpg b/examples/screenshots/webgl_loader_ttf.jpg
diff --git a/examples/screenshots/webgl_loader_vtk.jpg b/examples/screenshots/webgl_loader_vtk.jpg
diff --git a/examples/screenshots/webgl_lod.jpg b/examples/screenshots/webgl_lod.jpg
diff --git a/examples/screenshots/webgl_materials.jpg b/examples/screenshots/webgl_materials.jpg
diff --git a/examples/screenshots/webgl_math_obb.jpg b/examples/screenshots/webgl_math_obb.jpg
diff --git a/examples/screenshots/webgl_modifier_subdivision.jpg b/examples/screenshots/webgl_modifier_subdivision.jpg
diff --git a/examples/screenshots/webgl_multiple_renderers.jpg b/examples/screenshots/webgl_multiple_renderers.jpg
diff --git a/examples/screenshots/webgl_multiple_scenes_comparison.jpg b/examples/screenshots/webgl_multiple_scenes_comparison.jpg
diff --git a/examples/screenshots/webgl_multiple_views.jpg b/examples/screenshots/webgl_multiple_views.jpg
diff --git a/examples/screenshots/webgl_nodes_materials_instance_uniform.jpg b/examples/screenshots/webgl_nodes_materials_instance_uniform.jpg
diff --git a/examples/screenshots/webgl_raycaster_texture.jpg b/examples/screenshots/webgl_raycaster_texture.jpg
diff --git a/examples/screenshots/webgl_shadowmap_csm.jpg b/examples/screenshots/webgl_shadowmap_csm.jpg
diff --git a/examples/screenshots/webgl_shadowmap_pointlight.jpg b/examples/screenshots/webgl_shadowmap_pointlight.jpg
diff --git a/examples/screenshots/webgl_shadowmesh.jpg b/examples/screenshots/webgl_shadowmesh.jpg
diff --git a/examples/webaudio_sandbox.html b/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;

diff --git a/examples/webaudio_timing.html b/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 = [];

diff --git a/examples/webgl2_materials_texture3d_partialupdate.html b/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();

diff --git a/examples/webgl2_volume_cloud.html b/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();

diff --git a/examples/webgl_buffergeometry_compression.html b/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 );
 
 				//

diff --git a/examples/webgl_buffergeometry_glbufferattribute.html b/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 );
 

diff --git a/examples/webgl_buffergeometry_indexed.html 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 );
 
 				//

diff --git a/examples/webgl_buffergeometry_instancing_interleaved.html b/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

diff --git a/examples/webgl_buffergeometry_points.html b/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 );