From f968913c79df69eb2015ed00e25675cdbf81bd1b Mon Sep 17 00:00:00 2001 From: Felipe Alfonso Date: Tue, 7 Nov 2017 17:37:16 -0300 Subject: [PATCH] BitmapMask rendering progress --- v3/src/gameobjects/mask/BitmapMask.js | 144 ++++ v3/src/renderer/webgl/WebGLRenderer.js | 3 + .../renderers/maskrenderer/MaskRenderer.js | 650 +----------------- v3/src/renderer/webgl/shaders/MaskShader.js | 8 +- 4 files changed, 174 insertions(+), 631 deletions(-) diff --git a/v3/src/gameobjects/mask/BitmapMask.js b/v3/src/gameobjects/mask/BitmapMask.js index e69de29bb..cc19d2b16 100644 --- a/v3/src/gameobjects/mask/BitmapMask.js +++ b/v3/src/gameobjects/mask/BitmapMask.js @@ -0,0 +1,144 @@ +var Class = require('../../utils/Class'); + +var BitmapMask = new Class({ + + initialize: + + function BitmapMask(scene, renderable) + { + var renderer = scene.sys.game.renderer; + var resourceManager = renderer.resourceManager; + this.bitmapMask = renderable; + this.maskRenderTarget = null; + this.mainRenderTarget = null; + this.maskTexture = null; + this.mainTexture = null; + this.dirty = true; + + if (resourceManager !== undefined) + { + var width = renderer.width; + var height = renderer.height; + var pot = ((width & (width - 1)) == 0 && (height & (height - 1)) == 0); + var gl = renderer.gl; + var wrap = pot ? gl.REPEAT : gl.CLAMP_TO_EDGE; + + this.maskTexture = resourceManager.createTexture( + 0, + gl.LINEAR, gl.LINEAR, + wrap, wrap, + gl.RGBA, + null, width, height + ); + + this.mainTexture = resourceManager.createTexture( + 0, + gl.LINEAR, gl.LINEAR, + wrap, wrap, + gl.RGBA, + null, width, height + ); + + this.maskRenderTarget = resourceManager.createRenderTarget( + width, height, + this.maskTexture, + null + ); + this.mainRenderTarget = resourceManager.createRenderTarget( + width, height, + this.mainTexture, + null + ); + + scene.sys.game.renderer.currentTexture[0] = null; + } + + var _this = this; + + renderer.addContextRestoredCallback(function (renderer) { + var resourceManager = renderer.resourceManager; + var gl = renderer.gl; + var wrap = pot ? gl.REPEAT : gl.CLAMP_TO_EDGE; + + _this.maskTexture = resourceManager.createTexture( + 0, + gl.LINEAR, gl.LINEAR, + wrap, wrap, + gl.RGBA, + null, width, height + ); + _this.mainTexture = resourceManager.createTexture( + 0, + gl.LINEAR, gl.LINEAR, + wrap, wrap, + gl.RGBA, + null, width, height + ); + + _this.maskRenderTarget = resourceManager.createRenderTarget( + width, height, + _this.maskTexture, + null + ); + _this.mainRenderTarget = resourceManager.createRenderTarget( + width, height, + _this.mainTexture, + null + ); + + // force rebinding of prev texture + scene.sys.game.renderer.currentTexture[0] = null; + }); + }, + + setBitmap: function (renderable) + { + this.bitmapMask = renderable; + }, + + preRenderWebGL: function (renderer, gameObject, camera) + { + var bitmapMask = this.bitmapMask; + + if (bitmapMask) + { + /* Clear render targets first */ + var gl = renderer.gl; + + if (gl) + { + gl.clearColor(0.0, 0.0, 0.0, 0.0); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.maskRenderTarget.framebufferObject); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.mainRenderTarget.framebufferObject); + gl.clear(gl.COLOR_BUFFER_BIT); + + } + + // Inject mask render target & reset it after rendering. + bitmapMask.renderTarget = this.maskRenderTarget; + bitmapMask.renderWebGL(renderer, bitmapMask, 0.0, camera); + bitmapMask.renderTarget = null; + + // Inject main render target & reset it at post rendering. + gameObject.renderTarget = this.mainRenderTarget; + + // Cleanup GL state + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + } + + }, + + postRenderWebGL: function (renderer) + { + var maskRenderer = renderer.maskRenderer; + // reset + gameObject.renderTarget = null; + + // Apply alpha masking using mask renderer + maskRenderer.flush(null, null, this.mainTexture, this.maskTexture); + } + +}); diff --git a/v3/src/renderer/webgl/WebGLRenderer.js b/v3/src/renderer/webgl/WebGLRenderer.js index d93978570..b3cbab352 100644 --- a/v3/src/renderer/webgl/WebGLRenderer.js +++ b/v3/src/renderer/webgl/WebGLRenderer.js @@ -11,6 +11,7 @@ var Class = require('../../utils/Class'); var CONST = require('../../const'); var EffectRenderer = require('./renderers/effectrenderer/EffectRenderer'); var IsSizePowerOfTwo = require('../../math/pow2/IsSizePowerOfTwo'); +var MaskRenderer = require('./renderers/maskrenderer/MaskRenderer'); var QuadBatch = require('./renderers/quadbatch/QuadBatch'); var ParticleRenderer = require('./renderers/particlerenderer/ParticleRenderer'); var ResourceManager = require('./ResourceManager'); @@ -100,6 +101,7 @@ var WebGLRenderer = new Class({ this.spriteBatch = null; this.shapeBatch = null; this.effectRenderer = null; + this.maskRenderer = null; this.currentRenderer = null; this.currentTexture = []; this.shaderCache = {}; @@ -169,6 +171,7 @@ var WebGLRenderer = new Class({ this.tileBatch = this.addRenderer(new TileBatch(this.game, gl, this)); this.tilemapRenderer = this.addRenderer(new TilemapRenderer(this.game, gl, this)); this.particleRenderer = this.addRenderer(new ParticleRenderer(this.game, gl, this)); + this.maskRenderer = this.addRenderer(new MaskRenderer(this.game, gl, this)); this.currentRenderer = this.spriteBatch; this.currentVertexBuffer = null; this.setBlendMode(0); diff --git a/v3/src/renderer/webgl/renderers/maskrenderer/MaskRenderer.js b/v3/src/renderer/webgl/renderers/maskrenderer/MaskRenderer.js index 161ff8172..cf57658e7 100644 --- a/v3/src/renderer/webgl/renderers/maskrenderer/MaskRenderer.js +++ b/v3/src/renderer/webgl/renderers/maskrenderer/MaskRenderer.js @@ -18,14 +18,8 @@ var MaskRenderer = new Class({ this.width = game.config.width * game.config.resolution; this.height = game.config.height * game.config.resolution; this.glContext = gl; - this.maxSprites = null; this.shader = null; this.vertexBufferObject = null; - this.indexBufferObject = null; - this.indexBufferObjectForMesh = null; - this.vertexDataBuffer = null; - this.indexDataBuffer = null; - this.elementCount = 0; // All of these settings will be able to be controlled via the Game Config this.config = { @@ -44,68 +38,41 @@ var MaskRenderer = new Class({ }; this.manager = manager; - this.dirty = false; - this.drawIndexed = true; - this.lastDrawIndexed = true; - this.lastDrawingMesh = false; - this.drawingMesh = false; - this.vertexCount = 0; - this.init(this.glContext); }, init: function (gl) { - var vertexDataBuffer = new DataBuffer32(CONST.VERTEX_SIZE * CONST.SPRITE_VERTEX_COUNT * CONST.MAX_SPRITES); - var indexDataBuffer = new DataBuffer16(CONST.INDEX_SIZE * CONST.SPRITE_INDEX_COUNT * CONST.MAX_SPRITES); var shader = this.manager.resourceManager.createShader('MaskShader', MaskShader); - var indexBufferObject = this.manager.resourceManager.createBuffer(gl.ELEMENT_ARRAY_BUFFER, indexDataBuffer.getByteCapacity(), gl.STATIC_DRAW); - var indexBufferObjectForMesh = this.manager.resourceManager.createBuffer(gl.ELEMENT_ARRAY_BUFFER, indexDataBuffer.getByteCapacity(), gl.STREAM_DRAW); - var vertexBufferObject = this.manager.resourceManager.createBuffer(gl.ARRAY_BUFFER, vertexDataBuffer.getByteCapacity(), gl.STREAM_DRAW); - var indexBuffer = indexDataBuffer.uintView; - var max = CONST.MAX_SPRITES * CONST.SPRITE_INDEX_COUNT; + var vertexBufferObject = this.manager.resourceManager.createBuffer( + gl.ARRAY_BUFFER, new Float32Array([ + -1.0, +1.0, 0.0, 0.0, + -1.0, -1.0, 0.0, 1.0, + +1.0, +1.0, 1.0, 0.0, + +1.0, +1.0, 1.0, 0.0, + -1.0, -1.0, 0.0, 1.0, + +1.0, -1.0, 1.0, 1.0 + ]), + gl.STATIC_DRAW); - this.vertexDataBuffer = vertexDataBuffer; - this.indexDataBuffer = indexDataBuffer; this.shader = shader; - this.indexBufferObject = indexBufferObject; - this.indexBufferObjectForMesh = indexBufferObjectForMesh; this.vertexBufferObject = vertexBufferObject; + // Look into the possibility of just doing vec2 uv = gl_FragCoord.xy / u_resolution; vertexBufferObject.addAttribute(shader.getAttribLocation('a_position'), 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 0); vertexBufferObject.addAttribute(shader.getAttribLocation('a_tex_coord'), 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 8); - // Populate the index buffer only once - for (var indexA = 0, indexB = 0; indexA < max; indexA += CONST.SPRITE_INDEX_COUNT, indexB += CONST.SPRITE_VERTEX_COUNT) - { - indexBuffer[indexA + 0] = indexB + 0; - indexBuffer[indexA + 1] = indexB + 1; - indexBuffer[indexA + 2] = indexB + 2; - indexBuffer[indexA + 3] = indexB + 0; - indexBuffer[indexA + 4] = indexB + 2; - indexBuffer[indexA + 5] = indexB + 3; - } - - indexBufferObject.updateResource(indexBuffer, 0); - this.resize(this.width, this.height, this.game.config.resolution); }, shouldFlush: function () { - if (this.drawIndexed !== this.lastDrawIndexed || this.lastDrawingMesh !== this.drawingMesh || this.isFull()) - { - this.lastDrawIndexed = this.drawIndexed; - this.lastDrawingMesh = this.drawingMesh; - return true; - } - - return false; + return true; }, isFull: function () { - return (this.vertexDataBuffer.getByteLength() >= this.vertexDataBuffer.getByteCapacity()); + return true; }, bind: function (shader) @@ -123,47 +90,27 @@ var MaskRenderer = new Class({ this.vertexBufferObject.bind(); }, - flush: function (shader, renderTarget) + flush: function (shader, renderTarget, mainTexture, maskTexture) { var gl = this.glContext; - var vertexDataBuffer = this.vertexDataBuffer; + var manager = this.manager; - if (this.elementCount === 0 && this.vertexCount === 0) - { - return; - } - if (renderTarget) { gl.bindFramebuffer(gl.FRAMEBUFFER, renderTarget); } - this.bind(shader); - this.vertexBufferObject.updateResource(vertexDataBuffer.getUsedBufferAsFloat(), 0); + this.shader.bind(); + this.vertexBufferObject.bind(); - if (this.drawIndexed) - { - if (this.drawingMesh) - { - this.indexBufferObjectForMesh.bind(); - this.indexBufferObjectForMesh.updateResource(this.indexDataBuffer.buffer, 0); - } - else - { - this.indexBufferObject.bind(); - } + gl.uniform1i(gl.getUniformLocation(this.shader.program, 'u_main_sampler'), 0); + gl.uniform1i(gl.getUniformLocation(this.shader.program, 'u_mask_sampler'), 1); - gl.drawElements(gl.TRIANGLES, this.elementCount, gl.UNSIGNED_SHORT, 0); - } - else - { - gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount); - } + manager.setTexture(mainTexture, 0); + manager.setTexture(maskTexture, 1); + + gl.drawArrays(gl.TRIANGLES, 0, 6); - vertexDataBuffer.clear(); - this.elementCount = 0; - this.vertexCount = 0; - if (renderTarget) { gl.bindFramebuffer(gl.FRAMEBUFFER, null); @@ -182,569 +129,18 @@ var MaskRenderer = new Class({ setProjectionMatrix: function (shader, location) { - shader.setConstantMatrix4x4( - location, - new Float32Array([ - 2 / this.width, 0, 0, 0, - 0, -2 / this.height, 0, 0, - 0, 0, 1, 1, - -1, 1, 0, 0 - ]) - ); }, destroy: function () { this.manager.resourceManager.deleteShader(this.shader); - this.manager.resourceManager.deleteBuffer(this.indexBufferObject); this.manager.resourceManager.deleteBuffer(this.vertexBufferObject); this.shader = null; - this.indexBufferObject = null; this.vertexBufferObject = null; }, - addMeshIndexed: function (gameObject, camera) - { - var tempMatrix = this.tempMatrix; - var frame = gameObject.frame; - var vertexDataBuffer = this.vertexDataBuffer; - var vertexBufferObjectF32 = vertexDataBuffer.floatView; - var vertexBufferObjectU32 = vertexDataBuffer.uintView; - var vertexOffset = 0; - var translateX = gameObject.x - camera.scrollX * gameObject.scrollFactorX; - var translateY = gameObject.y - camera.scrollY * gameObject.scrollFactorY; - var scaleX = gameObject.scaleX; - var scaleY = gameObject.scaleY; - var rotation = -gameObject.rotation; - var tempMatrixMatrix = tempMatrix.matrix; - var cameraMatrix = camera.matrix.matrix; - var mva, mvb, mvc, mvd, mve, mvf; - var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf; - var vertices = gameObject.vertices; - var uv = gameObject.uv; - var length = vertices.length; - var totalVertices = (length / 2)|0; - var indexBuffer = this.indexDataBuffer.uintView; - var indices = gameObject.indices; - var colors = gameObject.colors; - var alphas = gameObject.alphas; - var indexLength = indices.length; - var indexOffset = 0; - tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY); - - sra = tempMatrixMatrix[0]; - srb = tempMatrixMatrix[1]; - src = tempMatrixMatrix[2]; - srd = tempMatrixMatrix[3]; - sre = tempMatrixMatrix[4]; - srf = tempMatrixMatrix[5]; - - cma = cameraMatrix[0]; - cmb = cameraMatrix[1]; - cmc = cameraMatrix[2]; - cmd = cameraMatrix[3]; - cme = cameraMatrix[4]; - cmf = cameraMatrix[5]; - - mva = sra * cma + srb * cmc; - mvb = sra * cmb + srb * cmd; - mvc = src * cma + srd * cmc; - mvd = src * cmb + srd * cmd; - mve = sre * cma + srf * cmc + cme; - mvf = sre * cmb + srf * cmd + cmf; - - this.manager.setRenderer(this, frame.texture.source[frame.sourceIndex].glTexture, gameObject.renderTarget); - indexOffset = this.vertexCount; - this.drawIndexed = true; - this.drawingMesh = true; - this.vertexCount += totalVertices; - - vertexOffset = vertexDataBuffer.allocate(totalVertices * 6); - - var index; - var index0; - - for (index = 0, index0 = 0; index < length; index += 2) - { - var x = vertices[index + 0]; - var y = vertices[index + 1]; - var tx = x * mva + y * mvc + mve; - var ty = x * mvb + y * mvd + mvf; - vertexBufferObjectF32[vertexOffset++] = tx; - vertexBufferObjectF32[vertexOffset++] = ty; - vertexBufferObjectF32[vertexOffset++] = uv[index + 0]; - vertexBufferObjectF32[vertexOffset++] = uv[index + 1]; - vertexBufferObjectU32[vertexOffset++] = colors[index0]; - vertexBufferObjectF32[vertexOffset++] = alphas[index0]; - index0 += 1; - } - - var elementCount = this.elementCount; - - for (index = 0; index < indexLength; ++index) - { - indexBuffer[elementCount + index] = indexOffset + indices[index]; - } - - this.elementCount += indexLength; - }, - - addMesh: function (gameObject, camera) - { - var tempMatrix = this.tempMatrix; - var frame = gameObject.frame; - var vertexDataBuffer = this.vertexDataBuffer; - var vertexBufferObjectF32 = vertexDataBuffer.floatView; - var vertexBufferObjectU32 = vertexDataBuffer.uintView; - var vertexOffset = 0; - var translateX = gameObject.x - camera.scrollX * gameObject.scrollFactorX; - var translateY = gameObject.y - camera.scrollY * gameObject.scrollFactorY; - var scaleX = gameObject.scaleX; - var scaleY = gameObject.scaleY; - var rotation = -gameObject.rotation; - var tempMatrixMatrix = tempMatrix.matrix; - var cameraMatrix = camera.matrix.matrix; - var mva, mvb, mvc, mvd, mve, mvf; - var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf; - var vertices = gameObject.vertices; - var uv = gameObject.uv; - var colors = gameObject.colors; - var alphas = gameObject.alphas; - var length = vertices.length; - var totalVertices = (length / 2)|0; - - tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY); - - sra = tempMatrixMatrix[0]; - srb = tempMatrixMatrix[1]; - src = tempMatrixMatrix[2]; - srd = tempMatrixMatrix[3]; - sre = tempMatrixMatrix[4]; - srf = tempMatrixMatrix[5]; - - cma = cameraMatrix[0]; - cmb = cameraMatrix[1]; - cmc = cameraMatrix[2]; - cmd = cameraMatrix[3]; - cme = cameraMatrix[4]; - cmf = cameraMatrix[5]; - - mva = sra * cma + srb * cmc; - mvb = sra * cmb + srb * cmd; - mvc = src * cma + srd * cmc; - mvd = src * cmb + srd * cmd; - mve = sre * cma + srf * cmc + cme; - mvf = sre * cmb + srf * cmd + cmf; - - this.manager.setRenderer(this, frame.texture.source[frame.sourceIndex].glTexture, gameObject.renderTarget); - this.drawIndexed = false; - this.drawingMesh = true; - this.vertexCount += totalVertices; - - vertexOffset = vertexDataBuffer.allocate(totalVertices * 6); - - for (var index = 0, index0 = 0; index < length; index += 2) - { - var x = vertices[index + 0]; - var y = vertices[index + 1]; - var tx = x * mva + y * mvc + mve; - var ty = x * mvb + y * mvd + mvf; - vertexBufferObjectF32[vertexOffset++] = tx; - vertexBufferObjectF32[vertexOffset++] = ty; - vertexBufferObjectF32[vertexOffset++] = uv[index + 0]; - vertexBufferObjectF32[vertexOffset++] = uv[index + 1]; - vertexBufferObjectU32[vertexOffset++] = colors[index0]; - vertexBufferObjectF32[vertexOffset++] = alphas[index0]; - index0 += 1; - } - }, - - addTileTextureRect: function (texture, x, y, width, height, alpha, tint, scrollFactorX, scrollFactorY, textureWidth, textureHeight, rectX, rectY, rectW, rectH, camera, renderTarget) - { - var vertexDataBuffer = this.vertexDataBuffer; - var vertexBufferObjectF32 = vertexDataBuffer.floatView; - var vertexBufferObjectU32 = vertexDataBuffer.uintView; - var vertexOffset = 0; - var xw = x + width; - var yh = y + height; - var cameraMatrix = camera.matrix.matrix; - var mva, mvb, mvc, mvd, mve, mvf, tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3; - var halfTileWidth = (width) * 0.5; - var halfTileHeight = (height) * 0.5; - var u0 = (rectX - (halfTileWidth - 0.5)) / textureWidth; - var v0 = (rectY - (halfTileHeight - 0.5)) / textureHeight; - var u1 = (rectX + (halfTileWidth - 0.5)) / textureWidth; - var v1 = (rectY + (halfTileHeight - 0.5)) / textureHeight; - var scrollX = camera.scrollX * scrollFactorX; - var scrollY = camera.scrollY * scrollFactorY; - - mva = cameraMatrix[0]; - mvb = cameraMatrix[1]; - mvc = cameraMatrix[2]; - mvd = cameraMatrix[3]; - mve = cameraMatrix[4]; - mvf = cameraMatrix[5]; - - tx0 = (x * mva + y * mvc + mve) - scrollX; - ty0 = (x * mvb + y * mvd + mvf) - scrollY; - tx1 = (x * mva + yh * mvc + mve) - scrollX; - ty1 = (x * mvb + yh * mvd + mvf) - scrollY; - tx2 = (xw * mva + yh * mvc + mve) - scrollX; - ty2 = (xw * mvb + yh * mvd + mvf) - scrollY; - tx3 = (xw * mva + y * mvc + mve) - scrollX; - ty3 = (xw * mvb + y * mvd + mvf) - scrollY; - - this.manager.setRenderer(this, texture, renderTarget); - this.drawIndexed = true; - this.drawingMesh = false; - this.elementCount += 6; - vertexOffset = vertexDataBuffer.allocate(24); - - vertexBufferObjectF32[vertexOffset++] = tx0; - vertexBufferObjectF32[vertexOffset++] = ty0; - vertexBufferObjectF32[vertexOffset++] = u0; - vertexBufferObjectF32[vertexOffset++] = v0; - vertexBufferObjectU32[vertexOffset++] = tint; - vertexBufferObjectF32[vertexOffset++] = alpha; - - vertexBufferObjectF32[vertexOffset++] = tx1; - vertexBufferObjectF32[vertexOffset++] = ty1; - vertexBufferObjectF32[vertexOffset++] = u0; - vertexBufferObjectF32[vertexOffset++] = v1; - vertexBufferObjectU32[vertexOffset++] = tint; - vertexBufferObjectF32[vertexOffset++] = alpha; - - vertexBufferObjectF32[vertexOffset++] = tx2; - vertexBufferObjectF32[vertexOffset++] = ty2; - vertexBufferObjectF32[vertexOffset++] = u1; - vertexBufferObjectF32[vertexOffset++] = v1; - vertexBufferObjectU32[vertexOffset++] = tint; - vertexBufferObjectF32[vertexOffset++] = alpha; - - vertexBufferObjectF32[vertexOffset++] = tx3; - vertexBufferObjectF32[vertexOffset++] = ty3; - vertexBufferObjectF32[vertexOffset++] = u1; - vertexBufferObjectF32[vertexOffset++] = v0; - vertexBufferObjectU32[vertexOffset++] = tint; - vertexBufferObjectF32[vertexOffset++] = alpha; - }, - - addSpriteTextureRect: function (gameObject, camera, texture, rectX, rectY, rectWidth, rectHeight, textureWidth, textureHeight) - { - var tempMatrix = this.tempMatrix; - var vertexDataBuffer = this.vertexDataBuffer; - var vertexBufferObjectF32 = vertexDataBuffer.floatView; - var vertexBufferObjectU32 = vertexDataBuffer.uintView; - var vertexOffset = 0; - var width = rectWidth * (gameObject.flipX ? -1 : 1); - var height = rectHeight * (gameObject.flipY ? -1 : 1); - var translateX = gameObject.x - camera.scrollX * gameObject.scrollFactorX; - var translateY = gameObject.y - camera.scrollY * gameObject.scrollFactorY; - var scaleX = gameObject.scaleX; - var scaleY = gameObject.scaleY; - var rotation = -gameObject.rotation; - var tempMatrixMatrix = tempMatrix.matrix; - var x = -gameObject.displayOriginX + ((rectWidth) * (gameObject.flipX ? 1 : 0.0)); - var y = -gameObject.displayOriginY + ((rectHeight) * (gameObject.flipY ? 1 : 0.0)); - var xw = x + rectWidth; - var yh = y + rectHeight; - var cameraMatrix = camera.matrix.matrix; - var mva, mvb, mvc, mvd, mve, mvf, tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3; - var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf; - var alphaTL = gameObject._alphaTL; - var alphaTR = gameObject._alphaTR; - var alphaBL = gameObject._alphaBL; - var alphaBR = gameObject._alphaBR; - var tintTL = gameObject._tintTL; - var tintTR = gameObject._tintTR; - var tintBL = gameObject._tintBL; - var tintBR = gameObject._tintBR; - var u0 = 0; // rectX / textureWidth; - var v0 = 0; // rectY / textureHeight; - var u1 = 1; // u0 + (rectWidth / textureWidth); - var v1 = 1; // v0 + (rectHeight / textureHeight); - - tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY); - - sra = tempMatrixMatrix[0]; - srb = tempMatrixMatrix[1]; - src = tempMatrixMatrix[2]; - srd = tempMatrixMatrix[3]; - sre = tempMatrixMatrix[4]; - srf = tempMatrixMatrix[5]; - - cma = cameraMatrix[0]; - cmb = cameraMatrix[1]; - cmc = cameraMatrix[2]; - cmd = cameraMatrix[3]; - cme = cameraMatrix[4]; - cmf = cameraMatrix[5]; - - mva = sra * cma + srb * cmc; - mvb = sra * cmb + srb * cmd; - mvc = src * cma + srd * cmc; - mvd = src * cmb + srd * cmd; - mve = sre * cma + srf * cmc + cme; - mvf = sre * cmb + srf * cmd + cmf; - - tx0 = x * mva + y * mvc + mve; - ty0 = x * mvb + y * mvd + mvf; - tx1 = x * mva + yh * mvc + mve; - ty1 = x * mvb + yh * mvd + mvf; - tx2 = xw * mva + yh * mvc + mve; - ty2 = xw * mvb + yh * mvd + mvf; - tx3 = xw * mva + y * mvc + mve; - ty3 = xw * mvb + y * mvd + mvf; - - this.manager.setRenderer(this, texture, gameObject.renderTarget); - this.drawIndexed = true; - this.drawingMesh = false; - vertexOffset = vertexDataBuffer.allocate(24); - this.elementCount += 6; - - // Top Left - vertexBufferObjectF32[vertexOffset++] = tx0; - vertexBufferObjectF32[vertexOffset++] = ty0; - vertexBufferObjectF32[vertexOffset++] = u0; - vertexBufferObjectF32[vertexOffset++] = v0; - vertexBufferObjectU32[vertexOffset++] = tintTL; - vertexBufferObjectF32[vertexOffset++] = alphaTL; - - // Bottom Left - vertexBufferObjectF32[vertexOffset++] = tx1; - vertexBufferObjectF32[vertexOffset++] = ty1; - vertexBufferObjectF32[vertexOffset++] = u0; - vertexBufferObjectF32[vertexOffset++] = v1; - vertexBufferObjectU32[vertexOffset++] = tintBL; - vertexBufferObjectF32[vertexOffset++] = alphaBL; - - // Bottom Right - vertexBufferObjectF32[vertexOffset++] = tx2; - vertexBufferObjectF32[vertexOffset++] = ty2; - vertexBufferObjectF32[vertexOffset++] = u1; - vertexBufferObjectF32[vertexOffset++] = v1; - vertexBufferObjectU32[vertexOffset++] = tintBR; - vertexBufferObjectF32[vertexOffset++] = alphaBR; - - // Top Right - vertexBufferObjectF32[vertexOffset++] = tx3; - vertexBufferObjectF32[vertexOffset++] = ty3; - vertexBufferObjectF32[vertexOffset++] = u1; - vertexBufferObjectF32[vertexOffset++] = v0; - vertexBufferObjectU32[vertexOffset++] = tintTR; - vertexBufferObjectF32[vertexOffset++] = alphaTR; - }, - - addSpriteTexture: function (gameObject, camera, texture, textureWidth, textureHeight) - { - var tempMatrix = this.tempMatrix; - var vertexDataBuffer = this.vertexDataBuffer; - var vertexBufferObjectF32 = vertexDataBuffer.floatView; - var vertexBufferObjectU32 = vertexDataBuffer.uintView; - var vertexOffset = 0; - var width = textureWidth * (gameObject.flipX ? -1 : 1); - var height = textureHeight * (gameObject.flipY ? -1 : 1); - var translateX = gameObject.x - camera.scrollX * gameObject.scrollFactorX; - var translateY = gameObject.y - camera.scrollY * gameObject.scrollFactorY; - var scaleX = gameObject.scaleX; - var scaleY = gameObject.scaleY; - var rotation = -gameObject.rotation; - var tempMatrixMatrix = tempMatrix.matrix; - var x = -gameObject.displayOriginX + ((textureWidth) * (gameObject.flipX ? 1 : 0.0)); - var y = -gameObject.displayOriginY + ((textureHeight) * (gameObject.flipY ? 1 : 0.0)); - var xw = x + width; - var yh = y + height; - var cameraMatrix = camera.matrix.matrix; - var mva, mvb, mvc, mvd, mve, mvf, tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3; - var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf; - var alphaTL = gameObject._alphaTL; - var alphaTR = gameObject._alphaTR; - var alphaBL = gameObject._alphaBL; - var alphaBR = gameObject._alphaBR; - var tintTL = gameObject._tintTL; - var tintTR = gameObject._tintTR; - var tintBL = gameObject._tintBL; - var tintBR = gameObject._tintBR; - - tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY); - - sra = tempMatrixMatrix[0]; - srb = tempMatrixMatrix[1]; - src = tempMatrixMatrix[2]; - srd = tempMatrixMatrix[3]; - sre = tempMatrixMatrix[4]; - srf = tempMatrixMatrix[5]; - - cma = cameraMatrix[0]; - cmb = cameraMatrix[1]; - cmc = cameraMatrix[2]; - cmd = cameraMatrix[3]; - cme = cameraMatrix[4]; - cmf = cameraMatrix[5]; - - mva = sra * cma + srb * cmc; - mvb = sra * cmb + srb * cmd; - mvc = src * cma + srd * cmc; - mvd = src * cmb + srd * cmd; - mve = sre * cma + srf * cmc + cme; - mvf = sre * cmb + srf * cmd + cmf; - - tx0 = x * mva + y * mvc + mve; - ty0 = x * mvb + y * mvd + mvf; - tx1 = x * mva + yh * mvc + mve; - ty1 = x * mvb + yh * mvd + mvf; - tx2 = xw * mva + yh * mvc + mve; - ty2 = xw * mvb + yh * mvd + mvf; - tx3 = xw * mva + y * mvc + mve; - ty3 = xw * mvb + y * mvd + mvf; - - this.manager.setRenderer(this, texture, gameObject.renderTarget); - this.drawIndexed = true; - this.drawingMesh = false; - vertexOffset = vertexDataBuffer.allocate(24); - this.elementCount += 6; - - // Top Left - vertexBufferObjectF32[vertexOffset++] = tx0; - vertexBufferObjectF32[vertexOffset++] = ty0; - vertexBufferObjectF32[vertexOffset++] = 0; - vertexBufferObjectF32[vertexOffset++] = 0; - vertexBufferObjectU32[vertexOffset++] = tintTL; - vertexBufferObjectF32[vertexOffset++] = alphaTL; - - // Bottom Left - vertexBufferObjectF32[vertexOffset++] = tx1; - vertexBufferObjectF32[vertexOffset++] = ty1; - vertexBufferObjectF32[vertexOffset++] = 0; - vertexBufferObjectF32[vertexOffset++] = 1; - vertexBufferObjectU32[vertexOffset++] = tintBL; - vertexBufferObjectF32[vertexOffset++] = alphaBL; - - // Bottom Right - vertexBufferObjectF32[vertexOffset++] = tx2; - vertexBufferObjectF32[vertexOffset++] = ty2; - vertexBufferObjectF32[vertexOffset++] = 1; - vertexBufferObjectF32[vertexOffset++] = 1; - vertexBufferObjectU32[vertexOffset++] = tintBR; - vertexBufferObjectF32[vertexOffset++] = alphaBR; - - // Top Right - vertexBufferObjectF32[vertexOffset++] = tx3; - vertexBufferObjectF32[vertexOffset++] = ty3; - vertexBufferObjectF32[vertexOffset++] = 1; - vertexBufferObjectF32[vertexOffset++] = 0; - vertexBufferObjectU32[vertexOffset++] = tintTR; - vertexBufferObjectF32[vertexOffset++] = alphaTR; - }, - - addSprite: function (gameObject, camera) - { - var tempMatrix = this.tempMatrix; - var frame = gameObject.frame; - var forceFlipY = (frame.texture.source[frame.sourceIndex].glTexture.isRenderTexture ? true : false); - var flipX = gameObject.flipX; - var flipY = gameObject.flipY ^ forceFlipY; - var vertexDataBuffer = this.vertexDataBuffer; - var vertexBufferObjectF32 = vertexDataBuffer.floatView; - var vertexBufferObjectU32 = vertexDataBuffer.uintView; - var vertexOffset = 0; - var uvs = frame.uvs; - var width = frame.width * (flipX ? -1 : 1); - var height = frame.height * (flipY ? -1 : 1); - var translateX = gameObject.x - camera.scrollX * gameObject.scrollFactorX; - var translateY = gameObject.y - camera.scrollY * gameObject.scrollFactorY; - var scaleX = gameObject.scaleX; - var scaleY = gameObject.scaleY; - var rotation = -gameObject.rotation; - var tempMatrixMatrix = tempMatrix.matrix; - var x = -gameObject.displayOriginX + frame.x + ((frame.width) * (flipX ? 1 : 0.0)); - var y = -gameObject.displayOriginY + frame.y + ((frame.height) * (flipY ? 1 : 0.0)); - var xw = x + width; - var yh = y + height; - var cameraMatrix = camera.matrix.matrix; - var mva, mvb, mvc, mvd, mve, mvf, tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3; - var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf; - var alphaTL = gameObject._alphaTL; - var alphaTR = gameObject._alphaTR; - var alphaBL = gameObject._alphaBL; - var alphaBR = gameObject._alphaBR; - var tintTL = gameObject._tintTL; - var tintTR = gameObject._tintTR; - var tintBL = gameObject._tintBL; - var tintBR = gameObject._tintBR; - - tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY); - - sra = tempMatrixMatrix[0]; - srb = tempMatrixMatrix[1]; - src = tempMatrixMatrix[2]; - srd = tempMatrixMatrix[3]; - sre = tempMatrixMatrix[4]; - srf = tempMatrixMatrix[5]; - - cma = cameraMatrix[0]; - cmb = cameraMatrix[1]; - cmc = cameraMatrix[2]; - cmd = cameraMatrix[3]; - cme = cameraMatrix[4]; - cmf = cameraMatrix[5]; - - mva = sra * cma + srb * cmc; - mvb = sra * cmb + srb * cmd; - mvc = src * cma + srd * cmc; - mvd = src * cmb + srd * cmd; - mve = sre * cma + srf * cmc + cme; - mvf = sre * cmb + srf * cmd + cmf; - - tx0 = x * mva + y * mvc + mve; - ty0 = x * mvb + y * mvd + mvf; - tx1 = x * mva + yh * mvc + mve; - ty1 = x * mvb + yh * mvd + mvf; - tx2 = xw * mva + yh * mvc + mve; - ty2 = xw * mvb + yh * mvd + mvf; - tx3 = xw * mva + y * mvc + mve; - ty3 = xw * mvb + y * mvd + mvf; - - this.manager.setRenderer(this, frame.texture.source[frame.sourceIndex].glTexture, gameObject.renderTarget); - this.drawIndexed = true; - this.drawingMesh = false; - vertexOffset = vertexDataBuffer.allocate(24); - this.elementCount += 6; - - // Top Left - vertexBufferObjectF32[vertexOffset++] = tx0; - vertexBufferObjectF32[vertexOffset++] = ty0; - vertexBufferObjectF32[vertexOffset++] = uvs.x0; - vertexBufferObjectF32[vertexOffset++] = uvs.y0; - vertexBufferObjectU32[vertexOffset++] = tintTL; - vertexBufferObjectF32[vertexOffset++] = alphaTL; - - // Bottom Left - vertexBufferObjectF32[vertexOffset++] = tx1; - vertexBufferObjectF32[vertexOffset++] = ty1; - vertexBufferObjectF32[vertexOffset++] = uvs.x1; - vertexBufferObjectF32[vertexOffset++] = uvs.y1; - vertexBufferObjectU32[vertexOffset++] = tintBL; - vertexBufferObjectF32[vertexOffset++] = alphaBL; - - // Bottom Right - vertexBufferObjectF32[vertexOffset++] = tx2; - vertexBufferObjectF32[vertexOffset++] = ty2; - vertexBufferObjectF32[vertexOffset++] = uvs.x2; - vertexBufferObjectF32[vertexOffset++] = uvs.y2; - vertexBufferObjectU32[vertexOffset++] = tintBR; - vertexBufferObjectF32[vertexOffset++] = alphaBR; - - // Top Right - vertexBufferObjectF32[vertexOffset++] = tx3; - vertexBufferObjectF32[vertexOffset++] = ty3; - vertexBufferObjectF32[vertexOffset++] = uvs.x3; - vertexBufferObjectF32[vertexOffset++] = uvs.y3; - vertexBufferObjectU32[vertexOffset++] = tintTR; - vertexBufferObjectF32[vertexOffset++] = alphaTR; - } }); diff --git a/v3/src/renderer/webgl/shaders/MaskShader.js b/v3/src/renderer/webgl/shaders/MaskShader.js index 017ae9e0c..3a942b323 100644 --- a/v3/src/renderer/webgl/shaders/MaskShader.js +++ b/v3/src/renderer/webgl/shaders/MaskShader.js @@ -7,7 +7,7 @@ module.exports = { 'void main()', '{', ' gl_Position = vec4(a_position, 0.0, 1.0);', - ' v_tex_coord = a_tex_coord;', + ' v_tex_coord = a_tex_coord;', '}', '' ].join('\n'), @@ -15,11 +15,11 @@ module.exports = { 'precision mediump float;', 'uniform sampler2D u_main_sampler;', 'uniform sampler2D u_mask_sampler;', - 'varying vec2 out_texcoord;', + 'varying vec2 v_tex_coord;', 'void main()', '{', - ' vec4 main_color = texture2D(u_main_sampler, out_texcoord);', - ' vec4 mask_color = texture2D(u_mask_sampler, out_texcoord);', + ' vec4 main_color = texture2D(u_main_sampler, v_tex_coord);', + ' vec4 mask_color = texture2D(u_mask_sampler, v_tex_coord);', ' // Just mask using alpha channel', ' gl_FragColor = vec4(main_color.rgb, mask_color.a);', '}'