diff --git a/packages/model-viewer/src/features/environment.ts b/packages/model-viewer/src/features/environment.ts index 96a25d83e4..b8c9f5341e 100644 --- a/packages/model-viewer/src/features/environment.ts +++ b/packages/model-viewer/src/features/environment.ts @@ -24,7 +24,7 @@ const DEFAULT_SHADOW_INTENSITY = 0.0; const DEFAULT_SHADOW_SOFTNESS = 1.0; const DEFAULT_EXPOSURE = 1.0; -export type ToneMappingValue = 'auto'|'aces'|'commerce'; +export type ToneMappingValue = 'auto'|'aces'|'agx'|'commerce'; export const $currentEnvironmentMap = Symbol('currentEnvironmentMap'); export const $currentBackground = Symbol('currentBackground'); diff --git a/packages/model-viewer/src/three-components/Renderer.ts b/packages/model-viewer/src/three-components/Renderer.ts index d1ca9194b8..05a335b181 100644 --- a/packages/model-viewer/src/three-components/Renderer.ts +++ b/packages/model-viewer/src/three-components/Renderer.ts @@ -13,7 +13,7 @@ * limitations under the License. */ -import {ACESFilmicToneMapping, CustomToneMapping, Event, EventDispatcher, ShaderChunk, Vector2, WebGLRenderer} from 'three'; +import {ACESFilmicToneMapping, AgXToneMapping, CustomToneMapping, Event, EventDispatcher, ShaderChunk, Vector2, WebGLRenderer} from 'three'; import {$updateEnvironment} from '../features/environment.js'; import {ModelViewerGlobalConfig} from '../features/loading.js'; @@ -523,7 +523,8 @@ export class Renderer extends true; // this might get reset by the effectRenderer this.threeRenderer.toneMapping = scene.toneMapping === 'commerce' ? CustomToneMapping : - ACESFilmicToneMapping; + scene.toneMapping === 'agx' ? AgXToneMapping : + ACESFilmicToneMapping; this.threeRenderer.render(scene, scene.camera); } if (this.multipleScenesVisible || diff --git a/packages/modelviewer.dev/assets/ShopifyModels/Chair.webp b/packages/modelviewer.dev/assets/ShopifyModels/Chair.webp index effa071438..c29ae42f4c 100644 Binary files a/packages/modelviewer.dev/assets/ShopifyModels/Chair.webp and b/packages/modelviewer.dev/assets/ShopifyModels/Chair.webp differ diff --git a/packages/modelviewer.dev/data/docs.json b/packages/modelviewer.dev/data/docs.json index d04803dcb4..5ea59e17d5 100644 --- a/packages/modelviewer.dev/data/docs.json +++ b/packages/modelviewer.dev/data/docs.json @@ -882,6 +882,18 @@ "options": "any positive value" } }, + { + "name": "tone-mapping", + "htmlName": "toneMapping", + "description": "Selects the function that compresses the HDR rendering to an SDR image on your screen. ACES is a film industry standard that is commonly used, though it has serious color-accuracy problems. AgX is a new and improved tone mapper seeing broad adoption in film and games.Commerce is a function designed specifically for accurate color reproduction in e-commerce. Our current default is and has been ACES, but in v4.0 this default will change to Commerce.", + "links": [ + "exposure example" + ], + "default": { + "default": "aces", + "options": "aces, agx, commerce" + } + }, { "name": "shadow-intensity", "htmlName": "shadowIntensity", diff --git a/packages/modelviewer.dev/data/examples.json b/packages/modelviewer.dev/data/examples.json index 1db541c80d..eaec54bc8c 100644 --- a/packages/modelviewer.dev/data/examples.json +++ b/packages/modelviewer.dev/data/examples.json @@ -175,6 +175,10 @@ "htmlId": "neutralLighting", "name": "Neutral Lighting" }, + { + "htmlId": "toneMapping", + "name": "Tone Mapping" + }, { "htmlId": "renderExposure", "name": "Render Exposure" diff --git a/packages/modelviewer.dev/examples/annotations/index.html b/packages/modelviewer.dev/examples/annotations/index.html index 505eafe8cb..403e626113 100644 --- a/packages/modelviewer.dev/examples/annotations/index.html +++ b/packages/modelviewer.dev/examples/annotations/index.html @@ -289,7 +289,7 @@

Show Dimensions.