Standardise texture update in Shader.initSampler2D.

changelog/3.90/CHANGELOG-v3.90.md

@@ -2,6 +2,12 @@
 
 # New Features
 
+# WebGL Rendering Updates
+
+* `WebGLTextureWrapper.update` expanded:
+  * `source` parameter is now type `?object`, so it can be used for anything that is valid in the constructor.
+  * New `format` parameter can update the texture format.
+
 # Updates
 
 # Bug Fixes

src/gameobjects/shader/Shader.js

@@ -942,17 +942,13 @@ var Shader = new Class({
             return;
         }
 
-        var gl = this.gl;
-
-        gl.activeTexture(gl.TEXTURE0 + this._textureCount);
-        gl.bindTexture(gl.TEXTURE_2D, uniform.value.webGLTexture);
-
         //  Extended texture data
 
         var data = uniform.textureData;
 
         if (data && !uniform.value.isRenderTexture)
         {
+            var gl = this.gl;
             var wrapper = uniform.value;
 
             // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D
@@ -966,45 +962,24 @@ var Shader = new Class({
             var wrapS = gl[GetFastValue(data, 'wrapS', 'repeat').toUpperCase()];
             var wrapT = gl[GetFastValue(data, 'wrapT', 'repeat').toUpperCase()];
             var format = gl[GetFastValue(data, 'format', 'rgba').toUpperCase()];
+            var flipY = GetFastValue(data, 'flipY', false);
+            var width = GetFastValue(data, 'width', wrapper.width);
+            var height = GetFastValue(data, 'height', wrapper.height);
+            var source = GetFastValue(data, 'source', wrapper.pixels);
 
             if (data.repeat)
             {
                 wrapS = gl.REPEAT;
                 wrapT = gl.REPEAT;
             }
 
-            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, !!data.flipY);
-
             if (data.width)
             {
-                var width = GetFastValue(data, 'width', 512);
-                var height = GetFastValue(data, 'height', 2);
-                var border = GetFastValue(data, 'border', 0);
-
-                //  texImage2D(GLenum target, GLint level, GLenum internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, ArrayBufferView? pixels)
-                gl.texImage2D(gl.TEXTURE_2D, 0, format, width, height, border, format, gl.UNSIGNED_BYTE, null);
-                wrapper.width = width;
-                wrapper.height = height;
-            }
-            else
-            {
-                //  texImage2D(GLenum target, GLint level, GLenum internalformat, GLenum format, GLenum type, ImageData? pixels)
-                gl.texImage2D(gl.TEXTURE_2D, 0, format, gl.RGBA, gl.UNSIGNED_BYTE, uniform.source);
+                // If the uniform has resolution, use a blank texture.
+                source = null;
             }
 
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrapS);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrapT);
-
-            // Update texture wrapper.
-            wrapper.magFilter = magFilter;
-            wrapper.minFilter = minFilter;
-            wrapper.wrapS = wrapS;
-            wrapper.wrapT = wrapT;
-            wrapper.format = format;
-            wrapper.flipY = !!data.flipY;
-            wrapper.pixels = uniform.source;
+            wrapper.update(source, width, height, flipY, wrapS, wrapT, minFilter, magFilter, format);
         }
 
         this.renderer.setProgram(this.program);

src/renderer/webgl/WebGLRenderer.js

@@ -2980,7 +2980,7 @@ var WebGLRenderer = new Class({
         }
         else
         {
-            dstTexture.update(srcCanvas, width, height, flipY, wrapping, wrapping, minFilter, magFilter);
+            dstTexture.update(srcCanvas, width, height, flipY, wrapping, wrapping, minFilter, magFilter, dstTexture.format);
 
             return dstTexture;
         }
@@ -3075,7 +3075,7 @@ var WebGLRenderer = new Class({
         }
         else
         {
-            dstTexture.update(srcVideo, width, height, flipY, wrapping, wrapping, minFilter, magFilter);
+            dstTexture.update(srcVideo, width, height, flipY, wrapping, wrapping, minFilter, magFilter, dstTexture.format);
 
             return dstTexture;
         }

src/renderer/webgl/wrappers/WebGLTextureWrapper.js

@@ -246,16 +246,17 @@ var WebGLTextureWrapper = new Class({
      * @method Phaser.Renderer.WebGL.Wrappers.WebGLTextureWrapper#update
      * @since 3.80.0
      *
-     * @param {HTMLCanvasElement|HTMLVideoElement} source - The source to update the WebGLTexture with.
+     * @param {?object} source - The source to update the WebGLTexture with.
      * @param {number} width - The new width of the WebGLTexture.
      * @param {number} height - The new height of the WebGLTexture.
      * @param {boolean} flipY - Should the WebGLTexture set `UNPACK_MULTIPLY_FLIP_Y`?
      * @param {number} wrapS - The new wrapping mode for the WebGLTexture.
      * @param {number} wrapT - The new wrapping mode for the WebGLTexture.
      * @param {number} minFilter - The new minification filter for the WebGLTexture.
      * @param {number} magFilter - The new magnification filter for the WebGLTexture.
+     * @param {number} format - The new format for the WebGLTexture.
      */
-    update: function (source, width, height, flipY, wrapS, wrapT, minFilter, magFilter)
+    update: function (source, width, height, flipY, wrapS, wrapT, minFilter, magFilter, format)
     {
         if (width === 0 || height === 0)
         {
@@ -271,6 +272,7 @@ var WebGLTextureWrapper = new Class({
         this.wrapT = wrapT;
         this.minFilter = minFilter;
         this.magFilter = magFilter;
+        this.format = format;
 
         var gl = this.gl;