Add AgX tone mapping (#4615)

* added agx tone mapper

* update tone map selector in editor

* updated MacbethBalls

* use commerce tone mapper in more examples

* address feedback

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');

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 ||

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": [
+          "<a href=\"../examples/lightingandenv/#renderExposure\"><span class='attribute'>exposure</span> example</a>"
+        ],
+        "default": {
+          "default": "aces",
+          "options": "aces, agx, commerce"
+        }
+      },
       {
         "name": "shadow-intensity",
         "htmlName": "shadowIntensity",

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"

packages/modelviewer.dev/examples/annotations/index.html

@@ -289,7 +289,7 @@ <h4><span class="font-medium">Show Dimensions. </span></h4>
           </p>
           <example-snippet stamp-to="dimensions" highlight-as="html">
             <template>
-<model-viewer id="dimension-demo" ar ar-modes="webxr" ar-scale="fixed" camera-orbit="-30deg auto auto" max-camera-orbit="auto 100deg auto" shadow-intensity="1" camera-controls touch-action="pan-y" src="../../assets/ShopifyModels/Chair.glb" alt="A 3D model of an armchair.">
+<model-viewer id="dimension-demo" ar ar-modes="webxr" ar-scale="fixed" camera-orbit="-30deg auto auto" max-camera-orbit="auto 100deg auto" shadow-intensity="1" camera-controls touch-action="pan-y" src="../../assets/ShopifyModels/Chair.glb" tone-mapping="commerce" alt="A 3D model of an armchair.">
   <button slot="hotspot-dot+X-Y+Z" class="dot" data-position="1 -1 1" data-normal="1 0 0"></button>
   <button slot="hotspot-dim+X-Y" class="dim" data-position="1 -1 0" data-normal="1 0 0"></button>
   <button slot="hotspot-dot+X-Y-Z" class="dot" data-position="1 -1 -1" data-normal="1 0 0"></button>

packages/modelviewer.dev/examples/augmentedreality/index.html

@@ -80,7 +80,7 @@ <h4>Customize a WebXR Augmented Reality session with HTML, CSS, and JS in Chrome
           </div>
           <example-snippet stamp-to="webXR" highlight-as="html">
             <template>
-<model-viewer src="../../assets/ShopifyModels/Chair.glb" poster="../../assets/ShopifyModels/Chair.webp" shadow-intensity="1" ar camera-controls touch-action="pan-y" alt="A 3D model carousel">
+<model-viewer src="../../assets/ShopifyModels/Chair.glb" poster="../../assets/ShopifyModels/Chair.webp" tone-mapping="commerce" shadow-intensity="1" ar camera-controls touch-action="pan-y" alt="A 3D model carousel">
 
   <button slot="ar-button" id="ar-button">
     View in your space
@@ -412,7 +412,7 @@ <h4></h4>
               <template>
 <div class="demo" style="background: linear-gradient(#ffffff, #ada996); overflow-x: hidden;">
   <span style="position: absolute; text-align: center; font-size: 100px; line-height: 100px; left: 50%; transform: translateX(-50%);">Background<br>is visible<br>through<br>transparent<br>objects.</span>
-  <model-viewer camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Assets/Models/ToyCar/glTF-Binary/ToyCar.glb" ar alt="A 3D transparency test" style="background-color: unset;"></model-viewer>
+  <model-viewer camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Assets/Models/ToyCar/glTF-Binary/ToyCar.glb" tone-mapping="commerce" ar alt="A 3D transparency test" style="background-color: unset;"></model-viewer>
 </div>
               </template>
             </example-snippet>

packages/modelviewer.dev/examples/lightingandenv/index.html

@@ -139,7 +139,7 @@ <h2 class="demo-title">Showing the difference between our two baked-in lighting
           </div>
           <example-snippet stamp-to="neutralLighting" highlight-as="html">
             <template>
-<model-viewer id="neutral-demo" camera-controls touch-action="pan-y" auto-rotate alt="A 3D model of a kitchen mixer" src="../../assets/ShopifyModels/Mixer.glb">
+<model-viewer id="neutral-demo" tone-mapping="commerce" camera-controls touch-action="pan-y" auto-rotate alt="A 3D model of a kitchen mixer" src="../../assets/ShopifyModels/GeoPlanter.glb">
   <label for="neutral">Neutral Lighting: </label>
   <input id="neutral" type="checkbox" checked="true">
 </model-viewer>
@@ -159,6 +159,57 @@ <h2 class="demo-title">Showing the difference between our two baked-in lighting
       </div>
     </div>
 
+    <div class="sample">
+      <div id="toneMapping" class="demo"></div>
+      <div class="content">
+        <div class="wrapper">
+          <div class="heading">
+            <h2 class="demo-title">Comparing tone mapping</h2>
+            <p>Tone mapping is the critical last stage of the rendering pipeline that controls the final look of your model. It is necessary because the reflections are often much brighter than a screen can reproduce, so they must be smoothly mapped into the sRGB range, ideally while avoiding clipping artifacts or hue shifts. The image sensor and processing on a digital camera performs a similar step. </p>
+            <p>Commerce in our new tone mapper, designed specifically for the color accuracy needs of e-commerce. It is guaranteed to avoid all hue shifts, has a relatively sharp rolloff in intensity, and a slower progression to white. This is designed to pass the widest range of base color values through unchanged to the screen, while preserving enough headroom for highlights to show well. Commerce will become our default in our next major release, v4.0.</p>
+            <p>ACES is a film industry standard that is widely used in graphics and is and has been our default tone mapper. However, it produces serious hue shifts and extreme desaturation, making bright yellow and cyan unattainable under any lighting. See for yourself in this example.</p>
+            <p>AgX is a relatively new tone mapper that is getting a lot of adoption in graphics. It has less hue shifting than ACES and may be a good option for matching existing artist workflows, but has the same drawback of significant desaturation. However, in more artistic scenes this can be beneficial since it allows for a slower intensity rolloff.</p>
+            <p>For an apples-to-apples comparison of ACES to Commerce with custom lighting, set the Commerce exposure to 1 and the ACES exposure to 0.77 to account for ACES being artificially bright. This compensation is automatic for our built-in lighting.</p>
+          </div>
+          <example-snippet stamp-to="toneMapping" highlight-as="html">
+            <template>
+<model-viewer id="tone-demo" tone-mapping="commerce" camera-controls touch-action="pan-y" auto-rotate alt="A 3D model of a kitchen mixer" src="../../assets/ShopifyModels/Mixer.glb">
+  <p>Tone Mapping:</p>
+  <select id="tone">
+    <option value="commerce">Commerce</option>
+    <option value="aces">ACES</option>
+    <option value="agx">AgX</option>
+  </select>
+  <p>Model:</p>
+  <select id="model">
+    <option value="Mixer">Mixer</option>
+    <option value="GeoPlanter">GeoPlanter</option>
+    <option value="Chair">Chair</option>
+    <option value="ToyTrain">ToyTrain</option>
+    <option value="Canoe">Canoe</option>
+  </select>
+</model-viewer>
+<script>
+(() => {
+  const modelViewer = document.querySelector('#tone-demo');
+  const tone = document.querySelector('#tone');
+  const model = document.querySelector('#model');
+
+  tone.addEventListener('input',() => {
+    modelViewer.toneMapping = tone.value;
+  });
+
+  model.addEventListener('input',() => {
+    modelViewer.src = "../../assets/ShopifyModels/" + model.value + ".glb";
+  });
+})();
+</script>
+            </template>
+          </example-snippet>
+        </div>
+      </div>
+    </div>
+
     <div class="sample">
       <div id="renderExposure" class="demo"></div>
       <div class="content">

packages/modelviewer.dev/examples/loading/index.html

@@ -230,7 +230,7 @@ <h4>
           </div>
           <example-snippet stamp-to="dracoSupport" highlight-as="html">
             <template>
-<model-viewer camera-controls touch-action="pan-y" alt="A 3D model of a boom box" src="../../shared-assets/models/glTF-Sample-Assets/Models/BoomBox/glTF-Draco/BoomBox.gltf">
+<model-viewer camera-controls touch-action="pan-y" alt="A 3D model of a boom box" src="../../shared-assets/models/glTF-Sample-Assets/Models/BoomBox/glTF-Draco/BoomBox.gltf" tone-mapping="commerce">
 </model-viewer>
             </template>
           </example-snippet>
@@ -306,7 +306,7 @@ <h4>
           </div>
           <example-snippet stamp-to="ktx2Support" highlight-as="html">
             <template>
-<model-viewer camera-controls touch-action="pan-y" alt="A 3D model of a fish" src="../../shared-assets/models/BarramundiFish.mixed.glb">
+<model-viewer camera-controls touch-action="pan-y" alt="A 3D model of a fish" src="../../shared-assets/models/BarramundiFish.mixed.glb" tone-mapping="commerce">
 </model-viewer>
             </template>
           </example-snippet>
@@ -332,7 +332,7 @@ <h4>
           </div>
           <example-snippet stamp-to="meshoptSupport" highlight-as="html">
             <template>
-<model-viewer camera-controls touch-action="pan-y" alt="A 3D model of a mechanical coffee mug contraption" src="../../shared-assets/models/coffeemat.glb">
+<model-viewer camera-controls touch-action="pan-y" alt="A 3D model of a mechanical coffee mug contraption" src="../../shared-assets/models/coffeemat.glb" tone-mapping="commerce">
 </model-viewer>
             </template>
           </example-snippet>
@@ -394,7 +394,7 @@ <h4>Our renderer tries to keep the frame rate between 38 and 60 frames per secon
           </div>
           <example-snippet stamp-to="renderScale" highlight-as="html">
             <template>
-<model-viewer id="scale" alt="A 3D model of a toy car" camera-controls touch-action="pan-y" auto-rotate src="../../shared-assets/models/glTF-Sample-Assets/Models/ToyCar/glTF-Binary/ToyCar.glb" ar>
+<model-viewer id="scale" alt="A 3D model of a toy car" camera-controls touch-action="pan-y" auto-rotate src="../../shared-assets/models/glTF-Sample-Assets/Models/ToyCar/glTF-Binary/ToyCar.glb" tone-mapping="commerce" ar>
   Reported DPR: <span id="reportedDpr"></span><br/>
   Rendered DPR: <span id="renderedDpr"></span><br/>
   Minimum DPR: <span id="minimumDpr"></span><br/>

packages/modelviewer.dev/examples/scenegraph/index.html

@@ -94,7 +94,7 @@ <h2 class="demo-title">Swap Model Variants</h2>
           </div>
           <example-snippet stamp-to="variants" highlight-as="html">
             <template>
-<model-viewer id="shoe" camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Assets/Models/MaterialsVariantsShoe/glTF-Binary/MaterialsVariantsShoe.glb" ar alt="A 3D model of a Shoe">
+<model-viewer id="shoe" camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Assets/Models/MaterialsVariantsShoe/glTF-Binary/MaterialsVariantsShoe.glb" tone-mapping="commerce" ar alt="A 3D model of a Shoe">
   <div class="controls">
     <div>Variant: <select id="variant"></select></div>
   </div>

packages/space-opera/src/components/ibl_selector/ibl_selector.ts

@@ -208,8 +208,9 @@ export class IblSelector extends ConnectedLitElement {
             <me-dropdown
               style="align-self: center; width: 70%;"
               @select=${this.onSelectToneMapping}>
-              <paper-item>ACES</paper-item>
               <paper-item value="commerce">Commerce</paper-item>
+              <paper-item>ACES</paper-item>
+              <paper-item value="agx">AgX</paper-item>
             </me-dropdown>
           </me-section-row>
         </div>

packages/space-opera/src/types.ts

@@ -125,7 +125,8 @@ export const INITIAL_STATE: State = {
     modelViewerSnippet: {
       arConfig: {ar: true, arModes: 'webxr scene-viewer quick-look'},
       bestPractices: {progressBar: true, arButton: true, arPrompt: true},
-      config: {cameraControls: true, shadowIntensity: 1},
+      config:
+          {cameraControls: true, shadowIntensity: 1, toneMapping: 'commerce'},
       poster: {height: 512, mimeType: 'image/webp'},
       hotspots: [],
       relativeFilePaths: {posterName: 'poster.webp'},