Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebGLRenderer: Default output to sRGB #25783

Merged
merged 6 commits into from
Apr 7, 2023
Merged

WebGLRenderer: Default output to sRGB #25783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fe8bd1d
WebGLRenderer: Default output to sRGB
donmccurdy Apr 2, 2023
2043873
Examples: Update all for sRGB default renderer output.
donmccurdy Apr 6, 2023
5a73ec7
Revert changes in examples/webgl_points_sprites.html
donmccurdy Apr 6, 2023
1200568
Clean up
donmccurdy Apr 6, 2023
b7e3a8d
Revert changes to webgl_points_sprites screenshot.
donmccurdy Apr 6, 2023
519798b
Merge branch 'dev' into feat/webglrenderer-outputcolorspace-default-v2
Mugen87 Apr 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions examples/css2d_label.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 );

Expand All @@ -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 );

Expand Down
20 changes: 13 additions & 7 deletions examples/jsm/loaders/TiltLoader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
BufferAttribute,
BufferGeometry,
Color,
DoubleSide,
FileLoader,
Group,
Expand Down Expand Up @@ -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 ) {
Expand All @@ -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 );
Expand Down Expand Up @@ -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;
Expand Down
8 changes: 7 additions & 1 deletion examples/jsm/misc/RollerCoaster.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import {
BufferAttribute,
BufferGeometry,
Color,
Quaternion,
Raycaster,
SRGBColorSpace,
Vector3
} from 'three';

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 );

}

Expand Down
2 changes: 2 additions & 0 deletions examples/jsm/offscreen/scene.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ) {
Expand Down
4 changes: 2 additions & 2 deletions examples/jsm/renderers/webgpu/WebGPURenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.' );

Expand Down Expand Up @@ -98,7 +98,7 @@ class WebGPURenderer {
this.autoClearDepth = true;
this.autoClearStencil = true;

this.outputColorSpace = LinearSRGBColorSpace;
this.outputColorSpace = SRGBColorSpace;
Copy link
Owner

@mrdoob mrdoob Apr 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! I almost forgot...

I think this should be:

this.outputColorSpace = null;

This default will let the renderer use SRGBColorSpace or DisplayP3ColorSpace automatically based on the user's display (eventually).

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it already clear how the renderer will determine the user's display color space? I suppose there will be a special Web API for this?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can do this check: #23614 (comment)

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By setting it to null it will also leave the door open for HDRColorSpace or whatever we get in the future.

Copy link
Collaborator

@Mugen87 Mugen87 Apr 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can do this check: #23614 (comment)

Interesting! Couldn't we implement this check in the ctor call of the renderers? I suppose the user's display color space is not something that is going to change during app usage.

I just wonder how and when the renderer determines the output color space. If the default value is null and the user is not going to define the color space (which will be true most of the time), the renderer has to set the value eventually.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright. Lets do that 👍

Copy link
Collaborator

@Mugen87 Mugen87 Apr 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BTW: DCI-P3 related features are tracked by the task 2.2 in #23614.

Looking at the spec, I wonder if defining DisplayP3ColorSpace is sufficient. Is it required to change the WebGLRenderingContext.drawingBufferColorSpace, too? It accepts srgb and display-p3 with srgb as the default.

When I change this property in any three.js example to display-p3, I can actually see a hue shift. I wonder now which setup (values of output color space and drawing buffer color space) is actually correct.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's enable color management by default first before going for the DisplayP3ColorSpace change. We need the color space conversion in any event to get the colors in DisplayP3ColorSpace right.

#23614 (comment)

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, as far as I understand we do not have the shaders chunks needed for supporting DisplayP3ColorSpace as output yet.

Copy link
Collaborator Author

@donmccurdy donmccurdy Apr 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even if encodings_fragment were implemented for Display P3, I'm not sure yet when it should be turned on. The difference when enabling it for existing content is very subtle — not an automatic improvement.

There are more impactful results when bringing in wide-gamut colors and textures in scenes designed for Display P3, particularly for unlit scenes. Or perhaps for rendering lit scenes in a wide-gamut working color space (not just wide-gamut output color space). But either of those will require more investigation.

For now I think we should not auto-detect — SRGBColorSpace will be the right default for a while yet.


this.toneMapping = NoToneMapping;
this.toneMappingExposure = 1.0;
Expand Down
1 change: 1 addition & 0 deletions examples/misc_boxselection.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 2 additions & 0 deletions examples/misc_controls_drag.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions examples/misc_controls_map.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/misc_controls_orbit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/misc_controls_pointerlock.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

//
Expand Down
1 change: 1 addition & 0 deletions examples/misc_controls_trackball.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
3 changes: 3 additions & 0 deletions examples/misc_controls_transform.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/misc_exporter_draco.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

Expand Down
1 change: 1 addition & 0 deletions examples/misc_exporter_stl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

Expand Down
2 changes: 2 additions & 0 deletions examples/physics_ammo_break.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions examples/physics_ammo_cloth.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 );
Expand Down Expand Up @@ -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 );
Expand Down
3 changes: 3 additions & 0 deletions examples/physics_ammo_rope.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/physics_ammo_terrain.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

Expand Down
3 changes: 3 additions & 0 deletions examples/physics_ammo_volume.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 );
Expand Down
Binary file modified examples/screenshots/css2d_label.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/misc_controls_drag.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/physics_ammo_cloth.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/physics_ammo_rope.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/physics_ammo_volume.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webaudio_timing.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_clipping.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_clipping_intersection.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_decals.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_effects_peppersghost.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_furnace_test.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_geometries.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_geometries_parametric.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_geometry_colors.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_geometry_convex.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_geometry_extrude_shapes.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_geometry_extrude_splines.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_geometry_nurbs.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_geometry_shapes.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_helpers.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_instancing_scatter.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_interactive_buffergeometry.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_interactive_cubes.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_interactive_cubes_gpu.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_interactive_cubes_ortho.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_interactive_raycasting_points.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_layers.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_lights_pointlights.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_loader_amf.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_loader_ttf.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_loader_vtk.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_lod.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_materials.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_math_obb.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_modifier_subdivision.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_multiple_renderers.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_multiple_scenes_comparison.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_multiple_views.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_nodes_materials_instance_uniform.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_raycaster_texture.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_shadowmap_csm.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_shadowmap_pointlight.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_shadowmesh.jpg
View file
Open in desktop
2 changes: 2 additions & 0 deletions examples/webaudio_sandbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions examples/webaudio_timing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

THREE.ColorManagement.enabled = true;

let scene, camera, renderer, clock;

const objects = [];
Expand Down
1 change: 1 addition & 0 deletions examples/webgl2_materials_texture3d_partialupdate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
1 change: 1 addition & 0 deletions examples/webgl2_volume_cloud.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
1 change: 1 addition & 0 deletions examples/webgl_buffergeometry_compression.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

//
Expand Down
4 changes: 3 additions & 1 deletion examples/webgl_buffergeometry_glbufferattribute.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@

import Stats from 'three/addons/libs/stats.module.js';

THREE.ColorManagement.enabled = true;

let container, stats;

let camera, scene, renderer;
Expand Down Expand Up @@ -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 );

Expand Down
1 change: 1 addition & 0 deletions examples/webgl_buffergeometry_indexed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

//
Expand Down
1 change: 1 addition & 0 deletions examples/webgl_buffergeometry_instancing_interleaved.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion examples/webgl_buffergeometry_points.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@

import Stats from 'three/addons/libs/stats.module.js';

THREE.ColorManagement.enabled = true;

let container, stats;

let camera, scene, renderer;
Expand Down Expand Up @@ -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 );

Expand Down
Loading