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

Jump to bottom

Examples: Updates for color management (pt5) #25912

Merged
merged 1 commit into from
Apr 24, 2023
Merged

Examples: Updates for color management (pt5) #25912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file modified examples/screenshots/webgl_geometry_minecraft.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_text.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_gpgpu_birds_gltf.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_gpgpu_water.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_multiple_renderers.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_nodes_points.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_points_billboards.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_points_sprites.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_portal.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_shadowmap_viewer.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_shadowmap_vsm.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.
8 changes: 3 additions & 5 deletions examples/webgl_geometry_minecraft.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,6 @@
import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';

THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

let container, stats;

let camera, controls, scene, renderer;
Expand Down Expand Up @@ -157,22 +155,22 @@
geometry.computeBoundingSphere();

const texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' );
texture.colorSpace = THREE.SRGBColorSpace;
texture.magFilter = THREE.NearestFilter;

const mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: texture, side: THREE.DoubleSide } ) );
scene.add( mesh );

const ambientLight = new THREE.AmbientLight( 0xcccccc );
const ambientLight = new THREE.AmbientLight( 0xeeeeee );
scene.add( ambientLight );

const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
const directionalLight = new THREE.DirectionalLight( 0xffffff, 4 );
directionalLight.position.set( 1, 1, 0.5 ).normalize();
scene.add( directionalLight );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
container.appendChild( renderer.domElement );

controls = new FirstPersonControls( camera, renderer.domElement );
Expand Down
2 changes: 0 additions & 2 deletions examples/webgl_geometry_text.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

THREE.Cache.enabled = true;
THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

let container;

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

// EVENTS
Expand Down
9 changes: 3 additions & 6 deletions examples/webgl_gpgpu_birds_gltf.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,8 +228,6 @@
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js';

THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

/* TEXTURE WIDTH FOR SIMULATION */
const WIDTH = 64;
const BIRDS = WIDTH * WIDTH;
Expand Down Expand Up @@ -382,21 +380,20 @@
// LIGHTS

const hemiLight = new THREE.HemisphereLight( colors[ selectModel ], 0xffffff, 1.6 );
hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.color.setHSL( 0.6, 1, 0.6, THREE.SRGBColorSpace );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75, THREE.SRGBColorSpace );
hemiLight.position.set( 0, 50, 0 );
scene.add( hemiLight );

const dirLight = new THREE.DirectionalLight( 0x00CED1, 0.6 );
dirLight.color.setHSL( 0.1, 1, 0.95 );
dirLight.color.setHSL( 0.1, 1, 0.95, THREE.SRGBColorSpace );
dirLight.position.set( - 1, 1.75, 1 );
dirLight.position.multiplyScalar( 30 );
scene.add( dirLight );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
container.appendChild( renderer.domElement );

initComputeRenderer();
Expand Down
3 changes: 0 additions & 3 deletions examples/webgl_gpgpu_protoplanet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,8 +251,6 @@
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js';

THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

// Texture width for simulation (each texel is a debris particle)
const WIDTH = 64;

Expand Down Expand Up @@ -285,7 +283,6 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
Expand Down
3 changes: 0 additions & 3 deletions examples/webgl_gpgpu_water.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,8 +267,6 @@
import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js';
import { SimplexNoise } from 'three/addons/math/SimplexNoise.js';

THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

// Texture width for simulation
const WIDTH = 128;

Expand Down Expand Up @@ -324,7 +322,6 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
container.appendChild( renderer.domElement );

stats = new Stats();
Expand Down
13 changes: 5 additions & 8 deletions examples/webgl_multiple_renderers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@

import * as THREE from 'three';

THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

let camera, scene, renderer1, renderer2;

let mesh1, mesh2, mesh3;
Expand Down Expand Up @@ -76,6 +74,7 @@
context.fillRect( 0, 0, canvas.width, canvas.height );

const shadowTexture = new THREE.CanvasTexture( canvas );
shadowTexture.colorSpace = THREE.SRGBColorSpace;

const shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
const shadowGeo = new THREE.PlaneGeometry( 300, 300, 1, 1 );
Expand Down Expand Up @@ -118,13 +117,13 @@

for ( let i = 0; i < count; i ++ ) {

color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5, THREE.SRGBColorSpace );
colors1.setXYZ( i, color.r, color.g, color.b );

color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 );
color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5, THREE.SRGBColorSpace );
colors2.setXYZ( i, color.r, color.g, color.b );

color.setRGB( 1, 0.8 - ( positions3.getY( i ) / radius + 1 ) / 2, 0 );
color.setRGB( 1, 0.8 - ( positions3.getY( i ) / radius + 1 ) / 2, 0, THREE.SRGBColorSpace );
colors3.setXYZ( i, color.r, color.g, color.b );

}
Expand Down Expand Up @@ -164,13 +163,11 @@
renderer1 = new THREE.WebGLRenderer( { antialias: true } );
renderer1.setPixelRatio( window.devicePixelRatio );
renderer1.setSize( window.innerWidth, window.innerHeight / 2 );
renderer1.outputColorSpace = THREE.LinearSRGBColorSpace;
document.body.appendChild( renderer1.domElement );

renderer2 = new THREE.WebGLRenderer();
renderer2.setPixelRatio( window.devicePixelRatio );
renderer2.setSize( window.innerWidth, window.innerHeight / 2 );
renderer2.outputColorSpace = THREE.LinearSRGBColorSpace;
document.body.appendChild( renderer2.domElement );

}
Expand All @@ -197,7 +194,7 @@

position.fromArray( positions.array, i * 3 );

color.setRGB( 1, Math.sin( time + position.x ), Math.cos( time * 2.123 + position.x ) );
color.setRGB( 1, Math.sin( time + position.x ), Math.cos( time * 2.123 + position.x ), THREE.SRGBColorSpace );
colors.setXYZ( i, color.r, color.g, color.b );

}
Expand Down
6 changes: 2 additions & 4 deletions examples/webgl_nodes_points.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,6 @@

import { nodeFrame } from 'three/addons/renderers/webgl/nodes/WebGLNodes.js';

THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

let camera, scene, renderer, stats;

init();
Expand Down Expand Up @@ -78,7 +76,7 @@

speed.push( 20 + Math.random() * 50 );

intensity.push( Math.random() * .15 );
intensity.push( Math.random() * .04 );

size.push( 30 + Math.random() * 230 );

Expand All @@ -95,6 +93,7 @@
// Forked from: https://answers.unrealengine.com/questions/143267/emergency-need-help-with-fire-fx-weird-loop.html

const fireMap = new THREE.TextureLoader().load( 'textures/sprites/firetorch_1.jpg' );
fireMap.colorSpace = THREE.SRGBColorSpace;

// nodes

Expand Down Expand Up @@ -139,7 +138,6 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
document.body.appendChild( renderer.domElement );

// stats
Expand Down
6 changes: 2 additions & 4 deletions examples/webgl_points_billboards.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

let camera, scene, renderer, stats, material;
let mouseX = 0, mouseY = 0;

Expand All @@ -56,6 +54,7 @@
const vertices = [];

const sprite = new THREE.TextureLoader().load( 'textures/sprites/disc.png' );
sprite.colorSpace = THREE.SRGBColorSpace;

for ( let i = 0; i < 10000; i ++ ) {

Expand All @@ -70,7 +69,7 @@
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite, alphaTest: 0.5, transparent: true } );
material.color.setHSL( 1.0, 0.3, 0.7 );
material.color.setHSL( 1.0, 0.3, 0.7, THREE.SRGBColorSpace );

const particles = new THREE.Points( geometry, material );
scene.add( particles );
Expand All @@ -80,7 +79,6 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
document.body.appendChild( renderer.domElement );

//
Expand Down
19 changes: 9 additions & 10 deletions examples/webgl_points_sprites.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,6 @@

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

let camera, scene, renderer, stats, parameters;
let mouseX = 0, mouseY = 0;

Expand All @@ -60,11 +58,13 @@

const textureLoader = new THREE.TextureLoader();

const sprite1 = textureLoader.load( 'textures/sprites/snowflake1.png' );
const sprite2 = textureLoader.load( 'textures/sprites/snowflake2.png' );
const sprite3 = textureLoader.load( 'textures/sprites/snowflake3.png' );
const sprite4 = textureLoader.load( 'textures/sprites/snowflake4.png' );
const sprite5 = textureLoader.load( 'textures/sprites/snowflake5.png' );
const assignSRGB = ( texture ) => { texture.colorSpace = THREE.SRGBColorSpace; };

const sprite1 = textureLoader.load( 'textures/sprites/snowflake1.png', assignSRGB );
const sprite2 = textureLoader.load( 'textures/sprites/snowflake2.png', assignSRGB );
const sprite3 = textureLoader.load( 'textures/sprites/snowflake3.png', assignSRGB );
const sprite4 = textureLoader.load( 'textures/sprites/snowflake4.png', assignSRGB );
const sprite5 = textureLoader.load( 'textures/sprites/snowflake5.png', assignSRGB );

for ( let i = 0; i < 10000; i ++ ) {

Expand Down Expand Up @@ -93,7 +93,7 @@
const size = parameters[ i ][ 2 ];

materials[ i ] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } );
materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ] );
materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ], THREE.SRGBColorSpace );

const particles = new THREE.Points( geometry, materials[ i ] );

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

//
Expand Down Expand Up @@ -206,7 +205,7 @@
const color = parameters[ i ][ 0 ];

const h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360;
materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ] );
materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ], THREE.SRGBColorSpace );

}

Expand Down
4 changes: 1 addition & 3 deletions examples/webgl_portal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@
import * as CameraUtils from 'three/addons/utils/CameraUtils.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

let camera, scene, renderer;

let cameraControls;
Expand All @@ -60,7 +58,7 @@

// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
Expand Down
3 changes: 0 additions & 3 deletions examples/webgl_shadowmap_viewer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { ShadowMapViewer } from 'three/addons/utils/ShadowMapViewer.js';

THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

let camera, scene, renderer, clock, stats;
let dirLight, spotLight;
let torusKnot, cube;
Expand Down Expand Up @@ -146,7 +144,6 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;

Expand Down
3 changes: 0 additions & 3 deletions examples/webgl_shadowmap_vsm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@

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

THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

let camera, scene, renderer, clock, stats;
let dirLight, spotLight;
let torusKnot, dirGroup;
Expand Down Expand Up @@ -191,7 +189,6 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.VSMShadowMap;

Expand Down
3 changes: 0 additions & 3 deletions examples/webgpu_shadowmap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,6 @@

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

THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

let camera, scene, renderer, clock;
let dirLight, spotLight;
let torusKnot, dirGroup;
Expand Down Expand Up @@ -148,7 +146,6 @@
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
document.body.appendChild( renderer.domElement );

// Mouse control
Expand Down