sunrize 1.7.1 → 1.7.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunrize",
   "productName": "Sunrize X3D Editor",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "A Multi-Platform X3D Editor",
   "main": "src/main.js",
   "bin": {
@@ -66,6 +66,11 @@
       "name": "Holger Seelig",
       "email": "holger.seelig@gmail.com",
       "url": "https://github.com/create3000"
+    },
+    {
+      "name": "John Carlson",
+      "email": "yottzumm@gmail.com",
+      "url": "https://github.com/coderextreme"
     }
   ],
   "funding": {

package/src/Application/Application.js

@@ -567,7 +567,7 @@ module .exports = class Application
                            type: "radio",
                            checked: this .menuOptions .primitiveQuality === "LOW",
                            click: () => this .mainWindow .webContents .send ("primitive-quality", "LOW"),
-                        }
+                        },
                      ],
                   },
                   {
@@ -590,9 +590,80 @@ module .exports = class Application
                            type: "radio",
                            checked: this .menuOptions .textureQuality === "LOW",
                            click: () => this .mainWindow .webContents .send ("texture-quality", "LOW"),
-                        }
+                        },
                      ],
                   },
+                  {
+                     label: _("Color Space"),
+                     submenu: [
+                        {
+                           label: _("Linear"),
+                           type: "radio",
+                           checked: this .menuOptions .colorSpace === "LINEAR",
+                           click: () => this .mainWindow .webContents .send ("color-space", "LINEAR"),
+                        },
+                        {
+                           label: _("Linear When PhysicalMaterial"),
+                           type: "radio",
+                           checked: this .menuOptions .colorSpace === "LINEAR_WHEN_PHYSICAL_MATERIAL",
+                           click: () => this .mainWindow .webContents .send ("color-space", "LINEAR_WHEN_PHYSICAL_MATERIAL"),
+                        },
+                        {
+                           label: _("sRGB"),
+                           type: "radio",
+                           checked: this .menuOptions .colorSpace === "SRGB",
+                           click: () => this .mainWindow .webContents .send ("color-space", "SRGB"),
+                        },
+                     ],
+                  },
+                  {
+                     label: _("Tone Mapping"),
+                     submenu: [
+                        {
+                           label: _("KHR PBR Neutral"),
+                           type: "radio",
+                           checked: this .menuOptions .toneMapping === "KHR_PBR_NEUTRAL",
+                           click: () => this .mainWindow .webContents .send ("tone-mapping", "KHR_PBR_NEUTRAL"),
+                        },
+                        {
+                           label: _("ACES Hill Exposure Boost"),
+                           type: "radio",
+                           checked: this .menuOptions .toneMapping === "ACES_HILL_EXPOSURE_BOOST",
+                           click: () => this .mainWindow .webContents .send ("tone-mapping", "ACES_HILL_EXPOSURE_BOOST"),
+                        },
+                        {
+                           label: _("ACES Hill"),
+                           type: "radio",
+                           checked: this .menuOptions .toneMapping === "ACES_HILL",
+                           click: () => this .mainWindow .webContents .send ("tone-mapping", "ACES_HILL"),
+                        },
+                        {
+                           label: _("ACES Narkowicz"),
+                           type: "radio",
+                           checked: this .menuOptions .toneMapping === "ACES_NARKOWICZ",
+                           click: () => this .mainWindow .webContents .send ("tone-mapping", "ACES_NARKOWICZ"),
+                        },
+                        {
+                           label: _("None"),
+                           type: "radio",
+                           checked: this .menuOptions .toneMapping === "NONE",
+                           click: () => this .mainWindow .webContents .send ("tone-mapping", "NONE"),
+                        },
+                     ],
+                  },
+                  {
+                     label: _("Order Independent Transparency"),
+                     type: "checkbox",
+                     checked: this .menuOptions .orderIndependentTransparency,
+                     click: () => this .mainWindow .webContents .send ("order-independent-transparency", !this .menuOptions .orderIndependentTransparency),
+                  },
+                  {
+                     label: _("Logarithmic Depth Buffer"),
+                     type: "checkbox",
+                     checked: this .menuOptions .logarithmicDepthBuffer,
+                     click: () => this .mainWindow .webContents .send ("logarithmic-depth-buffer", !this .menuOptions .logarithmicDepthBuffer),
+                  },
+                  { type: "separator" },
                   {
                      label: _("Display Rubberband"),
                      type: "checkbox",

package/src/Application/Document.js

@@ -40,6 +40,9 @@ module .exports = class Document extends Interface
       this .footer             = new Footer ($("#footer"));
       this .sidebar            = new Sidebar ($("#sidebar"));
 
+      // Prevent scrolling when Panel becomes larger.
+      $("#vertical-splitter") .on ("scroll", () => $("#vertical-splitter") .scrollTop (0));
+
       // Additional Parsers
 
       X3D .GoldenGate .addParsers (ImageParser, VideoParser, AudioParser);
@@ -91,11 +94,15 @@ module .exports = class Document extends Interface
 
       // View Menu
 
-      electron .ipcRenderer .on ("primitive-quality",  (event, value) => this .setPrimitiveQuality (value));
-      electron .ipcRenderer .on ("texture-quality",    (event, value) => this .setTextureQuality (value));
-      electron .ipcRenderer .on ("display-rubberband", (event, value) => this .setDisplayRubberband (value));
-      electron .ipcRenderer .on ("display-timings",    (event, value) => this .setDisplayTimings (value));
-      electron .ipcRenderer .on ("show-library",       (event)        => this .showLibrary ());
+      electron .ipcRenderer .on ("primitive-quality",              (event, value) => this .setPrimitiveQuality (value));
+      electron .ipcRenderer .on ("texture-quality",                (event, value) => this .setTextureQuality (value));
+      electron .ipcRenderer .on ("color-space",                    (event, value) => this .setColorSpace (value));
+      electron .ipcRenderer .on ("tone-mapping",                   (event, value) => this .setToneMapping (value));
+      electron .ipcRenderer .on ("order-independent-transparency", (event, value) => this .setOrderIndependentTransparency (value));
+      electron .ipcRenderer .on ("logarithmic-depth-buffer",       (event, value) => this .setLogarithmicDepthBuffer (value));
+      electron .ipcRenderer .on ("display-rubberband",             (event, value) => this .setDisplayRubberband (value));
+      electron .ipcRenderer .on ("display-timings",                (event, value) => this .setDisplayTimings (value));
+      electron .ipcRenderer .on ("show-library",                   (event)        => this .showLibrary ());
 
       // Layout Menu
 
@@ -120,10 +127,19 @@ module .exports = class Document extends Interface
 
       // Connect browser options.
 
-      this .browser .getBrowserOptions () .getField ("PrimitiveQuality") .addInterest ("set_primitiveQuality", this);
-      this .browser .getBrowserOptions () .getField ("TextureQuality")   .addInterest ("set_textureQuality",   this);
-      this .browser .getBrowserOptions () .getField ("Rubberband")       .addInterest ("set_rubberband",       this);
-      this .browser .getBrowserOptions () .getField ("Timings")          .addInterest ("set_timings",          this);
+      const browserOptions = [
+         "PrimitiveQuality",
+         "TextureQuality",
+         "ColorSpace",
+         "ToneMapping",
+         "OrderIndependentTransparency",
+         "LogarithmicDepthBuffer",
+         "Rubberband",
+         "Timings",
+      ];
+
+      for (const option of browserOptions)
+         this .browser .getBrowserOptions () .getField (option) .addInterest (`set_${option}`, this);
 
       this .browser .setBrowserOption ("AlwaysUpdateGeometries", true);
       this .browser .setBrowserOption ("MetadataReference", require ("../../package.json") .homepage);
@@ -152,6 +168,10 @@ module .exports = class Document extends Interface
          inferProfileAndComponents: true,
          primitiveQuality: "MEDIUM",
          textureQuality: "MEDIUM",
+         colorSpace: "LINEAR_WHEN_PHYSICAL_MATERIAL",
+         toneMapping: "NONE",
+         orderIndependentTransparency: false,
+         logarithmicDepthBuffer: false,
          rubberband: true,
          timings: false,
       });
@@ -160,10 +180,14 @@ module .exports = class Document extends Interface
 
       // Configure browser options.
 
-      this .setPrimitiveQuality  (this .config .file .primitiveQuality);
-      this .setTextureQuality    (this .config .file .textureQuality);
-      this .setDisplayRubberband (this .config .file .rubberband);
-      this .setDisplayTimings    (this .config .file .timings);
+      this .setPrimitiveQuality             (this .config .file .primitiveQuality);
+      this .setTextureQuality               (this .config .file .textureQuality);
+      this .setColorSpace                   (this .config .file .colorSpace);
+      this .setToneMapping                  (this .config .file .toneMapping);
+      this .setOrderIndependentTransparency (this .config .file .orderIndependentTransparency);
+      this .setLogarithmicDepthBuffer       (this .config .file .logarithmicDepthBuffer);
+      this .setDisplayRubberband            (this .config .file .rubberband);
+      this .setDisplayTimings               (this .config .file .timings);
 
       // Configure grids.
 
@@ -583,7 +607,7 @@ Viewpoint {
       this .browser .setDescription (`Primitive Quality: ${value .toLowerCase ()}`);
    }
 
-   set_primitiveQuality ()
+   set_PrimitiveQuality ()
    {
       this .config .file .primitiveQuality = this .browser .getBrowserOption ("PrimitiveQuality");
 
@@ -600,13 +624,81 @@ Viewpoint {
       this .browser .setDescription (`Texture Quality: ${value .toLowerCase ()}`);
    }
 
-   set_textureQuality ()
+   set_TextureQuality ()
    {
       this .config .file .textureQuality = this .browser .getBrowserOption ("TextureQuality");
 
       this .updateMenu ();
    }
 
+   /**
+    *
+    * @param {string} value
+    */
+   setColorSpace (value)
+   {
+      this .browser .setBrowserOption ("ColorSpace", value);
+      this .browser .setDescription (`Color Space: ${value}`);
+   }
+
+   set_ColorSpace ()
+   {
+      this .config .file .colorSpace = this .browser .getBrowserOption ("ColorSpace");
+
+      this .updateMenu ();
+   }
+
+   /**
+    *
+    * @param {string} value
+    */
+   setToneMapping (value)
+   {
+      this .browser .setBrowserOption ("ToneMapping", value);
+      this .browser .setDescription (`Tone Mapping: ${value}`);
+   }
+
+   set_ToneMapping ()
+   {
+      this .config .file .toneMapping = this .browser .getBrowserOption ("ToneMapping");
+
+      this .updateMenu ();
+   }
+
+   /**
+    *
+    * @param {boolean} value
+    */
+   setOrderIndependentTransparency (value)
+   {
+      this .browser .setBrowserOption ("OrderIndependentTransparency", value);
+      this .browser .setDescription (`OrderIndependentTransparency: ${value ? "on" : "off"}`);
+   }
+
+   set_OrderIndependentTransparency ()
+   {
+      this .config .file .orderIndependentTransparency = this .browser .getBrowserOption ("OrderIndependentTransparency");
+
+      this .updateMenu ();
+   }
+
+   /**
+    *
+    * @param {boolean} value
+    */
+   setLogarithmicDepthBuffer (value)
+   {
+      this .browser .setBrowserOption ("LogarithmicDepthBuffer", value);
+      this .browser .setDescription (`LogarithmicDepthBuffer: ${value ? "on" : "off"}`);
+   }
+
+   set_LogarithmicDepthBuffer ()
+   {
+      this .config .file .logarithmicDepthBuffer = this .browser .getBrowserOption ("LogarithmicDepthBuffer");
+
+      this .updateMenu ();
+   }
+
    /**
     *
     * @param {boolean} value
@@ -617,7 +709,7 @@ Viewpoint {
       this .browser .setDescription (`Rubberband: ${value ? "on" : "off"}`);
    }
 
-   set_rubberband ()
+   set_Rubberband ()
    {
       this .config .file .rubberband = this .browser .getBrowserOption ("Rubberband");
 
@@ -633,7 +725,7 @@ Viewpoint {
       this .browser .setBrowserOption ("Timings", value);
    }
 
-   set_timings ()
+   set_Timings ()
    {
       this .config .file .timings = this .browser .getBrowserOption ("Timings");
 
@@ -646,6 +738,10 @@ Viewpoint {
       {
          primitiveQuality: this .config .file .primitiveQuality,
          textureQuality: this .config .file .textureQuality,
+         colorSpace: this .config .file .colorSpace,
+         toneMapping: this .config .file .toneMapping,
+         orderIndependentTransparency: this .config .file .orderIndependentTransparency,
+         logarithmicDepthBuffer: this .config .file .logarithmicDepthBuffer,
          rubberband: this .config .file .rubberband,
          timings: this .config .file .timings,
       });

package/src/Application/Interface.js

@@ -209,4 +209,44 @@ module .exports = class Interface
    }
 
    configure () { }
+
+   linearToSRGB (node, color)
+   {
+      if (this .browser .getBrowserOption ("ColorSpace") === "SRGB")
+         return color;
+
+      if (this .browser .getBrowserOption ("ColorSpace") === "LINEAR_WHEN_PHYSICAL_MATERIAL" && !this .isPhysical (node))
+      {
+         return color;
+      }
+
+      return color .linearToSRGB ();
+   }
+
+   sRGBToLinear (node, color)
+   {
+      if (this .browser .getBrowserOption ("ColorSpace") === "SRGB")
+         return color;
+
+      if (this .browser .getBrowserOption ("ColorSpace") === "LINEAR_WHEN_PHYSICAL_MATERIAL" && !this .isPhysical (node))
+      {
+         return color;
+      }
+
+      return color .sRGBToLinear ();
+   }
+
+   isPhysical (node)
+   {
+      if (node .getType () .includes (X3D .X3DConstants .PhysicalMaterial))
+         return true;
+
+      if (node .getType () .includes (X3D .X3DConstants .X3DMaterialExtensionNode))
+         return true;
+
+      if (node .getType () .includes (X3D .X3DConstants .SpecularGlossinessMaterial))
+         return true;
+
+      return false;
+   }
 };

package/src/Application/Tabs.js

@@ -88,6 +88,10 @@ module .exports = new class Tabs
 
       this .forwardToActiveTab ("primitive-quality");
       this .forwardToActiveTab ("texture-quality");
+      this .forwardToActiveTab ("color-space");
+      this .forwardToActiveTab ("tone-mapping");
+      this .forwardToActiveTab ("order-independent-transparency");
+      this .forwardToActiveTab ("logarithmic-depth-buffer");
       this .forwardToActiveTab ("display-rubberband");
       this .forwardToActiveTab ("display-timings");
       this .forwardToActiveTab ("show-library");

package/src/Bits/X3DUOM.js

@@ -3,7 +3,11 @@ const
    fs   = require ("fs"),
    path = require ("path");
 
-const X3DUOM = $($.parseXML (fs .readFileSync (path .join (__dirname, "..", "assets", "x3duom.xml"), "utf-8")));
+const
+   X3DUOM = $($.parseXML (fs .readFileSync (path .join (__dirname, "..", "assets", "x3duom.xml"), "utf-8"))),
+   X_ITE  = $($.parseXML (fs .readFileSync (path .join (__dirname, "..", "assets", "x3duom-x_ite.xml"), "utf-8")));
+
+X3DUOM .find ("ConcreteNodes") .append (X_ITE .find ("ConcreteNode"));
 
 // emissiveColor fix
 X3DUOM .find ("AbstractNodeType[name=X3DOneSidedMaterialNode]")
@@ -24,50 +28,4 @@ X3DUOM .find ("ConcreteNode[name=Shape]")
 X3DUOM .find ("ConcreteNode[name=ParticleSystem]")
    .append (X3DUOM .find ("field[name=pointerEvents]") .first () .clone ());
 
-// InstancedShape
-X3DUOM .find ("ConcreteNode[name=Shape]") .clone ()
-   .appendTo (X3DUOM .find ("ConcreteNodes"))
-   .attr ("name", "InstancedShape")
-   .append ($(X3DUOM [0] .createElement ("field"))
-      .attr ("name", "translations")
-      .attr ("type", "MFVec3f")
-      .attr ("accessType", "inputOutput")
-      .attr ("description", "List of translations, one for each instance."))
-   .append ($(X3DUOM [0] .createElement ("field"))
-      .attr ("name", "rotations")
-      .attr ("type", "MFRotation")
-      .attr ("accessType", "inputOutput")
-      .attr ("description", "List of rotations, one for each instance."))
-   .append ($(X3DUOM [0] .createElement ("field"))
-      .attr ("name", "scales")
-      .attr ("type", "MFVec3f")
-      .attr ("accessType", "inputOutput")
-      .attr ("description", "List of scales, one for each instance."));
-
-// BlendMode
-const BlendMode = X3DUOM .find ("ConcreteNode[name=Material]") .clone ();
-
-BlendMode .find ("field:not([name=metadata])") .remove ();
-
-BlendMode .find ("InterfaceDefinition")
-   .attr ("specificationUrl", "https://create3000.github.io/x_ite/components/x-ite/blendmode/")
-   .attr ("appinfo", "BlendMode controls how pixels of an objects are drawn. Pixels can be drawn using a function that blends the incoming (source) RGBA values with the RGBA values that are already in the frame buffer (the destination values). BlendMode is an X3DAppearanceChildNode node that handles blend operations.");
-
-BlendMode
-   .appendTo (X3DUOM .find ("ConcreteNodes"))
-   .attr ("name", "BlendMode");
-
-// DepthMode
-const DepthMode = X3DUOM .find ("ConcreteNode[name=Material]") .clone ();
-
-DepthMode .find ("field:not([name=metadata])") .remove ();
-
-DepthMode .find ("InterfaceDefinition")
-   .attr ("specificationUrl", "https://create3000.github.io/x_ite/components/x-ite/depthmode/")
-   .attr ("appinfo", "DepthMode contains parameters that are specific for depth control, like the value used for depth buffer comparisons.");
-
-DepthMode
-   .appendTo (X3DUOM .find ("ConcreteNodes"))
-   .attr ("name", "DepthMode");
-
 module .exports = X3DUOM;

package/src/Controls/MaterialPreviewPopover.js

@@ -22,6 +22,7 @@ $.fn.materialPreviewPopover = async function (node)
       .attr ("splashScreen", false)
       .attr ("contextMenu", false)
       .attr ("notifications", false)
+      .attr ("colorSpace", node .getBrowser () .getBrowserOption ("ColorSpace"))
       .appendTo (preview);
 
    const

package/src/Controls/TexturePreviewPopover.js

@@ -46,6 +46,7 @@ $.fn.texturePreviewPopover = async function (node)
       .attr ("splashScreen", false)
       .attr ("contextMenu", false)
       .attr ("notifications", false)
+      .attr ("colorSpace", node .getBrowser () .getBrowserOption ("ColorSpace"))
       .appendTo (preview);
 
    const

package/src/Editors/Library.js

@@ -8,6 +8,7 @@ const
    UndoManager      = require ("../Undo/UndoManager"),
    Primitives       = require ("./Primitives"),
    StringSimilarity = require ("string-similarity"),
+   Traverse         = require("../Application/Traverse"),
    _                = require ("../Application/GetText");
 
 module .exports = new class Library extends Dialog
@@ -377,6 +378,27 @@ module .exports = new class Library extends Dialog
          node  = (await Editor .importX3D (this .executionContext, x3dSyntax)) .pop (),
          field = this .field ?? $.try (() => this .node ?.getField (node .getContainerField ()));
 
+      if (this .browser .getBrowserOption ("ColorSpace") === "LINEAR")
+      {
+         Traverse .traverse (node, Traverse .ROOT_NODES, node =>
+         {
+            for (const field of node .getFields ())
+            {
+               switch (field .getType ())
+               {
+                  case X3D .X3DConstants .SFColor:
+                  case X3D .X3DConstants .SFColorRGBA:
+                     field .assign (field .sRGBToLinear ());
+                     break;
+                  case X3D .X3DConstants .MFColor:
+                  case X3D .X3DConstants .MFColorRGBA:
+                     field .assign (field .map (value => value .sRGBToLinear ()));
+                     break;
+               }
+            }
+         });
+      }
+
       switch (field ?.getType ())
       {
          case X3D .X3DConstants .SFNode:

package/src/Editors/OutlineEditor.js

@@ -1930,7 +1930,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
       })
       .on ("beforeShow.spectrum", (event) =>
       {
-         button .spectrum ("set", button .css ("background-color"));
+         button .spectrum ("set", this .getColorFromField (node, this .linearToSRGB (node, field), "SRGB"));
       })
       .on("move.spectrum", (event, tinyColor) =>
       {
@@ -1945,7 +1945,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
          if (value .getType () === X3D .X3DConstants .SFColorRGBA)
             value .a = rgb .a;
 
-         Editor .setFieldValue (node .getExecutionContext (), node, field, value);
+         Editor .setFieldValue (node .getExecutionContext (), node, field, this .sRGBToLinear (node, value));
       })
       .on ("dragstart.spectrum", (event, tinyColor) =>
       {

package/src/Editors/OutlineView.js

@@ -52,6 +52,7 @@ module .exports = class OutlineView extends Interface
          .on ("dragend", this .onDragEnd .bind (this))
       .appendTo (this .treeView);
 
+      this .browser .getBrowserOptions () ._ColorSpace .addInterest ("updateSceneGraph", this);
       this .browser ._activeLayer .addInterest ("updateActiveLayer", this);
 
       electron .ipcRenderer .on ("deselect-all",            () => this .deselectAll ());
@@ -1420,7 +1421,7 @@ module .exports = class OutlineView extends Interface
             $("<div></div>")
                .addClass (["color-button", "field-button"])
                .attr ("title", _("Open color picker."))
-               .css ("background-color", this .getColorFromField (field))
+               .css ("background-color", this .getColorFromField (node, field))
                .appendTo (child);
 
             field .addFieldCallback (this .#fieldButtonSymbol, this .updateColor .bind (this, parent, node, field));
@@ -1718,18 +1719,31 @@ module .exports = class OutlineView extends Interface
    updateColor (parent, node, field)
    {
       parent .find (`.field[field-id=${field .getId ()}] > .item .color-button`)
-         .css ("background-color", this .getColorFromField (field))
+         .css ("background-color", this .getColorFromField (node, field))
    }
 
-   getColorFromField (field)
+   getColorFromField (node, field, colorSpace = this .browser .getBrowserOption ("ColorSpace"))
    {
-      const
-         r = Math .floor (field .r * 255),
-         g = Math .floor (field .g * 255),
-         b = Math .floor (field .b * 255),
-         a = field .a ?? 1
+      if (colorSpace === "LINEAR" || (colorSpace === "LINEAR_WHEN_PHYSICAL_MATERIAL" && this .isPhysical (node)))
+      {
+         const
+            r = field .r * 100,
+            g = field .g * 100,
+            b = field .b * 100,
+            a = field .a ?? 1;
 
-      return `rgba(${r},${g},${b},${a})`
+         return `color(srgb-linear ${r}% ${g}% ${b}% / ${a})`;
+      }
+      else
+      {
+         const
+            r = field .r * 255,
+            g = field .g * 255,
+            b = field .b * 255,
+            a = field .a ?? 1;
+
+         return `rgba(${r},${g},${b},${a})`;
+      }
    }
 
    getAccessTypeImage (field, active)