Texture Filtering and Repeat property

Author: bitnenfer

v3/src/gameobjects/effectlayer/EffectLayer.js

@@ -32,7 +32,9 @@ var EffectLayer = new Class({
     {
         GameObject.call(this, state, 'EffectLayer');
 
+        var pot = ((width & (width - 1)) == 0 && (height & (height - 1)) == 0);
         var resourceManager = state.game.renderer.resourceManager;
+        var wrap = pot ? gl.REPEAT : gl.CLAMP_TO_EDGE;
         var gl;
 
         this.dstRenderTarget = null;
@@ -52,7 +54,7 @@ var EffectLayer = new Class({
             this.renderTexture = resourceManager.createTexture(
                 0,
                 gl.LINEAR, gl.LINEAR,
-                gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE,
+                wrap, wrap,
                 gl.RGBA,
                 null, width, height
             );

v3/src/gameobjects/renderpass/RenderPass.js

@@ -36,6 +36,8 @@ var RenderPass = new Class({
         GameObject.call(this, state, 'RenderPass');
 
         var resourceManager = state.game.renderer.resourceManager;
+        var pot = ((width & (width - 1)) == 0 && (height & (height - 1)) == 0);
+        var wrap = pot ? gl.REPEAT : gl.CLAMP_TO_EDGE;
         var gl;
 
         this.renderer = state.game.renderer;
@@ -48,7 +50,7 @@ var RenderPass = new Class({
         {
             gl = state.game.renderer.gl;
             this.passShader = resourceManager.createShader(shaderName, {vert: TexturedAndNormalizedTintedShader.vert, frag: fragmentShader});
-            this.renderTexture = resourceManager.createTexture(0, gl.LINEAR, gl.LINEAR, gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE, gl.RGBA, null, width, height);
+            this.renderTexture = resourceManager.createTexture(0, gl.LINEAR, gl.LINEAR, wrap, wrap, gl.RGBA, null, width, height);
             this.passRenderTarget = resourceManager.createRenderTarget(width, height, this.renderTexture, null);
             state.game.renderer.currentTexture = null; // force rebinding of prev texture
         }

v3/src/gameobjects/tilesprite/TileSprite.js

@@ -29,7 +29,6 @@ var TileSprite = new Class({
     function TileSprite (state, x, y, width, height, texture, frame)
     {
         var resourceManager = state.game.renderer.resourceManager;
-        var gl;
 
         GameObject.call(this, state, 'TileSprite');
 

v3/src/renderer/webgl/WebGLRenderer.js

@@ -122,8 +122,10 @@ WebGLRenderer.prototype = {
 
     createTexture: function (source, width, height)
     {
+        var pot = ((width & (width - 1)) == 0 && (height & (height - 1)) == 0);
         var gl = this.gl;
         var filter = gl.NEAREST;
+        var wrap = pot ? gl.REPEAT : gl.CLAMP_TO_EDGE;
 
         if (!source.glTexture)
         {
@@ -143,8 +145,8 @@ WebGLRenderer.prototype = {
                     0,
                     filter,
                     filter,
-                    gl.CLAMP_TO_EDGE,
-                    gl.CLAMP_TO_EDGE,
+                    wrap,
+                    wrap,
                     gl.RGBA,
                     null,
                     width, height
@@ -156,8 +158,8 @@ WebGLRenderer.prototype = {
                     0,
                     filter,
                     filter,
-                    gl.CLAMP_TO_EDGE,
-                    gl.CLAMP_TO_EDGE,
+                    wrap,
+                    wrap,
                     gl.RGBA,
                     source.image
                 );
@@ -434,6 +436,22 @@ WebGLRenderer.prototype = {
         return null;
     },
 
+    setTextureFilterMode: function (texture, filterMode)
+    {
+        var gl = this.gl;
+        var glFilter = [gl.LINEAR, gl.NEAREST][filterMode];
+
+        gl.bindTexture(gl.TEXTURE_2D, texture.texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, glFilter);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, glFilter);
+        if (this.currentTexture !== null)
+            gl.bindTexture(gl.TEXTURE_2D, this.currentTexture.texture);
+        else
+            gl.bindTexture(gl.TEXTURE_2D, null);
+
+        return texture;
+    },
+
     uploadCanvasToGPU: function (srcCanvas, dstTexture, shouldUpdateResource)
     {
         var gl = this.gl;

v3/src/textures/FilterMode.js

@@ -0,0 +1,8 @@
+var CONST = {
+
+    LINEAR: 0,
+    NEAREST: 1
+    
+};
+
+module.exports = CONST;

v3/src/textures/Texture.js

@@ -171,6 +171,14 @@ Texture.prototype = {
     destroy: function ()
     {
         //  TODO
+    },
+
+    setFilter: function (filterMode)
+    {
+        for (var i = 0; i < this.source.length; i++)
+        {
+            this.source[i].setFilter(filterMode);
+        }
     }
 
 };

v3/src/textures/TextureSource.js

@@ -127,4 +127,13 @@ var TextureSource = function (texture, source, width, height)
     }
 };
 
+TextureSource.prototype.setFilter = function (filterMode)
+{
+    var game = this.texture.manager.game;
+    if (game.config.renderType === CONST.WEBGL)
+    {
+        game.renderer.setTextureFilterMode(this.glTexture, filterMode);
+    }
+};
+
 module.exports = TextureSource;