make PBR Neutral our default tone mapper (#4886)

* make PBR Neutral our default tone mapper

* update effects default

* update goldens

* updated docs

Author: elalish

packages/model-viewer-effects/src/effect-composer.ts

@@ -88,11 +88,10 @@ export const EnvironmentMixin = <T extends Constructor<ModelViewerElementBase>>(
       }
 
       if (changedProperties.has('toneMapping')) {
-        this[$scene].toneMapping = (this.toneMapping === 'commerce' ||
-                                    this.toneMapping === 'neutral') ?
-            NeutralToneMapping :
+        this[$scene].toneMapping = this.toneMapping === 'aces' ?
+            ACESFilmicToneMapping :
             this.toneMapping === 'agx' ? AgXToneMapping :
-                                         ACESFilmicToneMapping;
+                                         NeutralToneMapping;
         this[$needsRender]();
       }
 

packages/model-viewer/src/features/environment.ts

@@ -897,13 +897,13 @@
       {
         "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. Khronos PBR Neutral ('neutral') is a standard 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 neutral. The deprecated name commerce is an alias for neutral.",
+        "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. Khronos PBR Neutral ('neutral') is a standard function designed specifically for accurate color reproduction in e-commerce. Our current default is neutral, but prior to v4.0 this default was ACES. The deprecated name commerce is an alias for neutral.",
         "links": [
           "<a href=\"../examples/lightingandenv/#toneMapping\"><span class='attribute'>tone-mapping</span> example</a>"
         ],
         "default": {
-          "default": "aces",
-          "options": "aces, agx, neutral"
+          "default": "neutral",
+          "options": "neutral, aces, agx"
         }
       },
       {

packages/modelviewer.dev/assets/poster-damagedhelmet.webp

@@ -107,7 +107,7 @@ <h4></h4>
     display: none;
   }
 </style>
-<model-viewer id="hotspot-demo" ar ar-modes="webxr" camera-controls touch-action="pan-y" src="../../shared-assets/models/Astronaut.glb" poster="../../assets/poster-astronaut.webp" shadow-intensity="1" alt="A 3D model of an astronaut.">
+<model-viewer id="hotspot-demo" ar ar-modes="webxr" camera-controls touch-action="pan-y" src="../../shared-assets/models/Astronaut.glb" poster="../../assets/poster-astronaut.webp" tone-mapping="aces" shadow-intensity="1" alt="A 3D model of an astronaut.">
   <button class="hotspot" slot="hotspot-visor" data-position="0 1.75 0.35" data-normal="0 0 1"></button>
   <button class="hotspot" slot="hotspot-hand" data-position="-0.54 0.93 0.1" data-normal="-0.73 0.05 0.69">
     <div class="annotation">This hotspot disappears completely</div>
@@ -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" tone-mapping="neutral" 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" 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>
@@ -553,6 +553,7 @@ <h4><span class="font-medium">Camera Views. </span></h4>
       min-camera-orbit="auto auto 5%"
       touch-action="none"
       poster="../../assets/SketchfabModels/ThorAndTheMidgardSerpent.webp"
+      tone-mapping="aces" 
       ar
 
     >

packages/modelviewer.dev/data/docs.json

@@ -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" tone-mapping="neutral" 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" 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" tone-mapping="neutral" 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" ar alt="A 3D transparency test" style="background-color: unset;"></model-viewer>
 </div>
               </template>
             </example-snippet>

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

@@ -144,7 +144,6 @@ <h2>Achieving Color-Accurate Presentation with glTF</h2>
       <model-viewer
           src="../assets/ShopifyModels/GeoPlanter.glb"
           poster="../assets/ShopifyModels/GeoPlanter.webp"
-          tone-mapping="neutral"
           shadow-intensity="1"
           camera-controls
           alt="3D model of a cactus"
@@ -413,7 +412,7 @@ <h3 id="photography">How does rendering compare to photography?</h3>
       <model-viewer
         id="tone-mapping"
         src="../assets/ShopifyModels/Mixer.glb"
-        tone-mapping="neutral"
+       
         camera-controls
         alt="Tone mapping comparisons for different 3D models"
       >
@@ -603,7 +602,7 @@ <h3 id="takeaway">What's the takeaway?</h3>
         id="environments"
         src="../assets/ShopifyModels/Mixer.glb"
         skybox-image="../../shared-assets/environments/neutral.hdr"
-        tone-mapping="neutral"
+       
         camera-controls
         alt="3D model of a blender"
       >

packages/modelviewer.dev/examples/augmentedreality/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" tone-mapping="neutral" camera-controls touch-action="pan-y" auto-rotate alt="A 3D model of a kitchen mixer" src="../../assets/ShopifyModels/GeoPlanter.glb">
+<model-viewer id="neutral-demo" 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>
@@ -166,14 +166,14 @@ <h2 class="demo-title">Showing the difference between our two baked-in lighting
           <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>Khronos PBR Neutral is 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. Neutral 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>Khronos PBR Neutral is 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. Neutral is now our default as of v4.0.</p>
+            <p>ACES is a film industry standard that is widely used in graphics and was our default tone mapper prior to v4.0. 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 Neutral with custom lighting, set the Neutral 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="neutral" camera-controls touch-action="pan-y" auto-rotate alt="A 3D model of a kitchen mixer" src="../../assets/ShopifyModels/Mixer.glb">
+<model-viewer id="tone-demo" 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="neutral">Neutral</option>

packages/modelviewer.dev/examples/color.html

@@ -59,7 +59,7 @@ <h4></h4>
           <example-snippet stamp-to="displayPoster" highlight-as="html">
 
             <template>
-<model-viewer id="reveal" loading="eager" camera-controls touch-action="pan-y" auto-rotate poster="../../assets/poster-shishkebab.webp" src="../../shared-assets/models/shishkebab.glb" shadow-intensity="1" alt="A 3D model of a shishkebab"></model-viewer>
+<model-viewer id="reveal" loading="eager" camera-controls touch-action="pan-y" auto-rotate poster="../../assets/poster-shishkebab.webp" tone-mapping="aces" src="../../shared-assets/models/shishkebab.glb" shadow-intensity="1" alt="A 3D model of a shishkebab"></model-viewer>
             </template>
           </example-snippet>
         </div>
@@ -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" tone-mapping="neutral">
+<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>
             </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" tone-mapping="neutral">
+<model-viewer camera-controls touch-action="pan-y" alt="A 3D model of a fish" src="../../shared-assets/models/BarramundiFish.mixed.glb">
 </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" tone-mapping="neutral">
+<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>
             </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" tone-mapping="neutral" 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" 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/lightingandenv/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" tone-mapping="neutral" 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" ar alt="A 3D model of a Shoe">
   <div class="controls">
     <div>Variant: <select id="variant"></select></div>
   </div>