x_ite 8.6.9 → 8.6.11

package/src/x_ite/Components/Navigation/X3DViewpointNode.js

@@ -279,11 +279,6 @@ X3DViewpointNode .prototype = Object .assign (Object .create (X3DBindableNode .p
          if (this ._viewAll .getValue ())
             this .viewAll (layerNode .getBBox (new Box3 ()));
 
-         if (this .getBrowser () .getBrowserOption ("StraightenHorizon"))
-         {
-            this ._orientationOffset = this .straightenHorizon (this .getUserOrientation ()) .multLeft (this .getOrientation () .copy () .inverse ());
-         }
-
          // Handle NavigationInfo.
 
          const
@@ -382,11 +377,6 @@ X3DViewpointNode .prototype = Object .assign (Object .create (X3DBindableNode .p
       this ._centerOfRotationOffset = Vector3   .Zero;
       this ._fieldOfViewScale       = 1;
 
-      if (this .getBrowser () .getBrowserOption ("StraightenHorizon"))
-      {
-         this ._orientationOffset = this .straightenHorizon (this .getUserOrientation ()) .multLeft (this .getOrientation () .copy () .inverse ());
-      }
-
       this .set_nearDistance__ ();
       this .set_farDistance__ ();
    },

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

@@ -275,9 +275,10 @@ ParticleSystem .prototype = Object .assign (Object .create (X3DShapeNode .protot
             }
             default:
             {
-               this .setTransparent (this .getAppearance () .isTransparent () ||
-                                     (this .colorRampNode && this .colorRampNode .isTransparent ()) ||
-                                     (this .geometryType === GeometryTypes .GEOMETRY && this .geometryNode && this .geometryNode .isTransparent ()));
+               this .setTransparent (!!(this .getAppearance () .isTransparent () ||
+                                        this .colorRampNode?.isTransparent () ||
+                                        (this .geometryType === GeometryTypes .GEOMETRY &&
+                                         this .geometryNode?.isTransparent ())));
                break;
             }
          }

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

@@ -140,57 +140,37 @@ IndexedLineSet .prototype = Object .assign (Object .create (X3DLineGeometryNode
    },
    set_fogCoord__: function ()
    {
-      if (this .fogCoordNode)
-         this .fogCoordNode .removeInterest ("requestRebuild", this);
+      this .fogCoordNode?.removeInterest ("requestRebuild", this);
 
       this .fogCoordNode = X3DCast (X3DConstants .FogCoordinate, this ._fogCoord);
 
-      if (this .fogCoordNode)
-         this .fogCoordNode .addInterest ("requestRebuild", this);
+      this .fogCoordNode?.addInterest ("requestRebuild", this);
    },
    set_color__: function ()
    {
-      if (this .colorNode)
-      {
-         this .colorNode .removeInterest ("requestRebuild", this);
-         this .colorNode ._transparent .removeInterest ("set_transparent__", this);
-      }
+      this .colorNode?.removeInterest ("requestRebuild", this);
 
       this .colorNode = X3DCast (X3DConstants .X3DColorNode, this ._color);
 
-      if (this .colorNode)
-      {
-         this .colorNode .addInterest ("requestRebuild", this);
-         this .colorNode ._transparent .addInterest ("set_transparent__", this);
+      this .colorNode?.addInterest ("requestRebuild", this);
 
-         this .set_transparent__ ();
-      }
-      else
-         this .setTransparent (false);
-   },
-   set_transparent__: function ()
-   {
-      this .setTransparent (this .colorNode .isTransparent ());
+      this .setTransparent (this .colorNode?.isTransparent () ?? false);
    },
    set_normal__: function ()
    {
-      if (this .normalNode)
-         this .normalNode .removeInterest ("requestRebuild", this);
+      this .normalNode?.removeInterest ("requestRebuild", this);
 
       this .normalNode = X3DCast (X3DConstants .X3DNormalNode, this ._normal);
 
-      if (this .normalNode)
-         this .normalNode .addInterest ("requestRebuild", this);
+      this .normalNode?.addInterest ("requestRebuild", this);
    },
    set_coord__: function ()
    {
-      if (this .coordNode)
-         this .coordNode .removeInterest ("requestRebuild", this);
+      this .coordNode?.removeInterest ("requestRebuild", this);
 
       this .coordNode = X3DCast (X3DConstants .X3DCoordinateNode, this ._coord);
 
-      if (this .coordNode)
-         this .coordNode .addInterest ("requestRebuild", this);
+      this .coordNode?.addInterest ("requestRebuild", this);
    },
    getColorPerVertexIndex: function (index)
    {
@@ -284,8 +264,7 @@ IndexedLineSet .prototype = Object .assign (Object .create (X3DLineGeometryNode
                   for (let a = 0; a < numAttribNodes; ++ a)
                      attribNodes [a] .addValue (index, attribArrays [a]);
 
-                  if (fogCoordNode)
-                     fogCoordNode .addDepth (index, fogDepthArray);
+                  fogCoordNode?.addDepth (index, fogDepthArray);
 
                   if (colorNode)
                   {
@@ -295,8 +274,7 @@ IndexedLineSet .prototype = Object .assign (Object .create (X3DLineGeometryNode
                         colorNode .addColor (this .getColorIndex (face), colorArray);
                   }
 
-                  if (normalNode)
-                     normalNode .addVector (index, normalArray);
+                  normalNode?.addVector (index, normalArray);
 
                   coordNode .addPoint (index, vertexArray);
                }

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

@@ -134,57 +134,37 @@ LineSet .prototype = Object .assign (Object .create (X3DLineGeometryNode .protot
    },
    set_fogCoord__: function ()
    {
-      if (this .fogCoordNode)
-         this .fogCoordNode .removeInterest ("requestRebuild", this);
+      this .fogCoordNode?.removeInterest ("requestRebuild", this);
 
       this .fogCoordNode = X3DCast (X3DConstants .FogCoordinate, this ._fogCoord);
 
-      if (this .fogCoordNode)
-         this .fogCoordNode .addInterest ("requestRebuild", this);
+      this .fogCoordNode?.addInterest ("requestRebuild", this);
    },
    set_color__: function ()
    {
-      if (this .colorNode)
-      {
-         this .colorNode .removeInterest ("requestRebuild", this);
-         this .colorNode ._transparent .removeInterest ("set_transparent__", this);
-      }
+      this .colorNode?.removeInterest ("requestRebuild", this);
 
       this .colorNode = X3DCast (X3DConstants .X3DColorNode, this ._color);
 
-      if (this .colorNode)
-      {
-         this .colorNode .addInterest ("requestRebuild", this);
-         this .colorNode ._transparent .addInterest ("set_transparent__", this);
+      this .colorNode?.addInterest ("requestRebuild", this);
 
-         this .set_transparent__ ();
-      }
-      else
-         this .setTransparent (false);
-   },
-   set_transparent__: function ()
-   {
-      this .setTransparent (this .colorNode .isTransparent ());
+      this .setTransparent (this .colorNode?.isTransparent () ?? false);
    },
    set_normal__: function ()
    {
-      if (this .normalNode)
-         this .normalNode .removeInterest ("requestRebuild", this);
+      this .normalNode?.removeInterest ("requestRebuild", this);
 
       this .normalNode = X3DCast (X3DConstants .X3DNormalNode, this ._normal);
 
-      if (this .normalNode)
-         this .normalNode .addInterest ("requestRebuild", this);
+      this .normalNode?.addInterest ("requestRebuild", this);
    },
    set_coord__: function ()
    {
-      if (this .coordNode)
-         this .coordNode .removeInterest ("requestRebuild", this);
+      this .coordNode?.removeInterest ("requestRebuild", this);
 
       this .coordNode = X3DCast (X3DConstants .X3DCoordinateNode, this ._coord);
 
-      if (this .coordNode)
-         this .coordNode .addInterest ("requestRebuild", this);
+      this .coordNode?.addInterest ("requestRebuild", this);
    },
    build: function ()
    {
@@ -224,14 +204,9 @@ LineSet .prototype = Object .assign (Object .create (X3DLineGeometryNode .protot
                for (let a = 0; a < numAttribNodes; ++ a)
                   attribNodes [a] .addValue (index, attribArrays [a]);
 
-               if (fogCoordNode)
-                  fogCoordNode .addDepth (index, fogDepthArray);
-
-               if (colorNode)
-                  colorNode .addColor (index, colorArray);
-
-               if (normalNode)
-                  normalNode .addVector (index, normalArray);
+               fogCoordNode?.addDepth  (index, fogDepthArray);
+               colorNode   ?.addColor  (index, colorArray);
+               normalNode  ?.addVector (index, normalArray);
 
                coordNode .addPoint (index, vertexArray);
             }

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

@@ -137,43 +137,35 @@ PointSet .prototype = Object .assign (Object .create (X3DPointGeometryNode .prot
    },
    set_fogCoord__: function ()
    {
-      if (this .fogCoordNode)
-         this .fogCoordNode .removeInterest ("requestRebuild", this);
+      this .fogCoordNode?.removeInterest ("requestRebuild", this);
 
       this .fogCoordNode = X3DCast (X3DConstants .FogCoordinate, this ._fogCoord);
 
-      if (this .fogCoordNode)
-         this .fogCoordNode .addInterest ("requestRebuild", this);
+      this .fogCoordNode?.addInterest ("requestRebuild", this);
    },
    set_color__: function ()
    {
-      if (this .colorNode)
-         this .colorNode .removeInterest ("requestRebuild", this);
+      this .colorNode?.removeInterest ("requestRebuild", this);
 
       this .colorNode = X3DCast (X3DConstants .X3DColorNode, this ._color);
 
-      if (this .colorNode)
-         this .colorNode .addInterest ("requestRebuild", this);
+      this .colorNode?.addInterest ("requestRebuild", this);
    },
    set_normal__: function ()
    {
-      if (this .normalNode)
-         this .normalNode .removeInterest ("requestRebuild", this);
+      this .normalNode?.removeInterest ("requestRebuild", this);
 
       this .normalNode = X3DCast (X3DConstants .X3DNormalNode, this ._normal);
 
-      if (this .normalNode)
-         this .normalNode .addInterest ("requestRebuild", this);
+      this .normalNode?.addInterest ("requestRebuild", this);
    },
    set_coord__: function ()
    {
-      if (this .coordNode)
-         this .coordNode .removeInterest ("requestRebuild", this);
+      this .coordNode?.removeInterest ("requestRebuild", this);
 
       this .coordNode = X3DCast (X3DConstants .X3DCoordinateNode, this ._coord);
 
-      if (this .coordNode)
-         this .coordNode .addInterest ("requestRebuild", this);
+      this .coordNode?.addInterest ("requestRebuild", this);
    },
    build: function ()
    {
@@ -200,14 +192,9 @@ PointSet .prototype = Object .assign (Object .create (X3DPointGeometryNode .prot
             attribNodes [a] .addValue (i, attribArrays [a]);
       }
 
-      if (fogCoordNode)
-         fogCoordNode .addDepths (fogDepthArray, numPoints);
-
-      if (colorNode)
-         colorNode .addColors (colorArray, numPoints);
-
-      if (normalNode)
-         normalNode .addNormals (normalArray, numPoints);
+      fogCoordNode?.addDepths  (fogDepthArray, numPoints);
+      colorNode   ?.addColors  (colorArray,    numPoints);
+      normalNode  ?.addNormals (normalArray,   numPoints);
 
       coordNode .addPoints (vertexArray, numPoints);
    },

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

@@ -134,69 +134,47 @@ X3DComposedGeometryNode .prototype = Object .assign (Object .create (X3DGeometry
    },
    set_fogCoord__: function ()
    {
-      if (this .fogCoordNode)
-         this .fogCoordNode .removeInterest ("requestRebuild", this);
+      this .fogCoordNode?.removeInterest ("requestRebuild", this);
 
       this .fogCoordNode = X3DCast (X3DConstants .FogCoordinate, this ._fogCoord);
 
-      if (this .fogCoordNode)
-         this .fogCoordNode .addInterest ("requestRebuild", this);
+      this .fogCoordNode?.addInterest ("requestRebuild", this);
    },
    set_color__: function ()
    {
-      if (this .colorNode)
-      {
-         this .colorNode .removeInterest ("requestRebuild", this);
-         this .colorNode ._transparent .removeInterest ("set_transparent__", this);
-      }
+      this .colorNode?.removeInterest ("requestRebuild", this);
 
       this .colorNode = X3DCast (X3DConstants .X3DColorNode, this ._color);
 
-      if (this .colorNode)
-      {
-         this .colorNode .addInterest ("requestRebuild", this);
-         this .colorNode ._transparent .addInterest ("set_transparent__", this);
+      this .colorNode?.addInterest ("requestRebuild", this);
 
-         this .set_transparent__ ();
-      }
-      else
-         this .setTransparent (false);
-   },
-   set_transparent__: function ()
-   {
-      this .setTransparent (this .colorNode .isTransparent ());
+      this .setTransparent (this .colorNode?.isTransparent () ?? false);
    },
    set_texCoord__: function ()
    {
-      if (this .texCoordNode)
-         this .texCoordNode .removeInterest ("requestRebuild", this);
+      this .texCoordNode?.removeInterest ("requestRebuild", this);
 
       this .texCoordNode = X3DCast (X3DConstants .X3DTextureCoordinateNode, this ._texCoord);
 
-      if (this .texCoordNode)
-         this .texCoordNode .addInterest ("requestRebuild", this);
+      this .texCoordNode?.addInterest ("requestRebuild", this);
 
       this .setTextureCoordinate (this .texCoordNode);
    },
    set_normal__: function ()
    {
-      if (this .normalNode)
-         this .normalNode .removeInterest ("requestRebuild", this);
+      this .normalNode?.removeInterest ("requestRebuild", this);
 
       this .normalNode = X3DCast (X3DConstants .X3DNormalNode, this ._normal);
 
-      if (this .normalNode)
-         this .normalNode .addInterest ("requestRebuild", this);
+      this .normalNode?.addInterest ("requestRebuild", this);
    },
    set_coord__: function ()
    {
-      if (this .coordNode)
-         this .coordNode .removeInterest ("requestRebuild", this);
+      this .coordNode?.removeInterest ("requestRebuild", this);
 
       this .coordNode = X3DCast (X3DConstants .X3DCoordinateNode, this ._coord);
 
-      if (this .coordNode)
-         this .coordNode .addInterest ("requestRebuild", this);
+      this .coordNode?.addInterest ("requestRebuild", this);
    },
    getPolygonIndex: function (index)
    {
@@ -233,8 +211,7 @@ X3DComposedGeometryNode .prototype = Object .assign (Object .create (X3DGeometry
          normalArray        = this .getNormals (),
          vertexArray        = this .getVertices ();
 
-      if (texCoordNode)
-         texCoordNode .init (multiTexCoordArray);
+      texCoordNode?.init (multiTexCoordArray);
 
       // Fill GeometryNode
 
@@ -247,8 +224,7 @@ X3DComposedGeometryNode .prototype = Object .assign (Object .create (X3DGeometry
          for (let a = 0; a < numAttribNodes; ++ a)
             attribNodes [a] .addValue (index, attribArrays [a]);
 
-         if (fogCoordNode)
-            fogCoordNode .addDepth (index, fogDepthArray);
+         fogCoordNode?.addDepth (index, fogDepthArray);
 
          if (colorNode)
          {
@@ -258,8 +234,7 @@ X3DComposedGeometryNode .prototype = Object .assign (Object .create (X3DGeometry
                colorNode .addColor (face, colorArray);
          }
 
-         if (texCoordNode)
-            texCoordNode .addPoint (index, multiTexCoordArray);
+         texCoordNode?.addPoint (index, multiTexCoordArray);
 
          if (normalNode)
          {

package/src/x_ite/Components/RigidBodyPhysics/CollidableShape.js

@@ -331,7 +331,7 @@ CollidableShape .prototype = Object .assign (Object .create (X3DNBodyCollidableN
                            min = Math .min (min, value);
                            max = Math .max (max, value);
 
-                           Ammo .HEAPF32 [heightField + i4 >> 2] = elevationGrid ._height [i];
+                           Ammo .HEAPF32 [heightField + i4 >>> 2] = elevationGrid ._height [i];
 
                            i4 += 4;
                         }

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

@@ -138,6 +138,10 @@ Appearance .prototype = Object .assign (Object .create (X3DAppearanceNode .proto
    {
       return this .alphaMode;
    },
+   getNormalizedAlphaMode: function (transparent)
+   {
+      return this .alphaMode || (transparent ? AlphaMode .BLEND : AlphaMode .OPAQUE);
+   },
    getAlphaCutoff: function ()
    {
       return this .alphaCutoff;
@@ -411,11 +415,11 @@ Appearance .prototype = Object .assign (Object .create (X3DAppearanceNode .proto
       switch (this .alphaMode)
       {
          case AlphaMode .AUTO:
-            this .setTransparent (Boolean (this .stylePropertiesNode [3] && this .stylePropertiesNode [3] .isTransparent () ||
-                                  (this .materialNode && this .materialNode .isTransparent ()) ||
-                                  (this .backMaterialNode && this .backMaterialNode .isTransparent ()) ||
-                                  (this .textureNode && this .textureNode .isTransparent ()) ||
-                                  this .blendModeNode));
+            this .setTransparent (!!(this .stylePropertiesNode [3]?.isTransparent () ||
+                                     this .materialNode?.isTransparent () ||
+                                     this .backMaterialNode?.isTransparent () ||
+                                     this .textureNode?.isTransparent () ||
+                                     this .blendModeNode));
             break;
          case AlphaMode .OPAQUE:
             this .setTransparent (false);

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

@@ -211,8 +211,7 @@ Material .prototype = Object .assign (Object .create (X3DOneSidedMaterialNode .p
    },
    set_transparent__: function ()
    {
-      this .setTransparent (!!(this .getTransparency () ||
-                              (this .diffuseTextureNode && this .diffuseTextureNode .isTransparent ())));
+      this .setTransparent (!!(this .getTransparency () || this .diffuseTextureNode?.isTransparent ()));
    },
    getBaseTexture: function ()
    {

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

@@ -170,8 +170,7 @@ PhysicalMaterial .prototype = Object .assign (Object .create (X3DOneSidedMateria
    },
    set_transparent__: function ()
    {
-      this .setTransparent (!!(this .getTransparency () ||
-                              (this .baseTextureNode && this .baseTextureNode .isTransparent ())));
+      this .setTransparent (!!(this .getTransparency () || this .baseTextureNode?.isTransparent ()));
    },
    getBaseTexture: function ()
    {

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

@@ -246,7 +246,7 @@ TwoSidedMaterial .prototype = Object .assign (Object .create (X3DMaterialNode .p
    },
    set_transparent__: function ()
    {
-      this .setTransparent (Boolean (this ._transparency .getValue () || (this ._separateBackColor .getValue () && this ._backTransparency .getValue ())));
+      this .setTransparent (!!(this ._transparency .getValue () || (this ._separateBackColor .getValue () && this ._backTransparency .getValue ())));
    },
    getBaseTexture: Material .prototype .getBaseTexture,
    getMaterialKey: Material .prototype .getMaterialKey,

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

@@ -103,7 +103,7 @@ UnlitMaterial .prototype = Object .assign (Object .create (X3DOneSidedMaterialNo
    set_transparent__: function ()
    {
       this .setTransparent (!!(this .getTransparency () ||
-                              (this .getEmissiveTexture () && this .getEmissiveTexture () .isTransparent ())));
+                               this .getEmissiveTexture ()?.isTransparent ()));
    },
    getMaterialKey: function ()
    {

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

@@ -47,6 +47,7 @@
 
 import Fields                 from "../../Fields.js";
 import X3DAppearanceChildNode from "./X3DAppearanceChildNode.js";
+import AlphaMode              from "../../Browser/Shape/AlphaMode.js";
 import X3DConstants           from "../../Base/X3DConstants.js";
 import BitSet                 from "../../../standard/Utility/BitSet.js";
 
@@ -113,13 +114,17 @@ X3DMaterialNode .prototype = Object .assign (Object .create (X3DAppearanceChildN
 
       if (renderContext)
       {
-         const { renderObject, shadows, fogNode, shapeNode, appearanceNode, textureNode, objectsCount } = renderContext;
+         const { renderObject, transparent, shadows, fogNode, shapeNode, appearanceNode, textureNode, objectsCount } = renderContext;
 
          key += this .logarithmicDepthBuffer || renderObject .getViewpoint () .getLogarithmicDepthBuffer () ? 1 : 0;
+         key += appearanceNode .getNormalizedAlphaMode (transparent);
+         key += this .getMaterialKey (shadows);
          key += shadows ? 1 : 0;
-         key += fogNode ? fogNode .getFogType () : 0;
+         key += fogNode?.getFogType () ?? 0;
          key += shapeNode .getShapeKey ();
          key += appearanceNode .getStyleProperties (geometryContext .geometryType) ? 1 : 0;
+         key += appearanceNode .getTextureTransformMapping () .size || 1;
+         key += geometryContext .textureCoordinateMapping .size || 1;
          key += ".";
          key += objectsCount [0]; // Clip planes
          key += ".";
@@ -128,17 +133,16 @@ X3DMaterialNode .prototype = Object .assign (Object .create (X3DAppearanceChildN
          key += objectsCount [2]; // Texture projectors
          key += ".";
          key += textureNode ? 1 : appearanceNode .getTextureBits () .toString (4);
-         key += ".";
-         key += appearanceNode .getTextureTransformMapping () .size || 1;
-         key += geometryContext .textureCoordinateMapping .size || 1;
-         key += this .getMaterialKey (shadows);
       }
       else
       {
          const { textureNode, objectsCount } = geometryContext;
 
          key += this .logarithmicDepthBuffer ? 1 : 0;
-         key += "0000.";
+         key += geometryContext .alphaMode;
+         key += this .getMaterialKey (false);
+         key += "000011";
+         key += ".";
          key += objectsCount [0]; // Clip planes
          key += ".";
          key += objectsCount [1]; // Lights
@@ -146,8 +150,6 @@ X3DMaterialNode .prototype = Object .assign (Object .create (X3DAppearanceChildN
          key += objectsCount [2]; // Texture projectors
          key += ".";
          key += textureNode ? 1 : 0;
-         key += ".11";
-         key += this .getMaterialKey (false);
       }
 
       return this .shaderNodes .get (key) || this .createShader (key, geometryContext, renderContext);
@@ -176,6 +178,19 @@ X3DMaterialNode .prototype = Object .assign (Object .create (X3DAppearanceChildN
          if (this .logarithmicDepthBuffer || renderObject .getViewpoint () .getLogarithmicDepthBuffer ())
             options .push ("X3D_LOGARITHMIC_DEPTH_BUFFER");
 
+         switch (appearanceNode .getNormalizedAlphaMode (renderContext .transparent))
+         {
+            case AlphaMode .OPAQUE:
+               options .push ("X3D_ALPHA_MODE_OPAQUE");
+               break;
+            case AlphaMode .MASK:
+               options .push ("X3D_ALPHA_MODE_MASK");
+               break;
+            case AlphaMode .BLEND:
+               options .push ("X3D_ALPHA_MODE_BLEND");
+               break;
+         }
+
          if (renderContext .shadows)
             options .push ("X3D_SHADOWS", "X3D_PCF_FILTERING");
 

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

@@ -177,8 +177,7 @@ X3DShapeNode .prototype = Object .assign (Object .create (X3DChildNode .prototyp
    {
       if (this .apparanceNode .getAlphaMode () === AlphaMode .AUTO)
       {
-         this .transparent = this .apparanceNode .isTransparent () ||
-                             (this .geometryNode && this .geometryNode .isTransparent ());
+         this .transparent = !!(this .apparanceNode .isTransparent () || this .geometryNode?.isTransparent ());
       }
       else
       {

package/src/x_ite/Components/Texturing/ImageTexture.js

@@ -192,7 +192,7 @@ ImageTexture .prototype = Object .assign (Object .create (X3DTexture2DNode .prot
             // Determine image alpha.
 
             const
-               data        = cx .getImageData (0, 0, width, height, { premultipliedAlpha: false }) .data,
+               data        = cx .getImageData (0, 0, width, height) .data,
                transparent = this .isImageTransparent (data);
 
             // Upload image to GPU.
@@ -208,9 +208,14 @@ ImageTexture .prototype = Object .assign (Object .create (X3DTexture2DNode .prot
                width       = image .width,
                height      = image .height;
 
+            // Flip Y if needed.
+
+            if (!this ._flipVertically .getValue ())
+               this .flipImage (data, width, height, 4);
+
             // Upload image to GPU.
 
-            this .setTexture (width, height, transparent, data, !this ._flipVertically .getValue ());
+            this .setTexture (width, height, transparent, data, false);
             this .setLoadState (X3DConstants .COMPLETE_STATE);
          }
       }
@@ -251,7 +256,7 @@ ImageTexture .prototype = Object .assign (Object .create (X3DTexture2DNode .prot
    flipImage (data, width, height, components)
    {
       const
-         height1_2   = height >> 1,
+         height1_2   = height >>> 1,
          bytesPerRow = width * components,
          tmp         = new Uint8Array (bytesPerRow);
 

package/src/x_ite/Components/Texturing/X3DTexture2DNode.js

@@ -111,8 +111,10 @@ X3DTexture2DNode .prototype = Object .assign (Object .create (X3DSingleTextureNo
 
       gl .bindTexture (gl .TEXTURE_2D, this .getTexture ());
       gl .pixelStorei (gl .UNPACK_FLIP_Y_WEBGL, flipY);
+      //gl .pixelStorei (gl .UNPACK_COLORSPACE_CONVERSION_WEBGL, colorspace ? gl .BROWSER_DEFAULT_WEBGL : gl .NONE);
       gl .texImage2D  (gl .TEXTURE_2D, 0, gl .RGBA, width, height, 0, gl .RGBA, gl .UNSIGNED_BYTE, data);
       gl .pixelStorei (gl .UNPACK_FLIP_Y_WEBGL, false);
+      //gl .pixelStorei (gl .UNPACK_COLORSPACE_CONVERSION_WEBGL, gl .BROWSER_DEFAULT_WEBGL);
 
       this .setTransparent (transparent);
       this .updateTextureParameters ();

package/src/x_ite/Fields/SFImage.js

@@ -57,9 +57,9 @@ function Image (width, height, comp, array)
 {
    const MFInt32 = ArrayFields .MFInt32;
 
-   this .width  = ~~width;
-   this .height = ~~height;
-   this .comp   = ~~comp;
+   this .width  = width|0;
+   this .height = height|0;
+   this .comp   = comp|0;
    this .array  = new MFInt32 ();
    this .array .setValue (array);
    this .array .length = this .width * this .height;
@@ -88,14 +88,14 @@ Image .prototype =
    },
    set: function (width, height, comp, array)
    {
-      this .width  = ~~width;
-      this .height = ~~height;
-      this .comp   = ~~comp;
+      this .width  = width|0;
+      this .height = height|0;
+      this .comp   = comp|0;
       this .array .assign (array);
    },
    setWidth: function (value)
    {
-      this .width = ~~value;
+      this .width = value|0;
       this .array .length = this .width  * this .height;
    },
    getWidth: function ()
@@ -104,7 +104,7 @@ Image .prototype =
    },
    setHeight: function (value)
    {
-      this .height = ~~value;
+      this .height = value|0;
       this .array .length = this .width  * this .height;
    },
    getHeight: function ()
@@ -113,7 +113,7 @@ Image .prototype =
    },
    setComp: function (value)
    {
-      this .comp = ~~value;
+      this .comp = value|0;
    },
    getComp: function ()
    {