diff --git a/examples/jsm/loaders/LWOLoader.js b/examples/jsm/loaders/LWOLoader.js index 5426d4dc03467f..531c82b31c8c74 100644 --- a/examples/jsm/loaders/LWOLoader.js +++ b/examples/jsm/loaders/LWOLoader.js @@ -35,6 +35,7 @@ import { Points, PointsMaterial, RepeatWrapping, + SRGBColorSpace, TextureLoader, Vector2 } from 'three'; @@ -464,6 +465,7 @@ class MaterialParser { case 'Color': maps.map = texture; + maps.map.colorSpace = SRGBColorSpace; break; case 'Roughness': maps.roughnessMap = texture; @@ -471,10 +473,12 @@ class MaterialParser { break; case 'Specular': maps.specularMap = texture; + maps.specularMap.colorSpace = SRGBColorSpace; maps.specular = 0xffffff; break; case 'Luminous': maps.emissiveMap = texture; + maps.emissiveMap.colorSpace = SRGBColorSpace; maps.emissive = 0x808080; break; case 'Luminous Color': @@ -532,6 +536,7 @@ class MaterialParser { case 'Color': maps.map = texture; + maps.map.colorSpace = SRGBColorSpace; break; case 'Diffuse': maps.aoMap = texture; @@ -542,10 +547,12 @@ class MaterialParser { break; case 'Specular': maps.specularMap = texture; + maps.specularMap.colorSpace = SRGBColorSpace; maps.specular = 0xffffff; break; case 'Luminosity': maps.emissiveMap = texture; + maps.emissiveMap.colorSpace = SRGBColorSpace; maps.emissive = 0x808080; break; case 'Metallic': @@ -581,7 +588,11 @@ class MaterialParser { params.color = new Color().fromArray( attributes.Color.value ); - } else params.color = new Color(); + } else { + + params.color = new Color(); + + } if ( attributes.Transparency && attributes.Transparency.value !== 0 ) { diff --git a/examples/jsm/loaders/MMDLoader.js b/examples/jsm/loaders/MMDLoader.js index a99a41cdea1da6..92af874a9ebd83 100644 --- a/examples/jsm/loaders/MMDLoader.js +++ b/examples/jsm/loaders/MMDLoader.js @@ -4,6 +4,7 @@ import { Bone, BufferGeometry, Color, + ColorManagement, CustomBlending, TangentSpaceNormalMap, DoubleSide, @@ -1108,6 +1109,14 @@ class MaterialBuilder { params.emissive = new Color().fromArray( material.ambient ); params.transparent = params.opacity !== 1.0; + if ( ColorManagement.enabled === true ) { + + params.diffuse.convertSRGBToLinear(); + params.specular.convertSRGBToLinear(); + params.emissive.convertSRGBToLinear(); + + } + // params.fog = true; diff --git a/examples/screenshots/webgl_geometry_extrude_shapes2.jpg b/examples/screenshots/webgl_geometry_extrude_shapes2.jpg index 5643b80db42c4c..795d094b37e45e 100644 Binary files a/examples/screenshots/webgl_geometry_extrude_shapes2.jpg and b/examples/screenshots/webgl_geometry_extrude_shapes2.jpg differ diff --git a/examples/screenshots/webgl_loader_lwo.jpg b/examples/screenshots/webgl_loader_lwo.jpg index cfbf80498b712a..5f8de00fc4cb5e 100644 Binary files a/examples/screenshots/webgl_loader_lwo.jpg and b/examples/screenshots/webgl_loader_lwo.jpg differ diff --git a/examples/screenshots/webgl_loader_mmd.jpg b/examples/screenshots/webgl_loader_mmd.jpg index ed0cb7b76a5fea..3f4ec79ce6ac8a 100644 Binary files a/examples/screenshots/webgl_loader_mmd.jpg and b/examples/screenshots/webgl_loader_mmd.jpg differ diff --git a/examples/screenshots/webgl_loader_mmd_audio.jpg b/examples/screenshots/webgl_loader_mmd_audio.jpg index 88de70410256c1..a7b6332d5dc77e 100644 Binary files a/examples/screenshots/webgl_loader_mmd_audio.jpg and b/examples/screenshots/webgl_loader_mmd_audio.jpg differ diff --git a/examples/screenshots/webgl_loader_mmd_pose.jpg b/examples/screenshots/webgl_loader_mmd_pose.jpg index 9099d660bc5a1b..61e56047475ab7 100644 Binary files a/examples/screenshots/webgl_loader_mmd_pose.jpg and b/examples/screenshots/webgl_loader_mmd_pose.jpg differ diff --git a/examples/screenshots/webgl_loader_ttf.jpg b/examples/screenshots/webgl_loader_ttf.jpg index e46ec9053911bb..73896ca3869d0e 100644 Binary files a/examples/screenshots/webgl_loader_ttf.jpg and b/examples/screenshots/webgl_loader_ttf.jpg differ diff --git a/examples/webgl_geometry_extrude_shapes2.html b/examples/webgl_geometry_extrude_shapes2.html index 405ad4205901d8..7b867efe84a345 100644 --- a/examples/webgl_geometry_extrude_shapes2.html +++ b/examples/webgl_geometry_extrude_shapes2.html @@ -38,8 +38,6 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - // From d3-threeD.js /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, @@ -443,7 +441,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 ); // diff --git a/examples/webgl_loader_collada_kinematics.html b/examples/webgl_loader_collada_kinematics.html index 8634cb2a127f1b..59ffad77e33bda 100644 --- a/examples/webgl_loader_collada_kinematics.html +++ b/examples/webgl_loader_collada_kinematics.html @@ -34,8 +34,6 @@ import TWEEN from 'three/addons/libs/tween.module.js'; import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js'; - THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management. - let container, stats; let camera, scene, renderer; @@ -84,7 +82,7 @@ // Grid - const grid = new THREE.GridHelper( 20, 20, 0x888888, 0x444444 ); + const grid = new THREE.GridHelper( 20, 20, 0xc1c1c1, 0x8d8d8d ); scene.add( grid ); // Add the COLLADA @@ -96,7 +94,7 @@ // Lights - const light = new THREE.HemisphereLight( 0xffeeee, 0x111122 ); + const light = new THREE.HemisphereLight( 0xfff7f7, 0x494966 ); scene.add( light ); const pointLight = new THREE.PointLight( 0xffffff, 0.3 ); diff --git a/examples/webgl_loader_collada_skinning.html b/examples/webgl_loader_collada_skinning.html index b02297b5b98f7f..51983725ea0b05 100644 --- a/examples/webgl_loader_collada_skinning.html +++ b/examples/webgl_loader_collada_skinning.html @@ -36,8 +36,6 @@ import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; - THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management. - let container, stats, clock, controls; let camera, scene, renderer, mixer; @@ -72,7 +70,7 @@ // - const gridHelper = new THREE.GridHelper( 10, 20, 0x888888, 0x444444 ); + const gridHelper = new THREE.GridHelper( 10, 20, 0xc1c1c1, 0x8d8d8d ); scene.add( gridHelper ); // diff --git a/examples/webgl_loader_kmz.html b/examples/webgl_loader_kmz.html index d78d1d35f34f57..5f191e1636a6f0 100644 --- a/examples/webgl_loader_kmz.html +++ b/examples/webgl_loader_kmz.html @@ -32,8 +32,6 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { KMZLoader } from 'three/addons/loaders/KMZLoader.js'; - THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management. - let camera, scene, renderer; init(); @@ -55,7 +53,7 @@ scene.add( camera ); - const grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x333333 ); + const grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x7b7b7b ); scene.add( grid ); renderer = new THREE.WebGLRenderer( { antialias: true } ); diff --git a/examples/webgl_loader_lwo.html b/examples/webgl_loader_lwo.html index 2fa0c16b6b5cb1..c3600e32cf9258 100644 --- a/examples/webgl_loader_lwo.html +++ b/examples/webgl_loader_lwo.html @@ -35,8 +35,6 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { LWOLoader } from 'three/addons/loaders/LWOLoader.js'; - THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management. - let camera, scene, renderer; init(); @@ -52,10 +50,10 @@ scene = new THREE.Scene(); scene.background = new THREE.Color( 0xa0a0a0 ); - const ambientLight = new THREE.AmbientLight( 0x222222 ); + const ambientLight = new THREE.AmbientLight( 0x666666 ); scene.add( ambientLight ); - const light1 = new THREE.DirectionalLight( 0x888888 ); + const light1 = new THREE.DirectionalLight( 0xc1c1c1 ); light1.position.set( 0, 200, 100 ); scene.add( light1 ); diff --git a/examples/webgl_loader_md2_control.html b/examples/webgl_loader_md2_control.html index e4b2f237ea6766..cdc34ef78dbc19 100644 --- a/examples/webgl_loader_md2_control.html +++ b/examples/webgl_loader_md2_control.html @@ -45,8 +45,6 @@ import { MD2CharacterComplex } from 'three/addons/misc/MD2CharacterComplex.js'; import { Gyroscope } from 'three/addons/misc/Gyroscope.js'; - THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management. - let SCREEN_WIDTH = window.innerWidth; let SCREEN_HEIGHT = window.innerHeight; @@ -92,7 +90,7 @@ // LIGHTS - scene.add( new THREE.AmbientLight( 0x222222 ) ); + scene.add( new THREE.AmbientLight( 0x666666 ) ); const light = new THREE.DirectionalLight( 0xffffff, 2.25 ); light.position.set( 200, 450, 500 ); diff --git a/examples/webgl_loader_mmd.html b/examples/webgl_loader_mmd.html index 969d8761e36237..a401a3936e16ea 100644 --- a/examples/webgl_loader_mmd.html +++ b/examples/webgl_loader_mmd.html @@ -52,8 +52,6 @@ import { MMDLoader } from 'three/addons/loaders/MMDLoader.js'; import { MMDAnimationHelper } from 'three/addons/animation/MMDAnimationHelper.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let stats; let mesh, camera, scene, renderer, effect; @@ -88,10 +86,10 @@ gridHelper.position.y = - 10; scene.add( gridHelper ); - const ambient = new THREE.AmbientLight( 0x666666 ); + const ambient = new THREE.AmbientLight( 0xaaaaaa, 1 ); scene.add( ambient ); - const directionalLight = new THREE.DirectionalLight( 0x887766 ); + const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); directionalLight.position.set( - 1, 1, 1 ).normalize(); scene.add( directionalLight ); @@ -100,7 +98,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 ); effect = new OutlineEffect( renderer ); diff --git a/examples/webgl_loader_mmd_audio.html b/examples/webgl_loader_mmd_audio.html index 606ead826c8237..39dc1e3cae903e 100644 --- a/examples/webgl_loader_mmd_audio.html +++ b/examples/webgl_loader_mmd_audio.html @@ -53,8 +53,6 @@ import { MMDLoader } from 'three/addons/loaders/MMDLoader.js'; import { MMDAnimationHelper } from 'three/addons/animation/MMDAnimationHelper.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let mesh, camera, scene, renderer, effect; let helper; @@ -95,10 +93,10 @@ camera.add( listener ); scene.add( camera ); - const ambient = new THREE.AmbientLight( 0x666666 ); + const ambient = new THREE.AmbientLight( 0xaaaaaa, 1 ); scene.add( ambient ); - const directionalLight = new THREE.DirectionalLight( 0x887766 ); + const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); directionalLight.position.set( - 1, 1, 1 ).normalize(); scene.add( directionalLight ); @@ -107,7 +105,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 ); effect = new OutlineEffect( renderer ); diff --git a/examples/webgl_loader_mmd_pose.html b/examples/webgl_loader_mmd_pose.html index 445f78cf115797..dac41ff4078c26 100644 --- a/examples/webgl_loader_mmd_pose.html +++ b/examples/webgl_loader_mmd_pose.html @@ -50,8 +50,6 @@ import { MMDLoader } from 'three/addons/loaders/MMDLoader.js'; import { MMDAnimationHelper } from 'three/addons/animation/MMDAnimationHelper.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let camera, scene, renderer, effect; let mesh, helper; @@ -79,10 +77,10 @@ scene = new THREE.Scene(); scene.background = new THREE.Color( 0xffffff ); - const ambient = new THREE.AmbientLight( 0x666666 ); + const ambient = new THREE.AmbientLight( 0xaaaaaa, 1 ); scene.add( ambient ); - const directionalLight = new THREE.DirectionalLight( 0x887766 ); + const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); directionalLight.position.set( - 1, 1, 1 ).normalize(); scene.add( directionalLight ); @@ -91,7 +89,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 ); effect = new OutlineEffect( renderer ); diff --git a/examples/webgl_loader_ply.html b/examples/webgl_loader_ply.html index b9136ef7b03865..5f7f80dcb06f8e 100644 --- a/examples/webgl_loader_ply.html +++ b/examples/webgl_loader_ply.html @@ -34,8 +34,6 @@ import { PLYLoader } from 'three/addons/loaders/PLYLoader.js'; - THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management. - let container, stats; let camera, cameraTarget, scene, renderer; @@ -62,7 +60,7 @@ const plane = new THREE.Mesh( new THREE.PlaneGeometry( 40, 40 ), - new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } ) + new THREE.MeshPhongMaterial( { color: 0xcbcbcb, specular: 0x474747 } ) ); plane.rotation.x = - Math.PI / 2; plane.position.y = - 0.5; @@ -78,7 +76,7 @@ geometry.computeVertexNormals(); - const material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } ); + const material = new THREE.MeshStandardMaterial( { color: 0x009cff, flatShading: true } ); const mesh = new THREE.Mesh( geometry, material ); mesh.position.y = - 0.2; @@ -97,7 +95,7 @@ geometry.computeVertexNormals(); - const material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } ); + const material = new THREE.MeshStandardMaterial( { color: 0x009cff, flatShading: true } ); const mesh = new THREE.Mesh( geometry, material ); mesh.position.x = - 0.2; @@ -114,10 +112,10 @@ // Lights - scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) ); + scene.add( new THREE.HemisphereLight( 0x8d7c7c, 0x494966 ) ); addShadowedLight( 1, 1, 1, 0xffffff, 1.35 ); - addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 ); + addShadowedLight( 0.5, 1, - 1, 0xffd500, 1 ); // renderer diff --git a/examples/webgl_loader_stl.html b/examples/webgl_loader_stl.html index 101b9d07118c1f..94d2d8c68f3606 100644 --- a/examples/webgl_loader_stl.html +++ b/examples/webgl_loader_stl.html @@ -34,8 +34,6 @@ import { STLLoader } from 'three/addons/loaders/STLLoader.js'; - THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management. - let container, stats; let camera, cameraTarget, scene, renderer; @@ -61,7 +59,7 @@ const plane = new THREE.Mesh( new THREE.PlaneGeometry( 40, 40 ), - new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } ) + new THREE.MeshPhongMaterial( { color: 0xcbcbcb, specular: 0x474747 } ) ); plane.rotation.x = - Math.PI / 2; plane.position.y = - 0.5; @@ -75,7 +73,7 @@ const loader = new STLLoader(); loader.load( './models/stl/ascii/slotted_disk.stl', function ( geometry ) { - const material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } ); + const material = new THREE.MeshPhongMaterial( { color: 0xff9c7c, specular: 0x494949, shininess: 200 } ); const mesh = new THREE.Mesh( geometry, material ); mesh.position.set( 0, - 0.25, 0.6 ); @@ -92,7 +90,7 @@ // Binary files - const material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } ); + const material = new THREE.MeshPhongMaterial( { color: 0xd5d5d5, specular: 0x494949, shininess: 200 } ); loader.load( './models/stl/binary/pr2_head_pan.stl', function ( geometry ) { @@ -151,10 +149,10 @@ // Lights - scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) ); + scene.add( new THREE.HemisphereLight( 0x8d7c7c, 0x494966 ) ); addShadowedLight( 1, 1, 1, 0xffffff, 1.35 ); - addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 ); + addShadowedLight( 0.5, 1, - 1, 0xffd500, 1 ); // renderer renderer = new THREE.WebGLRenderer( { antialias: true } ); diff --git a/examples/webgl_loader_svg.html b/examples/webgl_loader_svg.html index 583391f4858759..324500291d019b 100644 --- a/examples/webgl_loader_svg.html +++ b/examples/webgl_loader_svg.html @@ -39,8 +39,6 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { SVGLoader } from 'three/addons/loaders/SVGLoader.js'; - THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management. - let renderer, scene, camera, gui, guiData; init(); @@ -154,7 +152,7 @@ // - const helper = new THREE.GridHelper( 160, 10 ); + const helper = new THREE.GridHelper( 160, 10, 0x8d8d8d, 0xc1c1c1 ); helper.rotation.x = Math.PI / 2; scene.add( helper ); @@ -180,7 +178,7 @@ if ( guiData.drawFillShapes && fillColor !== undefined && fillColor !== 'none' ) { const material = new THREE.MeshBasicMaterial( { - color: new THREE.Color().setStyle( fillColor ).convertSRGBToLinear(), + color: new THREE.Color().setStyle( fillColor ), opacity: path.userData.style.fillOpacity, transparent: true, side: THREE.DoubleSide, @@ -208,7 +206,7 @@ if ( guiData.drawStrokes && strokeColor !== undefined && strokeColor !== 'none' ) { const material = new THREE.MeshBasicMaterial( { - color: new THREE.Color().setStyle( strokeColor ).convertSRGBToLinear(), + color: new THREE.Color().setStyle( strokeColor ), opacity: path.userData.style.strokeOpacity, transparent: true, side: THREE.DoubleSide, diff --git a/examples/webgl_loader_ttf.html b/examples/webgl_loader_ttf.html index 087c01df3c384d..464d5c0731c99f 100644 --- a/examples/webgl_loader_ttf.html +++ b/examples/webgl_loader_ttf.html @@ -33,8 +33,6 @@ import { Font } from 'three/addons/loaders/FontLoader.js'; import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; - THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management. - let container; let camera, cameraTarget, scene, renderer; let group, textMesh1, textMesh2, textGeo, material; @@ -88,7 +86,7 @@ const pointLight = new THREE.PointLight( 0xffffff, 1.5 ); pointLight.position.set( 0, 100, 90 ); - pointLight.color.setHSL( Math.random(), 1, 0.5 ); + pointLight.color.setHSL( Math.random(), 1, 0.5, THREE.SRGBColorSpace ); scene.add( pointLight ); material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ); @@ -120,7 +118,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 diff --git a/examples/webgl_loader_usdz.html b/examples/webgl_loader_usdz.html index c3c6228d7d7f1e..d3e69383595892 100644 --- a/examples/webgl_loader_usdz.html +++ b/examples/webgl_loader_usdz.html @@ -40,8 +40,6 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { USDZLoader } from 'three/addons/loaders/USDZLoader.js'; - THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management. - let camera, scene, renderer; init(); @@ -55,13 +53,13 @@ scene = new THREE.Scene(); scene.background = new THREE.Color( 0xeeeeee ); - scene.add( new THREE.GridHelper( 2, 4 ) ); + scene.add( new THREE.GridHelper( 2, 4, 0xc1c1c1, 0x8d8d8d ) ); const light = new THREE.DirectionalLight( 0xffffff ); light.position.set( 1, 1, 1 ); scene.add( light ); - const light2 = new THREE.HemisphereLight( 0xffffff, 0x888888 ); + const light2 = new THREE.HemisphereLight( 0xffffff, 0xc1c1c1 ); scene.add( light2 ); // renderer