x_ite 8.11.5 → 8.11.6

package/docs/_config.yml

@@ -20,8 +20,8 @@ timezone:
 # ↓ --------------------------
 
 title: X_ITE X3D Browser               # the main title
-version: 8.11.5                         # x_ite latest version
-size: 291                              # size in kb
+version: 8.11.6                         # x_ite latest version
+size: 279                              # size in kb
 x3d_latest_version: 4.0                # x3d latest version
 
 tagline: Step Into The Future          # it will display as the sub-title

package/docs/_posts/dom-integration.md

@@ -7,7 +7,7 @@ tags: [DOM, Integration, XHTML, HTML]
 ---
 ## Overview
 
-DOM integration allows you to integrate 3D content seamlessly into your web page, with just a JavaScript file included, the scene can be written directly into the XHTML or HTML markup.
+DOM integration allows you to integrate 3D content seamlessly into your web page, with just a JavaScript file included, the scene can be written directly into the XHTML or HTML markup and manipulated using common JavaScript DOM manipulation methods.
 
 Andreas Plesch has written a nice plugin for X3D DOM integration. It allows JavaScript authors to use X3D content as if it were HTML. It links the X3D DOM nodes to the X3D scene graph, allowing control of the X3D scene using regular DOM manipulation methods.
 

package/docs/_posts/features.md

@@ -7,19 +7,19 @@ tags: [Features]
 ---
 ## Overview
 
-X_ITE is a fast, small, and feature-rich JavaScript library for displaying and executing X3D files. It makes things like WebGL programming, document access and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
+X_ITE is a fast, small, and feature-rich JavaScript library for displaying and executing X3D files, and other formats like VRML, glTF and [more](./#supported-file-formats). It makes things like WebGL programming, document access and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
 
 X_ITE is freely downloadable for any usage and licensed under the GPL3. You can use them for commercial and noncommercial purposes.
 
-Runs completely standalone, ie. there are no other library dependencies. You just need to include x_ite.js into your HTML page.
+Runs completely standalone, ie. there are no other library dependencies. You just need to include *x_ite.js* into your HTML page.
 
 Competitive performance for most frequently used functions and nodes. All function within X_ITE are optimized to give your the best performance that JavaScript can offer.
 
-The X_ITE package is optimized in size with Terser to achieve the smallest size we can reach. **X_ITE has only {{ site.size }}kB in size minified and compressed.**
+The X_ITE package is optimized in size with Terser to achieve the smallest size we can reach. **X_ITE core component has only {{ site.size }}kB in size minified and compressed.**
 
 X_ITE is designed for optimal performance with event driven programming. The flow of the program is determined by events such as user actions (mouse clicks, key presses), sensor outputs, or messages from other scripts.
 
-All code is held by CREATE3000 and all contributors are selected and all contributions become verified.
+All code is held by [CREATE3000](https://github.com/create3000) and all contributors are selected and all contributions become verified.
 
 ## Core Features
 
@@ -29,19 +29,21 @@ X_ITE comes with a high performance JavaScript rendering engine, ie. developers
 
 We offer full [X3D ECMAScript](reference/ecmascript-object-and-function-definitions) support to give you the best scripting tools you can get.
 
-X3D comes with a fixed set of objects, called *nodes,* which will cover most of your needs. But it's creators have also planned ahead, knowing that you'll sometimes have to create your own objects. The prototyping feature lets you create complex objects that you can reuse, changing certain characteristics of the objects when desired.
+X3D comes with a fixed set of objects called *nodes* that will cover most of your needs. But its creators also planned ahead, knowing that sometimes you'll need to create your own objects. The prototyping feature lets you create complex objects that you can reuse, changing certain properties of the objects as you go.
 
-X_ITE works seamlessly together with Titania. There is a X_ITE Compatibility Mode in Titania that makes that everything looks equal both in Titania and X_ITE, additionally scripts, and shaders provide the same functionality.
+X_ITE works seamlessly with [Sunrize](https://create3000.github.io/sunrize/) because Sunrize is based on X_ITE. This means that everything you create in Sunrize will look exactly the same in X_ITE, including scripts and shaders.
 
-There is excellent build in support for Gouraud and Phong shading. Gouraud and Phong shading are the most popular shading algorithm in use today. This methods were developed by Henri Gouraud and Phong Bui-Toung. If the build in shading methods are not enough for you there is support for [Custom Shaders](custom-shaders). Don't bother about *uniform variables, shader compilation, and texture loading.* With the Composed Shader node it is easy to write to your own shader even if you are a beginner, but it is also all there for professionals. There is a standardized shader API similar to GLSL that makes it easy to convert your existing shaders. The build in shaders support eight simultaneous local lights for each Shape node, Color node attached to a geometry is supported. There is smooth texture mapping adjustable with TextureProperties node and normals can be auto generated depending on *creaseAngle* if you wish smooth shading.
+There is excellent built-in support for Gouraud and Phong shading. Gouraud and Phong shading is the most popular shading algorithm in use today. These methods were developed by Henri Gouraud and Phong Bui-Toung. If the built-in shading methods are not enough for you, there is support for [Custom Shaders](custom-shaders). Don't worry about *uniform variables, shader compilation and texture loading* The Composed Shader node makes it easy to write your own shader even if you are a beginner, but there is also everything for professionals. There is a standardized shader API similar to GLSL that makes it easy to convert your existing shaders. The built-in shaders support eight simultaneous local lights for each shape node, color nodes attached to a geometry are supported. There is smooth texture mapping adjustable with TextureProperties node and normals can be automatically generated depending on *creaseAngle* if you want smooth shading.
 
-Complex routing graphs can be created. The event model of X3D allows the creation of connections between fields (routes) and event are propagated along those connections. The behavior graph collects all of these field connections. It can be changed dynamically by rerouting, adding or breaking connections. Events are injected into the system and propagated through the behavior graph in a well defined order.
+Complex routing graphs can be created. X3D's event model allows the creation of connections between fields (routes), and events are propagated along these connections. The behavior graph collects all these field connections. It can be changed dynamically by rerouting, adding, or disconnecting connections. Events are injected into the system and propagated through the behavior graph in a well-defined order.
 
-Collision detection is also considered, it is unbreakable. In virtual reality environments, collision detection is a algorithm that determines how close a user is to a real physical objects and will stop their movement before colliding with the object. If you wish there is terrain following support. Terrain following works by determining the floor under the avatar and let him go over plains and mountains. Use the NavigationInfo node to enable it.
+Collision detection is also considered, it is unbreakable. In virtual reality environments, collision detection is an algorithm that determines how close a user is to a real physical object and will stop their movement before colliding with the object. If you want, there is terrain following support. Terrain following works by determining the ground beneath the avatar and letting him walk over plains and mountains. Use the NavigationInfo node to enable it.
 
 To add special effects and environment sound to your scenes there is support for MovieTexture and Sound node with a standardized set of functions. These are easy to use. They use HTML5 \<video\> and \<audio\> elements internally, you don't need to worry about it.
 
-You can create text quick and easy. Use the Text node which can load remote font files in TrueType and OpenType format but there are also build in fonts.
+Create text quickly and easily. Use the Text node, which can load remote font files in TrueType and OpenType format, but there are also built-in fonts.
+
+With [DOM integration](dom-integration), X3D content can be used as if it were HTML and manipulated using common JavaScript DOM manipulation methods as used to do from X3DOM.
 
 If this is not enough for you have a look at [Supported Nodes](supported-nodes) there's sure to be something there for you.
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x_ite",
-	"version": "8.11.5",
+	"version": "8.11.6",
 	"description": "X_ITE X3D Browser, view and manipulate X3D and VRML scenes in HTML.",
 	"homepage": "https://create3000.github.io/x_ite/",
 	"author": "Holger Seelig <holger.seelig@gmail.com>",
@@ -30,6 +30,7 @@
 		"Wavefront-OBJ",
 		"WebGL",
 		"wrl",
+		"x_ite",
 		"X3D",
 		"XML"
 	],
@@ -54,6 +55,10 @@
 			"url": "https://github.com/splace"
 		}
 	],
+	"funding": {
+		"type": "patreon",
+		"url": "https://patreon.com/X_ITE"
+	},
 	"devDependencies": {
 		"ammojs": "^0.0.2",
 		"CharLS.js": "^2.0.1",

package/src/x_ite/Browser/Text/X3DTextContext.js

@@ -74,7 +74,7 @@ Object .assign (X3DTextContext .prototype,
    },
    getFont (url, cache = true)
    {
-      return new Promise ((resolve, reject) =>
+      return new Promise (async (resolve, reject) =>
       {
          url = url .toString ();
 
@@ -82,13 +82,29 @@ Object .assign (X3DTextContext .prototype,
 
          if (!deferred)
          {
-            this [_fontCache] .set (url, deferred = $.Deferred ());
-
-            fetch (url, { cache: cache ? "default" : "reload"})
-               .then (response => response .arrayBuffer ())
-               .then (buffer => opentype .parse (buffer))
-               .then (font => deferred .resolve (font))
-               .catch (error => deferred .reject (error));
+            try
+            {
+               this [_fontCache] .set (url, deferred = $.Deferred ());
+
+               const response = await fetch (url, { cache: cache ? "default" : "reload"});
+
+               if (response .ok)
+               {
+                  const
+                     buffer = await response .arrayBuffer (),
+                     font   = opentype .parse (buffer);
+
+                  deferred .resolve (font);
+               }
+               else
+               {
+                  throw new Error (response .statusText || response .status);
+               }
+            }
+            catch (error)
+            {
+               deferred .reject (error);
+            }
          }
 
          deferred .done (resolve) .fail (reject);

package/src/x_ite/Browser/VERSION.js

@@ -45,4 +45,4 @@
  *
  ******************************************************************************/
 
-export default "8.11.5";
+export default "8.11.6";

package/src/x_ite/Browser/VolumeRendering/VolumeStyle.fs.js

@@ -17,7 +17,7 @@ const float M_PI = 3.14159265359;
 #pragma X3D include "includes/ClipPlanes.glsl"
 #pragma X3D include "includes/Fog.glsl"
 
-// VOLUME_STYLES_UNIFORMS
+__VOLUME_STYLES_UNIFORMS__
 
 out vec4 x3d_FragColor;
 
@@ -37,7 +37,7 @@ getTextureColor (in vec3 texCoord)
 
    // Apply volume styles.
 
-// VOLUME_STYLES_FUNCTIONS
+   __VOLUME_STYLES_FUNCTIONS__
 
    return textureColor;
 }

package/src/x_ite/Components/Core/X3DBindableNode.js

@@ -48,21 +48,39 @@
 import X3DChildNode from "./X3DChildNode.js";
 import X3DConstants from "../../Base/X3DConstants.js";
 
+let modificationCount = 0;
+
 function X3DBindableNode (executionContext)
 {
    X3DChildNode .call (this, executionContext);
 
    this .addType (X3DConstants .X3DBindableNode);
+
+   this .modificationCount = 0;
 }
 
 Object .assign (Object .setPrototypeOf (X3DBindableNode .prototype, X3DChildNode .prototype),
 {
+   initialize ()
+   {
+      X3DChildNode .prototype .initialize .call (this);
+
+      this ._set_bind .addInterest ("set_bind__", this);
+   },
    isCameraObject ()
    {
       return true;
    },
+   getModificationCount ()
+   {
+      return this .modificationCount;
+   },
    transitionStart ()
    { },
+   set_bind__ ()
+   {
+      this .modificationCount = ++ modificationCount;
+   }
 });
 
 Object .defineProperties (X3DBindableNode,
@@ -77,6 +95,14 @@ Object .defineProperties (X3DBindableNode,
       value: "Core",
       enumerable: true,
    },
+   getModificationCount:
+   {
+      value: function ()
+      {
+         return modificationCount;
+      },
+      enumerable: false,
+   },
 });
 
 export default X3DBindableNode;

package/src/x_ite/Components/ParticleSystems/X3DParticleEmitterNode.js

@@ -882,6 +882,9 @@ Object .assign (Object .setPrototypeOf (X3DParticleEmitterNode .prototype, X3DNo
       gl .shaderSource (vertexShader, vertexShaderSource);
       gl .compileShader (vertexShader);
 
+      if (!gl .getShaderParameter (vertexShader, gl .COMPILE_STATUS))
+         console .error (gl .getShaderInfoLog (vertexShader));
+
       // Fragment shader
 
       const fragmentShader = gl .createShader (gl .FRAGMENT_SHADER);
@@ -889,6 +892,9 @@ Object .assign (Object .setPrototypeOf (X3DParticleEmitterNode .prototype, X3DNo
       gl .shaderSource (fragmentShader, fragmentShaderSource);
       gl .compileShader (fragmentShader);
 
+      if (!gl .getShaderParameter (fragmentShader, gl .COMPILE_STATUS))
+         console .error (gl .getShaderInfoLog (fragmentShader));
+
       // Program
 
       const program = gl .createProgram ();

package/src/x_ite/Components/Shaders/ShaderPart.js

@@ -164,7 +164,7 @@ Object .assign (Object .setPrototypeOf (ShaderPart .prototype, X3DNode .prototyp
             gl .shaderSource (shader, source);
             gl .compileShader (shader);
 
-            if (! gl .getShaderParameter (shader, gl .COMPILE_STATUS))
+            if (!gl .getShaderParameter (shader, gl .COMPILE_STATUS))
             {
                const
                   typeName = this .getTypeName (),

package/src/x_ite/Components/Shaders/X3DProgrammableShaderObject.js

@@ -988,9 +988,9 @@ Object .assign (X3DProgrammableShaderObject .prototype,
 
          // Set global uniforms.
 
-         if (this .renderTime !== renderObject .getRenderTime ())
+         if (this .renderCount !== renderObject .getRenderCount ())
          {
-            this .renderTime = renderObject .getRenderTime ();
+            this .renderCount = renderObject .getRenderCount ();
 
             // Set viewport.
 

package/src/x_ite/Components/Shape/PhysicalMaterial.js

@@ -185,7 +185,7 @@ Object .assign (Object .setPrototypeOf (PhysicalMaterial .prototype, X3DOneSided
                options .push ("X3D_OCCLUSION_TEXTURE", `X3D_OCCLUSION_TEXTURE_${this .occlusionTextureNode .getTextureTypeString ()}`);
          }
 
-         var shaderNode = browser .createShader ("PhysicalMaterialShader", "Default", "PBR", options);
+         var shaderNode = browser .createShader ("PBRShader", "Default", "PBR", options);
       }
       else
       {

package/src/x_ite/Components/TextureProjector/TextureProjector.js

@@ -98,11 +98,11 @@ Object .assign (TextureProjectorContainer .prototype,
       invTextureSpaceMatrix .inverse ();
 
       const
-         width            = textureProjectorNode .getTexture () .getWidth (),
-         height           = textureProjectorNode .getTexture () .getHeight (),
-         nearDistance     = textureProjectorNode .getNearDistance (),
-         farDistance      = textureProjectorNode .getFarDistance (),
-         fieldOfView      = textureProjectorNode .getFieldOfView ();
+         width        = textureProjectorNode .getTexture () .getWidth (),
+         height       = textureProjectorNode .getTexture () .getHeight (),
+         nearDistance = textureProjectorNode .getNearDistance (),
+         farDistance  = textureProjectorNode .getFarDistance (),
+         fieldOfView  = textureProjectorNode .getFieldOfView ();
 
       Camera .perspective (fieldOfView, nearDistance, farDistance, width, height, this .projectionMatrix);
 

package/src/x_ite/Components/TextureProjector/X3DTextureProjectorNode.js

@@ -88,11 +88,15 @@ Object .assign (Object .setPrototypeOf (X3DTextureProjectorNode .prototype, X3DC
    },
    getNearDistance ()
    {
-      return this ._nearDistance .getValue ();
+      const nearDistance = this ._nearDistance .getValue ();
+
+      return nearDistance === -1 ? 0.125 : nearDistance;
    },
    getFarDistance ()
    {
-      return this ._farDistance .getValue ();
+      const farDistance = this ._farDistance .getValue ();
+
+      return farDistance === -1 ? 100_000 : farDistance;
    },
    getTexture ()
    {

package/src/x_ite/Components/VolumeRendering/IsoSurfaceVolumeData.js

@@ -271,8 +271,9 @@ Object .assign (Object .setPrototypeOf (IsoSurfaceVolumeData .prototype, X3DVolu
          styleFunctions += "\n";
       }
 
-      fs = fs .replace (/\/\/ VOLUME_STYLES_UNIFORMS\n/,  styleUniforms);
-      fs = fs .replace (/\/\/ VOLUME_STYLES_FUNCTIONS\n/, styleFunctions);
+      fs = fs
+         .replace (/__VOLUME_STYLES_UNIFORMS__/,  styleUniforms)
+         .replace (/__VOLUME_STYLES_FUNCTIONS__/, styleFunctions);
 
       // if (DEVELOPMENT)
       //    this .getBrowser () .print (fs);

package/src/x_ite/Components/VolumeRendering/SegmentedVolumeData.js

@@ -186,8 +186,9 @@ Object .assign (Object .setPrototypeOf (SegmentedVolumeData .prototype, X3DVolum
          styleFunctions += "   }\n";
       }
 
-      fs = fs .replace (/\/\/ VOLUME_STYLES_UNIFORMS\n/,  styleUniforms);
-      fs = fs .replace (/\/\/ VOLUME_STYLES_FUNCTIONS\n/, styleFunctions);
+      fs = fs
+         .replace (/__VOLUME_STYLES_UNIFORMS__/,  styleUniforms)
+         .replace (/__VOLUME_STYLES_FUNCTIONS__/, styleFunctions);
 
       // if (DEVELOPMENT)
       //    this .getBrowser () .print (fs);

package/src/x_ite/Components/VolumeRendering/VolumeData.js

@@ -128,8 +128,9 @@ Object .assign (Object .setPrototypeOf (VolumeData .prototype, X3DVolumeDataNode
          styleFunctions += this .renderStyleNode .getFunctionsText ();
       }
 
-      fs = fs .replace (/\/\/ VOLUME_STYLES_UNIFORMS\n/,  styleUniforms);
-      fs = fs .replace (/\/\/ VOLUME_STYLES_FUNCTIONS\n/, styleFunctions);
+      fs = fs
+         .replace (/__VOLUME_STYLES_UNIFORMS__/,  styleUniforms)
+         .replace (/__VOLUME_STYLES_FUNCTIONS__/, styleFunctions);
 
       // if (DEVELOPMENT)
       //    this .getBrowser () .print (fs);

package/src/x_ite/Execution/BindableList.js

@@ -45,17 +45,18 @@
  *
  ******************************************************************************/
 
-import X3DBaseNode from "../Base/X3DBaseNode.js";
+import X3DBaseNode     from "../Base/X3DBaseNode.js";
+import X3DBindableNode from "../Components/Core/X3DBindableNode.js";
 
 function BindableList (executionContext, defaultNode)
 {
    X3DBaseNode .call (this, executionContext);
 
-   this .updateTime     = 0;
-   this .nodes          = [ defaultNode ];
-   this .collectedNodes = [ defaultNode ];
-   this .changedNodes   = [ ];
-   this .removedNodes   = [ ];
+   this .modificationCount = 0;
+   this .nodes             = [ defaultNode ];
+   this .collectedNodes    = [ defaultNode ];
+   this .changedNodes      = [ ];
+   this .removedNodes      = [ ];
 }
 
 Object .assign (Object .setPrototypeOf (BindableList .prototype, X3DBaseNode .prototype),
@@ -132,7 +133,7 @@ Object .assign (Object .setPrototypeOf (BindableList .prototype, X3DBaseNode .pr
 
       for (const node of collectedNodes)
       {
-         if (node ._set_bind .getModificationTime () > this .updateTime)
+         if (node .getModificationCount () > this .modificationCount)
             changedNodes .push (node);
       }
 
@@ -165,9 +166,9 @@ Object .assign (Object .setPrototypeOf (BindableList .prototype, X3DBaseNode .pr
       changedNodes .length = 0;
       removedNodes .length = 0;
 
-      // Advance updateTime time.
+      // Advance modificationCount time.
 
-      this .updateTime = Date .now ();
+      this .modificationCount = X3DBindableNode .getModificationCount ();
    },
 });
 

package/src/x_ite/Rendering/X3DRenderObject.js

@@ -61,10 +61,13 @@ import StopWatch     from "../../standard/Time/StopWatch.js";
 
 const DEPTH_BUFFER_SIZE = 16;
 
+let renderCount = 0;
+
 function X3DRenderObject (executionContext)
 {
    const browser = executionContext .getBrowser ();
 
+   this .renderCount              = 0;
    this .viewVolumes              = [ ];
    this .cameraSpaceMatrix        = new MatrixStack (Matrix4);
    this .viewMatrix               = new MatrixStack (Matrix4);
@@ -112,9 +115,9 @@ Object .assign (X3DRenderObject .prototype,
    {
       return true;
    },
-   getRenderTime ()
+   getRenderCount ()
    {
-      return this .renderTime;
+      return this .renderCount;
    },
    getViewVolumes ()
    {
@@ -991,7 +994,7 @@ Object .assign (X3DRenderObject .prototype,
          oit                        = browser .getFrameBuffer () .getOrderIndependentTransparency ();
 
 
-      this .renderTime = Date .now ();
+      this .renderCount = ++ renderCount;
 
       this .logarithmicDepthBuffer = browser .getBrowserOption ("LogarithmicDepthBuffer")
          || this .getViewpoint () .getLogarithmicDepthBuffer ();

package/webpack.config.js

@@ -61,6 +61,42 @@ export default __default__;`;
       ],
    }
 
+   const compress_glsl = {
+      test: /\.js$/,
+      use: [
+         {
+            loader: StringReplacePlugin .replace ({
+               replacements: [
+                  {
+                     pattern: /\/\*\s*glsl\s*\*\/\s*`(.*?)`;/sg,
+                     replacement: function (match, m, offset, string)
+                     {
+                        const e = [ ];
+
+                        return "/* glsl */ `" + m
+                           .replace (/\$\{(?:[^}{]|\{(?:[^}{]|\{(?:[^}{]|\{[^}{]*\})*\})*\})*\}/sg, s =>
+                           {
+                              return `__EXPRESSION${e .push (s) - 1}__`
+                           })
+                           .replace (/\/\*.*?\*\//sg, "")
+                           .replace (/\/\/.*?\n/sg, "\n")
+                           .replace (/(#.*?)\n/sg, "$1__PREPROCESSOR__")
+                           .replace (/\s+/sg, " ")
+                           .replace (/\s*([(){}\[\],;=<>!+\-*\/&|?:\.])\s*/sg, "$1")
+                           .replace (/(#.*?)__PREPROCESSOR__\s*/sg, "$1\n")
+                           .replace (/(.)#/sg, "$1\n#")
+                           .replace (/^\s+/, "")
+                           .replace (/$/, "\n")
+                           .replace (/\n+/sg, "\n")
+                           .replace (/__EXPRESSION(\d+)__/sg, (_, i) => `\n${e [i]}\n`) + "`"
+                     },
+                  },
+               ],
+            }),
+         },
+      ],
+   }
+
    targets .push ({
       entry: {
          "x_ite": "./src/x_ite.js",
@@ -77,7 +113,7 @@ export default __default__;`;
       },
       mode: "production",
       module: {
-         rules: [namespace],
+         rules: [namespace, compress_glsl],
       },
       optimization: {
          minimize: true,
@@ -196,7 +232,7 @@ export default __default__;`;
          },
          mode: "production",
          module: {
-            rules: [namespace],
+            rules: [namespace, compress_glsl],
          },
          optimization: {
             minimize: true,
@@ -272,7 +308,7 @@ export default __default__;`;
 
                for (const deps of component_deps)
                {
-                  if (! deps .has (filename))
+                  if (!deps .has (filename))
                      continue
 
                   const module = path .relative (path .resolve (__dirname, "src"), filename) .replace (/\.js$/, "")