x_ite 8.6.7 → 8.6.9

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

@@ -110,9 +110,6 @@ X3DProgrammableShaderObject .prototype =
 
       browser .getRenderingProperties () ._LogarithmicDepthBuffer .addInterest ("set_logarithmicDepthBuffer__", this);
 
-      // Use by multi texture nodes.
-      this .x3d_MaxTextures = browser .getMaxTextures ();
-
       this .set_logarithmicDepthBuffer__ ();
    },
    set_logarithmicDepthBuffer__: function ()
@@ -136,12 +133,14 @@ X3DProgrammableShaderObject .prototype =
       // Get uniforms and attributes.
 
       const
-         program       = this .getProgram (),
-         browser       = this .getBrowser (),
-         gl            = browser .getContext (),
-         maxClipPlanes = browser .getMaxClipPlanes (),
-         maxLights     = browser .getMaxLights (),
-         maxTextures   = browser .getMaxTextures ();
+         program              = this .getProgram (),
+         browser              = this .getBrowser (),
+         gl                   = browser .getContext (),
+         maxClipPlanes        = browser .getMaxClipPlanes (),
+         maxLights            = browser .getMaxLights (),
+         maxTextures          = browser .getMaxTextures (),
+         maxTextureTransforms = browser .getMaxTextureTransforms (),
+         maxTexCoords         = browser .getMaxTexCoords ();
 
       gl .useProgram (program);
 
@@ -242,17 +241,6 @@ X3DProgrammableShaderObject .prototype =
 
       for (let i = 0; i < maxTextures; ++ i)
       {
-         // Attributes
-
-         const x3d_TexCoord = this .getAttribLocation (gl, program, "x3d_TexCoord" + i, i ? "" : "x3d_TexCoord");
-
-         if (x3d_TexCoord !== -1)
-            this .x3d_TexCoord .push ([i, x3d_TexCoord]);
-
-         // Uniforms
-
-         this .x3d_TextureMatrix [i] = gl .getUniformLocation (program, "x3d_TextureMatrix[" + i + "]");
-
          this .x3d_TextureCoordinateGeneratorMode [i]      = gl .getUniformLocation (program, "x3d_TextureCoordinateGenerator[" + i + "].mode");
          this .x3d_TextureCoordinateGeneratorParameter [i] = gl .getUniformLocation (program, "x3d_TextureCoordinateGenerator[" + i + "].parameter");
 
@@ -272,6 +260,22 @@ X3DProgrammableShaderObject .prototype =
          this .x3d_ProjectiveTextureLocation [i] = gl .getUniformLocation (program, "x3d_ProjectiveTextureLocation[" + i + "]");
       }
 
+      for (let i = 0; i < maxTextureTransforms; ++ i)
+      {
+         const uniform = gl .getUniformLocation (program, "x3d_TextureMatrix[" + i + "]");
+
+         if (uniform !== null)
+            this .x3d_TextureMatrix [i] = uniform;
+      }
+
+      for (let i = 0; i < maxTexCoords; ++ i)
+      {
+         const x3d_TexCoord = this .getAttribLocation (gl, program, "x3d_TexCoord" + i, i ? "" : "x3d_TexCoord");
+
+         if (x3d_TexCoord !== -1)
+            this .x3d_TexCoord .push ([i, x3d_TexCoord]);
+      }
+
       this .x3d_TexCoordRamp = gl .getUniformLocation (program, "x3d_TexCoordRamp");
 
       this .x3d_Viewport          = gl .getUniformLocation (program, "x3d_Viewport");
@@ -355,7 +359,7 @@ X3DProgrammableShaderObject .prototype =
       for (const uniform of this .x3d_ProjectiveTexture)
          gl .uniform1i (uniform, browser .getDefaultTexture2DUnit ());
 
-      gl .uniform1i  (this .x3d_TexCoordRamp, browser .getDefaultTexture2DUnit ());
+      gl .uniform1i (this .x3d_TexCoordRamp, browser .getDefaultTexture2DUnit ());
    },
    getUniformLocation: function (gl, program, name, depreciated)
    {
@@ -1041,8 +1045,7 @@ X3DProgrammableShaderObject .prototype =
 
          // Fog
 
-         if (fogNode)
-            fogNode .setShaderUniforms (gl, this);
+         fogNode?.setShaderUniforms (gl, this);
 
          // Clip planes and local lights
 
@@ -1059,8 +1062,7 @@ X3DProgrammableShaderObject .prototype =
 
          // Style Properties
 
-         if (stylePropertiesNode)
-            stylePropertiesNode .setShaderUniforms (gl, this);
+         stylePropertiesNode?.setShaderUniforms (gl, this);
 
          // Material
 
@@ -1068,8 +1070,7 @@ X3DProgrammableShaderObject .prototype =
 
          // Texture
 
-         if (textureNode)
-            textureNode .setShaderUniforms (gl, this, renderObject);
+         textureNode?.setShaderUniforms (gl, this, renderObject);
 
          appearanceNode  .getTextureTransform ()  .setShaderUniforms (gl, this);
          geometryContext .getTextureCoordinate () .setShaderUniforms (gl, this);

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

@@ -71,29 +71,30 @@ Material .prototype = Object .assign (Object .create (X3DOneSidedMaterialNode .p
 {
    constructor: Material,
    [Symbol .for ("X_ITE.X3DBaseNode.fieldDefinitions")]: new FieldDefinitionArray ([
-      new X3DFieldDefinition (X3DConstants .inputOutput, "metadata",                new Fields .SFNode ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "ambientIntensity",        new Fields .SFFloat (0.2)),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "ambientTextureMapping",   new Fields .SFString ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "ambientTexture",          new Fields .SFNode ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "diffuseColor",            new Fields .SFColor (0.8, 0.8, 0.8)),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "diffuseTextureMapping",   new Fields .SFString ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "diffuseTexture",          new Fields .SFNode ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "specularColor",           new Fields .SFColor ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "specularTextureMapping",  new Fields .SFString ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "specularTexture",         new Fields .SFNode ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveColor",           new Fields .SFColor ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveTextureMapping",  new Fields .SFString ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveTexture",         new Fields .SFNode ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "shininess",               new Fields .SFFloat (0.2)),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "shininessTextureMapping", new Fields .SFString ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "shininessTexture",        new Fields .SFNode ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "occlusionStrength",       new Fields .SFFloat (1)),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "occlusionTextureMapping", new Fields .SFString ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "occlusionTexture",        new Fields .SFNode ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "normalScale",             new Fields .SFFloat (1)),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "normalTextureMapping",    new Fields .SFString ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "normalTexture",           new Fields .SFNode ()),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "transparency",            new Fields .SFFloat ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "metadata",                 new Fields .SFNode ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "ambientIntensity",         new Fields .SFFloat (0.2)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "ambientTextureMapping",    new Fields .SFString ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "ambientTexture",           new Fields .SFNode ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "diffuseColor",             new Fields .SFColor (0.8, 0.8, 0.8)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "diffuseTextureMapping",    new Fields .SFString ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "diffuseTexture",           new Fields .SFNode ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "specularColor",            new Fields .SFColor ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "specularTextureMapping",   new Fields .SFString ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "specularTexture",          new Fields .SFNode ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveColor",            new Fields .SFColor ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveStrength",         new Fields .SFFloat (1)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveTextureMapping",   new Fields .SFString ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveTexture",          new Fields .SFNode ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "shininess",                new Fields .SFFloat (0.2)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "shininessTextureMapping",  new Fields .SFString ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "shininessTexture",         new Fields .SFNode ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "occlusionStrength",        new Fields .SFFloat (1)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "occlusionTextureMapping",  new Fields .SFString ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "occlusionTexture",         new Fields .SFNode ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "normalScale",              new Fields .SFFloat (1)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "normalTextureMapping",     new Fields .SFString ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "normalTexture",            new Fields .SFNode ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "transparency",             new Fields .SFFloat ()),
    ]),
    getTypeName: function ()
    {
@@ -213,6 +214,10 @@ Material .prototype = Object .assign (Object .create (X3DOneSidedMaterialNode .p
       this .setTransparent (!!(this .getTransparency () ||
                               (this .diffuseTextureNode && this .diffuseTextureNode .isTransparent ())));
    },
+   getBaseTexture: function ()
+   {
+      return this .diffuseTexture;
+   },
    getTextureIndices: (function ()
    {
       let i = 0;

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

@@ -71,6 +71,7 @@ PhysicalMaterial .prototype = Object .assign (Object .create (X3DOneSidedMateria
       new X3DFieldDefinition (X3DConstants .inputOutput, "baseTextureMapping",              new Fields .SFString ()),
       new X3DFieldDefinition (X3DConstants .inputOutput, "baseTexture",                     new Fields .SFNode ()),
       new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveColor",                   new Fields .SFColor (0, 0, 0)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveStrength",                new Fields .SFFloat (1)),
       new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveTextureMapping",          new Fields .SFString ()),
       new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveTexture",                 new Fields .SFNode ()),
       new X3DFieldDefinition (X3DConstants .inputOutput, "metallic",                        new Fields .SFFloat (1)),
@@ -172,6 +173,10 @@ PhysicalMaterial .prototype = Object .assign (Object .create (X3DOneSidedMateria
       this .setTransparent (!!(this .getTransparency () ||
                               (this .baseTextureNode && this .baseTextureNode .isTransparent ())));
    },
+   getBaseTexture: function ()
+   {
+      return this .baseTextureNode;
+   },
    getTextureIndices: (function ()
    {
       let i = 0;

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

@@ -248,6 +248,7 @@ TwoSidedMaterial .prototype = Object .assign (Object .create (X3DMaterialNode .p
    {
       this .setTransparent (Boolean (this ._transparency .getValue () || (this ._separateBackColor .getValue () && this ._backTransparency .getValue ())));
    },
+   getBaseTexture: Material .prototype .getBaseTexture,
    getMaterialKey: Material .prototype .getMaterialKey,
    createShader: Material .prototype .createShader,
    setShaderUniforms: function (gl, shaderObject, renderObject, textureTransformMapping, textureCoordinateMapping, front)

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

@@ -64,6 +64,7 @@ UnlitMaterial .prototype = Object .assign (Object .create (X3DOneSidedMaterialNo
    [Symbol .for ("X_ITE.X3DBaseNode.fieldDefinitions")]: new FieldDefinitionArray ([
       new X3DFieldDefinition (X3DConstants .inputOutput, "metadata",               new Fields .SFNode ()),
       new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveColor",          new Fields .SFColor (1, 1, 1)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveStrength",       new Fields .SFFloat (1)),
       new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveTextureMapping", new Fields .SFString ()),
       new X3DFieldDefinition (X3DConstants .inputOutput, "emissiveTexture",        new Fields .SFNode ()),
       new X3DFieldDefinition (X3DConstants .inputOutput, "normalScale",            new Fields .SFFloat (1)),

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

@@ -88,6 +88,10 @@ X3DMaterialNode .prototype = Object .assign (Object .create (X3DAppearanceChildN
    {
       return this ._transparent .getValue ();
    },
+   getBaseTexture: function ()
+   {
+      return null;
+   },
    setTexture: function (index, textureNode)
    {
       const textureType = textureNode ? textureNode .getTextureType () - 1 : 0;
@@ -212,37 +216,35 @@ X3DMaterialNode .prototype = Object .assign (Object .create (X3DAppearanceChildN
             options .push ("X3D_STYLE_PROPERTIES");
 
          if (+this .textureBits)
-         {
             options .push ("X3D_MATERIAL_TEXTURES");
-            options .push ("X3D_NUM_TEXTURE_TRANSFORMS " + (appearanceNode .getTextureTransformMapping () .size || 1));
-            options .push ("X3D_NUM_TEXTURE_COORDINATES " + (geometryContext .getTextureCoordinateMapping () .size || 1));
+
+         if (renderContext .textureNode)
+         {
+            // ScreenText
+
+            options .push ("X3D_TEXTURE",
+                           "X3D_NUM_TEXTURES 1",
+                           "X3D_NUM_TEXTURE_TRANSFORMS 1",
+                           "X3D_NUM_TEXTURE_COORDINATES 1",
+                           "X3D_TEXTURE0_2D");
          }
          else
          {
-            if (renderContext .textureNode)
-            {
-               // ScreenText
-
-               options .push ("X3D_TEXTURE",
-                              "X3D_NUM_TEXTURES 1",
-                              "X3D_NUM_TEXTURE_TRANSFORMS 1",
-                              "X3D_NUM_TEXTURE_COORDINATES 1",
-                              "X3D_TEXTURE0_2D");
-            }
-            else if (+appearanceNode .getTextureBits ())
+            if (+appearanceNode .getTextureBits () && !this .getBaseTexture ())
             {
                const textureNode = appearanceNode .getTexture ();
 
                options .push ("X3D_TEXTURE");
-               options .push ("X3D_NUM_TEXTURES "            + textureNode .getCount ());
-               options .push ("X3D_NUM_TEXTURE_TRANSFORMS "  + textureNode .getCount ());
-               options .push ("X3D_NUM_TEXTURE_COORDINATES " + textureNode .getCount ());
-
-               textureNode .getShaderOptions (options);
+               options .push ("X3D_NUM_TEXTURES " + textureNode .getCount ());
 
                if (textureNode .getType () .includes (X3DConstants .MultiTexture))
                   options .push ("X3D_MULTI_TEXTURING");
+
+               textureNode .getShaderOptions (options);
             }
+
+            options .push ("X3D_NUM_TEXTURE_TRANSFORMS " + (appearanceNode .getTextureTransformMapping () .size || 1));
+            options .push ("X3D_NUM_TEXTURE_COORDINATES " + (geometryContext .textureCoordinateMapping .size || 1));
          }
 
          switch (shapeNode .getShapeKey ())

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

@@ -69,11 +69,12 @@ X3DOneSidedMaterialNode .prototype = Object .assign (Object .create (X3DMaterial
    {
       X3DMaterialNode .prototype .initialize .call (this);
 
-      this ._emissiveColor   .addInterest ("set_emissiveColor__",   this);
-      this ._emissiveTexture .addInterest ("set_emissiveTexture__", this);
-      this ._normalTexture   .addInterest ("set_normalTexture__",   this);
-      this ._transparency    .addInterest ("set_transparency__",    this);
-      this ._transparency    .addInterest ("set_transparent__",     this);
+      this ._emissiveColor    .addInterest ("set_emissiveColor__",   this);
+      this ._emissiveStrength .addInterest ("set_emissiveColor__",   this);
+      this ._emissiveTexture  .addInterest ("set_emissiveTexture__", this);
+      this ._normalTexture    .addInterest ("set_normalTexture__",   this);
+      this ._transparency     .addInterest ("set_transparency__",    this);
+      this ._transparency     .addInterest ("set_transparent__",     this);
 
       this .set_emissiveColor__ ();
       this .set_emissiveTexture__ ();
@@ -86,12 +87,13 @@ X3DOneSidedMaterialNode .prototype = Object .assign (Object .create (X3DMaterial
       //this .emissiveColor .set (this ._emissiveColor .getValue ());
 
       const
-         emissiveColor  = this .emissiveColor,
-         emissiveColor_ = this ._emissiveColor .getValue ();
+         emissiveColor    = this .emissiveColor,
+         emissiveColor_   = this ._emissiveColor .getValue (),
+         emissiveStrength = this ._emissiveStrength .getValue ();
 
-      emissiveColor [0] = emissiveColor_ .r;
-      emissiveColor [1] = emissiveColor_ .g;
-      emissiveColor [2] = emissiveColor_ .b;
+      emissiveColor [0] = emissiveColor_ .r * emissiveStrength;
+      emissiveColor [1] = emissiveColor_ .g * emissiveStrength;
+      emissiveColor [2] = emissiveColor_ .b * emissiveStrength;
    },
    set_emissiveTexture__: function ()
    {
@@ -113,6 +115,10 @@ X3DOneSidedMaterialNode .prototype = Object .assign (Object .create (X3DMaterial
    {
       this .setTransparent (Boolean (this .transparency));
    },
+   getBaseTexture: function ()
+   {
+      return this .getEmissiveTexture ();
+   },
    getEmissiveTexture: function ()
    {
       return this .emissiveTextureNode;

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

@@ -62,7 +62,6 @@ function ImageTexture (executionContext)
    this .addType (X3DConstants .ImageTexture);
 
    this .image    = $("<img></img>");
-   this .canvas   = $("<canvas></canvas>");
    this .urlStack = new Fields .MFString ();
 }
 
@@ -77,6 +76,7 @@ ImageTexture .prototype = Object .assign (Object .create (X3DTexture2DNode .prot
       new X3DFieldDefinition (X3DConstants .inputOutput,    "url",                  new Fields .MFString ()),
       new X3DFieldDefinition (X3DConstants .inputOutput,    "autoRefresh",          new Fields .SFTime ()),
       new X3DFieldDefinition (X3DConstants .inputOutput,    "autoRefreshTimeLimit", new Fields .SFTime (3600)),
+      new X3DFieldDefinition (X3DConstants .initializeOnly, "flipVertically",       new Fields .SFBool ()),
       new X3DFieldDefinition (X3DConstants .initializeOnly, "repeatS",              new Fields .SFBool (true)),
       new X3DFieldDefinition (X3DConstants .initializeOnly, "repeatT",              new Fields .SFBool (true)),
       new X3DFieldDefinition (X3DConstants .initializeOnly, "textureProperties",    new Fields .SFNode ()),
@@ -98,6 +98,8 @@ ImageTexture .prototype = Object .assign (Object .create (X3DTexture2DNode .prot
       X3DTexture2DNode .prototype .initialize .call (this);
       X3DUrlObject     .prototype .initialize .call (this);
 
+      this ._flipVertically .addInterest ("set_url__", this);
+
       this .image .on ("load",        this .setImage .bind (this));
       this .image .on ("abort error", this .setError .bind (this));
       this .image .prop ("crossOrigin", "Anonymous");
@@ -145,7 +147,7 @@ ImageTexture .prototype = Object .assign (Object .create (X3DTexture2DNode .prot
 
       this .loadNext ();
    },
-   setImage: function ()
+   setImage: async function ()
    {
       if (DEBUG)
       {
@@ -156,69 +158,61 @@ ImageTexture .prototype = Object .assign (Object .create (X3DTexture2DNode .prot
       try
       {
          const
-            gl     = this .getBrowser () .getContext (),
-            image  = this .image [0],
-            canvas = this .canvas [0],
-            cx     = canvas .getContext ("2d", { willReadFrequently: true });
-
-         let
-            width  = image .width,
-            height = image .height;
+            gl    = this .getBrowser () .getContext (),
+            image = this .image [0];
 
          // https://developer.mozilla.org/en-US/docs/Web/API/createImageBitmap
          // createImageBitmap
 
-         // Scale image if needed and flip vertically.
-
-         if (gl .getVersion () >= 2 || (Algorithm .isPowerOfTwo (width) && Algorithm .isPowerOfTwo (height)))
+         if (gl .getVersion () === 1 && !(Algorithm .isPowerOfTwo (image .width) && Algorithm .isPowerOfTwo (image .height)))
          {
-            // Flip Y
+            const
+               canvas = document .createElement ("canvas"),
+               cx     = canvas .getContext ("2d", { willReadFrequently: true }),
+               width  = Algorithm .nextPowerOfTwo (image .width),
+               height = Algorithm .nextPowerOfTwo (image .height);
+
+            // Flip Y and scale image to next power of two if needed.
 
             canvas .width  = width;
             canvas .height = height;
 
             cx .clearRect (0, 0, width, height);
             cx .save ();
-            cx .translate (0, height);
-            cx .scale (1, -1);
-            cx .drawImage (image, 0, 0);
-            cx .restore ();
-         }
-         else
-         {
-            // Flip Y and scale image to next power of two.
 
-            width  = Algorithm .nextPowerOfTwo (width);
-            height = Algorithm .nextPowerOfTwo (height);
-
-            canvas .width  = width;
-            canvas .height = height;
+            if (!this ._flipVertically .getValue ())
+            {
+               cx .translate (0, height);
+               cx .scale (1, -1);
+            }
 
-            cx .clearRect (0, 0, width, height);
-            cx .save ();
-            cx .translate (0, height);
-            cx .scale (1, -1);
             cx .drawImage (image, 0, 0, image .width, image .height, 0, 0, width, height);
             cx .restore ();
-         }
 
-         // Determine image alpha.
+            // Determine image alpha.
 
-         const data = cx .getImageData (0, 0, width, height) .data;
+            const
+               data        = cx .getImageData (0, 0, width, height, { premultipliedAlpha: false }) .data,
+               transparent = this .isImageTransparent (data);
 
-         let transparent = false;
+            // Upload image to GPU.
 
-         for (let i = 3, length = data .length; i < length; i += 4)
-         {
-            if (data [i] !== 255)
-            {
-               transparent = true;
-               break;
-            }
+            this .setTexture (width, height, transparent, data, false);
+            this .setLoadState (X3DConstants .COMPLETE_STATE);
          }
+         else
+         {
+            const
+               data        = await this .getImageData (image),
+               transparent = this .isImageTransparent (data),
+               width       = image .width,
+               height      = image .height;
+
+            // Upload image to GPU.
 
-         this .setTexture (width, height, transparent, data, false);
-         this .setLoadState (X3DConstants .COMPLETE_STATE);
+            this .setTexture (width, height, transparent, data, !this ._flipVertically .getValue ());
+            this .setLoadState (X3DConstants .COMPLETE_STATE);
+         }
       }
       catch (error)
       {
@@ -226,6 +220,54 @@ ImageTexture .prototype = Object .assign (Object .create (X3DTexture2DNode .prot
          this .setError ({ type: error .message });
       }
    },
+   getImageData: async function (image)
+   {
+      const
+         gl          = this .getBrowser () .getContext (),
+         framebuffer = gl .createFramebuffer (),
+         texture     = gl .createTexture (),
+         data        = new Uint8Array (image .width * image .height * 4);
+
+      gl .bindFramebuffer (gl.FRAMEBUFFER, framebuffer);
+      gl .bindTexture (gl.TEXTURE_2D, texture);
+      gl .framebufferTexture2D (gl.FRAMEBUFFER, gl .COLOR_ATTACHMENT0, gl .TEXTURE_2D, texture, 0);
+      gl .texImage2D (gl .TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+      await gl .readPixelsAsync (0, 0, image .width, image .height, gl.RGBA, gl.UNSIGNED_BYTE, data);
+      gl .deleteFramebuffer (framebuffer);
+      gl .deleteTexture (texture);
+
+      return data;
+   },
+   isImageTransparent: function (data)
+   {
+      for (let i = 3, length = data .length; i < length; i += 4)
+      {
+         if (data [i] !== 255)
+            return true;
+      }
+
+      return false;
+   },
+   flipImage (data, width, height, components)
+   {
+      const
+         height1_2   = height >> 1,
+         bytesPerRow = width * components,
+         tmp         = new Uint8Array (bytesPerRow);
+
+      for (let y = 0; y < height1_2; ++ y)
+      {
+         const
+            top    = y * bytesPerRow,
+            bottom = (height - y - 1) * bytesPerRow;
+
+         tmp .set (data .subarray (top, top + bytesPerRow));
+         data .copyWithin (top, bottom, bottom + bytesPerRow);
+         data .set (tmp, bottom);
+      }
+
+      return data;
+   },
    dispose: function ()
    {
       X3DUrlObject     .prototype .dispose .call (this);

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

@@ -93,6 +93,7 @@ MovieTexture .prototype = Object .assign (Object .create (X3DTexture2DNode .prot
       new X3DFieldDefinition (X3DConstants .outputOnly,     "isActive",             new Fields .SFBool ()),
       new X3DFieldDefinition (X3DConstants .outputOnly,     "elapsedTime",          new Fields .SFTime ()),
       new X3DFieldDefinition (X3DConstants .outputOnly,     "duration_changed",     new Fields .SFTime (-1)),
+      new X3DFieldDefinition (X3DConstants .initializeOnly, "flipVertically",       new Fields .SFBool ()),
       new X3DFieldDefinition (X3DConstants .initializeOnly, "repeatS",              new Fields .SFBool (true)),
       new X3DFieldDefinition (X3DConstants .initializeOnly, "repeatT",              new Fields .SFBool (true)),
       new X3DFieldDefinition (X3DConstants .initializeOnly, "textureProperties",    new Fields .SFNode ()),
@@ -219,7 +220,7 @@ MovieTexture .prototype = Object .assign (Object .create (X3DTexture2DNode .prot
             throw new Error ("The movie texture is a non power-of-two texture.");
 
          this .setMedia (this .video [0]);
-         this .setTexture (width, height, false, video, true);
+         this .setTexture (width, height, false, video, !this ._flipVertically .getValue ());
          this .setLoadState (X3DConstants .COMPLETE_STATE);
       }
       catch (error)
@@ -239,7 +240,7 @@ MovieTexture .prototype = Object .assign (Object .create (X3DTexture2DNode .prot
          gif .pause ();
 
          this .setMedia (gif);
-         this .setTexture (gif .get_canvas () .width, gif .get_canvas () .height, false, gif .get_frames () [0] .data, true);
+         this .setTexture (gif .get_canvas () .width, gif .get_canvas () .height, false, gif .get_frames () [0] .data, !this ._flipVertically .getValue ());
          this .setLoadState (X3DConstants .COMPLETE_STATE);
       }
       catch (error)
@@ -256,9 +257,9 @@ MovieTexture .prototype = Object .assign (Object .create (X3DTexture2DNode .prot
          return;
 
       if (this .gif)
-         this .updateTexture (this .gif .currentFrame .data, true);
+         this .updateTexture (this .gif .currentFrame .data, !this ._flipVertically .getValue ());
       else
-         this .updateTexture (this .video [0], true);
+         this .updateTexture (this .video [0], !this ._flipVertically .getValue ());
    },
    traverse: X3DTexture2DNode .prototype .traverse,
    dispose: function ()

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

@@ -63,6 +63,9 @@ function MultiTexture (executionContext)
 
    this .addChildObjects ("loadState", new Fields .SFInt32 (X3DConstants .NOT_STARTED_STATE));
 
+   const browser = this .getBrowser ();
+
+   this .maxTextures  = browser .getMaxTextures ()
    this .color        = new Float32Array (4);
    this .modes        = [ ];
    this .alphaModes   = [ ];
@@ -118,7 +121,7 @@ MultiTexture .prototype = Object .assign (Object .create (X3DTextureNode .protot
    },
    getCount: function ()
    {
-      return Math .min (this .getBrowser () .getMaxTextures (), this .textureNodes .length);
+      return Math .min (this .maxTextures, this .textureNodes .length);
    },
    getMode: function (index)
    {
@@ -281,7 +284,7 @@ MultiTexture .prototype = Object .assign (Object .create (X3DTextureNode .protot
    updateTextureBits: function (textureBits)
    {
       const
-         maxTextures  = this .getBrowser () .getMaxTextures (),
+         maxTextures  = this .maxTextures,
          textureNodes = this .textureNodes,
          channels     = Math .min (maxTextures, textureNodes .length);
 
@@ -294,7 +297,7 @@ MultiTexture .prototype = Object .assign (Object .create (X3DTextureNode .protot
    {
       const
          textureNodes = this .textureNodes,
-         channels     = Math .min (this .getBrowser () .getMaxTextures (), textureNodes .length);
+         channels     = Math .min (this .maxTextures, textureNodes .length);
 
       for (let i = 0; i < channels; ++ i)
          textureNodes [i] .getShaderOptions (options, i);
@@ -308,7 +311,7 @@ MultiTexture .prototype = Object .assign (Object .create (X3DTextureNode .protot
    {
       const
          textureNodes = this .textureNodes,
-         channels     = Math .min (this .getBrowser () .getMaxTextures (), textureNodes .length);
+         channels     = Math .min (this .maxTextures, textureNodes .length);
 
       gl .uniform4fv (shaderObject .x3d_MultiTextureColor, this .color);