x_ite 8.9.6 → 8.10.1

package/dist/assets/components/HAnim.js

@@ -1,4 +1,4 @@
-/* X_ITE v8.9.6 */(() => { // webpackBootstrap
+/* X_ITE v8.10.1 */(() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	// The require scope
 /******/ 	var __webpack_require__ = {};
@@ -39,25 +39,25 @@ var __webpack_exports__ = {};
 // UNUSED EXPORTS: default
 
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Components\")"
-const Components_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Components");
+const Components_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Components");
 var Components_default = /*#__PURE__*/__webpack_require__.n(Components_namespaceObject);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Fields\")"
-const Fields_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Fields");
+const Fields_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Fields");
 var Fields_default = /*#__PURE__*/__webpack_require__.n(Fields_namespaceObject);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Base/X3DFieldDefinition\")"
-const X3DFieldDefinition_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Base/X3DFieldDefinition");
+const X3DFieldDefinition_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Base/X3DFieldDefinition");
 var X3DFieldDefinition_default = /*#__PURE__*/__webpack_require__.n(X3DFieldDefinition_namespaceObject);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Base/FieldDefinitionArray\")"
-const FieldDefinitionArray_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Base/FieldDefinitionArray");
+const FieldDefinitionArray_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Base/FieldDefinitionArray");
 var FieldDefinitionArray_default = /*#__PURE__*/__webpack_require__.n(FieldDefinitionArray_namespaceObject);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Components/Rendering/X3DGeometricPropertyNode\")"
-const X3DGeometricPropertyNode_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Components/Rendering/X3DGeometricPropertyNode");
+const X3DGeometricPropertyNode_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Components/Rendering/X3DGeometricPropertyNode");
 var X3DGeometricPropertyNode_default = /*#__PURE__*/__webpack_require__.n(X3DGeometricPropertyNode_namespaceObject);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Base/X3DConstants\")"
-const X3DConstants_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Base/X3DConstants");
+const X3DConstants_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Base/X3DConstants");
 var X3DConstants_default = /*#__PURE__*/__webpack_require__.n(X3DConstants_namespaceObject);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Namespace\")"
-const Namespace_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Namespace");
+const Namespace_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Namespace");
 var Namespace_default = /*#__PURE__*/__webpack_require__.n(Namespace_namespaceObject);
 ;// CONCATENATED MODULE: ./src/x_ite/Components/HAnim/HAnimDisplacer.js
 /*******************************************************************************
@@ -166,30 +166,25 @@ const __default__ = HAnimDisplacer;
 Namespace_default().set ("x_ite/Components/HAnim/HAnimDisplacer", __default__);
 /* harmony default export */ const HAnim_HAnimDisplacer = (__default__);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Components/Core/X3DChildNode\")"
-const X3DChildNode_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Components/Core/X3DChildNode");
+const X3DChildNode_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Components/Core/X3DChildNode");
 var X3DChildNode_default = /*#__PURE__*/__webpack_require__.n(X3DChildNode_namespaceObject);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Components/Grouping/Group\")"
-const Group_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Components/Grouping/Group");
+const Group_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Components/Grouping/Group");
 var Group_default = /*#__PURE__*/__webpack_require__.n(Group_namespaceObject);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Components/Grouping/Transform\")"
-const Transform_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Components/Grouping/Transform");
+const Transform_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Components/Grouping/Transform");
 var Transform_default = /*#__PURE__*/__webpack_require__.n(Transform_namespaceObject);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Components/Grouping/X3DBoundedObject\")"
-const X3DBoundedObject_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Components/Grouping/X3DBoundedObject");
+const X3DBoundedObject_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Components/Grouping/X3DBoundedObject");
 var X3DBoundedObject_default = /*#__PURE__*/__webpack_require__.n(X3DBoundedObject_namespaceObject);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Rendering/TraverseType\")"
-const TraverseType_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Rendering/TraverseType");
+const TraverseType_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Rendering/TraverseType");
 var TraverseType_default = /*#__PURE__*/__webpack_require__.n(TraverseType_namespaceObject);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Base/X3DCast\")"
-const X3DCast_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Base/X3DCast");
+const X3DCast_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Base/X3DCast");
 var X3DCast_default = /*#__PURE__*/__webpack_require__.n(X3DCast_namespaceObject);
-;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"standard/Math/Numbers/Vector3\")"
-const Vector3_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("standard/Math/Numbers/Vector3");
-var Vector3_default = /*#__PURE__*/__webpack_require__.n(Vector3_namespaceObject);
-;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"standard/Math/Numbers/Rotation4\")"
-const Rotation4_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("standard/Math/Numbers/Rotation4");
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"standard/Math/Numbers/Matrix4\")"
-const Matrix4_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("standard/Math/Numbers/Matrix4");
+const Matrix4_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("standard/Math/Numbers/Matrix4");
 var Matrix4_default = /*#__PURE__*/__webpack_require__.n(Matrix4_namespaceObject);
 ;// CONCATENATED MODULE: ./src/x_ite/Components/HAnim/HAnimHumanoid.js
 /*******************************************************************************
@@ -251,8 +246,6 @@ var Matrix4_default = /*#__PURE__*/__webpack_require__.n(Matrix4_namespaceObject
 
 
 
-
-
 function HAnimHumanoid (executionContext)
 {
    X3DChildNode_default().call (this, executionContext);
@@ -260,6 +253,10 @@ function HAnimHumanoid (executionContext)
 
    this .addType ((X3DConstants_default()).HAnimHumanoid);
 
+   this .addChildObjects ((X3DConstants_default()).inputOutput, "jointTextures",              new (Fields_default()).SFTime (),
+                          (X3DConstants_default()).inputOutput, "displacementsTexture",       new (Fields_default()).SFTime (),
+                          (X3DConstants_default()).inputOutput, "displacementWeightsTexture", new (Fields_default()).SFTime ());
+
    this ._translation .setUnit ("length");
    this ._center      .setUnit ("length");
    this ._bboxSize    .setUnit ("length");
@@ -271,11 +268,10 @@ function HAnimHumanoid (executionContext)
    this .transformNode        = new (Transform_default()) (executionContext);
    this .jointNodes           = [ ];
    this .jointBindingMatrices = [ ];
-   this .skinBindingNormal    = null;
-   this .skinBindingCoord     = null;
-   this .skinNormalNode       = null;
+   this .displacementWeights  = [ ];
    this .skinCoordNode        = null;
-   this .changed              = false;
+   this .change               = new Lock ();
+   this .skinning             = Function .prototype;
 }
 
 Object .assign (Object .setPrototypeOf (HAnimHumanoid .prototype, (X3DChildNode_default()).prototype),
@@ -339,25 +335,64 @@ Object .assign (Object .setPrototypeOf (HAnimHumanoid .prototype, (X3DChildNode_
       this .setCameraObject   (this .transformNode .isCameraObject ());
       this .setPickableObject (this .transformNode .isPickableObject ());
 
-      // Skinning
+      // Check WebGL version.
+
+      const
+         browser = this .getBrowser (),
+         gl      = browser .getContext ();
+
+      if (gl .getVersion () === 1)
+         return;
+
+      // Prepare skinNode.
+
+      this .skinNode .traverse = function (humanoidNode, type, renderObject)
+      {
+         renderObject .getHumanoids () .push (humanoidNode);
+
+         Group_default().prototype .traverse .call (this, type, renderObject);
 
-      this ._joints                .addInterest ("set_joints__",            this);
-      this ._jointBindingPositions .addInterest ("set_joints__",            this);
-      this ._jointBindingRotations .addInterest ("set_joints__",            this);
-      this ._jointBindingScales    .addInterest ("set_joints__",            this);
-      this ._skinBindingNormal     .addInterest ("set_skinBindingNormal__", this);
-      this ._skinBindingCoord      .addInterest ("set_skinBindingCoord__",  this);
-      this ._skinNormal            .addInterest ("set_skinNormal__",        this);
-      this ._skinCoord             .addInterest ("set_skinCoord__",         this);
+         renderObject .getHumanoids () .pop ();
+      }
+      .bind (this .skinNode, this);
+
+      // Textures
+
+      this .jointsTexture        = gl .createTexture ();
+      this .displacementsTexture = gl .createTexture ();
+      this .jointMatricesTexture = gl .createTexture ();
+
+      for (const texture of [this .jointsTexture, this .displacementsTexture, this .jointMatricesTexture])
+      {
+         gl .bindTexture (gl .TEXTURE_2D, texture);
+         gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_WRAP_S,     gl .CLAMP_TO_EDGE);
+         gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_WRAP_T,     gl .CLAMP_TO_EDGE);
+         gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_MIN_FILTER, gl .LINEAR);
+         gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_MAG_FILTER, gl .LINEAR);
+      }
+
+      // Events
+
+      this ._joints                     .addInterest ("set_joints__",                     this);
+      this ._jointBindingPositions      .addInterest ("set_joints__",                     this);
+      this ._jointBindingRotations      .addInterest ("set_joints__",                     this);
+      this ._jointBindingScales         .addInterest ("set_joints__",                     this);
+      this ._jointTextures              .addInterest ("set_jointTextures__",              this);
+      this ._displacementsTexture       .addInterest ("set_displacementsTexture__",       this);
+      this ._displacementWeightsTexture .addInterest ("set_displacementWeightsTexture__", this);
+      this ._skinCoord                  .addInterest ("set_skinCoord__",                  this);
 
       this .set_joints__ ();
-      this .set_skinBindingNormal__ ();
-      this .set_skinBindingCoord__ ();
+      this .set_skinCoord__ ();
    },
    getBBox (bbox, shadows)
    {
       return this .transformNode .getBBox (bbox, shadows);
    },
+   getMatrix ()
+   {
+      return this .transformNode .getMatrix ();
+   },
    set_joints__ ()
    {
       const
@@ -368,7 +403,13 @@ Object .assign (Object .setPrototypeOf (HAnimHumanoid .prototype, (X3DChildNode_
          jointBindingScales    = this ._jointBindingScales;
 
       for (const jointNode of jointNodes)
-         jointNode .removeInterest ("set_joint__", this);
+      {
+         jointNode .removeInterest ("enable", this .change);
+         jointNode ._skinCoordIndex      .removeInterest ("addEvent", this ._jointTextures);
+         jointNode ._skinCoordWeight     .removeInterest ("addEvent", this ._jointTextures);
+         jointNode ._displacements       .removeInterest ("addEvent", this ._displacementsTexture);
+         jointNode ._displacementWeights .removeInterest ("addEvent", this ._displacementWeightsTexture);
+      }
 
       jointNodes           .length = 0;
       jointBindingMatrices .length = 0;
@@ -377,67 +418,219 @@ Object .assign (Object .setPrototypeOf (HAnimHumanoid .prototype, (X3DChildNode_
       {
          const jointNode = X3DCast_default() ((X3DConstants_default()).HAnimJoint, node);
 
-         if (jointNode)
-         {
-            const jointBindingMatrix = new (Matrix4_default()) ();
+         if (!jointNode)
+            continue;
 
-            if (jointBindingPositions .length)
-               jointBindingMatrix .translate (jointBindingPositions [Math .min (i, jointBindingPositions .length - 1)] .getValue ());
+         const jointBindingMatrix = new (Matrix4_default()) ();
 
-            if (jointBindingRotations .length)
-               jointBindingMatrix .rotate (jointBindingRotations [Math .min (i, jointBindingRotations .length - 1)] .getValue ());
+         if (jointBindingPositions .length)
+            jointBindingMatrix .translate (jointBindingPositions [Math .min (i, jointBindingPositions .length - 1)] .getValue ());
 
-            if (jointBindingScales .length)
-               jointBindingMatrix .scale (jointBindingScales [Math .min (i, jointBindingScales .length - 1)] .getValue ());
+         if (jointBindingRotations .length)
+            jointBindingMatrix .rotate (jointBindingRotations [Math .min (i, jointBindingRotations .length - 1)] .getValue ());
 
-            jointNodes           .push (jointNode);
-            jointBindingMatrices .push (jointBindingMatrix);
-         }
+         if (jointBindingScales .length)
+            jointBindingMatrix .scale (jointBindingScales [Math .min (i, jointBindingScales .length - 1)] .getValue ());
+
+         jointNodes           .push (jointNode);
+         jointBindingMatrices .push (jointBindingMatrix);
       }
 
       for (const jointNode of jointNodes)
-         jointNode .addInterest ("set_joint__", this);
+      {
+         jointNode .addInterest ("enable", this .change);
+         jointNode ._skinCoordIndex      .addInterest ("addEvent", this ._jointTextures);
+         jointNode ._skinCoordWeight     .addInterest ("addEvent", this ._jointTextures);
+         jointNode ._displacements       .addInterest ("addEvent", this ._displacementsTexture);
+         jointNode ._displacementWeights .addInterest ("addEvent", this ._displacementWeightsTexture);
+      }
 
-      this .set_joint__ ();
-   },
-   set_joint__ ()
-   {
-      this .changed = true;
+      const size = Math .ceil (Math .sqrt (jointNodes .length * 8));
+
+      this .jointMatricesArray = new Float32Array (size * size * 4),
+
+      this ._jointTextures              .addEvent ();
+      this ._displacementsTexture       .addEvent ();
+      this ._displacementWeightsTexture .addEvent ();
    },
-   set_skinBindingNormal__ ()
+   set_jointTextures__ ()
    {
-      this .skinBindingNormal = X3DCast_default() ((X3DConstants_default()).X3DNormalNode, this ._skinBindingNormal);
+      // Create arrays.
+
+      const
+         length  = this .skinCoordNode ?._point .length || 1,
+         joints  = Array .from ({ length }, () => [ ]),
+         weights = Array .from ({ length }, () => [ ]);
+
+      for (const [j, jointNode] of this .jointNodes .entries ())
+      {
+         const skinCoordWeight = jointNode ._skinCoordWeight .getValue ();
+
+         for (const [i, index] of jointNode ._skinCoordIndex .entries ())
+         {
+            joints  [index] ?.push (j);
+            weights [index] ?.push (skinCoordWeight [i])
+         }
+      }
+
+      const
+         size        = Math .ceil (Math .sqrt (length * 2)) || 1,
+         jointsArray = new Float32Array (size * size * 4);
+
+      for (let i = 0; i < length; ++ i)
+      {
+         const j = joints [i], w = weights [i];
+
+         j .length = w .length = Math .min (j .length, 4);
+
+         jointsArray .set (j, i * 8 + 0);
+         jointsArray .set (w, i * 8 + 4);
+      }
+
+      // Upload textures.
 
-      this .set_skinNormal__ ();
+      const
+         browser = this .getBrowser (),
+         gl      = browser .getContext ();
+
+      gl .bindTexture (gl .TEXTURE_2D, this .jointsTexture);
+      gl .texImage2D (gl .TEXTURE_2D, 0, gl .RGBA32F, size, size, 0, gl .RGBA, gl .FLOAT, jointsArray);
+
+      // Trigger update.
+
+      this .change .enable ();
    },
-   set_skinBindingCoord__ ()
+   set_displacementsTexture__ ()
    {
-      this .skinBindingCoord = X3DCast_default() ((X3DConstants_default()).X3DCoordinateNode, this ._skinBindingCoord);
+      // Create array.
 
-      this .set_skinCoord__ ();
+      const
+         length        = this .skinCoordNode ?._point .length || 1,
+         displacements = Array .from ({ length }, () => [ ]);
+
+      for (const [j, jointNode] of this .jointNodes .entries ())
+      {
+         for (const displacerNode of jointNode .getDisplacers ())
+         {
+            const d = displacerNode ._displacements;
+
+            for (const [i, index] of displacerNode ._coordIndex .entries ())
+               displacements [index] ?.push (... d [i]);
+         }
+      }
+
+      const
+         size               = even (Math .ceil (Math .sqrt (length * 2)) || 1),
+         displacementsArray = new Float32Array (size * size * 8);
+
+      for (let i = 0; i < length; ++ i)
+      {
+         const d = displacements [i];
+
+         d .length = Math .min (d .length, 8);
+
+         displacementsArray .set (d, i * 8);
+      }
+
+      // Upload texture.
+
+      const
+         browser = this .getBrowser (),
+         gl      = browser .getContext ();
+
+      gl .bindTexture (gl .TEXTURE_2D, this .displacementsTexture);
+      gl .texImage2D (gl .TEXTURE_2D, 0, gl .RGBA32F, size, size, 0, gl .RGBA, gl .FLOAT, displacementsArray);
+
+      // Weights
+
+      const displacementWeights = this .displacementWeights;
+
+      for (let i = displacementWeights .length; i < length; ++ i)
+         displacementWeights [i] = [ ];
+
+      displacementWeights .length = length;
+
+      this .displacementWeightsArray = new Float32Array (size * size * 4);
+
+      // Trigger update.
+
+      this .change .enable ();
    },
-   set_skinNormal__ ()
+   set_displacementWeightsTexture__ ()
    {
-      this .skinNormalNode = X3DCast_default() ((X3DConstants_default()).X3DNormalNode, this ._skinNormal);
+      // Create array.
+
+      const
+         length              = this .skinCoordNode ?._point .length || 1,
+         displacementWeights = this .displacementWeights;
 
-      if (!this .skinBindingNormal && this .skinNormalNode)
-         this .skinBindingNormal = this .skinNormalNode .copy ();
+      for (const d of displacementWeights)
+         d .length = 0;
 
-      this .changed = true;
+      for (const jointNode of this .jointNodes)
+      {
+         for (const displacerNode of jointNode .getDisplacers ())
+         {
+            const weight = displacerNode ._weight;
+
+            for (const index of displacerNode ._coordIndex)
+               displacementWeights [index] ?.push (weight);
+         }
+      }
+
+      const
+         size                     = even (Math .ceil (Math .sqrt (length * 2)) || 1),
+         displacementWeightsArray = this .displacementWeightsArray;
+
+      for (let i = 0; i < length; ++ i)
+      {
+         const d = displacementWeights [i];
+
+         d .length = Math .min (d .length, 8);
+
+         displacementWeightsArray .set (d, i * 8);
+      }
+
+      // Upload texture.
+
+      const
+         browser = this .getBrowser (),
+         gl      = browser .getContext ();
+
+      gl .bindTexture (gl .TEXTURE_2D, this .displacementsTexture);
+      gl .texSubImage2D (gl .TEXTURE_2D, 0, 0, size / 2, size, size / 2, gl .RGBA, gl .FLOAT, displacementWeightsArray)
+
+      // Trigger update.
+
+      this .change .enable ();
    },
    set_skinCoord__ ()
    {
-      this .skinCoordNode = X3DCast_default() ((X3DConstants_default()).X3DCoordinateNode, this ._skinCoord);
+      if (this .skinCoordNode)
+      {
+         this .skinCoordNode .removeInterest ("addEvent", this ._jointTextures);
+         this .skinCoordNode .removeInterest ("addEvent", this ._displacementsTexture);
+         this .skinCoordNode .removeInterest ("addEvent", this ._displacementWeightsTexture);
+      }
 
-      if (!this .skinBindingCoord && this .skinCoordNode)
-         this .skinBindingCoord = this .skinCoordNode .copy ();
+      this .skinCoordNode = X3DCast_default() ((X3DConstants_default()).X3DCoordinateNode, this ._skinCoord);
 
       if (this .skinCoordNode)
+      {
          delete this .skinning;
+
+         this .skinCoordNode .addInterest ("addEvent", this ._jointTextures);
+         this .skinCoordNode .addInterest ("addEvent", this ._displacementsTexture);
+         this .skinCoordNode .addInterest ("addEvent", this ._displacementWeightsTexture);
+      }
       else
-         this .skinning = Function .prototype
+      {
+         this .skinning = Function .prototype;
+      }
 
-      this .changed = true;
+      this ._jointTextures              .addEvent ();
+      this ._displacementsTexture       .addEvent ();
+      this ._displacementWeightsTexture .addEvent ();
    },
    traverse (type, renderObject)
    {
@@ -447,136 +640,67 @@ Object .assign (Object .setPrototypeOf (HAnimHumanoid .prototype, (X3DChildNode_
    },
    skinning: (() =>
    {
-      const
-         invModelMatrix = new (Matrix4_default()) (),
-         rest           = new (Vector3_default()) (0, 0, 0),
-         skin           = new (Vector3_default()) (0, 0, 0),
-         vector         = new (Vector3_default()) (0, 0, 0),
-         point          = new (Vector3_default()) (0, 0, 0);
+      const invModelViewMatrix = new (Matrix4_default()) ();
 
       return function (type, renderObject)
       {
-         if (type !== (TraverseType_default()).CAMERA)
+         if (type !== (TraverseType_default()).DISPLAY || this .change .lock ())
             return;
 
-         if (!this .changed)
-            return;
+         // Determine inverse model matrix of humanoid.
+
+         invModelViewMatrix .assign (this .transformNode .getMatrix ())
+            .multRight (renderObject .getModelViewMatrix () .get ()) .inverse ();
 
-         this .changed = false;
+         // Create joint matrices.
 
          const
             jointNodes           = this .jointNodes,
             jointNodesLength     = jointNodes .length,
             jointBindingMatrices = this .jointBindingMatrices,
-            skinBindingNormal    = this .skinBindingNormal,
-            skinBindingCoord     = this .skinBindingCoord,
-            skinNormalNode       = this .skinNormalNode,
-            skinCoordNode        = this .skinCoordNode;
-
-         // Reset skin normals and coords.
-
-         if (skinNormalNode)
-            skinNormalNode ._vector .assign (skinBindingNormal ._vector);
-
-         skinCoordNode ._point .assign (skinBindingCoord ._point);
-
-         // Determine inverse model matrix of humanoid.
-
-         invModelMatrix .assign (this .transformNode .getMatrix ())
-            .multRight (renderObject .getModelViewMatrix () .get ()) .inverse ();
-
-         // Apply joint transformations.
+            jointMatricesArray   = this .jointMatricesArray,
+            size                 = Math .ceil (Math .sqrt (jointNodesLength * 8));
 
          for (let i = 0; i < jointNodesLength; ++ i)
          {
             const
-               jointNode            = jointNodes [i],
-               jointBindingMatrix   = jointBindingMatrices [i],
-               jointMatrix          = jointNode .getModelMatrix () .multRight (invModelMatrix) .multLeft (jointBindingMatrix),
-               displacerNodes       = jointNode .getDisplacers (),
-               skinCoordIndexLength = jointNode ._skinCoordIndex .length;
-
-            for (const displacerNode of displacerNodes)
-            {
-               const
-                  coordIndex          = displacerNode ._coordIndex .getValue (),
-                  coordIndexLength    = displacerNode ._coordIndex .length,
-                  weight              = displacerNode ._weight .getValue (),
-                  displacements       = displacerNode ._displacements .getValue (),
-                  displacementsLength = displacerNode ._displacements .length;
-
-               for (let i = 0; i < coordIndexLength; ++ i)
-               {
-                  const
-                     i3           = i * 3,
-                     index        = coordIndex [i],
-                     displacement = i < displacementsLength ? point .set (displacements [i3], displacements [i3 + 1], displacements [i3 + 2]) : point .assign ((Vector3_default()).Zero);
-
-                  skinCoordNode .get1Point (index, skin);
-                  jointMatrix .multDirMatrix (displacement) .multiply (weight) .add (skin);
-                  skinCoordNode .set1Point (index, displacement);
-               }
-            }
+               jointNode          = jointNodes [i],
+               jointBindingMatrix = jointBindingMatrices [i],
+               jointMatrix        = jointNode .getModelViewMatrix () .multRight (invModelViewMatrix) .multLeft (jointBindingMatrix),
+               jointNormalMatrix  = jointMatrix .submatrix .transpose () .inverse ();
 
-            const
-               normalMatrix          = skinNormalNode ? jointMatrix .submatrix .transpose () .inverse () : null,
-               skinCoordIndex        = jointNode ._skinCoordIndex .getValue (),
-               skinCoordWeight       = jointNode ._skinCoordWeight .getValue (),
-               skinCoordWeightLength = jointNode ._skinCoordWeight .length;
-
-            for (let i = 0; i < skinCoordIndexLength; ++ i)
-            {
-               const
-                  index  = skinCoordIndex [i],
-                  weight = i < skinCoordWeightLength ? skinCoordWeight [i] : 1;
-
-               if (skinNormalNode)
-               {
-                  rest .assign (skinBindingNormal .get1Vector (index, vector));
-                  skinNormalNode .get1Vector (index, skin);
-                  normalMatrix .multVecMatrix (vector) .subtract (rest) .multiply (weight) .add (skin);
-                  skinNormalNode .set1Vector (index, vector);
-                  // Let the shader normalize the normals.
-               }
-
-               //skin += (rest * J - rest) * weight
-               rest .assign (skinBindingCoord .get1Point (index, point));
-               skinCoordNode .get1Point (index, skin);
-               jointMatrix .multVecMatrix (point) .subtract (rest) .multiply (weight) .add (skin);
-               skinCoordNode .set1Point (index, point);
-            }
+            jointMatricesArray .set (jointMatrix,       i * 32 + 0);
+            jointMatricesArray .set (jointNormalMatrix, i * 32 + 16);
          }
-      };
-   })(),
-   toVRMLStream (generator)
-   {
-      if (this .skinNormalNode)
-         this .skinNormalNode ._vector = this .skinBindingNormal ._vector;
 
-      if (this .skinCoordNode)
-         this .skinCoordNode ._point = this .skinBindingCoord ._point;
+         // Upload textures.
 
-      X3DChildNode_default().prototype .toVRMLStream .call (this, generator);
-   },
-   toXMLStream (generator)
-   {
-      if (this .skinNormalNode)
-         this .skinNormalNode ._vector = this .skinBindingNormal ._vector;
-
-      if (this .skinCoordNode)
-         this .skinCoordNode ._point = this .skinBindingCoord ._point;
+         const
+            browser = this .getBrowser (),
+            gl      = browser .getContext ();
 
-      X3DChildNode_default().prototype .toXMLStream .call (this, generator);
-   },
-   toJSONStream (generator)
+         gl .bindTexture (gl .TEXTURE_2D, this .jointMatricesTexture);
+         gl .texImage2D (gl .TEXTURE_2D, 0, gl .RGBA32F, size, size, 0, gl .RGBA, gl .FLOAT, jointMatricesArray);
+      };
+   })(),
+   setShaderUniforms (gl, shaderObject)
    {
-      if (this .skinNormalNode)
-         this .skinNormalNode ._vector = this .skinBindingNormal ._vector;
+      const
+         jointsTextureTextureUnit        = this .getBrowser () .getTexture2DUnit (),
+         displacementsTextureTextureUnit = this .getBrowser () .getTexture2DUnit (),
+         jointMatricesTextureUnit        = this .getBrowser () .getTexture2DUnit ();
 
-      if (this .skinCoordNode)
-         this .skinCoordNode ._point = this .skinBindingCoord ._point;
+      gl .activeTexture (gl .TEXTURE0 + jointsTextureTextureUnit);
+      gl .bindTexture (gl .TEXTURE_2D, this .jointsTexture);
+      gl .uniform1i (shaderObject .x3d_JointsTexture, jointsTextureTextureUnit);
+
+      gl .activeTexture (gl .TEXTURE0 + displacementsTextureTextureUnit);
+      gl .bindTexture (gl .TEXTURE_2D, this .displacementsTexture);
+      gl .uniform1i (shaderObject .x3d_DisplacementsTexture, displacementsTextureTextureUnit);
 
-      X3DChildNode_default().prototype .toJSONStream .call (this, generator);
+      gl .activeTexture (gl .TEXTURE0 + jointMatricesTextureUnit);
+      gl .bindTexture (gl .TEXTURE_2D, this .jointMatricesTexture);
+      gl .uniform1i (shaderObject .x3d_JointMatricesTexture, jointMatricesTextureUnit);
    },
    dispose ()
    {
@@ -615,6 +739,8 @@ Object .defineProperties (HAnimHumanoid,
          new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "description",           new (Fields_default()).SFString ()),
          new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "name",                  new (Fields_default()).SFString ()),
          new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "info",                  new (Fields_default()).MFString ()),
+         new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "skeletalConfiguration", new (Fields_default()).SFString ("BASIC")),
+         new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "loa",                   new (Fields_default()).SFInt32 (-1)),
          new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "translation",           new (Fields_default()).SFVec3f ()),
          new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "rotation",              new (Fields_default()).SFRotation ()),
          new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "scale",                 new (Fields_default()).SFVec3f (1, 1, 1)),
@@ -624,8 +750,6 @@ Object .defineProperties (HAnimHumanoid,
          new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "bboxDisplay",           new (Fields_default()).SFBool ()),
          new (X3DFieldDefinition_default()) ((X3DConstants_default()).initializeOnly, "bboxSize",              new (Fields_default()).SFVec3f (-1, -1, -1)),
          new (X3DFieldDefinition_default()) ((X3DConstants_default()).initializeOnly, "bboxCenter",            new (Fields_default()).SFVec3f ()),
-         new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "loa",                   new (Fields_default()).SFInt32 (-1)),
-         new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "skeletalConfiguration", new (Fields_default()).SFString ("BASIC")),
          new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "skeleton",              new (Fields_default()).MFNode ()),
          new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "viewpoints",            new (Fields_default()).MFNode ()),
          new (X3DFieldDefinition_default()) ((X3DConstants_default()).inputOutput,    "sites",                 new (Fields_default()).MFNode ()),
@@ -646,14 +770,40 @@ Object .defineProperties (HAnimHumanoid,
    },
 });
 
+class Lock
+{
+   #locked = true;
+
+   enable ()
+   {
+      this .#locked = false;
+   }
+
+   lock ()
+   {
+      const locked = this .#locked;
+
+      this .#locked = true;
+
+      return locked;
+   }
+}
+
+function even (value)
+{
+   return value + value % 2;
+}
+
 const HAnimHumanoid_default_ = HAnimHumanoid;
 ;
 
 Namespace_default().set ("x_ite/Components/HAnim/HAnimHumanoid", HAnimHumanoid_default_);
 /* harmony default export */ const HAnim_HAnimHumanoid = (HAnimHumanoid_default_);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Components/Grouping/X3DTransformNode\")"
-const X3DTransformNode_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Components/Grouping/X3DTransformNode");
+const X3DTransformNode_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Components/Grouping/X3DTransformNode");
 var X3DTransformNode_default = /*#__PURE__*/__webpack_require__.n(X3DTransformNode_namespaceObject);
+;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"standard/Math/Numbers/Vector3\")"
+const Vector3_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("standard/Math/Numbers/Vector3");
 ;// CONCATENATED MODULE: ./src/x_ite/Components/HAnim/HAnimJoint.js
 /*******************************************************************************
  *
@@ -711,18 +861,22 @@ var X3DTransformNode_default = /*#__PURE__*/__webpack_require__.n(X3DTransformNo
 
 
 
+
 function HAnimJoint (executionContext)
 {
    X3DTransformNode_default().call (this, executionContext);
 
    this .addType ((X3DConstants_default()).HAnimJoint);
 
+   this .addChildObjects ((X3DConstants_default()).outputOnly, "displacements",       new (Fields_default()).SFTime (),
+                          (X3DConstants_default()).outputOnly, "displacementWeights", new (Fields_default()).SFTime ());
+
    this .setAllowedTypes ((X3DConstants_default()).HAnimJoint,
                           (X3DConstants_default()).HAnimSegment,
                           (X3DConstants_default()).HAnimSite);
 
-   this .displacerNodes = [ ];
-   this .modelMatrix    = new (Matrix4_default()) ();
+   this .displacerNodes  = [ ];
+   this .modelViewMatrix = new (Matrix4_default()) ();
 }
 
 Object .assign (Object .setPrototypeOf (HAnimJoint .prototype, (X3DTransformNode_default()).prototype),
@@ -731,31 +885,30 @@ Object .assign (Object .setPrototypeOf (HAnimJoint .prototype, (X3DTransformNode
    {
       X3DTransformNode_default().prototype .initialize .call (this);
 
-      this ._skinCoordIndex .addInterest ("set_skinCoordIndex__", this);
-      this ._displacers     .addInterest ("set_displacers__",     this);
+      this ._displacers .addInterest ("set_displacers__", this);
 
       this .set_displacers__ ();
    },
-   setCameraObject (value)
+   getModelViewMatrix ()
    {
-      X3DTransformNode_default().prototype .setCameraObject .call (this, value || !! this ._skinCoordIndex .length);
-   },
-   getModelMatrix ()
-   {
-      return this .modelMatrix;
+      return this .modelViewMatrix;
    },
    getDisplacers ()
    {
       return this .displacerNodes;
    },
-   set_skinCoordIndex__ ()
-   {
-      this .set_cameraObjects__ ();
-   },
    set_displacers__ ()
    {
       const displacerNodes = this .displacerNodes;
 
+      for (const displacerNode of displacerNodes)
+      {
+         displacerNode ._coordIndex    .removeInterest ("addEvent", this ._displacements);
+         displacerNode ._displacements .removeInterest ("addEvent", this ._displacements);
+         displacerNode ._coordIndex    .removeInterest ("addEvent", this ._displacementWeights);
+         displacerNode ._weight        .removeInterest ("addEvent", this ._displacementWeights);
+      }
+
       displacerNodes .length = 0;
 
       for (const node of this ._displacers)
@@ -765,24 +918,33 @@ Object .assign (Object .setPrototypeOf (HAnimJoint .prototype, (X3DTransformNode
          if (displacerNode)
             displacerNodes .push (displacerNode);
       }
+
+      for (const displacerNode of displacerNodes)
+      {
+         displacerNode ._coordIndex    .addInterest ("addEvent", this ._displacements);
+         displacerNode ._displacements .addInterest ("addEvent", this ._displacements);
+         displacerNode ._coordIndex    .addInterest ("addEvent", this ._displacementWeights);
+         displacerNode ._weight        .addInterest ("addEvent", this ._displacementWeights);
+      }
    },
    traverse (type, renderObject)
    {
-      if (type === (TraverseType_default()).CAMERA)
-      {
-         if (this ._skinCoordIndex .length)
-            this .modelMatrix .assign (this .getMatrix ()) .multRight (renderObject .getModelViewMatrix () .get ());
-      }
+      const modelViewMatrix = renderObject .getModelViewMatrix ();
+
+      modelViewMatrix .push ();
+      modelViewMatrix .multLeft (this .getMatrix ());
 
-      X3DTransformNode_default().prototype .traverse .call (this, type, renderObject);
+      if (type === (TraverseType_default()).DISPLAY)
+         this .modelViewMatrix .assign (modelViewMatrix .get ());
+
+      X3DTransformNode_default().prototype .groupTraverse .call (this, type, renderObject);
+
+      modelViewMatrix .pop ();
    },
    groupTraverse (type, renderObject)
    {
-      if (type === (TraverseType_default()).CAMERA)
-      {
-         if (this ._skinCoordIndex .length)
-            this .modelMatrix .assign (renderObject .getModelViewMatrix () .get ());
-      }
+      if (type === (TraverseType_default()).DISPLAY)
+         this .modelViewMatrix .assign (renderObject .getModelViewMatrix () .get ());
 
       X3DTransformNode_default().prototype .groupTraverse .call (this, type, renderObject);
    },
@@ -969,7 +1131,7 @@ const HAnimMotion_default_ = HAnimMotion;
 Namespace_default().set ("x_ite/Components/HAnim/HAnimMotion", HAnimMotion_default_);
 /* harmony default export */ const HAnim_HAnimMotion = (HAnimMotion_default_);
 ;// CONCATENATED MODULE: external "window [Symbol .for (\"X_ITE.X3D\")] .require (\"x_ite/Components/Grouping/X3DGroupingNode\")"
-const X3DGroupingNode_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.9.6")] .require ("x_ite/Components/Grouping/X3DGroupingNode");
+const X3DGroupingNode_namespaceObject = window [Symbol .for ("X_ITE.X3D-8.10.1")] .require ("x_ite/Components/Grouping/X3DGroupingNode");
 var X3DGroupingNode_default = /*#__PURE__*/__webpack_require__.n(X3DGroupingNode_namespaceObject);
 ;// CONCATENATED MODULE: ./src/x_ite/Components/HAnim/HAnimSegment.js
 /*******************************************************************************