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 (pt2) #25882

Merged
merged 7 commits into from
Apr 20, 2023
Merged

Examples: Updates for color management (pt2) #25882

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
602dbbc
Examples: Update misc_exporter_gltf and misc_exporter_ply for color m…
donmccurdy Apr 18, 2023
8ee2337
Examples: Update 3MF examples for color management.
donmccurdy Apr 18, 2023
656ce09
Examples: Update webgl_loader_draco for color management.
donmccurdy Apr 18, 2023
517fa20
Examples: Update LDraw examples for color management.
donmccurdy Apr 18, 2023
3e3922c
Loaders: Update color space assignmentin 3MF, LDraw, and SVG loaders.
donmccurdy Apr 19, 2023
218b14c
LDrawLoader: Clean up, fix emissive.
donmccurdy Apr 19, 2023
cea20cd
LDrawLoader: Clean up
donmccurdy Apr 19, 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
6 changes: 2 additions & 4 deletions examples/jsm/loaders/3MFLoader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,8 +359,7 @@ class ThreeMFLoader extends Loader {
const colorNode = colorNodes[ i ];
const color = colorNode.getAttribute( 'color' );

colorObject.setStyle( color.substring( 0, 7 ) );
colorObject.convertSRGBToLinear(); // color is in sRGB
colorObject.setStyle( color.substring( 0, 7 ), SRGBColorSpace );
donmccurdy marked this conversation as resolved.
Show resolved Hide resolved

colors.push( colorObject.r, colorObject.g, colorObject.b );

Expand Down Expand Up @@ -1281,8 +1280,7 @@ class ThreeMFLoader extends Loader {
const displaycolor = materialData.displaycolor;

const color = displaycolor.substring( 0, 7 );
material.color.setStyle( color );
material.color.convertSRGBToLinear(); // displaycolor is in sRGB
material.color.setStyle( color, SRGBColorSpace );

// process alpha if set

Expand Down
3 changes: 0 additions & 3 deletions examples/jsm/loaders/LDrawLoader.js
View file
Open in desktop
donmccurdy marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -2355,7 +2355,6 @@ class LDrawLoader extends Loader {
material.premultipliedAlpha = true;
material.opacity = alpha;
material.depthWrite = ! isTransparent;
material.color.convertSRGBToLinear();

material.polygonOffset = true;
material.polygonOffsetFactor = 1;
Expand All @@ -2377,7 +2376,6 @@ class LDrawLoader extends Loader {
} );
edgeMaterial.userData.code = code;
edgeMaterial.name = name + ' - Edge';
edgeMaterial.color.convertSRGBToLinear();

// This is the material used for conditional edges
edgeMaterial.userData.conditionalEdgeMaterial = new LDrawConditionalLineMaterial( {
Expand All @@ -2389,7 +2387,6 @@ class LDrawLoader extends Loader {
opacity: alpha,

} );
edgeMaterial.userData.conditionalEdgeMaterial.color.convertSRGBToLinear();
edgeMaterial.userData.conditionalEdgeMaterial.userData.code = code;
edgeMaterial.userData.conditionalEdgeMaterial.name = name + ' - Conditional Edge';

Expand Down
4 changes: 1 addition & 3 deletions examples/misc_exporter_gltf.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.

function exportGLTF( input ) {

const gltfExporter = new GLTFExporter();
Expand Down Expand Up @@ -180,7 +178,7 @@
// ---------------------------------------------------------------------
// Grid
// ---------------------------------------------------------------------
gridHelper = new THREE.GridHelper( 2000, 20, 0x888888, 0x444444 );
gridHelper = new THREE.GridHelper( 2000, 20, 0xc1c1c1, 0x8d8d8d );
gridHelper.position.y = - 50;
gridHelper.name = 'Grid';
scene1.add( gridHelper );
Expand Down
6 changes: 2 additions & 4 deletions examples/misc_exporter_ply.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@
import { PLYExporter } from 'three/addons/exporters/PLYExporter.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.

let scene, camera, renderer, exporter, mesh;

const params = {
Expand All @@ -58,7 +56,7 @@

//

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );

Expand All @@ -73,7 +71,7 @@

// ground

const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xcbcbcb, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );
Expand Down
Binary file modified examples/screenshots/webgl_loader_3mf.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.
3 changes: 0 additions & 3 deletions examples/webgl_loader_3mf.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@
import { ThreeMFLoader } from 'three/addons/loaders/3MFLoader.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

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

let camera, scene, renderer, object, loader, controls;

const params = {
Expand All @@ -62,7 +60,6 @@
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 );

scene = new THREE.Scene();
Expand Down
6 changes: 2 additions & 4 deletions examples/webgl_loader_3mf_materials.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,6 @@
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { ThreeMFLoader } from 'three/addons/loaders/3MFLoader.js';

THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.

let camera, scene, renderer;

init();
Expand All @@ -55,7 +53,7 @@

//

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
hemiLight.position.set( 0, 100, 0 );
scene.add( hemiLight );

Expand Down Expand Up @@ -102,7 +100,7 @@

//

const ground = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000 ), new THREE.MeshPhongMaterial( { color: 0xcbcbcb, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.position.y = 11;
ground.receiveShadow = true;
Expand Down
8 changes: 3 additions & 5 deletions examples/webgl_loader_draco.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@

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

THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.

let camera, scene, renderer;

const container = document.querySelector( '#container' );
Expand All @@ -58,15 +56,15 @@
// Ground
const plane = new THREE.Mesh(
new THREE.PlaneGeometry( 8, 8 ),
new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
new THREE.MeshPhongMaterial( { color: 0xcbcbcb, specular: 0x101010 } )
);
plane.rotation.x = - Math.PI / 2;
plane.position.y = 0.03;
plane.receiveShadow = true;
scene.add( plane );

// Lights
const hemiLight = new THREE.HemisphereLight( 0x443333, 0x111122 );
const hemiLight = new THREE.HemisphereLight( 0x8d7c7c, 0x494966 );
scene.add( hemiLight );

const spotLight = new THREE.SpotLight();
Expand All @@ -80,7 +78,7 @@

geometry.computeVertexNormals();

const material = new THREE.MeshStandardMaterial( { color: 0x606060 } );
const material = new THREE.MeshStandardMaterial( { color: 0xa5a5a5 } );
const mesh = new THREE.Mesh( geometry, material );
mesh.castShadow = true;
mesh.receiveShadow = true;
Expand Down
2 changes: 0 additions & 2 deletions examples/webgl_loader_ldraw.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,6 @@
import { LDrawLoader } from 'three/addons/loaders/LDrawLoader.js';
import { LDrawUtils } from 'three/addons/utils/LDrawUtils.js';

THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.

let container, progressBarDiv;

let camera, scene, renderer, controls, gui, guiData;
Expand Down