BlitterPipeline added

src/gameobjects/blitter/BlitterWebGLRenderer.js

@@ -7,7 +7,7 @@ var BlitterWebGLRenderer = function (renderer, gameObject, interpolationPercenta
         return;
     }
 
-    renderer.blitterBatch.drawBlitter(gameObject, camera)
+    renderer.pipelines.BlitterPipeline.drawBlitter(gameObject, camera);
 };
 
 module.exports = BlitterWebGLRenderer;

src/gameobjects/index.js

@@ -11,61 +11,61 @@ var GameObjects = {
 
     Components: require('./components'),
 
-    BitmapText: require('./bitmaptext/static/BitmapText'),
+    //BitmapText: require('./bitmaptext/static/BitmapText'),
     Blitter: require('./blitter/Blitter'),
-    Container: require('./container/Container'),
+    //Container: require('./container/Container'),
-    DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapText'),
+    //DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapText'),
-    DynamicTilemapLayer: require('./tilemap/dynamiclayer/DynamicTilemapLayer'),
+    //DynamicTilemapLayer: require('./tilemap/dynamiclayer/DynamicTilemapLayer'),
-    Graphics: require('./graphics/Graphics.js'),
+    //Graphics: require('./graphics/Graphics.js'),
-    Group: require('./group/Group'),
+    //Group: require('./group/Group'),
-    Image: require('./image/Image'),
+    //Image: require('./image/Image'),
-    Particles: require('./particles/ParticleEmitterManager'),
+    //Particles: require('./particles/ParticleEmitterManager'),
-    PathFollower: require('./pathfollower/PathFollower'),
+    //PathFollower: require('./pathfollower/PathFollower'),
-    Sprite3D: require('./sprite3d/Sprite3D'),
+    //Sprite3D: require('./sprite3d/Sprite3D'),
-    Sprite: require('./sprite/Sprite'),
+    //Sprite: require('./sprite/Sprite'),
-    StaticTilemapLayer: require('./tilemap/staticlayer/StaticTilemapLayer'),
+    //StaticTilemapLayer: require('./tilemap/staticlayer/StaticTilemapLayer'),
-    Text: require('./text/static/Text'),
+    //Text: require('./text/static/Text'),
-    Tile: require('./tilemap/Tile'),
+    //Tile: require('./tilemap/Tile'),
-    Tilemap: require('./tilemap/Tilemap'),
+    //Tilemap: require('./tilemap/Tilemap'),
-    Tileset: require('./tilemap/Tileset'),
+    //Tileset: require('./tilemap/Tileset'),
-    TileSprite: require('./tilesprite/TileSprite'),
+    //TileSprite: require('./tilesprite/TileSprite'),
-    Zone: require('./zone/Zone'),
+    //Zone: require('./zone/Zone'),
 
     //  Game Object Factories
 
     Factories: {
         Blitter: require('./blitter/BlitterFactory'),
-        Container: require('./container/ContainerFactory'),
+        //Container: require('./container/ContainerFactory'),
-        DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextFactory'),
+        //DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextFactory'),
-        Graphics: require('./graphics/GraphicsFactory'),
+        //Graphics: require('./graphics/GraphicsFactory'),
-        Group: require('./group/GroupFactory'),
+        //Group: require('./group/GroupFactory'),
-        Image: require('./image/ImageFactory'),
+        //Image: require('./image/ImageFactory'),
-        Particles: require('./particles/ParticleManagerFactory'),
+        //Particles: require('./particles/ParticleManagerFactory'),
-        PathFollower: require('./pathfollower/PathFollowerFactory'),
+        //PathFollower: require('./pathfollower/PathFollowerFactory'),
-        Sprite: require('./sprite/SpriteFactory'),
+        //Sprite: require('./sprite/SpriteFactory'),
-        Sprite3D: require('./sprite3d/Sprite3DFactory'),
+        //Sprite3D: require('./sprite3d/Sprite3DFactory'),
-        StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'),
+        //StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'),
-        Text: require('./text/static/TextFactory'),
+        //Text: require('./text/static/TextFactory'),
-        Tilemap: require('./tilemap/TilemapFactory'),
+        //Tilemap: require('./tilemap/TilemapFactory'),
-        TileSprite: require('./tilesprite/TileSpriteFactory'),
+        //TileSprite: require('./tilesprite/TileSpriteFactory'),
-        Zone: require('./zone/ZoneFactory')
+        //Zone: require('./zone/ZoneFactory')
     },
 
     Creators: {
         Blitter: require('./blitter/BlitterCreator'),
-        Container: require('./container/ContainerCreator'),
+        //Container: require('./container/ContainerCreator'),
-        DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextCreator'),
+        //DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextCreator'),
-        Graphics: require('./graphics/GraphicsCreator'),
+        //Graphics: require('./graphics/GraphicsCreator'),
-        Group: require('./group/GroupCreator'),
+        //Group: require('./group/GroupCreator'),
-        Image: require('./image/ImageCreator'),
+        //Image: require('./image/ImageCreator'),
-        Particles: require('./particles/ParticleManagerCreator'),
+        //Particles: require('./particles/ParticleManagerCreator'),
-        Sprite: require('./sprite/SpriteCreator'),
+        //Sprite: require('./sprite/SpriteCreator'),
-        Sprite3D: require('./sprite3d/Sprite3DCreator'),
+        //Sprite3D: require('./sprite3d/Sprite3DCreator'),
-        StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'),
+        //StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'),
-        Text: require('./text/static/TextCreator'),
+        //Text: require('./text/static/TextCreator'),
-        Tilemap: require('./tilemap/TilemapCreator'),
+        //Tilemap: require('./tilemap/TilemapCreator'),
-        TileSprite: require('./tilesprite/TileSpriteCreator'),
+        //TileSprite: require('./tilesprite/TileSpriteCreator'),
-        Zone: require('./zone/ZoneCreator')
+        //Zone: require('./zone/ZoneCreator')
     }
 
 };
@@ -73,23 +73,19 @@ var GameObjects = {
 if (WEBGL_RENDERER)
 {
     //  WebGL only Game Objects
-    GameObjects.EffectLayer = require('./effectlayer/EffectLayer');
+    //GameObjects.LightLayer = require('./lightlayer/LightLayer');
-    GameObjects.LightLayer = require('./lightlayer/LightLayer');
+    //GameObjects.Mesh = require('./mesh/Mesh');
-    GameObjects.Mesh = require('./mesh/Mesh');
+    //GameObjects.Quad = require('./quad/Quad');
-    GameObjects.Quad = require('./quad/Quad');
-    GameObjects.RenderPass = require('./renderpass/RenderPass.js');
 
-    GameObjects.Factories.EffectLayer = require('./effectlayer/EffectLayerFactory');
+    //GameObjects.Factories.EffectLayer = require('./effectlayer/EffectLayerFactory');
-    GameObjects.Factories.LightLayer = require('./lightlayer/LightLayerFactory');
+    //GameObjects.Factories.LightLayer = require('./lightlayer/LightLayerFactory');
-    GameObjects.Factories.Mesh = require('./mesh/MeshFactory');
+    //GameObjects.Factories.Mesh = require('./mesh/MeshFactory');
-    GameObjects.Factories.Quad = require('./quad/QuadFactory');
+    //GameObjects.Factories.Quad = require('./quad/QuadFactory');
-    GameObjects.Factories.RenderPass = require('./renderpass/RenderPassFactory');
 
-    GameObjects.Creators.EffectLayer = require('./effectlayer/EffectLayerCreator');
+    //GameObjects.Creators.EffectLayer = require('./effectlayer/EffectLayerCreator');
-    GameObjects.Creators.LightLayer = require('./lightlayer/LightLayerCreator');
+    //GameObjects.Creators.LightLayer = require('./lightlayer/LightLayerCreator');
-    GameObjects.Creators.Mesh = require('./mesh/MeshCreator');
+    //GameObjects.Creators.Mesh = require('./mesh/MeshCreator');
-    GameObjects.Creators.Quad = require('./quad/QuadCreator');
+    //GameObjects.Creators.Quad = require('./quad/QuadCreator');
-    GameObjects.Creators.RenderPass = require('./renderpass/RenderPassCreator');
 }
 
 module.exports = GameObjects;

src/renderer/webgl/WebGLPipeline.js

@@ -17,11 +17,13 @@ var WebGLPipeline = new Class({
         this.vertexCapacity = config.vertexCapacity;
         this.renderer = config.renderer;
         this.vertexData = new ArrayBuffer(config.vertexCapacity * config.vertexSize);
-        this.vertexBuffer = renderer.createVertexBuffer(this.vertexData.byteLength, gl.STREAM_DRAW);
+        this.vertexBuffer = this.renderer.createVertexBuffer(this.vertexData.byteLength, this.gl.STREAM_DRAW);
-        this.program = renderer.createProgram(config.shader.vert, config.shader.frag);
+        this.program = this.renderer.createProgram(config.shader.vert, config.shader.frag);
         this.attributes = config.attributes;
         this.vertexSize = config.vertexSize;
         this.topology = config.topology;
+        this.currentProgram = this.program;
+        this.bytes = new Uint8Array(this.vertexData);
     },
 
     shouldFlush: function ()
@@ -64,6 +66,8 @@ var WebGLPipeline = new Class({
             }
         }
 
+        this.currentProgram = program;
+
         return this;
     },
 
@@ -74,10 +78,11 @@ var WebGLPipeline = new Class({
         var vertexBuffer = this.vertexBuffer;
         var vertexData = this.vertexData;
         var topology = this.topology;
+        var vertexSize = this.vertexSize;
 
         if (vertexCount === 0) return;
 
-        gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertexData);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.bytes.subarray(0, vertexCount * vertexSize));
         gl.drawArrays(topology, 0, vertexCount);
 
         this.vertexCount = 0;
@@ -95,72 +100,6 @@ var WebGLPipeline = new Class({
         this.program = null;
         this.vertexBuffer = null;
 
-        return this;
-    },
-
-    setFloat1: function (name, x)
-    {
-        this.gl.uniform1f(this.gl.getUniformLocation(this.program, name), x);
-        return this;
-    },
-
-    setFloat2: function (name, x, y)
-    {
-        this.gl.uniform2f(this.gl.getUniformLocation(this.program, name), x, y);
-        return this;
-    },
-
-    setFloat3: function (name, x, y, z)
-    {
-        this.gl.uniform3f(this.gl.getUniformLocation(this.program, name), x, y, z);
-        return this;
-    },
-
-    setFloat4: function (name, x, y, z, w)
-    {
-        this.gl.uniform4f(this.gl.getUniformLocation(this.program, name), x, y, z, w);
-        return this;
-    },
-
-    setInt1: function (name, x)
-    {
-        this.gl.uniform1i(this.gl.getUniformLocation(this.program, name), x);
-        return this;
-    },
-
-    setInt2: function (name, x, y)
-    {
-        this.gl.uniform2i(this.gl.getUniformLocation(this.program, name), x, y);
-        return this;
-    },
-
-    setInt3: function (name, x, y, z)
-    {
-        this.gl.uniform3i(this.gl.getUniformLocation(this.program, name), x, y, z);
-        return this;
-    },
-
-    setInt4: function (name, x, y, z, w)
-    {
-        this.gl.uniform4i(this.gl.getUniformLocation(this.program, name), x, y, z, w);
-        return this;
-    },
-
-    setMatrix2: function (name, transpose, matrix)
-    {
-        this.gl.uniformMatrix2fv(this.gl.getUniformLocation(this.program, name), transpose, matrix);
-        return this;
-    },
-
-    setMatrix3: function (name, transpose, matrix)
-    {
-        this.gl.uniformMatrix2fv(this.gl.getUniformLocation(this.program, name), transpose, matrix);
-        return this;
-    },
-
-    setMatrix4: function (name, transpose, matrix)
-    {
-        this.gl.uniformMatrix2fv(this.gl.getUniformLocation(this.program, name), transpose, matrix);
         return this;
     }
 

src/renderer/webgl/WebGLRenderer.js

@@ -3,6 +3,9 @@ var CONST = require('../../const');
 var WebGLSnapshot = require('../snapshot/WebGLSnapshot');
 var IsSizePowerOfTwo = require('../../math/pow2/IsSizePowerOfTwo');
 
+// Default Pipelines
+var BlitterPipeline = require('./pipelines/BlitterPipeline');
+
 var WebGLRenderer = new Class({
 
     initialize:
@@ -51,9 +54,10 @@ var WebGLRenderer = new Class({
         this.currentTextures = new Array(16);
         this.currentFramebuffer = null;
         this.currentPipeline = null;
+        this.currentProgram = null;
         this.currentVertexBuffer = null;
         this.currentIndexBuffer = null;
-        this.currentBlendMode = CONST.BlendModes.NORMAL;
+        this.currentBlendMode = Infinity;
         this.currentScissorState = { enabled: false, x: 0, y: 0, w: 0, h: 0 };
 
         // Setup context lost and restore event listeners
@@ -87,6 +91,8 @@ var WebGLRenderer = new Class({
             throw new Error('This browser does not support WebGL. Try using the Canvas pipeline.');
         }
 
+        this.gl = gl;
+
         // Load supported extensions
         this.supportedExtensions = gl.getSupportedExtensions();
 
@@ -106,6 +112,8 @@ var WebGLRenderer = new Class({
         // Clear previous pipelines and reload default ones
         this.pipelines = {};
 
+        this.addPipeline('BlitterPipeline', new BlitterPipeline(this.game, gl, this));
+
         this.setBlendMode(CONST.BlendModes.NORMAL);
         this.resize(this.width, this.height, this.game.config.resolution);
     
@@ -115,7 +123,7 @@ var WebGLRenderer = new Class({
     resize: function (width, height, resolution)
     {
         var gl = this.gl;
-        var piplines = this.pipelines;
+        var pipelines = this.pipelines;
 
         this.width = width * resolution;
         this.height = height * resolution;
@@ -134,7 +142,7 @@ var WebGLRenderer = new Class({
         // Update all registered pipelines
         for (var pipelineName in pipelines)
         {
-            pipeline[pipelineName].resize(width, height, resolution);
+            pipelines[pipelineName].resize(width, height, resolution);
         }
 
         return this;
@@ -194,14 +202,14 @@ var WebGLRenderer = new Class({
         return this;
     },
 
-    setPipeline: function (pipelineName)
+    setPipeline: function (pipelineName, overrideProgram)
     {
         var pipeline = this.getPipeline(pipelineName);
 
         if (this.currentPipeline !== pipeline)
         {
             this.currentPipeline = pipeline;
-            this.currentPipeline.bind();
+            this.currentPipeline.bind(overrideProgram);
         }
 
         return pipeline;
@@ -264,6 +272,18 @@ var WebGLRenderer = new Class({
         return this;
     },
 
+    setProgram: function (program)
+    {
+        var gl = this.gl;
+
+        if (program !== this.currentProgram)
+        {
+            gl.useProgram(program);
+        }
+
+        return this;
+    },
+
     setVertexBuffer: function (vertexBuffer)
     {
         var gl = this.gl;
@@ -305,11 +325,11 @@ var WebGLRenderer = new Class({
 
         if (!source.glTexture)
         {
-            if (source.scaleMode === ScaleModes.LINEAR)
+            if (source.scaleMode === CONST.ScaleModes.LINEAR)
             {
                 filter = gl.LINEAR;
             }
-            else if (source.scaleMode === ScaleModes.NEAREST || this.game.config.pixelArt)
+            else if (source.scaleMode === CONST.ScaleModes.NEAREST || this.game.config.pixelArt)
             {
                 filter = gl.NEAREST;
             }
@@ -472,6 +492,26 @@ var WebGLRenderer = new Class({
     {
         if (this.contextLost) return;
 
+        var gl = this.gl;
+        var list = children.list;
+        var childCount = list.length;
+        var color = this.game.config.backgroundColor;
+
+        gl.clearColor(color.redGL, color.greenGL, color.blueGL, color.alphaGL);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+
+        for (var index = 0; index < childCount; ++index)
+        {
+            var child = list[index];
+
+            if (!child.willRender())
+            {
+                continue;
+            }
+
+            child.renderWebGL(this, child, interpolationPercentage, camera);
+
+        }
     },
 
     postRender: function ()
@@ -534,6 +574,83 @@ var WebGLRenderer = new Class({
 
         this.setTexture2D(null, 0);
 
+        return this;
+    },
+
+    setFloat1: function (program, name, x)
+    {
+        this.setProgram(program);
+        this.gl.uniform1f(this.gl.getUniformLocation(program, name), x);
+        return this;
+    },
+
+    setFloat2: function (program, name, x, y)
+    {
+        this.setProgram(program);
+        this.gl.uniform2f(this.gl.getUniformLocation(program, name), x, y);
+        return this;
+    },
+
+    setFloat3: function (program, name, x, y, z)
+    {
+        this.setProgram(program);
+        this.gl.uniform3f(this.gl.getUniformLocation(program, name), x, y, z);
+        return this;
+    },
+
+    setFloat4: function (program, name, x, y, z, w)
+    {
+        this.setProgram(program);
+        this.gl.uniform4f(this.gl.getUniformLocation(program, name), x, y, z, w);
+        return this;
+    },
+
+    setInt1: function (program, name, x)
+    {
+        this.setProgram(program);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, name), x);
+        return this;
+    },
+
+    setInt2: function (program, name, x, y)
+    {
+        this.setProgram(program);
+        this.gl.uniform2i(this.gl.getUniformLocation(program, name), x, y);
+        return this;
+    },
+
+    setInt3: function (program, name, x, y, z)
+    {
+        this.setProgram(program);
+        this.gl.uniform3i(this.gl.getUniformLocation(program, name), x, y, z);
+        return this;
+    },
+
+    setInt4: function (program, name, x, y, z, w)
+    {
+        this.setProgram(program);
+        this.gl.uniform4i(this.gl.getUniformLocation(program, name), x, y, z, w);
+        return this;
+    },
+
+    setMatrix2: function (program, name, transpose, matrix)
+    {
+        this.setProgram(program);
+        this.gl.uniformMatrix2fv(this.gl.getUniformLocation(program, name), transpose, matrix);
+        return this;
+    },
+
+    setMatrix3: function (program, name, transpose, matrix)
+    {
+        this.setProgram(program);
+        this.gl.uniformMatrix3fv(this.gl.getUniformLocation(program, name), transpose, matrix);
+        return this;
+    },
+
+    setMatrix4: function (program, name, transpose, matrix)
+    {
+        this.setProgram(program);
+        this.gl.uniformMatrix4fv(this.gl.getUniformLocation(program, name), transpose, matrix);
         return this;
     }
 

src/renderer/webgl/pipelines/BlitterPipeline.js

@@ -0,0 +1,195 @@
+var Class = require('../../../utils/Class');
+var ShaderSource = require('../shaders/TextureTintShader');
+var WebGLPipeline = require('../WebGLPipeline');
+var Utils = require('../Utils');
+
+var BlitterPipeline = new Class({
+
+    Extends: WebGLPipeline,
+
+    initialize:
+
+    function BlitterPipeline(game, gl, renderer)
+    {
+        WebGLPipeline.call(this, {
+            name: 'BlitterPipeline',
+            game: game,
+            gl: gl,
+            renderer: renderer,
+            topology: gl.TRIANGLES,
+            shader: ShaderSource,
+            vertexCapacity: 12000,
+
+            vertexSize: 
+                Float32Array.BYTES_PER_ELEMENT * 2 + 
+                Float32Array.BYTES_PER_ELEMENT * 2 + 
+                Uint8Array.BYTES_PER_ELEMENT * 4,
+
+            attributes: [
+                {
+                    name: 'inPosition',
+                    size: 2,
+                    type: gl.FLOAT,
+                    normalized: false,
+                    offset: 0
+                },
+                {
+                    name: 'inTexCoord',
+                    size: 2,
+                    type: gl.FLOAT,
+                    normalized: false,
+                    offset: Float32Array.BYTES_PER_ELEMENT * 2
+                },
+                {
+                    name: 'inTint',
+                    size: 4,
+                    type: gl.UNSIGNED_BYTE,
+                    normalized: true,
+                    offset: Float32Array.BYTES_PER_ELEMENT * 4
+                }
+            ]
+        });
+
+        this.orthoViewMatrix = new Float32Array([
+            +2.0 / this.width,
+            +0.0,   
+            +0.0,
+            +0.0,
+            
+            +0.0,
+            -2.0 / this.height,
+            +0.0,
+            +0.0,
+
+            +0.0,
+            +0.0,
+            +1.0,
+            +1.0,
+
+            -1.0,
+            +1.0,
+            +0.0,
+            +0.0
+        ]);
+
+        this.vertexViewF32 = new Float32Array(this.vertexData);
+        this.vertexViewU32 = new Uint32Array(this.vertexData);
+    },
+
+    resize: function (width, height, resolution)
+    {
+        WebGLPipeline.prototype.resize.call(this, width, height, resolution);
+
+        var orthoViewMatrix = this.orthoViewMatrix;
+        orthoViewMatrix[0] = +2.0 / this.width;
+        orthoViewMatrix[5] = -2.0 / this.height;
+
+        this.renderer.setMatrix4(this.currentProgram, 'uOrthoMatrix', false, orthoViewMatrix);
+
+        return this;
+    },
+
+    drawBlitter: function (blitter, camera)
+    {
+        this.renderer.setPipeline('BlitterPipeline', blitter.shader);
+
+        var vertexViewF32 = this.vertexViewF32;
+        var vertexViewU32 = this.vertexViewU32;
+        var renderer = this.renderer;
+        var gl = this.gl;
+        var shader = this.currentProgram;
+        var list = blitter.getRenderList();
+        var length = list.length;
+        var cameraMatrix = camera.matrix.matrix;
+        var a = cameraMatrix[0];
+        var b = cameraMatrix[1];
+        var c = cameraMatrix[2];
+        var d = cameraMatrix[3];
+        var e = cameraMatrix[4];
+        var f = cameraMatrix[5];
+        var cameraScrollX = camera.scrollX * blitter.scrollFactorX;
+        var cameraScrollY = camera.scrollY * blitter.scrollFactorY;
+        var batchCount = Math.ceil(length / 2000);
+        var batchOffset = 0;
+        var blitterX = blitter.x;
+        var blitterY = blitter.y;
+
+        for (var batchIndex = 0; batchIndex < batchCount; ++batchIndex)
+        {
+            var batchSize = Math.min(length, 2000);
+            var vertexOffset = 0;
+
+            for (var index = 0; index < batchSize; ++index)
+            {
+                var bob = list[batchOffset + index];
+                var frame = bob.frame;
+                var alpha = bob.alpha;
+                var tint =  Utils.getTintAppendFloatAlpha(0xffffff, bob.alpha);
+                var uvs = frame.uvs;
+                var flipX = bob.flipX;
+                var flipY = bob.flipY;
+                var width = frame.width * (flipX ? -1.0 : 1.0); 
+                var height = frame.height * (flipY ? -1.0 : 1.0);
+                var x = blitterX + bob.x + frame.x - cameraScrollX + (width * ((flipX) ? 1.0 : 0.0));
+                var y = blitterY + bob.y + frame.y - cameraScrollY + (height * ((flipY) ? 1.0 : 0.0));
+                var xw = x + width;                
+                var yh = y + height;
+                var tx = x * a + y * c + e;
+                var ty = x * b + y * d + f;
+                var txw = xw * a + yh * c + e;
+                var tyh = xw * b + yh * d + f;
+
+                // Bind Texture if texture wasn't bound.
+                // This needs to be here because of multiple
+                // texture atlas.
+                renderer.setTexture2D(frame.texture.source[frame.sourceIndex].glTexture, 0);
+            
+                vertexViewF32[vertexOffset + 0] = tx;
+                vertexViewF32[vertexOffset + 1] = ty;
+                vertexViewF32[vertexOffset + 2] = uvs.x0;
+                vertexViewF32[vertexOffset + 3] = uvs.y0;
+                vertexViewU32[vertexOffset + 4] = tint;
+
+                vertexViewF32[vertexOffset + 5] = tx;
+                vertexViewF32[vertexOffset + 6] = tyh;
+                vertexViewF32[vertexOffset + 7] = uvs.x1;
+                vertexViewF32[vertexOffset + 8] = uvs.y1;
+                vertexViewU32[vertexOffset + 9] = tint;
+
+                vertexViewF32[vertexOffset + 10] = txw;
+                vertexViewF32[vertexOffset + 11] = tyh;
+                vertexViewF32[vertexOffset + 12] = uvs.x2;
+                vertexViewF32[vertexOffset + 13] = uvs.y2;
+                vertexViewU32[vertexOffset + 14] = tint;
+
+                vertexViewF32[vertexOffset + 15] = tx;
+                vertexViewF32[vertexOffset + 16] = ty;
+                vertexViewF32[vertexOffset + 17] = uvs.x0;
+                vertexViewF32[vertexOffset + 18] = uvs.y0;
+                vertexViewU32[vertexOffset + 19] = tint;
+
+                vertexViewF32[vertexOffset + 20] = txw;
+                vertexViewF32[vertexOffset + 21] = tyh;
+                vertexViewF32[vertexOffset + 22] = uvs.x2;
+                vertexViewF32[vertexOffset + 23] = uvs.y2;
+                vertexViewU32[vertexOffset + 24] = tint;
+
+                vertexViewF32[vertexOffset + 25] = txw;
+                vertexViewF32[vertexOffset + 26] = ty;
+                vertexViewF32[vertexOffset + 27] = uvs.x3;
+                vertexViewF32[vertexOffset + 28] = uvs.y3;
+                vertexViewU32[vertexOffset + 29] = tint;
+
+                vertexOffset += 30;
+            }
+
+            batchOffset += batchSize;
+            length -= batchSize;
+
+            this.vertexCount = (batchSize * 6);
+            this.flush();
+        }
+    }
+});
+
+module.exports = BlitterPipeline;

src/renderer/webgl/shaders/TextureTintShader.js

@@ -0,0 +1,40 @@
+module.exports = {
+    vert: [
+        '#define SHADER_NAME PHASER_TEXTURE_TINT_VS',
+
+        'precision mediump float;',
+        
+        'uniform mat4 uOrthoMatrix;',
+        
+        'attribute vec2 inPosition;',
+        'attribute vec2 inTexCoord;',
+        'attribute vec4 inTint;',
+        
+        'varying vec2 outTexCoord;',
+        'varying vec4 outTint;',
+        
+        'void main () {',
+        '   gl_Position = uOrthoMatrix * vec4(inPosition, 1.0, 1.0);',
+        '   outTexCoord = inTexCoord;',
+        '   outTint = inTint;',
+        '}'
+    
+    ].join('\n'),
+    frag: [
+        '#define SHADER_NAME PHASER_TEXTURE_TINT_FS',
+        
+        'precision mediump float;',
+
+        'uniform sampler2D uMainSampler;',
+    
+        'varying vec2 outTexCoord;',
+        'varying vec4 outTint;',
+
+        'void main() {',
+        '   vec4 texel = texture2D(uMainSampler, outTexCoord);',
+        '   texel *= vec4(outTint.rgb * outTint.a, outTint.a);',
+        '   gl_FragColor = texel;',
+        '}'
+    
+    ].join('\n')
+};

src/textures/TextureSource.js

@@ -38,7 +38,7 @@ var TextureSource = new Class({
 
         if (game.config.renderType === CONST.WEBGL)
         {
-            game.renderer.createTexture(this, this.width, this.height);
+            game.renderer.createTextureFromSource(this, this.width, this.height);
         }
 
         if (game.config.pixelArt)
@@ -53,7 +53,7 @@ var TextureSource = new Class({
 
         if (game.config.renderType === CONST.WEBGL)
         {
-            game.renderer.setTextureFilterMode(this.glTexture, filterMode);
+            game.renderer.setTextureFilter(this.glTexture, filterMode);
         }
     }