PBR Neutral docs (#4687)

elalish · web-flow · commit 6e7fc85da2bf · 2024-02-27T17:19:53.000-08:00
* update commerce to PBR Neutral

* added adoption info
diff --git a/packages/modelviewer.dev/examples/config.ocio b/packages/modelviewer.dev/examples/config.ocio
@@ -57,7 +57,7 @@ roles:
 displays:
   sRGB:
     - !<View> {name: Standard, colorspace: sRGB}
-    - !<View> {name: Commerce, colorspace: Commerce sRGB}
+    - !<View> {name: PBR Neutral, colorspace: PBR Neutral sRGB}
     - !<View> {name: AgX, colorspace: AgX Base sRGB}
     - !<View> {name: Filmic, colorspace: Filmic sRGB}
     - !<View> {name: Filmic Log, colorspace: Filmic Log}
@@ -79,7 +79,7 @@ displays:
     - !<View> {name: False Color, colorspace: AgX False Color Rec.2020}
     - !<View> {name: Raw, colorspace: Non-Color}
 active_displays: [sRGB, Display P3, Rec.1886, Rec.2020]
-active_views: [Standard, Commerce, AgX, Filmic, Filmic Log, False Color, Raw]
+active_views: [Standard, PBR Neutral, AgX, Filmic, Filmic Log, False Color, Raw]
 inactive_colorspaces: [Luminance Compensation Rec.2020, Luminance Compensation sRGB, Luminance Compensation P3, AgX False Color Rec.709, AgX False Color P3, AgX False Color Rec.1886, AgX False Color Rec.2020]
 
 colorspaces:
@@ -487,18 +487,18 @@ colorspaces:
         - !<ColorSpaceTransform> {src: Rec.1886, dst: Rec.2020}
 
   - !<ColorSpace>
-    name: Commerce sRGB
-    family: Commerce
+    name: PBR Neutral sRGB
+    family: PBR Neutral
     equalitygroup:
     bitdepth: 32f
     description: |
-      Commerce Image Encoding for sRGB Display
+      Khronos PBR Neutral Image Encoding for sRGB Display
     isdata: false
     from_scene_reference: !<GroupTransform>
       children:
         - !<ColorSpaceTransform> {src: Linear CIE-XYZ E, dst: Linear Rec.709}
         - !<AllocationTransform> {allocation: lg2, vars: [-6, 12]}
-        - !<FileTransform> {src: commerce.cube, interpolation: tetrahedral}
+        - !<FileTransform> {src: pbrNeutral.cube, interpolation: tetrahedral}
         - !<ColorSpaceTransform> {src: Linear Rec.709, dst: sRGB}
 
 looks:
diff --git a/packages/modelviewer.dev/examples/lut-writer.mjs b/packages/modelviewer.dev/examples/lut-writer.mjs
@@ -15,7 +15,7 @@
 
 // Running:
 // node lut-writer.mjs
-// produces: commerce.cube
+// produces: pbrNeutral.cube
 
 import * as fs from 'fs';
 
@@ -25,8 +25,8 @@ const log2Min = -6;
 const log2Max = 12;
 
 const text = [
-  `TITLE "Commerce sRGB"`,
-  `# Commerce sRGB LUT`,
+  `TITLE "PBR Neutral sRGB"`,
+  `# PBR Neutral sRGB LUT`,
   `DOMAIN_MIN 0 0 0`,
   `DOMAIN_MAX 1 1 1`,
   `LUT_3D_SIZE ${size}`,
@@ -49,7 +49,7 @@ function rgb2string(r, g, b) {
   return `${round(r)} ${round(g)} ${round(b)}`;
 }
 
-function commerce(r, g, b) {
+function pbrNeutral(r, g, b) {
   const startCompression = 0.8 - 0.04;
   const desaturation = 0.15;
 
@@ -87,10 +87,10 @@ function commerce(r, g, b) {
 for (let b = 0; b < size; ++b) {
   for (let g = 0; g < size; ++g) {
     for (let r = 0; r < size; ++r) {
-      text.push(commerce(r, g, b));
+      text.push(pbrNeutral(r, g, b));
     }
   }
 }
 text.push('');
 
-fs.writeFileSync('commerce.cube', text.join('\n'));
+fs.writeFileSync('pbrNeutral.cube', text.join('\n'));
diff --git a/packages/modelviewer.dev/examples/pbrNeutral.cube b/packages/modelviewer.dev/examples/pbrNeutral.cube
@@ -1,5 +1,5 @@
-TITLE "Commerce sRGB"
-# Commerce sRGB LUT
+TITLE "PBR Neutral sRGB"
+# PBR Neutral sRGB LUT
 DOMAIN_MIN 0 0 0
 DOMAIN_MAX 1 1 1
 LUT_3D_SIZE 57
diff --git a/packages/modelviewer.dev/examples/tone-mapping.html b/packages/modelviewer.dev/examples/tone-mapping.html
@@ -17,7 +17,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>PBR Tone Mapping</title>
+  <title>PBR Neutral Tone Mapping</title>
   <meta charset="utf-8">
   <meta name="description" content="Performance optimization for &lt;model-viewer&gt;">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -134,9 +134,10 @@ <h2>Tone Mapping Considerations for Physically-Based Rendering</h2>
       <a href="#purpose">The purpose of tone mapping</a><br/>
       <a href="#tradeoffs">Tradeoffs</a><br/>
       <a href="#needs">The needs of e-commerce</a><br/>
-      <a href="#commerce">Commerce tone mapper</a><br/>
+      <a href="#commerce">Khronos PBR Neutral tone mapper</a><br/>
       <a href="#validation">Validation</a><br/>
       <a href="#ocio">OpenColorIO profile</a><br/>
+      <a href="#adoption">Adoption</a><br/>
       <a href="#white">White point</a><br/>
     </p>
   
@@ -279,16 +280,16 @@ <h3 id="tradeoffs">Tradeoffs</h3>
         src="../assets/ACESset.glb"
         camera-orbit="150deg auto auto"
         camera-controls
-        alt="3D model of ACES/Commerce tone mapping reachable colors."
+        alt="3D model of ACES/Neutral tone mapping reachable colors."
       >
       <p>
         <select id="set">
           <option value="../assets/ACESset.glb">ACES</option>
-          <option value="../assets/CommerceSet.glb">Commerce</option>
+          <option value="../assets/CommerceSet.glb">PBR Neutral</option>
         </select>Tone Mapping Function
       </p>
       </model-viewer>
-      <figcaption>Comparison of the ACES and Commerce tone mapping reachable colors. The cube represents the [0, 1] space in linear light - no sRGB curve has been applied.</figcaption>
+      <figcaption>Comparison of the ACES and PBR Neutral tone mapping reachable colors. The cube represents the [0, 1] space in linear light - no sRGB curve has been applied.</figcaption>
     </figure>
 
     <p>Note that canary yellow, bright greens and blues are all impossible to
@@ -361,14 +362,16 @@ <h3 id="needs">The needs of e-commerce</h3>
     generalizable to these situations, but there will be additional challenges
     beyond tone mapping as well.</p>
 
-    <h3 id="commerce">Commerce tone mapper</h3>
+    <h3 id="commerce">Khronos PBR Neutral tone mapper</h3>
 
-    <p>The Commerce tone mapper is designed to be simple to implement, fast to
-    run, and faithfully reproduce color as much as possible while eliminating
-    HDR artifacts around highlights. It is intended to be 1:1 for colors up to a
-    certain maximum value, with the remainder used as headroom for the
-    compressed highlights. It turns out 1:1 is a little trickier than it
-    sounds.</p>
+    <p>The Khronos PBR Neutral tone mapper is designed to be simple to
+    implement, fast to run, and faithfully reproduce color as much as possible
+    while eliminating HDR artifacts around highlights. It is intended to be 1:1
+    for colors up to a certain maximum value, with the remainder used as
+    headroom for the compressed highlights. I developed it under the auspices of
+    the Khronos 3D Commerce working group to create an industry standard for
+    e-commerce and an improved alternative for any PBR render that currently
+    disables tone mapping.</p>
 
     <p>I found that an actual 1:1 tone mapping function led to slightly
     desaturated colors, most noticeably for dark colors. I tracked this problem
@@ -397,7 +400,7 @@ <h3 id="commerce">Commerce tone mapper</h3>
     <p>I chose to fit a simple 1/x function and match the piecewise slope of our
     1:1 portion, as this gives an asymptote with a reasonable tail. It has only
     a single parameter: the value where we switch from the linear to the
-    nonlinear function. The purpose of the Commerce tone mapper is to be a
+    nonlinear function. The purpose of the Khronos PBR Neutral tone mapper is to be a
     standard and thus without parameters, so I chose 0.8 after much testing.
     However, this is likely the most natural place to adjust the curve to HDR
     output from sRGB.</p>
@@ -425,8 +428,11 @@ <h3 id="commerce">Commerce tone mapper</h3>
     brain an alternate perceptual cue, which smoothly encodes several orders of
     magnitude more brightness than is available in the output screen.</p>
 
-    <p>The complete shader code is quite small, with only three divides and
-    those only applied to colors over the 1:1 limit:<br/>
+    <p>Careful use of the minimum and maximum of the three color channel values
+    ensures that this tone mapping function has continuous gradients everywhere
+    and in all dimensions, which is key to avoiding eye-catching artifacts in
+    the output renders. The complete shader code is quite small, with only three
+    divides and those only applied to colors over the 1:1 limit:<br/>
     <code>
   float startCompression = 0.8 - 0.04;
   float desaturation = 0.15;
@@ -451,7 +457,7 @@ <h3 id="commerce">Commerce tone mapper</h3>
 
     <figure>
       <img src="../assets/commerce-linear.png"/>
-      <figcaption>The Commerce tone mapping function, which maps linear brightness to the [0, 1] range. The compression function is piecewise in three parts: blue for the contrast toe, green for the linear 1:1 region, and red for the compression region. The desaturation curve is purple.</figcaption>
+      <figcaption>The Khronos PBR Neutral tone mapping function, which maps linear brightness to the [0, 1] range. The compression function is piecewise in three parts: blue for the contrast toe, green for the linear 1:1 region, and red for the compression region. The desaturation curve is purple.</figcaption>
     </figure>
 
     <figure>
@@ -482,7 +488,7 @@ <h3 id="commerce">Commerce tone mapper</h3>
       >
         <p>
           <select id="tonemapper">
-            <option value="5">Commerce</option>
+            <option value="5">PBR Neutral</option>
             <option value="1">Linear/Clamped</option>
             <option value="4">ACES</option>
             <option value="6">AgX</option>
@@ -532,7 +538,7 @@ <h3 id="validation">Validation</h3>
         shadow-intensity="1"
       >
       </model-viewer>
-      <figcaption>Commerce tone mapper white furnace validation.</figcaption>
+      <figcaption>Khronos PBR Neutral tone mapper white furnace validation.</figcaption>
     </figure>
 
     <p>The first difference is due to multi-scattering, which causes the
@@ -556,29 +562,28 @@ <h3 id="ocio">OpenColorIO profile</h3>
     representing color space conversions and color grading, supported by many 3D
     authoring tools. To represent the most general possible functions, instead
     of specifying equations they use 3D lookup tables (LUTs). To help authors
-    try out Commerce tone mapping within their existing workflows, I have
+    try out Khronos PBR Neutral tone mapping within their existing workflows, I have
     generated an equivalent OCIO config and a LUT in the common .cube format.
-    You can download <a href="commerce.cube">commerce.cube</a> and <a
+    You can download <a href="pbrNeutral.cube">pbrNeutral.cube</a> and <a
     href="config.ocio">config.ocio</a>, which is modified from the
-    <a href="https://www.blender.org/">Blender</a> config to add Commerce as a
+    <a href="https://www.blender.org/">Blender</a> config to add PBR Neutral as a
     view transform for color management with an sRGB display device.</p>
 
-    <p>In order to try Commerce tone mapping in Blender, you need to replace the
+    <p>In order to try PBR Neutral tone mapping in Blender, you need to replace the
     config.ocio file with the above version. The original file can be found in
     the Blender install directory, e.g.
     <code>Blender/Contents/Resources/4.0/datafiles/colormanagement</code> on a
-    Mac install. You will also need to add <code>commerce.cube</code> to the
+    Mac install. You will also need to add <code>pbrNeutral.cube</code> to the
     <code>luts</code> directory on the same path. Then start Blender and at the
     bottom of the Render tab, under Color Management, select sRGB for Display
-    Device and Commerce for View Transform.</p>
+    Device and PBR Neutral for View Transform.</p>
 
     <p>I have tested this on a Macbook Pro, which uses a P3 display, but found
     that I achieved consistent colors when setting the display device to sRGB.
     This was to achieve consistency with Chrome and Safari rendering on the same
     device, so this may change in the future as color management on the web
-    improves. Note that Blender is not glTF-compliant for unlit materials,
-    because it applies its view transform to the entire scene, when it should
-    not be applied to unlit materials. This makes the 3D Macbeth model above a
+    improves. Note that unlike &lt;model-viewer&gt;, Blender also applies its
+    view transform to unlit materials. This makes the 3D Macbeth model above a
     little harder to use, as the unlit spheres can no longer be used as a
     reference.</p>
 
@@ -588,21 +593,43 @@ <h3 id="ocio">OpenColorIO profile</h3>
 
     <p><code>
 - !&lt;ColorSpace&gt;
-  name: Commerce sRGB
-  family: Commerce
+  name: PBR Neutral sRGB
+  family: PBR Neutral
   equalitygroup:
   bitdepth: 32f
   description: |
-    Commerce Image Encoding for sRGB Display
+    Khronos PBR Neutral Image Encoding for sRGB Display
   isdata: false
   from_scene_reference: !&lt;GroupTransform&gt;
     children:
       - !&lt;ColorSpaceTransform&gt; {src: Linear CIE-XYZ E, dst: Linear Rec.709}
       - !&lt;AllocationTransform&gt; {allocation: lg2, vars: [-6, 12]}
-      - !&lt;FileTransform&gt; {src: commerce.cube, interpolation: tetrahedral}
+      - !&lt;FileTransform&gt; {src: pbrNeutral.cube, interpolation: tetrahedral}
       - !&lt;ColorSpaceTransform&gt; {src: Linear Rec.709, dst: sRGB}
     </code></p>
 
+    <h3 id="adoption">Adoption</h3>
+
+    <p>Of course a standardized color-accurate tone mapper is most useful when
+    it is universally available, so that everyone from artists to marketers to
+    end users can see the product the same way and ensure quality. This is
+    precisely why Khronos is pushing this as an industry standard for renderers
+    and authoring tools alike to adopt, as an option for tools that support
+    multiple tone mappers, and as the default for those that don't. This section
+    will be occasionally updated to reflect our progress in adoption across
+    industry tools.</p>
+
+    <p>So far two major open-source renderers have added PBR Neutral tone
+    mapping, and both should be available in public releases in March 2024: <a
+    href="https://github.com/mrdoob/three.js/pull/27668">Three.js</a> and <a
+    href="https://github.com/google/filament/pull/7597">Filament</a>.
+    <a href="lightingandenv/#toneMapping">&lt;model-viewer&gt;</a> already
+    supports it, currently under the name "commerce", and it will become default
+    in v4. It is already the default in the &lt;model-viewer&gt; <a
+    href="../editor">editor</a>. A proposal has been made to add it to <a
+    href="https://projects.blender.org/blender/blender/issues/118824">Blender</a>,
+    and discussions are ongoing with other major 3D authoring tools.</p>
+
     <h3 id="white">White point</h3>
 
     <p>The tl;dr of this section is that you can safely skip it. It is a
