sunrize 2.0.4 → 2.0.5

package/src/Editors/MaterialsLibrary.js

@@ -3,14 +3,19 @@
 const
    $           = require ("jquery"),
    X3D         = require ("../X3D"),
-   LibraryPane = require ("./LibraryPane");
+   LibraryPane = require ("./LibraryPane"),
+   _           = require ("../Application/GetText");
 
 module .exports = class Materials extends LibraryPane
 {
    id          = "MATERIALS";
    description = "Materials";
 
+   #scene;
    #list;
+   #physicalButton;
+   #cancelRendering;
+   #rendering;
 
    async update ()
    {
@@ -33,9 +38,29 @@ module .exports = class Materials extends LibraryPane
          browser = canvas .prop ("browser"),
          scene   = await browser .createX3DFromURL (new X3D .MFString (`file://${__dirname}/Materials.x3d`));
 
+      // Buttons
+
+      const buttons = $("<li></li>")
+         .appendTo (this .#list);
+
+      this .#physicalButton = $("<input></input>")
+         .attr ("title", _("Requires an EnvironmentLight node."))
+         .attr ("type", "checkbox")
+         .attr ("id", "use-physical-material")
+         .prop ("checked", this .config .global .convertToPhysical)
+         .on ("change", () => this .#rendering = this .onChangeMaterials ())
+         .appendTo (buttons);
+
+      $("<label></label>")
+         .attr ("title", _("Requires an EnvironmentLight node."))
+         .attr ("for", "use-physical-material")
+         .text (_("Create Physical Material"))
+         .appendTo (buttons);
+
+      // Materials
+
       const
          materials = scene .getExportedNode ("Materials"),
-         viewpoint = scene .getExportedNode ("Viewpoint"),
          nodes     = [ ];
 
       for (const [g, group] of materials .children .entries ())
@@ -51,16 +76,53 @@ module .exports = class Materials extends LibraryPane
 
             nodes .push ($("<li></li>")
                .addClass (["node", "icon"])
+               .attr ("title", material .getNodeDisplayName ())
                .attr ("group", g)
                .attr ("child", c)
                .append ($("<span></span>")
                   .addClass ("text")
                   .text (`${group .getNodeName ()} ${c + 1}`))
                .appendTo (this .#list)
-               .on ("dblclick", () => this .importX3D (material .getNodeName (), material .toXMLString ())));
+               .on ("click", () => this .importMaterial (material .getNodeName ())));
          }
       }
 
+      browser .dispose ();
+      canvas .remove ();
+
+      this .#rendering = this .onChangeMaterials ();
+   }
+
+   importMaterial (name)
+   {
+      const material = this .#scene .getNamedNode (name);
+
+      this .importX3D (material .getNodeName (), material .toXMLString ());
+   }
+
+   async onChangeMaterials ()
+   {
+      this .#cancelRendering = true;
+
+      await this .#rendering;
+
+      this .#cancelRendering = false;
+
+      this .config .global .convertToPhysical = this .#physicalButton .is (":checked");
+
+      const
+         canvas  = $("<x3d-canvas preserveDrawingBuffer='true' xrSessionMode='NONE'></x3d-canvas>"),
+         browser = canvas .prop ("browser"),
+         scene   = await browser .createX3DFromURL (new X3D .MFString (`file://${__dirname}/Materials.x3d`));
+
+      scene .addComponent (browser .getComponent ("X_ITE"));
+
+      this .#scene = scene;
+
+      const
+         materials = scene .getExportedNode ("Materials"),
+         viewpoint = scene .getExportedNode ("Viewpoint");
+
       // Create icons.
 
       canvas
@@ -72,11 +134,26 @@ module .exports = class Materials extends LibraryPane
 
       for (const element of Array .from (this .output .find (".node"), e => $(e)))
       {
+         if (this .#cancelRendering)
+            break;
+
          const
-            group   = element .attr ("group"),
-            child   = element .attr ("child"),
-            section = materials .children [group],
-            node    = section .children [child];
+            group      = element .attr ("group"),
+            child      = element .attr ("child"),
+            section    = materials .children [group],
+            node       = section .children [child],
+            appearance = node .children [0] .appearance;
+
+         if (this .config .global .convertToPhysical)
+         {
+            const material = this .convertPhongToPhysical (scene, appearance .material);
+
+            scene .updateNamedNode (appearance .material .getNodeName (), material);
+
+            appearance .material = material;
+         }
+
+         // console .log (appearance .material .getNodeName ());
 
          materials .whichChoice = group;
          section   .whichChoice = child;
@@ -93,4 +170,49 @@ module .exports = class Materials extends LibraryPane
       browser .dispose ();
       canvas .remove ();
    }
+
+   convertPhongToPhysical (executionContext, phong)
+   {
+      let
+         physical          = executionContext .createNode ("PhysicalMaterial"),
+         baseColor         = phong .diffuseColor .sRGBToLinear (),
+         specularColor     = phong .specularColor .sRGBToLinear (),
+         specularIntensity = Math .max (... specularColor),
+         metallic          = Math .min (Math .max ((specularIntensity - 0.04) / (1.0 - 0.04), 0), 1) * 0.5,
+         roughness         = 1 - phong .shininess,
+         emissiveColor     = phong .emissiveColor .sRGBToLinear (),
+         transparency      = phong .transparency,
+         transmission      = transparency ** (1/3);
+
+      if ([... specularColor] .some (Boolean) && roughness)
+      {
+         const specularMaterial = executionContext .createNode ("SpecularMaterialExtension");
+
+         specularMaterial .specularColor    = specularColor;
+         specularMaterial .specularStrength = 10 * roughness;
+
+         physical .extensions .push (specularMaterial);
+
+         metallic  *= 0.1;
+         roughness *= 0.5;
+      }
+
+      if (transparency)
+      {
+         const transmissionMaterial = executionContext .createNode ("TransmissionMaterialExtension");
+
+         transmissionMaterial .transmission = transmission;
+
+         physical .extensions .push (transmissionMaterial);
+
+         roughness *= 0.5 * (1 - transparency);
+      }
+
+      physical .baseColor     = baseColor;
+      physical .metallic      = metallic;
+      physical .roughness     = roughness;
+      physical .emissiveColor = emissiveColor;
+
+      return physical;
+   }
 };

package/src/Editors/NodesLibrary.js

@@ -77,7 +77,7 @@ module .exports = class NodesLibrary extends LibraryPane
                .text (node .typeName)
                .attr ("componentName", node .componentInfo .name)
                .appendTo (this .#list)
-               .on ("dblclick", () => this .createNode (node .typeName, node .componentInfo .name));
+               .on ("click", () => this .createNode (node .typeName, node .componentInfo .name));
          }
       }
 
@@ -97,7 +97,7 @@ module .exports = class NodesLibrary extends LibraryPane
                .addClass ("node")
                .text (proto .name)
                .appendTo (this .#list)
-               .on ("dblclick", () => this .createProto (proto));
+               .on ("click", () => this .createProto (proto));
          }
       }
 
@@ -123,7 +123,7 @@ module .exports = class NodesLibrary extends LibraryPane
             .text (node .typeName)
             .attr ("componentName", node .componentInfo .name)
             .appendTo (this .#list)
-            .on ("dblclick", () => this .createNode (node .typeName, node .componentInfo .name));
+            .on ("click", () => this .createNode (node .typeName, node .componentInfo .name));
       }
    }
 

package/src/Editors/Panel.js

@@ -29,7 +29,10 @@ module .exports = new class Panel extends Interface
          "top": "unset",
       });
 
-      this .container .on ("mousedown", event => this .onmousedown (event));
+      this .container
+         .on ("mouseenter", event => this .onmouseenter (event))
+         .on ("mouseleave", event => this .onmouseleave (event))
+         .on ("mousedown",  event => this .onmousedown (event));
 
       this .browser .getBrowserOptions () ._ColorSpace .addFieldCallback ("Panel", () => this .updateNode ());
 
@@ -65,6 +68,16 @@ module .exports = new class Panel extends Interface
       this .container .hide (300, () => this .removeNode (this .node));
    }
 
+   onmouseenter ()
+   {
+      this .hovered = true;
+   }
+
+   onmouseleave ()
+   {
+      this .hovered = false;
+   }
+
    onmousedown (event)
    {
       $(document) .on ("mouseup.Panel", () => this .onmouseup ());
@@ -415,6 +428,9 @@ module .exports = new class Panel extends Interface
 
             field .addFieldCallback (this, () =>
             {
+               if (this .changing)
+                  return;
+
                this .refresh (parameter, node, field);
                input .refresh ();
             });
@@ -474,6 +490,9 @@ module .exports = new class Panel extends Interface
 
             field .addFieldCallback (this, () =>
             {
+               if (this .changing)
+                  return;
+
                this .refresh (parameter, node, field);
                textarea .val (parameter [field .getName ()]);
             });
@@ -647,6 +666,13 @@ module .exports = new class Panel extends Interface
          executionContext = node .getExecutionContext (),
          category         = field .getUnit ();
 
+      if (!(this .hovered || this .container .find (":focus") .length))
+         return;
+
+      this .changing = true;
+
+      this .browser .nextFrame () .then (() => this .changing = false);
+
       switch (field .getType ())
       {
          case X3D .X3DConstants .SFBool:

package/src/Editors/Primitives.js

@@ -446,7 +446,7 @@ DEF ScreenText Transform {
       componentInfo: { name: "Lighting" },
       typeName: "EnvironmentLight Cannon Exterior",
       x3dSyntax: `
-EnvironmentLight {
+DEF CannonExterior EnvironmentLight {
    specularTexture ImageCubeMapTexture {
       url "https://cdn.jsdelivr.net/npm/x3d-image@2.2.0/src/images/cannon-exterior.avif"
    }
@@ -457,7 +457,7 @@ EnvironmentLight {
       componentInfo: { name: "Lighting" },
       typeName: "EnvironmentLight Helipad",
       x3dSyntax: `
-EnvironmentLight {
+DEF Helipad EnvironmentLight {
    specularTexture ImageCubeMapTexture {
       url "https://cdn.jsdelivr.net/npm/x3d-image@2.2.0/src/images/helipad.avif"
    }
@@ -468,7 +468,7 @@ EnvironmentLight {
       componentInfo: { name: "Lighting" },
       typeName: "EnvironmentLight Footprint Court",
       x3dSyntax: `
-EnvironmentLight {
+DEF FootprintCourt EnvironmentLight {
    specularTexture ImageCubeMapTexture {
       url "https://cdn.jsdelivr.net/npm/x3d-image@2.2.0/src/images/footprint-court.avif"
    }

package/src/Editors/PrimitivesLibrary.js

@@ -67,7 +67,7 @@ module .exports = class PrimitivesLibrary extends LibraryPane
                .addClass ("node")
                .text (typeName)
                .appendTo (this .#list)
-               .on ("dblclick", () => this .createRecentNode (nodes, typeName));
+               .on ("click", () => this .createRecentNode (nodes, typeName));
          }
       }
 
@@ -91,7 +91,7 @@ module .exports = class PrimitivesLibrary extends LibraryPane
             .addClass ("node")
             .text (node .typeName)
             .appendTo (this .#list)
-            .on ("dblclick", () => this .createNode (node));
+            .on ("click", () => this .createNode (node));
       }
    }
 

package/src/Undo/Editor.js

@@ -719,7 +719,7 @@ ${scene .toXMLString ({ html: true, indent: " " .repeat (6) }) .trimEnd () }
          }
       });
 
-      const min = profiles .reduce ((min, object) =>
+      const { object } = profiles .reduce ((min, object) =>
       {
          const count = new Set ([
             ... [... object .profile .components] .map (component => component .name),
@@ -734,10 +734,10 @@ ${scene .toXMLString ({ html: true, indent: " " .repeat (6) }) .trimEnd () }
       { count: Number .POSITIVE_INFINITY });
 
       return {
-         profile: min .object .profile,
-         components: Array .from (min .object .components .keys ())
+         profile: object .profile,
+         components: Array .from (object .components .keys ())
             .sort ()
-            .map (name => browser .getComponent (name)),
+            .map (name => browser .getComponent (name, object .components .get (name))),
       };
    }
 

package/src/assets/themes/default.css

@@ -895,6 +895,10 @@ body.dark .ui-widget .library-list .component {
   background-position: 50%;
 }
 
+.library-list.materials .icon:hover {
+  border: 1px solid light-dark(var(--system-gray0), var(--system-gray2));
+}
+
 .library-list.materials .text {
   display: none;
 }