x_ite 8.10.1 → 8.11.0

package/src/x_ite/Components/HAnim/HAnimMotion.js

@@ -45,17 +45,27 @@
  *
  ******************************************************************************/
 
-import Fields               from "../../Fields.js";
-import X3DFieldDefinition   from "../../Base/X3DFieldDefinition.js";
-import FieldDefinitionArray from "../../Base/FieldDefinitionArray.js";
-import X3DChildNode         from "../Core/X3DChildNode.js";
-import X3DConstants         from "../../Base/X3DConstants.js";
+import Fields                  from "../../Fields.js";
+import X3DFieldDefinition      from "../../Base/X3DFieldDefinition.js";
+import FieldDefinitionArray    from "../../Base/FieldDefinitionArray.js";
+import X3DChildNode            from "../Core/X3DChildNode.js";
+import X3DConstants            from "../../Base/X3DConstants.js";
+import TimeSensor              from "../Time/TimeSensor.js";
+import PositionInterpolator    from "../Interpolation/PositionInterpolator.js";
+import OrientationInterpolator from "../Interpolation/OrientationInterpolator.js";
+import Vector3                 from "../../../standard/Math/Numbers/Vector3.js";
+import Rotation4               from "../../../standard/Math/Numbers/Rotation4.js";
+import Algorithm               from "../../../standard/Math/Algorithm.js";
 
 function HAnimMotion (executionContext)
 {
    X3DChildNode .call (this, executionContext);
 
    this .addType (X3DConstants .HAnimMotion);
+
+   this .timeSensor    = new TimeSensor (this .getExecutionContext ());
+   this .interpolators = [ ];
+   this .jointsIndex   = new Map ();
 }
 
 Object .assign (Object .setPrototypeOf (HAnimMotion .prototype, X3DChildNode .prototype),
@@ -63,6 +73,312 @@ Object .assign (Object .setPrototypeOf (HAnimMotion .prototype, X3DChildNode .pr
    initialize ()
    {
       X3DChildNode .prototype .initialize .call (this);
+
+      this ._loop .addFieldInterest (this .timeSensor ._loop);
+
+      this .timeSensor ._cycleTime   .addFieldInterest (this ._cycleTime);
+      this .timeSensor ._elapsedTime .addFieldInterest (this ._elapsedTime);
+
+      this .timeSensor ._enabled  = false;
+      this .timeSensor ._loop     = this ._loop;
+      this .timeSensor ._stopTime = 1;
+
+      this .timeSensor .setup ();
+
+      this ._enabled         .addInterest ("set_enabled__",              this);
+      this ._joints          .addInterest ("set_connectInterpolators__", this);
+      this ._channelsEnabled .addInterest ("set_connectInterpolators__", this);
+      this ._channels        .addInterest ("set_interpolators__",        this);
+      this ._values          .addInterest ("set_interpolators__",        this);
+      this ._next            .addInterest ("set_next_or_previous__",     this,  1);
+      this ._previous        .addInterest ("set_next_or_previous__",     this, -1);
+      this ._frameIndex      .addInterest ("set_frameIndex__",           this);
+      this ._frameDuration   .addInterest ("set_frameDuration__",        this);
+      this ._frameIncrement  .addInterest ("set_timeSensor_enabled__",   this);
+      this ._startFrame      .addInterest ("set_start_or_endFrame__",    this);
+      this ._endFrame        .addInterest ("set_start_or_endFrame__",    this);
+
+      this .set_enabled__ ();
+      this .set_interpolators__ ();
+   },
+   setJoints (jointNodes)
+   {
+      // Create joints index.
+
+      const jointsIndex = this .jointsIndex;
+
+      jointsIndex .clear ();
+
+      for (const jointNode of jointNodes)
+         jointsIndex .set (jointNode ._name .getValue () .trim (), jointNode);
+
+      jointsIndex .delete ("IGNORED");
+
+      // Connect joint nodes.
+
+      this .set_timeSensor_enabled__ ();
+      this .set_enabled__ ();
+      this .set_connectInterpolators__ ();
+   },
+   set_timeSensor_enabled__ ()
+   {
+      this .timeSensor ._enabled = this .jointsIndex .size && this ._frameIncrement .getValue ();
+   },
+   set_enabled__ ()
+   {
+      if (this ._enabled .getValue ())
+         this .timeSensor ._startTime = Time .now () / 1000;
+      else
+         this .timeSensor ._stopTime = Time .now () / 1000;
+   },
+   set_interpolators__ ()
+   {
+      // Disconnect old interpolators.
+
+      const timeSensor = this .timeSensor;
+
+      for (const field of timeSensor ._fraction_changed .getFieldInterests ())
+         timeSensor ._fraction_changed .removeFieldInterest (field);
+
+      // Create interpolators.
+
+      const channels = this ._channels .getValue ()
+         .replace (/^[\s,\d]+|[\s,\d]+$/sg, "")
+         .split (/[\s,]+\d+[\s,]+/s)
+         .map (string => string .split (/[\s,]+/s));
+
+      const
+         values        = this ._values,
+         numChannels   = channels .reduce ((v, c) => v + c .length, 0),
+         frameCount    = Math .floor (numChannels ? values .length / numChannels : 0),
+         types         = new Map (),
+         interpolators = Array .from ({length: channels .length}, () => ({ }));
+
+      this .interpolators = interpolators;
+
+      for (let frame = 0, v = 0; frame < frameCount; ++ frame)
+      {
+         for (const [j, joint] of channels .entries ())
+         {
+            types .clear ();
+
+            for (const channel of joint)
+               types .set (channel, values [v ++]);
+
+            if (types .has ("Xposition") || types .has ("Yposition") || types .has ("Zposition"))
+            {
+               const interpolator = interpolators [j] .positionInterpolator
+                  ?? this .createPositionInterpolator (interpolators, j);
+
+               const
+                  key      = frame / (frameCount - 1),
+                  keyValue = new Vector3 (types .get ("Xposition") ?? 0,
+                                          types .get ("Yposition") ?? 0,
+                                          types .get ("Zposition") ?? 0);
+
+               interpolator ._key      .push (key);
+               interpolator ._keyValue .push (keyValue);
+            }
+
+            if (types .has ("Xrotation") || types .has ("Yrotation") || types .has ("Zrotation"))
+            {
+               const interpolator = interpolators [j] .orientationInterpolator
+                  ?? this .createOrientationInterpolator (interpolators, j);
+
+               const
+                  key      = frame / (frameCount - 1),
+                  keyValue = Rotation4 .fromEuler (Algorithm .radians (types .get ("Xrotation") ?? 0),
+                                                   Algorithm .radians (types .get ("Yrotation") ?? 0),
+                                                   Algorithm .radians (types .get ("Zrotation") ?? 0));
+
+               interpolator ._key      .push (key);
+               interpolator ._keyValue .push (keyValue);
+            }
+
+            if (types .has ("Xscale") || types .has ("Yscale") || types .has ("Zscale"))
+            {
+               const interpolator = interpolators [j] .scaleInterpolator
+                  ?? this .createScaleInterpolator (interpolators, j);
+
+               const
+                  key      = frame / (frameCount - 1),
+                  keyValue = new Vector3 (types .get ("Xscale") ?? 1,
+                                          types .get ("Yscale") ?? 1,
+                                          types .get ("Zscale") ?? 1);
+
+               interpolator ._key      .push (key);
+               interpolator ._keyValue .push (keyValue);
+            }
+         }
+      }
+
+      for (const { positionInterpolator, orientationInterpolator, scaleInterpolator } of interpolators)
+      {
+         positionInterpolator    ?.setup ();
+         orientationInterpolator ?.setup ();
+         scaleInterpolator       ?.setup ();
+      }
+
+      this ._frameIndex = 0;
+      this ._startFrame = 0;
+      this ._endFrame   = frameCount - 1;
+      this ._frameCount = frameCount;
+
+      this .set_connectInterpolators__ ();
+      this .set_frameDuration__ ();
+   },
+   set_connectInterpolators__ ()
+   {
+      const
+         timeSensor      = this .timeSensor,
+         channelsEnabled = this ._channelsEnabled,
+         joints          = this ._joints .getValue () .replace (/^[\s,]+|[\s,]+$/sg, "") .split (/[\s,]+/s),
+         jointsIndex     = this .jointsIndex;
+
+      // Disconnect old joint nodes.
+
+      for (const { positionInterpolator, orientationInterpolator, scaleInterpolator } of this .interpolators)
+      {
+         if (positionInterpolator)
+         {
+            for (const field of positionInterpolator ._value_changed .getFieldInterests ())
+               positionInterpolator ._value_changed .removeFieldInterest (field);
+         }
+
+         if (orientationInterpolator)
+         {
+            for (const field of orientationInterpolator ._value_changed .getFieldInterests ())
+               orientationInterpolator ._value_changed .removeFieldInterest (field);
+         }
+
+         if (scaleInterpolator)
+         {
+            for (const field of scaleInterpolator ._value_changed .getFieldInterests ())
+               scaleInterpolator ._value_changed .removeFieldInterest (field);
+         }
+      }
+
+      // Connect interpolators.
+
+      if (!jointsIndex .size)
+         return;
+
+      for (const [j, { positionInterpolator, orientationInterpolator, scaleInterpolator }] of this .interpolators .entries ())
+      {
+         if (j < channelsEnabled .length && !channelsEnabled [j])
+            continue;
+
+         if (j >= joints .length)
+            continue;
+
+         const jointNode = jointsIndex .get (joints [j])
+            ?? (positionInterpolator && jointsIndex .get ("humanoid_root"));
+
+         if (!jointNode)
+            continue;
+
+         if (positionInterpolator)
+         {
+            timeSensor ._fraction_changed .addFieldInterest (positionInterpolator ._set_fraction);
+            positionInterpolator ._value_changed .addFieldInterest (jointNode ._translation);
+         }
+
+         if (orientationInterpolator)
+         {
+            timeSensor ._fraction_changed .addFieldInterest (orientationInterpolator ._set_fraction);
+            orientationInterpolator ._value_changed .addFieldInterest (jointNode ._rotation);
+         }
+
+         if (scaleInterpolator)
+         {
+            timeSensor ._fraction_changed .addFieldInterest (scaleInterpolator ._set_fraction);
+            scaleInterpolator ._value_changed .addFieldInterest (jointNode ._scale);
+         }
+      }
+   },
+   set_next_or_previous__ (direction, field)
+   {
+      if (!field .getValue ())
+         return;
+
+      const
+         fraction       = this .getFraction (),
+         frameCount     = this ._frameCount .getValue (),
+         frameIncrement = this ._frameIncrement .getValue (),
+         frameIndex     = (frameCount > 1 ? Math .floor (fraction * (frameCount - 1)) : 0) + frameIncrement * direction;
+
+      if (frameIndex > this .endFrame)
+      {
+         if (!this ._loop .getValue ())
+            return;
+
+         this ._frameIndex = this .startFrame;
+      }
+      else if (frameIndex < this .startFrame)
+      {
+         if (!this ._loop .getValue ())
+            return;
+
+         this ._frameIndex = this .endFrame;
+      }
+      else
+      {
+         this ._frameIndex = frameIndex;
+      }
+   },
+   set_frameIndex__ ()
+   {
+      const
+         frameCount = this ._frameCount .getValue (),
+         frameIndex = Algorithm .clamp (this ._frameIndex .getValue (), 0, frameCount),
+         fraction   = frameCount > 1 ? frameIndex / (frameCount - 1) : 0;
+
+      this .timeSensor ._range [0] = fraction;
+
+      if (this .timeSensor ._isActive .getValue ())
+         return;
+
+      for (const field of this .timeSensor ._fraction_changed .getFieldInterests ())
+         field .setValue (fraction);
+   },
+   set_frameDuration__ ()
+   {
+      const
+         frameCount    = this ._frameCount .getValue (),
+         frameDuration = Math .max (this ._frameDuration .getValue (), 0);
+
+      this .timeSensor ._cycleInterval = frameCount > 1 ? (frameCount - 1) * frameDuration : 0;
+   },
+   set_start_or_endFrame__ ()
+   {
+      const
+         frameCount = this ._frameCount .getValue (),
+         startFrame = Algorithm .clamp (this ._startFrame .getValue (), 0, frameCount),
+         endFrame   = Algorithm .clamp (this ._endFrame   .getValue (), 0, frameCount);
+
+      this .startFrame             = Math .min (startFrame, endFrame);
+      this .endFrame               = Math .max (startFrame, endFrame);
+      this .timeSensor ._range [1] = frameCount > 1 ? this .startFrame / (frameCount - 1) : 0;
+      this .timeSensor ._range [2] = frameCount > 1 ? this .endFrame   / (frameCount - 1) : 0;
+   },
+   createPositionInterpolator (interpolators, j)
+   {
+      return interpolators [j] .positionInterpolator = new PositionInterpolator (this .getExecutionContext ());
+   },
+   createOrientationInterpolator (interpolators, j)
+   {
+      return interpolators [j] .orientationInterpolator = new OrientationInterpolator (this .getExecutionContext ());
+   },
+   createScaleInterpolator (interpolators, j)
+   {
+      return interpolators [j] .scaleInterpolator = new PositionInterpolator (this .getExecutionContext ());
+   },
+   getFraction ()
+   {
+      for (const field of this .timeSensor ._fraction_changed .getFieldInterests ())
+         return field .getValue ();
+
+      return 0;
    },
 });
 
@@ -80,7 +396,7 @@ Object .defineProperties (HAnimMotion,
    },
    containerField:
    {
-      value: "children",
+      value: "motions",
       enumerable: true,
    },
    specificationRange:
@@ -94,19 +410,19 @@ Object .defineProperties (HAnimMotion,
          new X3DFieldDefinition (X3DConstants .inputOutput, "metadata",        new Fields .SFNode ()),
          new X3DFieldDefinition (X3DConstants .inputOutput, "description",     new Fields .SFString ()),
          new X3DFieldDefinition (X3DConstants .inputOutput, "enabled",         new Fields .SFBool (true)),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "loa",             new Fields .SFInt32 (-1)),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "joints",          new Fields .SFString ()),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "channelsEnabled", new Fields .MFBool ()),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "channels",        new Fields .SFString ()),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "values",          new Fields .MFFloat ()),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "loop",            new Fields .SFBool ()),
          new X3DFieldDefinition (X3DConstants .inputOnly,   "next",            new Fields .SFBool ()),
          new X3DFieldDefinition (X3DConstants .inputOnly,   "previous",        new Fields .SFBool ()),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "startFrame",      new Fields .SFInt32 ()),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "endFrame",        new Fields .SFInt32 ()),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "frameIndex",      new Fields .SFInt32 (0)),
          new X3DFieldDefinition (X3DConstants .inputOutput, "frameDuration",   new Fields .SFTime (0.1)),
          new X3DFieldDefinition (X3DConstants .inputOutput, "frameIncrement",  new Fields .SFInt32 (1)),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "frameIndex",      new Fields .SFInt32 (0)),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "loop",            new Fields .SFBool ()),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "channelsEnabled", new Fields .MFBool ()),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "channels",        new Fields .SFString ()),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "joints",          new Fields .SFString ()),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "loa",             new Fields .SFInt32 (-1)),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "values",          new Fields .MFFloat ()),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "startFrame",      new Fields .SFInt32 ()),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "endFrame",        new Fields .SFInt32 ()),
          new X3DFieldDefinition (X3DConstants .outputOnly,  "cycleTime",       new Fields .SFTime ()),
          new X3DFieldDefinition (X3DConstants .outputOnly,  "elapsedTime",     new Fields .SFTime ()),
          new X3DFieldDefinition (X3DConstants .outputOnly,  "frameCount",      new Fields .SFInt32 ()),

package/src/x_ite/Components/Lighting/DirectionalLight.js

@@ -162,9 +162,7 @@ Object .assign (DirectionalLightContainer .prototype,
       if (this .shadowBuffer)
       {
          const textureUnit = this .global
-            ? (this .textureUnit = this .textureUnit !== undefined
-               ? this .textureUnit
-               : this .browser .popTexture2DUnit ())
+            ? (this .textureUnit = this .textureUnit ?? this .browser .popTexture2DUnit ())
             : this .browser .getTexture2DUnit ();
 
          if (textureUnit !== undefined)

package/src/x_ite/Components/Lighting/PointLight.js

@@ -194,9 +194,7 @@ Object .assign (PointLightContainer .prototype,
       if (this .shadowBuffer)
       {
          const textureUnit = this .global
-            ? (this .textureUnit = this .textureUnit !== undefined
-               ? this .textureUnit
-               : this .browser .popTexture2DUnit ())
+            ? (this .textureUnit = this .textureUnit ?? this .browser .popTexture2DUnit ())
             : this .browser .getTexture2DUnit ();
 
          if (textureUnit !== undefined)

package/src/x_ite/Components/Lighting/SpotLight.js

@@ -181,9 +181,7 @@ Object .assign (SpotLightContainer .prototype,
       if (this .shadowBuffer)
       {
          const textureUnit = this .global
-            ? (this .textureUnit = this .textureUnit !== undefined
-               ? this .textureUnit
-               : this .browser .popTexture2DUnit ())
+            ? (this .textureUnit = this .textureUnit ?? this .browser .popTexture2DUnit ())
             : this .browser .getTexture2DUnit ();
 
          if (textureUnit !== undefined)

package/src/x_ite/Components/Networking/X3DUrlObject.js

@@ -47,6 +47,7 @@
 
 import Fields       from "../../Fields.js";
 import X3DConstants from "../../Base/X3DConstants.js";
+import Time         from "../../../standard/Time/Time.js";
 
 const
    _cache                   = Symbol (),
@@ -62,7 +63,7 @@ function X3DUrlObject (executionContext)
                           X3DConstants .inputOutput, "loadData",  new Fields .SFTime ());
 
    this [_cache]                = true;
-   this [_autoRefreshStartTime] = Date .now ();
+   this [_autoRefreshStartTime] = Time .now ();
 }
 
 Object .assign (X3DUrlObject .prototype,
@@ -83,7 +84,7 @@ Object .assign (X3DUrlObject .prototype,
 
       if (value === X3DConstants .COMPLETE_STATE)
       {
-         this [_autoRefreshCompleteTime] = Date .now ();
+         this [_autoRefreshCompleteTime] = Time .now ();
          this .setAutoRefreshTimer (this ._autoRefresh .getValue ());
       }
 
@@ -227,7 +228,7 @@ Object .assign (X3DUrlObject .prototype,
 
       if (autoRefreshTimeLimit !== 0)
       {
-         if ((Date .now () - this [_autoRefreshStartTime]) / 1000 > autoRefreshTimeLimit - autoRefreshInterval)
+         if ((Time .now () - this [_autoRefreshStartTime]) / 1000 > autoRefreshTimeLimit - autoRefreshInterval)
             return;
       }
 
@@ -266,7 +267,7 @@ Object .assign (X3DUrlObject .prototype,
          return;
 
       const
-         elapsedTime = (Date .now () - this [_autoRefreshCompleteTime]) / 1000,
+         elapsedTime = (Time .now () - this [_autoRefreshCompleteTime]) / 1000,
          autoRefresh = this ._autoRefresh .getValue ();
 
       let autoRefreshInterval = autoRefresh - elapsedTime;

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

@@ -60,6 +60,7 @@ import Vector3              from "../../../standard/Math/Numbers/Vector3.js";
 import Matrix4              from "../../../standard/Math/Numbers/Matrix4.js";
 import Matrix3              from "../../../standard/Math/Numbers/Matrix3.js";
 import BVH                  from "../../../standard/Math/Utility/BVH.js";
+import Time                 from "../../../standard/Time/Time.js";
 
 const PointGeometry = new Float32Array ([0, 0, 0, 1]);
 
@@ -261,7 +262,7 @@ Object .assign (Object .setPrototypeOf (ParticleSystem .prototype, X3DShapeNode
 
             if (this .pauseTime)
             {
-               this .creationTime += Date .now () / 1000 - this .pauseTime;
+               this .creationTime += Time .now () / 1000 - this .pauseTime;
                this .pauseTime     = 0;
             }
          }
@@ -273,7 +274,7 @@ Object .assign (Object .setPrototypeOf (ParticleSystem .prototype, X3DShapeNode
             this .getBrowser () .sensorEvents () .removeInterest ("animateParticles", this);
 
             if (this .pauseTime === 0)
-               this .pauseTime = Date .now () / 1000;
+               this .pauseTime = Time .now () / 1000;
          }
       }
    },
@@ -291,7 +292,7 @@ Object .assign (Object .setPrototypeOf (ParticleSystem .prototype, X3DShapeNode
             }
             else
             {
-               this .pauseTime = Date .now () / 1000;
+               this .pauseTime = Time .now () / 1000;
             }
 
             this ._isActive = true;
@@ -408,7 +409,7 @@ Object .assign (Object .setPrototypeOf (ParticleSystem .prototype, X3DShapeNode
       this .numParticles = Math .min (lastNumParticles, maxParticles);
 
       if (! this .emitterNode .isExplosive ())
-         this .creationTime = Date .now () / 1000;
+         this .creationTime = Time .now () / 1000;
 
       this .resizeBuffers (lastNumParticles);
       this .updateVertexArrays ();
@@ -695,7 +696,7 @@ Object .assign (Object .setPrototypeOf (ParticleSystem .prototype, X3DShapeNode
       if (emitterNode .isExplosive ())
       {
          const
-            now              = Date .now () / 1000,
+            now              = Time .now () / 1000,
             particleLifetime = this .particleLifetime + this .particleLifetime * this .lifetimeVariation;
 
          if (now - this .creationTime > particleLifetime)
@@ -716,7 +717,7 @@ Object .assign (Object .setPrototypeOf (ParticleSystem .prototype, X3DShapeNode
          if (this .numParticles < this .maxParticles)
          {
             const
-               now          = Date .now () / 1000,
+               now          = Time .now () / 1000,
                newParticles = Math .max (0, Math .floor ((now - this .creationTime) * this .maxParticles / this .particleLifetime));
 
             if (newParticles)
@@ -899,19 +900,19 @@ Object .assign (Object .setPrototypeOf (ParticleSystem .prototype, X3DShapeNode
    },
    display (gl, renderContext)
    {
+      if (!this .numParticles)
+         return;
+
       // Display geometry.
 
       switch (this .geometryType)
       {
          case GeometryTypes .GEOMETRY:
          {
-            if (this .numParticles)
-            {
-               const geometryNode = this .getGeometry ();
+            const geometryNode = this .getGeometry ();
 
-               if (geometryNode)
-                  geometryNode .displayParticles (gl, renderContext, this);
-            }
+            if (geometryNode)
+               geometryNode .displayParticles (gl, renderContext, this);
 
             break;
          }
@@ -927,7 +928,6 @@ Object .assign (Object .setPrototypeOf (ParticleSystem .prototype, X3DShapeNode
 
             gl .frontFace (positiveScale ? gl .CCW : gl .CW);
             gl .enable (gl .CULL_FACE);
-            gl .cullFace (gl .BACK);
 
             // [fall trough]
          }
@@ -939,60 +939,56 @@ Object .assign (Object .setPrototypeOf (ParticleSystem .prototype, X3DShapeNode
                shaderNode     = appearanceNode .getShader (this .geometryContext, renderContext),
                primitiveMode  = browser .getPrimitiveMode (this .primitiveMode);
 
-            if (this .numParticles)
-            {
-               // Setup shader.
-
-               const blendModeNode = appearanceNode .getBlendMode ();
+            // Setup shader.
 
-               blendModeNode ?.enable (gl);
+            const blendModeNode = appearanceNode .getBlendMode ();
 
-               shaderNode .enable (gl);
-               shaderNode .setUniforms (gl, this .geometryContext, renderContext);
+            blendModeNode ?.enable (gl);
 
-               if (this .numTexCoords)
-               {
-                  const textureUnit = browser .getTexture2DUnit ();
+            shaderNode .enable (gl);
+            shaderNode .setUniforms (gl, this .geometryContext, renderContext);
 
-                  gl .activeTexture (gl .TEXTURE0 + textureUnit);
-                  gl .bindTexture (gl .TEXTURE_2D, this .texCoordRampTexture);
-                  gl .uniform1i (shaderNode .x3d_TexCoordRamp, textureUnit);
-               }
+            if (this .numTexCoords)
+            {
+               const textureUnit = browser .getTexture2DUnit ();
 
-               // Setup vertex attributes.
+               gl .activeTexture (gl .TEXTURE0 + textureUnit);
+               gl .bindTexture (gl .TEXTURE_2D, this .texCoordRampTexture);
+               gl .uniform1i (shaderNode .x3d_TexCoordRamp, textureUnit);
+            }
 
-               const outputParticles = this .outputParticles;
+            // Setup vertex attributes.
 
-               if (outputParticles .vertexArrayObject .enable (shaderNode))
-               {
-                  const particleStride = this .particleStride;
+            const outputParticles = this .outputParticles;
 
-                  shaderNode .enableParticleAttribute       (gl, outputParticles, particleStride, this .particleOffset, 1);
-                  shaderNode .enableParticleMatrixAttribute (gl, outputParticles, particleStride, this .matrixOffset,   1);
+            if (outputParticles .vertexArrayObject .enable (shaderNode))
+            {
+               const particleStride = this .particleStride;
 
-                  if (this .geometryContext .colorMaterial)
-                  {
-                     shaderNode .enableColorAttribute (gl, outputParticles, particleStride, this .colorOffset);
-                     shaderNode .colorAttributeDivisor (gl, 1);
-                  }
+               shaderNode .enableParticleAttribute       (gl, outputParticles, particleStride, this .particleOffset, 1);
+               shaderNode .enableParticleMatrixAttribute (gl, outputParticles, particleStride, this .matrixOffset,   1);
 
-                  if (this .texCoordCount)
-                     shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers, 0, this .texCoordOffset);
+               if (this .geometryContext .colorMaterial)
+               {
+                  shaderNode .enableColorAttribute (gl, outputParticles, particleStride, this .colorOffset);
+                  shaderNode .colorAttributeDivisor (gl, 1);
+               }
 
-                  if (this .hasNormals)
-                  {
-                     shaderNode .enableNormalAttribute (gl, this .geometryBuffer, 0, this .normalOffset);
-                     shaderNode .normalAttributeDivisor (gl, this .maxParticles);
-                  }
+               if (this .texCoordCount)
+                  shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers, 0, this .texCoordOffset);
 
-                  shaderNode .enableVertexAttribute (gl, this .geometryBuffer, 0, this .verticesOffset);
+               if (this .hasNormals)
+               {
+                  shaderNode .enableNormalAttribute (gl, this .geometryBuffer, 0, this .normalOffset);
+                  shaderNode .normalAttributeDivisor (gl, this .maxParticles);
                }
 
-               gl .drawArraysInstanced (primitiveMode, 0, this .vertexCount, this .numParticles);
-
-               blendModeNode ?.disable (gl);
+               shaderNode .enableVertexAttribute (gl, this .geometryBuffer, 0, this .verticesOffset);
             }
 
+            gl .drawArraysInstanced (primitiveMode, 0, this .vertexCount, this .numParticles);
+
+            blendModeNode ?.disable (gl);
             break;
          }
       }

package/src/x_ite/Components/Rendering/X3DGeometryNode.js

@@ -950,10 +950,11 @@ Object .assign (Object .setPrototypeOf (X3DGeometryNode .prototype, X3DNode .pro
    display (gl, renderContext)
    {
       const
+         browser        = this .getBrowser (),
          appearanceNode = renderContext .appearanceNode,
          shaderNode     = appearanceNode .getShader (this, renderContext);
 
-      if (this .solid || !appearanceNode .getBackMaterial () || this .getBrowser () .getWireframe ())
+      if (this .solid || !appearanceNode .getBackMaterial () || browser .getWireframe ())
       {
          this .displayGeometry (gl, renderContext, appearanceNode, shaderNode, true, true);
       }
@@ -1072,10 +1073,11 @@ Object .assign (Object .setPrototypeOf (X3DGeometryNode .prototype, X3DNode .pro
    displayParticles (gl, renderContext, particleSystem)
    {
       const
+         browser        = this .getBrowser (),
          appearanceNode = renderContext .appearanceNode,
          shaderNode     = appearanceNode .getShader (this, renderContext);
 
-      if (this .solid || !appearanceNode .getBackMaterial () || this .getBrowser () .getWireframe ())
+      if (this .solid || !appearanceNode .getBackMaterial () || browser .getWireframe ())
       {
          this .displayParticlesGeometry (gl, renderContext, appearanceNode, shaderNode, true, true, particleSystem);
       }