Skip to content

Commit

Permalink
Examples: Update more examples for color management. (mrdoob#25882)
Browse files Browse the repository at this point in the history 
* Examples: Update misc_exporter_gltf and misc_exporter_ply for color management.

* Examples: Update 3MF examples for color management.

* Examples: Update webgl_loader_draco for color management.

* Examples: Update LDraw examples for color management.

* Loaders: Update color space assignmentin 3MF, LDraw, and SVG loaders.

* LDrawLoader: Clean up, fix emissive.

* LDrawLoader: Clean up
  • Loading branch information
@donmccurdy @emmanueljl
donmccurdy authored and emmanueljl committed Apr 28, 2023
1 parent 1ac0e98 commit e0ce20c
Show file tree
Hide file tree
Showing 10 changed files with 37 additions and 45 deletions.
10 changes: 5 additions & 5 deletions examples/jsm/loaders/3MFLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import {
} from 'three';
import * as fflate from '../libs/fflate.module.js';

const COLOR_SPACE_3MF = SRGBColorSpace;

/**
*
* 3D Manufacturing Format (3MF) specification: https://3mf.io/specification/
Expand Down Expand Up @@ -359,8 +361,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 ), COLOR_SPACE_3MF );

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

Expand Down Expand Up @@ -789,7 +790,7 @@ class ThreeMFLoader extends Loader {

} );

texture.colorSpace = SRGBColorSpace;
texture.colorSpace = COLOR_SPACE_3MF;

// texture parameters

Expand Down Expand Up @@ -1281,8 +1282,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, COLOR_SPACE_3MF );

// process alpha if set

Expand Down
38 changes: 20 additions & 18 deletions examples/jsm/loaders/LDrawLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Mesh,
MeshStandardMaterial,
ShaderMaterial,
SRGBColorSpace,
UniformsLib,
UniformsUtils,
Vector3,
Expand Down Expand Up @@ -39,6 +40,8 @@ const FILE_LOCATION_NOT_FOUND = 6;
const MAIN_COLOUR_CODE = '16';
const MAIN_EDGE_COLOUR_CODE = '24';

const COLOR_SPACE_LDRAW = SRGBColorSpace;

const _tempVec0 = new Vector3();
const _tempVec1 = new Vector3();

Expand Down Expand Up @@ -2162,8 +2165,8 @@ class LDrawLoader extends Loader {
let code = null;

// Triangle and line colors
let color = 0xFF00FF;
let edgeColor = 0xFF00FF;
let fillColor = '#FF00FF';
let edgeColor = '#FF00FF';

// Transparency
let alpha = 1;
Expand Down Expand Up @@ -2205,12 +2208,12 @@ class LDrawLoader extends Loader {

case 'VALUE':

color = lineParser.getToken();
if ( color.startsWith( '0x' ) ) {
fillColor = lineParser.getToken();
if ( fillColor.startsWith( '0x' ) ) {

color = '#' + color.substring( 2 );
fillColor = '#' + fillColor.substring( 2 );

} else if ( ! color.startsWith( '#' ) ) {
} else if ( ! fillColor.startsWith( '#' ) ) {

throw new Error( 'LDrawLoader: Invalid color while parsing material' + lineParser.getLineNumberString() + '.' );

Expand Down Expand Up @@ -2312,37 +2315,37 @@ class LDrawLoader extends Loader {

case FINISH_TYPE_DEFAULT:

material = new MeshStandardMaterial( { color: color, roughness: 0.3, metalness: 0 } );
material = new MeshStandardMaterial( { roughness: 0.3, metalness: 0 } );
break;

case FINISH_TYPE_PEARLESCENT:

// Try to imitate pearlescency by making the surface glossy
material = new MeshStandardMaterial( { color: color, roughness: 0.3, metalness: 0.25 } );
material = new MeshStandardMaterial( { roughness: 0.3, metalness: 0.25 } );
break;

case FINISH_TYPE_CHROME:

// Mirror finish surface
material = new MeshStandardMaterial( { color: color, roughness: 0, metalness: 1 } );
material = new MeshStandardMaterial( { roughness: 0, metalness: 1 } );
break;

case FINISH_TYPE_RUBBER:

// Rubber finish
material = new MeshStandardMaterial( { color: color, roughness: 0.9, metalness: 0 } );
material = new MeshStandardMaterial( { roughness: 0.9, metalness: 0 } );
break;

case FINISH_TYPE_MATTE_METALLIC:

// Brushed metal finish
material = new MeshStandardMaterial( { color: color, roughness: 0.8, metalness: 0.4 } );
material = new MeshStandardMaterial( { roughness: 0.8, metalness: 0.4 } );
break;

case FINISH_TYPE_METAL:

// Average metal finish
material = new MeshStandardMaterial( { color: color, roughness: 0.2, metalness: 0.85 } );
material = new MeshStandardMaterial( { roughness: 0.2, metalness: 0.85 } );
break;

default:
Expand All @@ -2351,45 +2354,44 @@ class LDrawLoader extends Loader {

}

material.color.setStyle( fillColor, COLOR_SPACE_LDRAW );
material.transparent = isTransparent;
material.premultipliedAlpha = true;
material.opacity = alpha;
material.depthWrite = ! isTransparent;
material.color.convertSRGBToLinear();

material.polygonOffset = true;
material.polygonOffsetFactor = 1;

if ( luminance !== 0 ) {

material.emissive.set( material.color ).multiplyScalar( luminance );
material.emissive.setStyle( fillColor, COLOR_SPACE_LDRAW ).multiplyScalar( luminance );

}

if ( ! edgeMaterial ) {

// This is the material used for edges
edgeMaterial = new LineBasicMaterial( {
color: edgeColor,
color: new Color().setStyle( edgeColor, COLOR_SPACE_LDRAW ),
transparent: isTransparent,
opacity: alpha,
depthWrite: ! isTransparent
} );
edgeMaterial.color;
edgeMaterial.userData.code = code;
edgeMaterial.name = name + ' - Edge';
edgeMaterial.color.convertSRGBToLinear();

// This is the material used for conditional edges
edgeMaterial.userData.conditionalEdgeMaterial = new LDrawConditionalLineMaterial( {

fog: true,
transparent: isTransparent,
depthWrite: ! isTransparent,
color: edgeColor,
color: new Color().setStyle( edgeColor, COLOR_SPACE_LDRAW ),
opacity: alpha,

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

Expand Down
5 changes: 4 additions & 1 deletion examples/jsm/loaders/SVGLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,13 @@ import {
Shape,
ShapePath,
ShapeUtils,
SRGBColorSpace,
Vector2,
Vector3
} from 'three';

const COLOR_SPACE_SVG = SRGBColorSpace;

class SVGLoader extends Loader {

constructor( manager ) {
Expand Down Expand Up @@ -155,7 +158,7 @@ class SVGLoader extends Loader {

if ( style.fill !== undefined && style.fill !== 'none' ) {

path.color.setStyle( style.fill );
path.color.setStyle( style.fill, COLOR_SPACE_SVG );

}

Expand Down
4 changes: 1 addition & 3 deletions examples/misc_exporter_gltf.html
View file
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
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
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
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
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
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
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

0 comments on commit e0ce20c

Please sign in to comment.