The WebGLRenderer method canvasToTexture has a new optional argument noRepeat which will stop it from using gl.REPEAT entirely. This is now used by the Text object to avoid it potentially switching between a REPEAT and CLAMP texture, causing texture black-outs

CHANGELOG.md

@@ -15,7 +15,8 @@
 * `TileSprite.setFrame` has had both the `updateSize` and `updateOrigin` arguments removed as they didn't do anything for TileSprites and were misleading.
 * `CameraManager.remove` has a new argument `runDestroy` which, if set, will automatically call `Camera.destroy` on the Cameras removed from the Camera Manager. You should nearly always allow this to happen (thanks jamespierce)
 * Device.OS has been restructured to allow fake UAs from Chrome dev tools to register iOS devices.
-* Texture batching during the batch flush has been implemented in the TextureTintPipeline which resolves the issues of very low frame rates, especially on iOS devices, when using non-batched textures such as those used by Text or TileSprites. Fix #4110 #4086 (thanks @ivan @sachinhosmani   @maximtsai @alexeymolchan)
+* Texture batching during the batch flush has been implemented in the TextureTintPipeline which resolves the issues of very low frame rates, especially on iOS devices, when using non-batched textures such as those used by Text or TileSprites. Fix #4110 #4086 (thanks @ivanpopelyshev @sachinhosmani   @maximtsai @alexeymolchan)
+* The WebGLRenderer method `canvasToTexture` has a new optional argument `noRepeat` which will stop it from using `gl.REPEAT` entirely. This is now used by the Text object to avoid it potentially switching between a REPEAT and CLAMP texture, causing texture black-outs (thanks @ivanpopelyshev)
 
 ### Bug Fixes
 
@@ -23,7 +24,6 @@
 * If you set `pixelArt` to true in your game config (or `antialias` to false) then TileSprites will now respect this when using the Canvas Renderer and disable smoothing on the internal fill canvas.
 * TileSprites that were set to be interactive before they had rendered once wouldn't receive a valid input hit area, causing input to fail. They now define their size immediately, allowing them to be made interactive without having rendered. Fix #4085 (thanks @DotTheGreat)
 * The Particle Emitter Manager has been given a NOOP method called `setBlendMode` to stop warnings from being thrown if you added an emitter to a Container in the Canvas renderer. Fix #4083 (thanks @maximtsai)
-* 
 
 ### Examples and TypeScript
 

src/gameobjects/text/static/Text.js

@@ -253,6 +253,14 @@ var Text = new Class({
         //  Set the resolution
         this.frame.source.resolution = this.style.resolution;
 
+        if (this.renderer && this.renderer.gl)
+        {
+            //  Clear the default 1x1 glTexture, as we override it later
+            this.renderer.deleteTexture(this.frame.source.glTexture);
+
+            this.frame.source.glTexture = null;
+        }
+
         this.initRTL();
 
         if (style && style.padding)
@@ -1168,7 +1176,7 @@ var Text = new Class({
 
         if (this.renderer.gl)
         {
-            this.frame.source.glTexture = this.renderer.canvasToTexture(canvas, this.frame.source.glTexture);
+            this.frame.source.glTexture = this.renderer.canvasToTexture(canvas, this.frame.source.glTexture, true);
 
             this.frame.glTexture = this.frame.source.glTexture;
         }

src/renderer/webgl/WebGLRenderer.js

@@ -1824,28 +1824,40 @@ var WebGLRenderer = new Class({
      *
      * @param {HTMLCanvasElement} srcCanvas - The Canvas element that will be used to populate the texture.
      * @param {WebGLTexture} [dstTexture] - Is this going to replace an existing texture? If so, pass it here.
+     * @param {boolean} [noRepeat=false] - Should this canvas never be allowed to set REPEAT? (such as for Text objects)
      *
      * @return {WebGLTexture} The newly created WebGL Texture.
      */
-    canvasToTexture: function (srcCanvas, dstTexture)
+    canvasToTexture: function (srcCanvas, dstTexture, noRepeat)
     {
+        if (noRepeat === undefined) { noRepeat = false; }
+
         var gl = this.gl;
 
-        var wrapping = gl.CLAMP_TO_EDGE;
-
-        if (IsSizePowerOfTwo(srcCanvas.width, srcCanvas.height))
+        if (!dstTexture)
         {
-            wrapping = gl.REPEAT;
+            var wrapping = gl.CLAMP_TO_EDGE;
+
+            if (!noRepeat && IsSizePowerOfTwo(srcCanvas.width, srcCanvas.height))
+            {
+                wrapping = gl.REPEAT;
+            }
+
+            dstTexture = this.createTexture2D(0, gl.NEAREST, gl.NEAREST, wrapping, wrapping, gl.RGBA, srcCanvas, srcCanvas.width, srcCanvas.height, true);
+        }
+        else
+        {
+            this.setTexture2D(dstTexture, 0);
+
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, srcCanvas);
+
+            dstTexture.width = srcCanvas.width;
+            dstTexture.height = srcCanvas.height;
+
+            this.setTexture2D(null, 0);
         }
 
-        var newTexture = this.createTexture2D(0, gl.NEAREST, gl.NEAREST, wrapping, wrapping, gl.RGBA, srcCanvas, srcCanvas.width, srcCanvas.height, true);
-
-        if (newTexture && dstTexture)
-        {
-            this.deleteTexture(dstTexture);
-        }
-
-        return newTexture;
+        return dstTexture;
     },
 
     /**

src/textures/TextureSource.js

@@ -238,6 +238,7 @@ var TextureSource = new Class({
 
             //  Update all the Frames using this TextureSource
 
+            /*
             var index = this.texture.getTextureSourceIndex(this);
             
             var frames = this.texture.getFramesFromTextureSource(index, true);
@@ -246,6 +247,7 @@ var TextureSource = new Class({
             {
                 frames[i].glTexture = this.glTexture;
             }
+            */
         }
     },