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 (pt4) #25907

Merged
merged 3 commits into from
Apr 23, 2023
Merged

Examples: Updates for color management (pt4) #25907

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eeafebb
Examples: Update more examples for color management.
donmccurdy Apr 23, 2023
8f0232f
Examples: Update more examples for color management.
donmccurdy Apr 23, 2023
8c16d64
Update webgl_materials_blending.html
Mugen87 Apr 23, 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
Binary file modified examples/screenshots/webgl_materials.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_materials_blending.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_materials_blending_custom.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_materials_cubemap.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_materials_cubemap_refraction.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_materials_texture_filters.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_materials_texture_manualmipmap.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_modifier_curve.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_modifier_curve_instanced.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_modifier_edgesplit.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_modifier_simplifier.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_canvases_circle.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_canvases_complex.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_canvases_grid.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_elements_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.
4 changes: 1 addition & 3 deletions examples/webgl_materials.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,6 @@

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

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

let stats;

let camera, scene, renderer;
Expand Down Expand Up @@ -61,6 +59,7 @@
// Materials

const texture = new THREE.Texture( generateTexture() );
texture.colorSpace = THREE.SRGBColorSpace;
texture.needsUpdate = true;

materials.push( new THREE.MeshLambertMaterial( { map: texture, transparent: true } ) );
Expand Down Expand Up @@ -110,7 +109,6 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
container.appendChild( renderer.domElement );

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

import * as THREE from 'three';

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

let camera, scene, renderer;
let mapBg;

Expand Down Expand Up @@ -63,6 +61,7 @@
ctx.fillRect( 96, 96, 32, 32 );

mapBg = new THREE.CanvasTexture( canvas );
mapBg.colorSpace = THREE.SRGBColorSpace;
mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
mapBg.repeat.set( 64, 32 );

Expand All @@ -78,11 +77,13 @@
{ name: 'Multiply', constant: THREE.MultiplyBlending }
];

const map0 = textureLoader.load( 'textures/uv_grid_opengl.jpg' );
const map1 = textureLoader.load( 'textures/sprite0.jpg' );
const map2 = textureLoader.load( 'textures/sprite0.png' );
const map3 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
const map4 = textureLoader.load( 'textures/lensflare/lensflare0_alpha.png' );
const assignSRGB = ( texture) => { texture.colorSpace = THREE.SRGBColorSpace; };

const map0 = textureLoader.load( 'textures/uv_grid_opengl.jpg', assignSRGB );
const map1 = textureLoader.load( 'textures/sprite0.jpg', assignSRGB );
const map2 = textureLoader.load( 'textures/sprite0.png', assignSRGB );
const map3 = textureLoader.load( 'textures/lensflare/lensflare0.png', assignSRGB );
const map4 = textureLoader.load( 'textures/lensflare/lensflare0_alpha.png', assignSRGB );

const geo1 = new THREE.PlaneGeometry( 100, 100 );
const geo2 = new THREE.PlaneGeometry( 100, 25 );
Expand Down Expand Up @@ -121,7 +122,6 @@
// RENDERER

renderer = new THREE.WebGLRenderer();
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Expand Down Expand Up @@ -162,6 +162,7 @@
ctx.fillText( text, 10, 22 );

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

const material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );

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

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

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

let camera, scene, renderer;

let mapBg;
Expand Down Expand Up @@ -71,6 +69,7 @@
ctx.fillRect( 96, 96, 32, 32 );

mapBg = new THREE.CanvasTexture( canvas );
mapBg.colorSpace = THREE.SRGBColorSpace;
mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
mapBg.repeat.set( 64, 32 );

Expand Down Expand Up @@ -109,6 +108,7 @@
const geo2 = new THREE.PlaneGeometry( 100, 25 );

const texture = new THREE.TextureLoader().load( 'textures/lensflare/lensflare0_alpha.png' );
texture.colorSpace = THREE.SRGBColorSpace;

for ( let i = 0; i < dst.length; i ++ ) {

Expand Down Expand Up @@ -177,7 +177,6 @@
// RENDERER

renderer = new THREE.WebGLRenderer();
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Expand Down Expand Up @@ -224,6 +223,7 @@
ctx.fillText( text, 8, 22 );

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

const material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
return material;
Expand Down
3 changes: 2 additions & 1 deletion examples/webgl_materials_cubemap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,9 @@
];

const reflectionCube = new THREE.CubeTextureLoader().load( urls );
reflectionCube.colorSpace = THREE.SRGBColorSpace;
const refractionCube = new THREE.CubeTextureLoader().load( urls );
refractionCube.colorSpace = THREE.SRGBColorSpace;
refractionCube.mapping = THREE.CubeRefractionMapping;

scene = new THREE.Scene();
Expand Down Expand Up @@ -109,7 +111,6 @@

//renderer
renderer = new THREE.WebGLRenderer();
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
Expand Down
4 changes: 1 addition & 3 deletions examples/webgl_materials_cubemap_mipmaps.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 container;

let camera, scene, renderer;
Expand Down Expand Up @@ -93,6 +91,7 @@

const customizedCubeTexture = mipmaps.shift();
customizedCubeTexture.mipmaps = mipmaps;
customizedCubeTexture.colorSpace = THREE.SRGBColorSpace;
customizedCubeTexture.minFilter = THREE.LinearMipMapLinearFilter;
customizedCubeTexture.magFilter = THREE.LinearFilter;
customizedCubeTexture.generateMipmaps = false;
Expand Down Expand Up @@ -145,7 +144,6 @@

//renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
Expand Down
4 changes: 1 addition & 3 deletions examples/webgl_materials_cubemap_refraction.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,6 @@

import { PLYLoader } from 'three/addons/loaders/PLYLoader.js';

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

let container, stats;

let camera, scene, renderer;
Expand Down Expand Up @@ -70,6 +68,7 @@
];

const textureCube = new THREE.CubeTextureLoader().load( urls );
textureCube.colorSpace = THREE.SRGBColorSpace;
textureCube.mapping = THREE.CubeRefractionMapping;

scene = new THREE.Scene();
Expand Down Expand Up @@ -100,7 +99,6 @@
//

renderer = new THREE.WebGLRenderer();
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
Expand Down
9 changes: 5 additions & 4 deletions examples/webgl_materials_texture_filters.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,6 @@

import * as THREE from 'three';

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

const SCREEN_WIDTH = window.innerWidth;
const SCREEN_HEIGHT = window.innerHeight;

Expand Down Expand Up @@ -109,6 +107,7 @@
context.fillRect( 64, 64, 64, 64 );

const textureCanvas = new THREE.CanvasTexture( imageCanvas );
textureCanvas.colorSpace = THREE.SRGBColorSpace;
textureCanvas.repeat.set( 1000, 1000 );
textureCanvas.wrapS = THREE.RepeatWrapping;
textureCanvas.wrapT = THREE.RepeatWrapping;
Expand All @@ -117,7 +116,7 @@
textureCanvas2.magFilter = THREE.NearestFilter;
textureCanvas2.minFilter = THREE.NearestFilter;

const materialCanvas = new THREE.MeshBasicMaterial( { map: textureCanvas } );
const materialCanvas = new THREE.MeshBasicMaterial( { map: textureCanvas } );
const materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );

const geometry = new THREE.PlaneGeometry( 100, 100 );
Expand Down Expand Up @@ -181,16 +180,18 @@

const texturePainting = new THREE.TextureLoader().load( 'textures/758px-Canestra_di_frutta_(Caravaggio).jpg', callbackPainting );
const texturePainting2 = new THREE.Texture();

const materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } );
const materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );

texturePainting.colorSpace = THREE.SRGBColorSpace;
texturePainting2.colorSpace = THREE.SRGBColorSpace;
texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter;
texturePainting.minFilter = texturePainting.magFilter = THREE.LinearFilter;
texturePainting.mapping = THREE.UVMapping;


renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.autoClear = false;
Expand Down
6 changes: 3 additions & 3 deletions examples/webgl_materials_texture_manualmipmap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,6 @@

import * as THREE from 'three';

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

const SCREEN_WIDTH = window.innerWidth;
const SCREEN_HEIGHT = window.innerHeight;

Expand Down Expand Up @@ -123,6 +121,7 @@
textureCanvas1.mipmaps[ 5 ] = mipmap( 4, '#004' );
textureCanvas1.mipmaps[ 6 ] = mipmap( 2, '#044' );
textureCanvas1.mipmaps[ 7 ] = mipmap( 1, '#404' );
textureCanvas1.colorSpace = THREE.SRGBColorSpace;
textureCanvas1.repeat.set( 1000, 1000 );
textureCanvas1.wrapS = THREE.RepeatWrapping;
textureCanvas1.wrapT = THREE.RepeatWrapping;
Expand Down Expand Up @@ -198,12 +197,13 @@
const materialPainting1 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting1 } );
const materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );

texturePainting1.colorSpace = THREE.SRGBColorSpace;
texturePainting2.colorSpace = THREE.SRGBColorSpace;
texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter;
texturePainting1.minFilter = texturePainting1.magFilter = THREE.LinearFilter;
texturePainting1.mapping = THREE.UVMapping;

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.autoClear = false;
Expand Down
3 changes: 0 additions & 3 deletions examples/webgl_materials_wireframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,6 @@

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

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

const API = {
thickness: 1
};
Expand All @@ -81,7 +79,6 @@
function init() {

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Expand Down
3 changes: 0 additions & 3 deletions examples/webgl_modifier_curve.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,6 @@
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

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

const ACTION_SELECT = 1, ACTION_NONE = 0;
const curveHandles = [];
const mouse = new THREE.Vector2();
Expand Down Expand Up @@ -144,7 +142,6 @@
//

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Expand Down
3 changes: 0 additions & 3 deletions examples/webgl_modifier_curve_instanced.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,6 @@
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

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

const ACTION_SELECT = 1, ACTION_NONE = 0;
const curveHandles = [];
const mouse = new THREE.Vector2();
Expand Down Expand Up @@ -170,7 +168,6 @@
//

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Expand Down
4 changes: 1 addition & 3 deletions examples/webgl_modifier_edgesplit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@

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

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

let renderer, scene, camera;
let modifier, mesh, baseGeometry;
let map;
Expand All @@ -59,7 +57,6 @@
document.body.appendChild( info );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Expand Down Expand Up @@ -112,6 +109,7 @@
new THREE.TextureLoader().load( './models/obj/cerberus/Cerberus_A.jpg', function ( texture ) {

map = texture;
map.colorSpace = THREE.SRGBColorSpace;

if ( mesh !== undefined && params.showMap ) {

Expand Down
3 changes: 0 additions & 3 deletions examples/webgl_modifier_simplifier.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,6 @@
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { SimplifyModifier } from 'three/addons/modifiers/SimplifyModifier.js';

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

let renderer, scene, camera;

init();
Expand All @@ -46,7 +44,6 @@
document.body.appendChild( info );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Expand Down
6 changes: 2 additions & 4 deletions examples/webgl_multiple_canvases_circle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,8 +147,6 @@
<script type="module">
import * as THREE from 'three';

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

const views = [];

let scene, renderer;
Expand Down Expand Up @@ -239,6 +237,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 @@ -266,7 +265,7 @@

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

color.setHSL( ( positions.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
color.setHSL( ( positions.getY( i ) / radius + 1 ) / 2, 1.0, 0.5, THREE.SRGBColorSpace );

colors.setXYZ( i, color.r, color.g, color.b );

Expand Down Expand Up @@ -294,7 +293,6 @@
}

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( 200, 300 );

Expand Down
Loading