update commerce to neutral (#4760)

Author: elalish

packages/modelviewer.dev/data/docs.json

@@ -79,7 +79,9 @@
         "name": "a11y",
         "htmlName": "a11y",
         "description": "Add unique translations for the model wcag compliance. Use this attribute, you must provide a JSON object with the following keys: front, back, left, right, upper-front, upper-back, upper-left, upper-right, lower-front, lower-back, lower-left, lower-right, interaction-prompt. The values of these keys should be the translations for the model's orientation. This attribute is useful for screen readers and other assistive technologies.",
-        "links": ["<a href=\"../examples/loading/#useA11y\">Related examples</a>"],
+        "links": [
+          "<a href=\"../examples/loading/#useA11y\">Related examples</a>"
+        ],
         "default": {
           "default": "null",
           "options": "{&quot;front&quot;: &quot;Front of 3D model&quot;,&quot;back&quot;: &quot;Back of 3D model&quot;,&quot;left&quot;: &quot;Left of 3D model&quot;,&quot;right&quot;: &quot;Right of 3D model&quot;,&quot;upper-front&quot;: &quot;Upper front of 3D model&quot;,&quot;upper-back&quot;: &quot;Upper back of 3D model&quot;,&quot;upper-left&quot;: &quot;Upper left of 3D model&quot;,&quot;upper-right&quot;: &quot;Upper right of 3D model&quot;,&quot;lower-front&quot;: &quot;Lower front of 3D model&quot;,&quot;lower-back&quot;: &quot;Lower back of 3D model&quot;,&quot;lower-left&quot;: &quot;Lower left of 3D model&quot;,&quot;lower-right&quot;: &quot;Lower right of 3D model&quot;,&quot;interaction-prompt&quot;: &quot;'Use mouse, touch or arrow keys to move&quot;}"
@@ -895,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.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.",
+        "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.",
         "links": [
           "<a href=\"../examples/lightingandenv/#toneMapping\"><span class='attribute'>tone-mapping</span> example</a>"
         ],
         "default": {
           "default": "aces",
-          "options": "aces, agx, commerce"
+          "options": "aces, agx, neutral"
         }
       },
       {

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

packages/modelviewer.dev/examples/color.html

@@ -144,7 +144,7 @@ <h2>Achieving Color-Accurate Presentation with glTF</h2>
       <model-viewer
           src="../assets/ShopifyModels/GeoPlanter.glb"
           poster="../assets/ShopifyModels/GeoPlanter.webp"
-          tone-mapping="commerce"
+          tone-mapping="neutral"
           shadow-intensity="1"
           camera-controls
           alt="3D model of a cactus"
@@ -392,10 +392,10 @@ <h3 id="photography">How does rendering compare to photography?</h3>
     <p>Tone mapping comes at the difficult intersection between art and science.
     We have found through painful experience that the existing tone mapping
     functions do not meet the needs of e-commerce for color-accuracy, and so we
-    have developed a Commerce tone mapper for exactly this purpose. If you have
+    have developed the Khronos PBR Neutral tone mapper for exactly this purpose. If you have
     precise sRGB color swatches that you have used to create your glTF materials
     and want them to come through as unaltered as possible, we strongly
-    recommend using our "commerce" tone-mapping function and our default
+    recommend using our "neutral" tone-mapping function and our default
     lighting or another suitable grayscale lighting environment.</p>
 
     <p>Below is an example where you can see first-hand how much difference tone
@@ -412,13 +412,13 @@ <h3 id="photography">How does rendering compare to photography?</h3>
       <model-viewer
         id="tone-mapping"
         src="../assets/ShopifyModels/Mixer.glb"
-        tone-mapping="commerce"
+        tone-mapping="neutral"
         camera-controls
         alt="Tone mapping comparisons for different 3D models"
       >
         <p>Tone Mapping:
           <select id="tone">
-            <option value="commerce">Commerce</option>
+            <option value="neutral">PBR Neutral</option>
             <option value="aces">ACES</option>
             <option value="agx">AgX</option>
           </select><br/>
@@ -579,30 +579,30 @@ <h3 id="takeaway">What's the takeaway?</h3>
 
     <p>Still, for most e-commerce vendors that are likely managing separate
     contracts for 3D model creation and interactive website design, simplicity
-    is key to cost-effectiveness. My recommendation is to use our Commerce tone
+    is key to cost-effectiveness. My recommendation is to use our PBR Neutral tone
     mapping and if you already have approved marketing colors for your products,
     then tell your artists to use those for the baseColor. Use a grayscale
     lighting environment (like our default), adjusting if necessary to place
     highlights and change exposure.</p>
 
     <p>If the color is not known, but being matched by eye, then ensure the
-    artist's tools also use the Commerce tone mapper and a lighting environment
+    artist's tools also use the Khronos PBR Neutral tone mapper and a lighting environment
     that is as close as possible to the production grayscale lighting
-    environment. Since our Commerce tone mapper is relatively new, it may not be
+    environment. Since our PBR Neutral tone mapper is relatively new, it may not be
     available in tools; in this case the next best thing is to turn off tone
     mapping entirely. Make sure to educate your artists on the differences they
     can expect - blown out highlights with hue skews, and saturation loss for
     dark colors. Ensure they also frequently test their output in a
     near-production environment, hopefully using &lt;model-viewer&gt; with
-    <code>tone-mapping="commerce"</code>. This way they can calibrate and ensure
+    <code>tone-mapping="neutral"</code>. This way they can calibrate and ensure
     the end user will see realistic colors.</p>
 
     <figure>
       <model-viewer
         id="environments"
         src="../assets/ShopifyModels/Mixer.glb"
         skybox-image="../../shared-assets/environments/neutral.hdr"
-        tone-mapping="commerce"
+        tone-mapping="neutral"
         camera-controls
         alt="3D model of a blender"
       >

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" tone-mapping="commerce" 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" tone-mapping="neutral" 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,17 +166,17 @@ <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>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>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>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>
+            <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="commerce" 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" tone-mapping="neutral" 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="neutral">Neutral</option>
     <option value="aces">ACES</option>
     <option value="agx">AgX</option>
   </select>

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" tone-mapping="commerce">
+<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>
             </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="commerce">
+<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>
             </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="commerce">
+<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>
             </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="commerce" 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="neutral" 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" tone-mapping="commerce" 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="neutral" ar alt="A 3D model of a Shoe">
   <div class="controls">
     <div>Variant: <select id="variant"></select></div>
   </div>

packages/modelviewer.dev/examples/tone-mapping.html

@@ -483,7 +483,7 @@ <h3 id="commerce">Khronos PBR Neutral tone mapper</h3>
       <model-viewer
         id="demo"
         src="../../shared-assets/models/MacbethBalls.glb"
-        tone-mapping="commerce"
+        tone-mapping="neutral"
         ar
         camera-controls
         shadow-intensity="1"
@@ -534,7 +534,7 @@ <h3 id="validation">Validation</h3>
         id="demo"
         src="../../shared-assets/models/MacbethBalls.glb"
         skybox-image="../../shared-assets/environments/white_furnace.hdr"
-        tone-mapping="commerce"
+        tone-mapping="neutral"
         ar
         camera-controls
         shadow-intensity="1"

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

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

packages/space-opera/src/types.ts

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