From 961f00ac11ba681c76c5b856a817c45b75fc4534 Mon Sep 17 00:00:00 2001 From: Felipe Alfonso Date: Mon, 22 Jan 2018 18:21:47 -0300 Subject: [PATCH] BlitterPipeline added --- .../blitter/BlitterWebGLRenderer.js | 2 +- src/gameobjects/index.js | 116 +++++------ src/renderer/webgl/WebGLPipeline.js | 77 +------ src/renderer/webgl/WebGLRenderer.js | 131 +++++++++++- .../webgl/pipelines/BlitterPipeline.js | 195 ++++++++++++++++++ .../webgl/shaders/TextureTintShader.js | 40 ++++ src/textures/TextureSource.js | 4 +- 7 files changed, 426 insertions(+), 139 deletions(-) create mode 100644 src/renderer/webgl/pipelines/BlitterPipeline.js create mode 100644 src/renderer/webgl/shaders/TextureTintShader.js diff --git a/src/gameobjects/blitter/BlitterWebGLRenderer.js b/src/gameobjects/blitter/BlitterWebGLRenderer.js index 641f709ec..0b2dc1529 100644 --- a/src/gameobjects/blitter/BlitterWebGLRenderer.js +++ b/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; diff --git a/src/gameobjects/index.js b/src/gameobjects/index.js index 2d44493df..56dd3161b 100644 --- a/src/gameobjects/index.js +++ b/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'), - DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapText'), - DynamicTilemapLayer: require('./tilemap/dynamiclayer/DynamicTilemapLayer'), - Graphics: require('./graphics/Graphics.js'), - Group: require('./group/Group'), - Image: require('./image/Image'), - Particles: require('./particles/ParticleEmitterManager'), - PathFollower: require('./pathfollower/PathFollower'), - Sprite3D: require('./sprite3d/Sprite3D'), - Sprite: require('./sprite/Sprite'), - StaticTilemapLayer: require('./tilemap/staticlayer/StaticTilemapLayer'), - Text: require('./text/static/Text'), - Tile: require('./tilemap/Tile'), - Tilemap: require('./tilemap/Tilemap'), - Tileset: require('./tilemap/Tileset'), - TileSprite: require('./tilesprite/TileSprite'), - Zone: require('./zone/Zone'), + //Container: require('./container/Container'), + //DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapText'), + //DynamicTilemapLayer: require('./tilemap/dynamiclayer/DynamicTilemapLayer'), + //Graphics: require('./graphics/Graphics.js'), + //Group: require('./group/Group'), + //Image: require('./image/Image'), + //Particles: require('./particles/ParticleEmitterManager'), + //PathFollower: require('./pathfollower/PathFollower'), + //Sprite3D: require('./sprite3d/Sprite3D'), + //Sprite: require('./sprite/Sprite'), + //StaticTilemapLayer: require('./tilemap/staticlayer/StaticTilemapLayer'), + //Text: require('./text/static/Text'), + //Tile: require('./tilemap/Tile'), + //Tilemap: require('./tilemap/Tilemap'), + //Tileset: require('./tilemap/Tileset'), + //TileSprite: require('./tilesprite/TileSprite'), + //Zone: require('./zone/Zone'), // Game Object Factories Factories: { Blitter: require('./blitter/BlitterFactory'), - Container: require('./container/ContainerFactory'), - DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextFactory'), - Graphics: require('./graphics/GraphicsFactory'), - Group: require('./group/GroupFactory'), - Image: require('./image/ImageFactory'), - Particles: require('./particles/ParticleManagerFactory'), - PathFollower: require('./pathfollower/PathFollowerFactory'), - Sprite: require('./sprite/SpriteFactory'), - Sprite3D: require('./sprite3d/Sprite3DFactory'), - StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'), - Text: require('./text/static/TextFactory'), - Tilemap: require('./tilemap/TilemapFactory'), - TileSprite: require('./tilesprite/TileSpriteFactory'), - Zone: require('./zone/ZoneFactory') + //Container: require('./container/ContainerFactory'), + //DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextFactory'), + //Graphics: require('./graphics/GraphicsFactory'), + //Group: require('./group/GroupFactory'), + //Image: require('./image/ImageFactory'), + //Particles: require('./particles/ParticleManagerFactory'), + //PathFollower: require('./pathfollower/PathFollowerFactory'), + //Sprite: require('./sprite/SpriteFactory'), + //Sprite3D: require('./sprite3d/Sprite3DFactory'), + //StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'), + //Text: require('./text/static/TextFactory'), + //Tilemap: require('./tilemap/TilemapFactory'), + //TileSprite: require('./tilesprite/TileSpriteFactory'), + //Zone: require('./zone/ZoneFactory') }, Creators: { Blitter: require('./blitter/BlitterCreator'), - Container: require('./container/ContainerCreator'), - DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextCreator'), - Graphics: require('./graphics/GraphicsCreator'), - Group: require('./group/GroupCreator'), - Image: require('./image/ImageCreator'), - Particles: require('./particles/ParticleManagerCreator'), - Sprite: require('./sprite/SpriteCreator'), - Sprite3D: require('./sprite3d/Sprite3DCreator'), - StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'), - Text: require('./text/static/TextCreator'), - Tilemap: require('./tilemap/TilemapCreator'), - TileSprite: require('./tilesprite/TileSpriteCreator'), - Zone: require('./zone/ZoneCreator') + //Container: require('./container/ContainerCreator'), + //DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextCreator'), + //Graphics: require('./graphics/GraphicsCreator'), + //Group: require('./group/GroupCreator'), + //Image: require('./image/ImageCreator'), + //Particles: require('./particles/ParticleManagerCreator'), + //Sprite: require('./sprite/SpriteCreator'), + //Sprite3D: require('./sprite3d/Sprite3DCreator'), + //StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'), + //Text: require('./text/static/TextCreator'), + //Tilemap: require('./tilemap/TilemapCreator'), + //TileSprite: require('./tilesprite/TileSpriteCreator'), + //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.Mesh = require('./mesh/Mesh'); - GameObjects.Quad = require('./quad/Quad'); - GameObjects.RenderPass = require('./renderpass/RenderPass.js'); + //GameObjects.LightLayer = require('./lightlayer/LightLayer'); + //GameObjects.Mesh = require('./mesh/Mesh'); + //GameObjects.Quad = require('./quad/Quad'); - GameObjects.Factories.EffectLayer = require('./effectlayer/EffectLayerFactory'); - GameObjects.Factories.LightLayer = require('./lightlayer/LightLayerFactory'); - GameObjects.Factories.Mesh = require('./mesh/MeshFactory'); - GameObjects.Factories.Quad = require('./quad/QuadFactory'); - GameObjects.Factories.RenderPass = require('./renderpass/RenderPassFactory'); + //GameObjects.Factories.EffectLayer = require('./effectlayer/EffectLayerFactory'); + //GameObjects.Factories.LightLayer = require('./lightlayer/LightLayerFactory'); + //GameObjects.Factories.Mesh = require('./mesh/MeshFactory'); + //GameObjects.Factories.Quad = require('./quad/QuadFactory'); - GameObjects.Creators.EffectLayer = require('./effectlayer/EffectLayerCreator'); - GameObjects.Creators.LightLayer = require('./lightlayer/LightLayerCreator'); - GameObjects.Creators.Mesh = require('./mesh/MeshCreator'); - GameObjects.Creators.Quad = require('./quad/QuadCreator'); - GameObjects.Creators.RenderPass = require('./renderpass/RenderPassCreator'); + //GameObjects.Creators.EffectLayer = require('./effectlayer/EffectLayerCreator'); + //GameObjects.Creators.LightLayer = require('./lightlayer/LightLayerCreator'); + //GameObjects.Creators.Mesh = require('./mesh/MeshCreator'); + //GameObjects.Creators.Quad = require('./quad/QuadCreator'); } module.exports = GameObjects; diff --git a/src/renderer/webgl/WebGLPipeline.js b/src/renderer/webgl/WebGLPipeline.js index 75732a8d5..9f5e9069b 100644 --- a/src/renderer/webgl/WebGLPipeline.js +++ b/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.program = renderer.createProgram(config.shader.vert, config.shader.frag); + this.vertexBuffer = this.renderer.createVertexBuffer(this.vertexData.byteLength, this.gl.STREAM_DRAW); + 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; } diff --git a/src/renderer/webgl/WebGLRenderer.js b/src/renderer/webgl/WebGLRenderer.js index 79fefb8ac..39ea404c4 100644 --- a/src/renderer/webgl/WebGLRenderer.js +++ b/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; } diff --git a/src/renderer/webgl/pipelines/BlitterPipeline.js b/src/renderer/webgl/pipelines/BlitterPipeline.js new file mode 100644 index 000000000..3397ae248 --- /dev/null +++ b/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; diff --git a/src/renderer/webgl/shaders/TextureTintShader.js b/src/renderer/webgl/shaders/TextureTintShader.js new file mode 100644 index 000000000..485192fba --- /dev/null +++ b/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') +}; diff --git a/src/textures/TextureSource.js b/src/textures/TextureSource.js index ad649e8be..a720c8809 100644 --- a/src/textures/TextureSource.js +++ b/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); } }