diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 2ff4848..a086950 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -256,4 +256,18 @@ return this; }; + +Matrix.prototype.clone = function () +{ + var matrix = new Matrix(); + matrix.a = this.a; + matrix.b = this.b; + matrix.c = this.c; + matrix.d = this.d; + matrix.tx = this.tx; + matrix.ty = this.ty; + + return matrix; +} + Matrix.IDENTITY = new Matrix(); diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 2ff4848..a086950 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -256,4 +256,18 @@ return this; }; + +Matrix.prototype.clone = function () +{ + var matrix = new Matrix(); + matrix.a = this.a; + matrix.b = this.b; + matrix.c = this.c; + matrix.d = this.d; + matrix.tx = this.tx; + matrix.ty = this.ty; + + return matrix; +} + Matrix.IDENTITY = new Matrix(); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js index bfc18ef..1a508f9 100644 --- a/src/core/primitives/GraphicsRenderer.js +++ b/src/core/primitives/GraphicsRenderer.js @@ -60,6 +60,10 @@ renderer.blendModeManager.setBlendMode( graphics.blendMode ); +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + for (var i = 0; i < webGL.data.length; i++) { if (webGL.data[i].mode === 1) @@ -80,12 +84,10 @@ renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); shader = renderer.shaderManager.primitiveShader; + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 2ff4848..a086950 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -256,4 +256,18 @@ return this; }; + +Matrix.prototype.clone = function () +{ + var matrix = new Matrix(); + matrix.a = this.a; + matrix.b = this.b; + matrix.c = this.c; + matrix.d = this.d; + matrix.tx = this.tx; + matrix.ty = this.ty; + + return matrix; +} + Matrix.IDENTITY = new Matrix(); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js index bfc18ef..1a508f9 100644 --- a/src/core/primitives/GraphicsRenderer.js +++ b/src/core/primitives/GraphicsRenderer.js @@ -60,6 +60,10 @@ renderer.blendModeManager.setBlendMode( graphics.blendMode ); +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + for (var i = 0; i < webGL.data.length; i++) { if (webGL.data[i].mode === 1) @@ -80,12 +84,10 @@ renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); shader = renderer.shaderManager.primitiveShader; + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 026ad82..38452c9 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -3,9 +3,11 @@ WebGLMaskManager = require('./managers/WebGLMaskManager'), WebGLFilterManager = require('./managers/WebGLFilterManager'), WebGLBlendModeManager = require('./managers/WebGLBlendModeManager'), + RenderTarget = require('./utils/RenderTarget'), ObjectRenderer = require('./utils/ObjectRenderer'), math = require('../../math'), utils = require('../../utils'), + CONST = require('../../const'); /** @@ -211,14 +213,20 @@ */ this.blendModeManager = new WebGLBlendModeManager(this); + + this.blendModes = null; this._boundUpdateTexture = this.updateTexture.bind(this); this._boundDestroyTexture = this.destroyTexture.bind(this); + + // time init the context.. this._initContext(); + this.currentRenderTarget = this.renderTarget; + // map some webGL blend modes.. this._mapBlendModes(); @@ -242,6 +250,8 @@ for (var o in WebGLRenderer._objectRenderers) { this.objectRenderers[o] = new (WebGLRenderer._objectRenderers[o])(this); } + + } // constructor @@ -295,8 +305,12 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); + this.renderTarget = new RenderTarget(this.gl, this.width, this.height, null, true); + + this.emit('context', gl); + // now resize and we are good to go! this.resize(this.width, this.height); }; @@ -344,7 +358,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); } - this.renderDisplayObject(object, this.projection); + this.renderDisplayObject(object, this.renderTarget)//this.projection); }; /** @@ -354,24 +368,20 @@ * @param projection {Point} The projection * @param buffer {Array} a standard WebGL buffer */ -WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) +WebGLRenderer.prototype.renderDisplayObject = function (displayObject, renderTarget)//projection, buffer) { this.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + this.currentRenderTarget = renderTarget; + // reset the render session data.. this.drawCount = 0; // make sure to flip the Y if using a render texture.. - this.flipY = buffer ? -1 : 1; - - // set the default projection - this.projection = projection; - - //set the default offset - this.offset = this.offset; +// this.flipY = renderTarget.frameBuffer ? -1 : 1; // start the filter manager - this.filterManager.begin(buffer); + this.filterManager.begin(renderTarget.frameBuffer); // render the scene! displayObject.renderWebGL(this); @@ -415,6 +425,8 @@ this.gl.viewport(0, 0, this.width, this.height); + this.renderTarget.resize(width, height); + this.projection.x = this.width / 2 / this.resolution; this.projection.y = -this.height / 2 / this.resolution; }; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 2ff4848..a086950 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -256,4 +256,18 @@ return this; }; + +Matrix.prototype.clone = function () +{ + var matrix = new Matrix(); + matrix.a = this.a; + matrix.b = this.b; + matrix.c = this.c; + matrix.d = this.d; + matrix.tx = this.tx; + matrix.ty = this.ty; + + return matrix; +} + Matrix.IDENTITY = new Matrix(); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js index bfc18ef..1a508f9 100644 --- a/src/core/primitives/GraphicsRenderer.js +++ b/src/core/primitives/GraphicsRenderer.js @@ -60,6 +60,10 @@ renderer.blendModeManager.setBlendMode( graphics.blendMode ); +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + for (var i = 0; i < webGL.data.length; i++) { if (webGL.data[i].mode === 1) @@ -80,12 +84,10 @@ renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); shader = renderer.shaderManager.primitiveShader; + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 026ad82..38452c9 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -3,9 +3,11 @@ WebGLMaskManager = require('./managers/WebGLMaskManager'), WebGLFilterManager = require('./managers/WebGLFilterManager'), WebGLBlendModeManager = require('./managers/WebGLBlendModeManager'), + RenderTarget = require('./utils/RenderTarget'), ObjectRenderer = require('./utils/ObjectRenderer'), math = require('../../math'), utils = require('../../utils'), + CONST = require('../../const'); /** @@ -211,14 +213,20 @@ */ this.blendModeManager = new WebGLBlendModeManager(this); + + this.blendModes = null; this._boundUpdateTexture = this.updateTexture.bind(this); this._boundDestroyTexture = this.destroyTexture.bind(this); + + // time init the context.. this._initContext(); + this.currentRenderTarget = this.renderTarget; + // map some webGL blend modes.. this._mapBlendModes(); @@ -242,6 +250,8 @@ for (var o in WebGLRenderer._objectRenderers) { this.objectRenderers[o] = new (WebGLRenderer._objectRenderers[o])(this); } + + } // constructor @@ -295,8 +305,12 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); + this.renderTarget = new RenderTarget(this.gl, this.width, this.height, null, true); + + this.emit('context', gl); + // now resize and we are good to go! this.resize(this.width, this.height); }; @@ -344,7 +358,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); } - this.renderDisplayObject(object, this.projection); + this.renderDisplayObject(object, this.renderTarget)//this.projection); }; /** @@ -354,24 +368,20 @@ * @param projection {Point} The projection * @param buffer {Array} a standard WebGL buffer */ -WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) +WebGLRenderer.prototype.renderDisplayObject = function (displayObject, renderTarget)//projection, buffer) { this.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + this.currentRenderTarget = renderTarget; + // reset the render session data.. this.drawCount = 0; // make sure to flip the Y if using a render texture.. - this.flipY = buffer ? -1 : 1; - - // set the default projection - this.projection = projection; - - //set the default offset - this.offset = this.offset; +// this.flipY = renderTarget.frameBuffer ? -1 : 1; // start the filter manager - this.filterManager.begin(buffer); + this.filterManager.begin(renderTarget.frameBuffer); // render the scene! displayObject.renderWebGL(this); @@ -415,6 +425,8 @@ this.gl.viewport(0, 0, this.width, this.height); + this.renderTarget.resize(width, height); + this.projection.x = this.width / 2 / this.resolution; this.projection.y = -this.height / 2 / this.resolution; }; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index abe4a51..6a1f782 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -136,10 +136,7 @@ gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 2ff4848..a086950 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -256,4 +256,18 @@ return this; }; + +Matrix.prototype.clone = function () +{ + var matrix = new Matrix(); + matrix.a = this.a; + matrix.b = this.b; + matrix.c = this.c; + matrix.d = this.d; + matrix.tx = this.tx; + matrix.ty = this.ty; + + return matrix; +} + Matrix.IDENTITY = new Matrix(); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js index bfc18ef..1a508f9 100644 --- a/src/core/primitives/GraphicsRenderer.js +++ b/src/core/primitives/GraphicsRenderer.js @@ -60,6 +60,10 @@ renderer.blendModeManager.setBlendMode( graphics.blendMode ); +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + for (var i = 0; i < webGL.data.length; i++) { if (webGL.data[i].mode === 1) @@ -80,12 +84,10 @@ renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); shader = renderer.shaderManager.primitiveShader; + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 026ad82..38452c9 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -3,9 +3,11 @@ WebGLMaskManager = require('./managers/WebGLMaskManager'), WebGLFilterManager = require('./managers/WebGLFilterManager'), WebGLBlendModeManager = require('./managers/WebGLBlendModeManager'), + RenderTarget = require('./utils/RenderTarget'), ObjectRenderer = require('./utils/ObjectRenderer'), math = require('../../math'), utils = require('../../utils'), + CONST = require('../../const'); /** @@ -211,14 +213,20 @@ */ this.blendModeManager = new WebGLBlendModeManager(this); + + this.blendModes = null; this._boundUpdateTexture = this.updateTexture.bind(this); this._boundDestroyTexture = this.destroyTexture.bind(this); + + // time init the context.. this._initContext(); + this.currentRenderTarget = this.renderTarget; + // map some webGL blend modes.. this._mapBlendModes(); @@ -242,6 +250,8 @@ for (var o in WebGLRenderer._objectRenderers) { this.objectRenderers[o] = new (WebGLRenderer._objectRenderers[o])(this); } + + } // constructor @@ -295,8 +305,12 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); + this.renderTarget = new RenderTarget(this.gl, this.width, this.height, null, true); + + this.emit('context', gl); + // now resize and we are good to go! this.resize(this.width, this.height); }; @@ -344,7 +358,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); } - this.renderDisplayObject(object, this.projection); + this.renderDisplayObject(object, this.renderTarget)//this.projection); }; /** @@ -354,24 +368,20 @@ * @param projection {Point} The projection * @param buffer {Array} a standard WebGL buffer */ -WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) +WebGLRenderer.prototype.renderDisplayObject = function (displayObject, renderTarget)//projection, buffer) { this.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + this.currentRenderTarget = renderTarget; + // reset the render session data.. this.drawCount = 0; // make sure to flip the Y if using a render texture.. - this.flipY = buffer ? -1 : 1; - - // set the default projection - this.projection = projection; - - //set the default offset - this.offset = this.offset; +// this.flipY = renderTarget.frameBuffer ? -1 : 1; // start the filter manager - this.filterManager.begin(buffer); + this.filterManager.begin(renderTarget.frameBuffer); // render the scene! displayObject.renderWebGL(this); @@ -415,6 +425,8 @@ this.gl.viewport(0, 0, this.width, this.height); + this.renderTarget.resize(width, height); + this.projection.x = this.width / 2 / this.resolution; this.projection.y = -this.height / 2 / this.resolution; }; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index abe4a51..6a1f782 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -136,10 +136,7 @@ gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index cb200d1..f8a07da 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -12,23 +12,18 @@ // vertex shader [ 'attribute vec2 aVertexPosition;', - // 'attribute vec2 aTextureCoord;', - // 'attribute vec4 aColor;', 'uniform mat3 translationMatrix;', - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', + 'uniform mat3 projectionMatrix;', 'uniform vec3 tint;', 'uniform float alpha;', 'uniform vec3 color;', - 'uniform float flipY;', + 'varying vec4 vColor;', 'void main(void){', - ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', - ' v -= offsetVector.xyx;', - ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', + ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vColor = vec4(color * alpha * tint, alpha);',//" * vec4(tint * alpha, alpha);', '}' ].join('\n'), diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 2ff4848..a086950 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -256,4 +256,18 @@ return this; }; + +Matrix.prototype.clone = function () +{ + var matrix = new Matrix(); + matrix.a = this.a; + matrix.b = this.b; + matrix.c = this.c; + matrix.d = this.d; + matrix.tx = this.tx; + matrix.ty = this.ty; + + return matrix; +} + Matrix.IDENTITY = new Matrix(); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js index bfc18ef..1a508f9 100644 --- a/src/core/primitives/GraphicsRenderer.js +++ b/src/core/primitives/GraphicsRenderer.js @@ -60,6 +60,10 @@ renderer.blendModeManager.setBlendMode( graphics.blendMode ); +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + for (var i = 0; i < webGL.data.length; i++) { if (webGL.data[i].mode === 1) @@ -80,12 +84,10 @@ renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); shader = renderer.shaderManager.primitiveShader; + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 026ad82..38452c9 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -3,9 +3,11 @@ WebGLMaskManager = require('./managers/WebGLMaskManager'), WebGLFilterManager = require('./managers/WebGLFilterManager'), WebGLBlendModeManager = require('./managers/WebGLBlendModeManager'), + RenderTarget = require('./utils/RenderTarget'), ObjectRenderer = require('./utils/ObjectRenderer'), math = require('../../math'), utils = require('../../utils'), + CONST = require('../../const'); /** @@ -211,14 +213,20 @@ */ this.blendModeManager = new WebGLBlendModeManager(this); + + this.blendModes = null; this._boundUpdateTexture = this.updateTexture.bind(this); this._boundDestroyTexture = this.destroyTexture.bind(this); + + // time init the context.. this._initContext(); + this.currentRenderTarget = this.renderTarget; + // map some webGL blend modes.. this._mapBlendModes(); @@ -242,6 +250,8 @@ for (var o in WebGLRenderer._objectRenderers) { this.objectRenderers[o] = new (WebGLRenderer._objectRenderers[o])(this); } + + } // constructor @@ -295,8 +305,12 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); + this.renderTarget = new RenderTarget(this.gl, this.width, this.height, null, true); + + this.emit('context', gl); + // now resize and we are good to go! this.resize(this.width, this.height); }; @@ -344,7 +358,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); } - this.renderDisplayObject(object, this.projection); + this.renderDisplayObject(object, this.renderTarget)//this.projection); }; /** @@ -354,24 +368,20 @@ * @param projection {Point} The projection * @param buffer {Array} a standard WebGL buffer */ -WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) +WebGLRenderer.prototype.renderDisplayObject = function (displayObject, renderTarget)//projection, buffer) { this.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + this.currentRenderTarget = renderTarget; + // reset the render session data.. this.drawCount = 0; // make sure to flip the Y if using a render texture.. - this.flipY = buffer ? -1 : 1; - - // set the default projection - this.projection = projection; - - //set the default offset - this.offset = this.offset; +// this.flipY = renderTarget.frameBuffer ? -1 : 1; // start the filter manager - this.filterManager.begin(buffer); + this.filterManager.begin(renderTarget.frameBuffer); // render the scene! displayObject.renderWebGL(this); @@ -415,6 +425,8 @@ this.gl.viewport(0, 0, this.width, this.height); + this.renderTarget.resize(width, height); + this.projection.x = this.width / 2 / this.resolution; this.projection.y = -this.height / 2 / this.resolution; }; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index abe4a51..6a1f782 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -136,10 +136,7 @@ gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index cb200d1..f8a07da 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -12,23 +12,18 @@ // vertex shader [ 'attribute vec2 aVertexPosition;', - // 'attribute vec2 aTextureCoord;', - // 'attribute vec4 aColor;', 'uniform mat3 translationMatrix;', - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', + 'uniform mat3 projectionMatrix;', 'uniform vec3 tint;', 'uniform float alpha;', 'uniform vec3 color;', - 'uniform float flipY;', + 'varying vec4 vColor;', 'void main(void){', - ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', - ' v -= offsetVector.xyx;', - ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', + ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vColor = vec4(color * alpha * tint, alpha);',//" * vec4(tint * alpha, alpha);', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index 1446f28..753c475 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -12,12 +12,11 @@ // vertex shader [ 'attribute vec2 aVertexPosition;', - // 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', 'uniform mat3 translationMatrix;', - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', + 'uniform mat3 projectionMatrix;', + 'uniform float alpha;', 'uniform float flipY;', 'uniform vec3 tint;', @@ -25,9 +24,7 @@ 'varying vec4 vColor;', 'void main(void){', - ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', - ' v -= offsetVector.xyx;', - ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', + ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vColor = aColor * vec4(tint * alpha, alpha);', '}' ].join('\n'), @@ -44,7 +41,6 @@ // custom uniforms { tint: { type: '3f', value: [0, 0, 0] }, - flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } }, diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 2ff4848..a086950 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -256,4 +256,18 @@ return this; }; + +Matrix.prototype.clone = function () +{ + var matrix = new Matrix(); + matrix.a = this.a; + matrix.b = this.b; + matrix.c = this.c; + matrix.d = this.d; + matrix.tx = this.tx; + matrix.ty = this.ty; + + return matrix; +} + Matrix.IDENTITY = new Matrix(); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js index bfc18ef..1a508f9 100644 --- a/src/core/primitives/GraphicsRenderer.js +++ b/src/core/primitives/GraphicsRenderer.js @@ -60,6 +60,10 @@ renderer.blendModeManager.setBlendMode( graphics.blendMode ); +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + for (var i = 0; i < webGL.data.length; i++) { if (webGL.data[i].mode === 1) @@ -80,12 +84,10 @@ renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); shader = renderer.shaderManager.primitiveShader; + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 026ad82..38452c9 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -3,9 +3,11 @@ WebGLMaskManager = require('./managers/WebGLMaskManager'), WebGLFilterManager = require('./managers/WebGLFilterManager'), WebGLBlendModeManager = require('./managers/WebGLBlendModeManager'), + RenderTarget = require('./utils/RenderTarget'), ObjectRenderer = require('./utils/ObjectRenderer'), math = require('../../math'), utils = require('../../utils'), + CONST = require('../../const'); /** @@ -211,14 +213,20 @@ */ this.blendModeManager = new WebGLBlendModeManager(this); + + this.blendModes = null; this._boundUpdateTexture = this.updateTexture.bind(this); this._boundDestroyTexture = this.destroyTexture.bind(this); + + // time init the context.. this._initContext(); + this.currentRenderTarget = this.renderTarget; + // map some webGL blend modes.. this._mapBlendModes(); @@ -242,6 +250,8 @@ for (var o in WebGLRenderer._objectRenderers) { this.objectRenderers[o] = new (WebGLRenderer._objectRenderers[o])(this); } + + } // constructor @@ -295,8 +305,12 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); + this.renderTarget = new RenderTarget(this.gl, this.width, this.height, null, true); + + this.emit('context', gl); + // now resize and we are good to go! this.resize(this.width, this.height); }; @@ -344,7 +358,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); } - this.renderDisplayObject(object, this.projection); + this.renderDisplayObject(object, this.renderTarget)//this.projection); }; /** @@ -354,24 +368,20 @@ * @param projection {Point} The projection * @param buffer {Array} a standard WebGL buffer */ -WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) +WebGLRenderer.prototype.renderDisplayObject = function (displayObject, renderTarget)//projection, buffer) { this.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + this.currentRenderTarget = renderTarget; + // reset the render session data.. this.drawCount = 0; // make sure to flip the Y if using a render texture.. - this.flipY = buffer ? -1 : 1; - - // set the default projection - this.projection = projection; - - //set the default offset - this.offset = this.offset; +// this.flipY = renderTarget.frameBuffer ? -1 : 1; // start the filter manager - this.filterManager.begin(buffer); + this.filterManager.begin(renderTarget.frameBuffer); // render the scene! displayObject.renderWebGL(this); @@ -415,6 +425,8 @@ this.gl.viewport(0, 0, this.width, this.height); + this.renderTarget.resize(width, height); + this.projection.x = this.width / 2 / this.resolution; this.projection.y = -this.height / 2 / this.resolution; }; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index abe4a51..6a1f782 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -136,10 +136,7 @@ gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index cb200d1..f8a07da 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -12,23 +12,18 @@ // vertex shader [ 'attribute vec2 aVertexPosition;', - // 'attribute vec2 aTextureCoord;', - // 'attribute vec4 aColor;', 'uniform mat3 translationMatrix;', - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', + 'uniform mat3 projectionMatrix;', 'uniform vec3 tint;', 'uniform float alpha;', 'uniform vec3 color;', - 'uniform float flipY;', + 'varying vec4 vColor;', 'void main(void){', - ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', - ' v -= offsetVector.xyx;', - ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', + ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vColor = vec4(color * alpha * tint, alpha);',//" * vec4(tint * alpha, alpha);', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index 1446f28..753c475 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -12,12 +12,11 @@ // vertex shader [ 'attribute vec2 aVertexPosition;', - // 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', 'uniform mat3 translationMatrix;', - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', + 'uniform mat3 projectionMatrix;', + 'uniform float alpha;', 'uniform float flipY;', 'uniform vec3 tint;', @@ -25,9 +24,7 @@ 'varying vec4 vColor;', 'void main(void){', - ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', - ' v -= offsetVector.xyx;', - ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', + ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vColor = aColor * vec4(tint * alpha, alpha);', '}' ].join('\n'), @@ -44,7 +41,6 @@ // custom uniforms { tint: { type: '3f', value: [0, 0, 0] }, - flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } }, diff --git a/src/core/renderers/webgl/shaders/Shader.js b/src/core/renderers/webgl/shaders/Shader.js index 4fc4232..d065a76 100644 --- a/src/core/renderers/webgl/shaders/Shader.js +++ b/src/core/renderers/webgl/shaders/Shader.js @@ -31,6 +31,9 @@ uSampler: { type: 'sampler2D', value: 0 }, projectionVector: { type: '2f', value: { x: 0, y: 0 } }, offsetVector: { type: '2f', value: { x: 0, y: 0 } }, + projectionMatrix: { type: 'mat3', value: new Float32Array(1, 0, 0, + 0, 1, 0, + 0, 0, 1) }, dimensions: { type: '4f', value: new Float32Array(4) } }; @@ -59,6 +62,7 @@ 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', + 'uniform mat3 projectionMatrix;', 'uniform vec2 projectionVector;', 'uniform vec2 offsetVector;', @@ -68,7 +72,9 @@ 'const vec2 center = vec2(-1.0, 1.0);', 'void main(void){', - ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + // ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + // ' gl_Position = vec4( projectionMatrix * vec3(aVertexPosition, 1.0) ), 0.0, 1.0);', + 'gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', '}' diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 2ff4848..a086950 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -256,4 +256,18 @@ return this; }; + +Matrix.prototype.clone = function () +{ + var matrix = new Matrix(); + matrix.a = this.a; + matrix.b = this.b; + matrix.c = this.c; + matrix.d = this.d; + matrix.tx = this.tx; + matrix.ty = this.ty; + + return matrix; +} + Matrix.IDENTITY = new Matrix(); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js index bfc18ef..1a508f9 100644 --- a/src/core/primitives/GraphicsRenderer.js +++ b/src/core/primitives/GraphicsRenderer.js @@ -60,6 +60,10 @@ renderer.blendModeManager.setBlendMode( graphics.blendMode ); +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + for (var i = 0; i < webGL.data.length; i++) { if (webGL.data[i].mode === 1) @@ -80,12 +84,10 @@ renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); shader = renderer.shaderManager.primitiveShader; + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 026ad82..38452c9 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -3,9 +3,11 @@ WebGLMaskManager = require('./managers/WebGLMaskManager'), WebGLFilterManager = require('./managers/WebGLFilterManager'), WebGLBlendModeManager = require('./managers/WebGLBlendModeManager'), + RenderTarget = require('./utils/RenderTarget'), ObjectRenderer = require('./utils/ObjectRenderer'), math = require('../../math'), utils = require('../../utils'), + CONST = require('../../const'); /** @@ -211,14 +213,20 @@ */ this.blendModeManager = new WebGLBlendModeManager(this); + + this.blendModes = null; this._boundUpdateTexture = this.updateTexture.bind(this); this._boundDestroyTexture = this.destroyTexture.bind(this); + + // time init the context.. this._initContext(); + this.currentRenderTarget = this.renderTarget; + // map some webGL blend modes.. this._mapBlendModes(); @@ -242,6 +250,8 @@ for (var o in WebGLRenderer._objectRenderers) { this.objectRenderers[o] = new (WebGLRenderer._objectRenderers[o])(this); } + + } // constructor @@ -295,8 +305,12 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); + this.renderTarget = new RenderTarget(this.gl, this.width, this.height, null, true); + + this.emit('context', gl); + // now resize and we are good to go! this.resize(this.width, this.height); }; @@ -344,7 +358,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); } - this.renderDisplayObject(object, this.projection); + this.renderDisplayObject(object, this.renderTarget)//this.projection); }; /** @@ -354,24 +368,20 @@ * @param projection {Point} The projection * @param buffer {Array} a standard WebGL buffer */ -WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) +WebGLRenderer.prototype.renderDisplayObject = function (displayObject, renderTarget)//projection, buffer) { this.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + this.currentRenderTarget = renderTarget; + // reset the render session data.. this.drawCount = 0; // make sure to flip the Y if using a render texture.. - this.flipY = buffer ? -1 : 1; - - // set the default projection - this.projection = projection; - - //set the default offset - this.offset = this.offset; +// this.flipY = renderTarget.frameBuffer ? -1 : 1; // start the filter manager - this.filterManager.begin(buffer); + this.filterManager.begin(renderTarget.frameBuffer); // render the scene! displayObject.renderWebGL(this); @@ -415,6 +425,8 @@ this.gl.viewport(0, 0, this.width, this.height); + this.renderTarget.resize(width, height); + this.projection.x = this.width / 2 / this.resolution; this.projection.y = -this.height / 2 / this.resolution; }; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index abe4a51..6a1f782 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -136,10 +136,7 @@ gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index cb200d1..f8a07da 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -12,23 +12,18 @@ // vertex shader [ 'attribute vec2 aVertexPosition;', - // 'attribute vec2 aTextureCoord;', - // 'attribute vec4 aColor;', 'uniform mat3 translationMatrix;', - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', + 'uniform mat3 projectionMatrix;', 'uniform vec3 tint;', 'uniform float alpha;', 'uniform vec3 color;', - 'uniform float flipY;', + 'varying vec4 vColor;', 'void main(void){', - ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', - ' v -= offsetVector.xyx;', - ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', + ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vColor = vec4(color * alpha * tint, alpha);',//" * vec4(tint * alpha, alpha);', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index 1446f28..753c475 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -12,12 +12,11 @@ // vertex shader [ 'attribute vec2 aVertexPosition;', - // 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', 'uniform mat3 translationMatrix;', - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', + 'uniform mat3 projectionMatrix;', + 'uniform float alpha;', 'uniform float flipY;', 'uniform vec3 tint;', @@ -25,9 +24,7 @@ 'varying vec4 vColor;', 'void main(void){', - ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', - ' v -= offsetVector.xyx;', - ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', + ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vColor = aColor * vec4(tint * alpha, alpha);', '}' ].join('\n'), @@ -44,7 +41,6 @@ // custom uniforms { tint: { type: '3f', value: [0, 0, 0] }, - flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } }, diff --git a/src/core/renderers/webgl/shaders/Shader.js b/src/core/renderers/webgl/shaders/Shader.js index 4fc4232..d065a76 100644 --- a/src/core/renderers/webgl/shaders/Shader.js +++ b/src/core/renderers/webgl/shaders/Shader.js @@ -31,6 +31,9 @@ uSampler: { type: 'sampler2D', value: 0 }, projectionVector: { type: '2f', value: { x: 0, y: 0 } }, offsetVector: { type: '2f', value: { x: 0, y: 0 } }, + projectionMatrix: { type: 'mat3', value: new Float32Array(1, 0, 0, + 0, 1, 0, + 0, 0, 1) }, dimensions: { type: '4f', value: new Float32Array(4) } }; @@ -59,6 +62,7 @@ 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', + 'uniform mat3 projectionMatrix;', 'uniform vec2 projectionVector;', 'uniform vec2 offsetVector;', @@ -68,7 +72,9 @@ 'const vec2 center = vec2(-1.0, 1.0);', 'void main(void){', - ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + // ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + // ' gl_Position = vec4( projectionMatrix * vec3(aVertexPosition, 1.0) ), 0.0, 1.0);', + 'gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', '}' diff --git a/src/core/renderers/webgl/shaders/SpriteShader.js b/src/core/renderers/webgl/shaders/SpriteShader.js index e3de909..1805b0a 100644 --- a/src/core/renderers/webgl/shaders/SpriteShader.js +++ b/src/core/renderers/webgl/shaders/SpriteShader.js @@ -9,27 +9,7 @@ { Shader.call(this, gl, - // vertex shader - [ - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'const vec2 center = vec2(-1.0, 1.0);', - - 'void main(void){', - ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', - ' vTextureCoord = aTextureCoord;', - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - - ].join('\n'), + null, // fragment shader [ 'precision lowp float;', diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 2ff4848..a086950 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -256,4 +256,18 @@ return this; }; + +Matrix.prototype.clone = function () +{ + var matrix = new Matrix(); + matrix.a = this.a; + matrix.b = this.b; + matrix.c = this.c; + matrix.d = this.d; + matrix.tx = this.tx; + matrix.ty = this.ty; + + return matrix; +} + Matrix.IDENTITY = new Matrix(); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js index bfc18ef..1a508f9 100644 --- a/src/core/primitives/GraphicsRenderer.js +++ b/src/core/primitives/GraphicsRenderer.js @@ -60,6 +60,10 @@ renderer.blendModeManager.setBlendMode( graphics.blendMode ); +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + for (var i = 0; i < webGL.data.length; i++) { if (webGL.data[i].mode === 1) @@ -80,12 +84,10 @@ renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); shader = renderer.shaderManager.primitiveShader; + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 026ad82..38452c9 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -3,9 +3,11 @@ WebGLMaskManager = require('./managers/WebGLMaskManager'), WebGLFilterManager = require('./managers/WebGLFilterManager'), WebGLBlendModeManager = require('./managers/WebGLBlendModeManager'), + RenderTarget = require('./utils/RenderTarget'), ObjectRenderer = require('./utils/ObjectRenderer'), math = require('../../math'), utils = require('../../utils'), + CONST = require('../../const'); /** @@ -211,14 +213,20 @@ */ this.blendModeManager = new WebGLBlendModeManager(this); + + this.blendModes = null; this._boundUpdateTexture = this.updateTexture.bind(this); this._boundDestroyTexture = this.destroyTexture.bind(this); + + // time init the context.. this._initContext(); + this.currentRenderTarget = this.renderTarget; + // map some webGL blend modes.. this._mapBlendModes(); @@ -242,6 +250,8 @@ for (var o in WebGLRenderer._objectRenderers) { this.objectRenderers[o] = new (WebGLRenderer._objectRenderers[o])(this); } + + } // constructor @@ -295,8 +305,12 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); + this.renderTarget = new RenderTarget(this.gl, this.width, this.height, null, true); + + this.emit('context', gl); + // now resize and we are good to go! this.resize(this.width, this.height); }; @@ -344,7 +358,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); } - this.renderDisplayObject(object, this.projection); + this.renderDisplayObject(object, this.renderTarget)//this.projection); }; /** @@ -354,24 +368,20 @@ * @param projection {Point} The projection * @param buffer {Array} a standard WebGL buffer */ -WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) +WebGLRenderer.prototype.renderDisplayObject = function (displayObject, renderTarget)//projection, buffer) { this.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + this.currentRenderTarget = renderTarget; + // reset the render session data.. this.drawCount = 0; // make sure to flip the Y if using a render texture.. - this.flipY = buffer ? -1 : 1; - - // set the default projection - this.projection = projection; - - //set the default offset - this.offset = this.offset; +// this.flipY = renderTarget.frameBuffer ? -1 : 1; // start the filter manager - this.filterManager.begin(buffer); + this.filterManager.begin(renderTarget.frameBuffer); // render the scene! displayObject.renderWebGL(this); @@ -415,6 +425,8 @@ this.gl.viewport(0, 0, this.width, this.height); + this.renderTarget.resize(width, height); + this.projection.x = this.width / 2 / this.resolution; this.projection.y = -this.height / 2 / this.resolution; }; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index abe4a51..6a1f782 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -136,10 +136,7 @@ gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index cb200d1..f8a07da 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -12,23 +12,18 @@ // vertex shader [ 'attribute vec2 aVertexPosition;', - // 'attribute vec2 aTextureCoord;', - // 'attribute vec4 aColor;', 'uniform mat3 translationMatrix;', - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', + 'uniform mat3 projectionMatrix;', 'uniform vec3 tint;', 'uniform float alpha;', 'uniform vec3 color;', - 'uniform float flipY;', + 'varying vec4 vColor;', 'void main(void){', - ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', - ' v -= offsetVector.xyx;', - ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', + ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vColor = vec4(color * alpha * tint, alpha);',//" * vec4(tint * alpha, alpha);', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index 1446f28..753c475 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -12,12 +12,11 @@ // vertex shader [ 'attribute vec2 aVertexPosition;', - // 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', 'uniform mat3 translationMatrix;', - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', + 'uniform mat3 projectionMatrix;', + 'uniform float alpha;', 'uniform float flipY;', 'uniform vec3 tint;', @@ -25,9 +24,7 @@ 'varying vec4 vColor;', 'void main(void){', - ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', - ' v -= offsetVector.xyx;', - ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', + ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vColor = aColor * vec4(tint * alpha, alpha);', '}' ].join('\n'), @@ -44,7 +41,6 @@ // custom uniforms { tint: { type: '3f', value: [0, 0, 0] }, - flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } }, diff --git a/src/core/renderers/webgl/shaders/Shader.js b/src/core/renderers/webgl/shaders/Shader.js index 4fc4232..d065a76 100644 --- a/src/core/renderers/webgl/shaders/Shader.js +++ b/src/core/renderers/webgl/shaders/Shader.js @@ -31,6 +31,9 @@ uSampler: { type: 'sampler2D', value: 0 }, projectionVector: { type: '2f', value: { x: 0, y: 0 } }, offsetVector: { type: '2f', value: { x: 0, y: 0 } }, + projectionMatrix: { type: 'mat3', value: new Float32Array(1, 0, 0, + 0, 1, 0, + 0, 0, 1) }, dimensions: { type: '4f', value: new Float32Array(4) } }; @@ -59,6 +62,7 @@ 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', + 'uniform mat3 projectionMatrix;', 'uniform vec2 projectionVector;', 'uniform vec2 offsetVector;', @@ -68,7 +72,9 @@ 'const vec2 center = vec2(-1.0, 1.0);', 'void main(void){', - ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + // ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + // ' gl_Position = vec4( projectionMatrix * vec3(aVertexPosition, 1.0) ), 0.0, 1.0);', + 'gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', '}' diff --git a/src/core/renderers/webgl/shaders/SpriteShader.js b/src/core/renderers/webgl/shaders/SpriteShader.js index e3de909..1805b0a 100644 --- a/src/core/renderers/webgl/shaders/SpriteShader.js +++ b/src/core/renderers/webgl/shaders/SpriteShader.js @@ -9,27 +9,7 @@ { Shader.call(this, gl, - // vertex shader - [ - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'const vec2 center = vec2(-1.0, 1.0);', - - 'void main(void){', - ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', - ' vTextureCoord = aTextureCoord;', - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - - ].join('\n'), + null, // fragment shader [ 'precision lowp float;', diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js new file mode 100644 index 0000000..ced29a2 --- /dev/null +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -0,0 +1,189 @@ +var math = require('../../../math'), + CONST = require('../../../const'); + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** +* @class FrameBuffer +* @constructor +* @param gl {WebGLContext} the current WebGL drawing context +* @param width {Number} the horizontal range of the filter +* @param height {Number} the vertical range of the filter +* @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values +*/ +var RenderTarget = function(gl, width, height, scaleMode, root) +{ + /** + * @property gl + * @type WebGLContext + */ + this.gl = gl; + + // next time to create a frame buffer and texture + + /** + * @property frameBuffer + * @type Any + */ + this.frameBuffer = null; + + /** + * @property texture + * @type Any + */ + this.texture = null + + this.width = width; + this.height = height; + + this.resolution = 1; + + this.projectionMatrix = new math.Matrix(); + + + + /** + * @property scaleMode + * @type Number + */ + this.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; + + this.root = root; + + if(!this.root) + { + this.flipY = true; + + this.projectionMatrix.a = 1/width*2; + this.projectionMatrix.d = 1/height*2; + + this.projectionMatrix.tx = -1; + this.projectionMatrix.ty = -1; + + this.frameBuffer = gl.createFramebuffer(); + + + /* + A frame buffer needs a target to render to.. + create a texture and bind it attach it to the framebuffer.. + */ + + this.texture = gl.createTexture(); + + gl.bindTexture(gl.TEXTURE_2D, this.texture); + + // set the scale properties of the texture.. + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + /* + The stencil buffer is used for masking in pixi + lets create one and then add attach it to the framebuffer.. + */ + this.stencilBuffer = gl.createRenderbuffer(); + gl.bindRenderbuffer(gl.RENDERBUFFER, this.stencilBuffer); + gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.stencilBuffer); + } + else + { + this.projectionMatrix.a = 1/width*2; + this.projectionMatrix.d = -1/height*2; + + this.projectionMatrix.tx = -1; + this.projectionMatrix.ty = 1; + + + } +}; + +RenderTarget.prototype.constructor = RenderTarget; +module.exports = RenderTarget; + +/** +* Clears the filter texture. +* +* @method clear +*/ +RenderTarget.prototype.clear = function() +{ + var gl = this.gl; + + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); +}; + +RenderTarget.prototype.activate = function() +{ + this.gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); +} + +/** + * Resizes the texture to the specified width and height + * + * @method resize + * @param width {Number} the new width of the texture + * @param height {Number} the new height of the texture + */ +RenderTarget.prototype.resize = function(width, height) +{ + if(this.width === width && this.height === height) return; + + this.width = width; + this.height = height; + + this.projectionMatrix = new math.Matrix(); + + this.projectionMatrix.a = 1/width*2; + this.projectionMatrix.d = -1/height*2; + + this.projectionMatrix.tx = -1; + this.projectionMatrix.ty = 1; + + + if(!this.root) + { + var gl = this.gl; + + this.projectionMatrix.a = 1/width*2; + this.projectionMatrix.d = 1/height*2; + + this.projectionMatrix.tx = -1; + this.projectionMatrix.ty = -1; + + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + // update the stencil buffer width and height + gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); + gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); + } + else + { + this.projectionMatrix.a = 1/width*2; + this.projectionMatrix.d = -1/height*2; + + this.projectionMatrix.tx = -1; + this.projectionMatrix.ty = 1; + } +}; + +/** +* Destroys the filter texture. +* +* @method destroy +*/ +RenderTarget.prototype.destroy = function() +{ + var gl = this.gl; + gl.deleteFramebuffer( this.frameBuffer ); + gl.deleteTexture( this.texture ); + + this.frameBuffer = null; + this.texture = null; +}; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 2ff4848..a086950 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -256,4 +256,18 @@ return this; }; + +Matrix.prototype.clone = function () +{ + var matrix = new Matrix(); + matrix.a = this.a; + matrix.b = this.b; + matrix.c = this.c; + matrix.d = this.d; + matrix.tx = this.tx; + matrix.ty = this.ty; + + return matrix; +} + Matrix.IDENTITY = new Matrix(); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js index bfc18ef..1a508f9 100644 --- a/src/core/primitives/GraphicsRenderer.js +++ b/src/core/primitives/GraphicsRenderer.js @@ -60,6 +60,10 @@ renderer.blendModeManager.setBlendMode( graphics.blendMode ); +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + for (var i = 0; i < webGL.data.length; i++) { if (webGL.data[i].mode === 1) @@ -80,12 +84,10 @@ renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); shader = renderer.shaderManager.primitiveShader; + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 026ad82..38452c9 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -3,9 +3,11 @@ WebGLMaskManager = require('./managers/WebGLMaskManager'), WebGLFilterManager = require('./managers/WebGLFilterManager'), WebGLBlendModeManager = require('./managers/WebGLBlendModeManager'), + RenderTarget = require('./utils/RenderTarget'), ObjectRenderer = require('./utils/ObjectRenderer'), math = require('../../math'), utils = require('../../utils'), + CONST = require('../../const'); /** @@ -211,14 +213,20 @@ */ this.blendModeManager = new WebGLBlendModeManager(this); + + this.blendModes = null; this._boundUpdateTexture = this.updateTexture.bind(this); this._boundDestroyTexture = this.destroyTexture.bind(this); + + // time init the context.. this._initContext(); + this.currentRenderTarget = this.renderTarget; + // map some webGL blend modes.. this._mapBlendModes(); @@ -242,6 +250,8 @@ for (var o in WebGLRenderer._objectRenderers) { this.objectRenderers[o] = new (WebGLRenderer._objectRenderers[o])(this); } + + } // constructor @@ -295,8 +305,12 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); + this.renderTarget = new RenderTarget(this.gl, this.width, this.height, null, true); + + this.emit('context', gl); + // now resize and we are good to go! this.resize(this.width, this.height); }; @@ -344,7 +358,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); } - this.renderDisplayObject(object, this.projection); + this.renderDisplayObject(object, this.renderTarget)//this.projection); }; /** @@ -354,24 +368,20 @@ * @param projection {Point} The projection * @param buffer {Array} a standard WebGL buffer */ -WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) +WebGLRenderer.prototype.renderDisplayObject = function (displayObject, renderTarget)//projection, buffer) { this.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); + this.currentRenderTarget = renderTarget; + // reset the render session data.. this.drawCount = 0; // make sure to flip the Y if using a render texture.. - this.flipY = buffer ? -1 : 1; - - // set the default projection - this.projection = projection; - - //set the default offset - this.offset = this.offset; +// this.flipY = renderTarget.frameBuffer ? -1 : 1; // start the filter manager - this.filterManager.begin(buffer); + this.filterManager.begin(renderTarget.frameBuffer); // render the scene! displayObject.renderWebGL(this); @@ -415,6 +425,8 @@ this.gl.viewport(0, 0, this.width, this.height); + this.renderTarget.resize(width, height); + this.projection.x = this.width / 2 / this.resolution; this.projection.y = -this.height / 2 / this.resolution; }; diff --git a/src/core/renderers/webgl/managers/WebGLMaskManager.js b/src/core/renderers/webgl/managers/WebGLMaskManager.js index abe4a51..6a1f782 100644 --- a/src/core/renderers/webgl/managers/WebGLMaskManager.js +++ b/src/core/renderers/webgl/managers/WebGLMaskManager.js @@ -136,10 +136,7 @@ gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - gl.uniform1f(shader.uniforms.flipY._location, 1); - - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, -projection.y); - gl.uniform2f(shader.uniforms.offsetVector._location, -offset.x, -offset.y); + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); diff --git a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js index cb200d1..f8a07da 100644 --- a/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -12,23 +12,18 @@ // vertex shader [ 'attribute vec2 aVertexPosition;', - // 'attribute vec2 aTextureCoord;', - // 'attribute vec4 aColor;', 'uniform mat3 translationMatrix;', - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', + 'uniform mat3 projectionMatrix;', 'uniform vec3 tint;', 'uniform float alpha;', 'uniform vec3 color;', - 'uniform float flipY;', + 'varying vec4 vColor;', 'void main(void){', - ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', - ' v -= offsetVector.xyx;', - ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', + ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vColor = vec4(color * alpha * tint, alpha);',//" * vec4(tint * alpha, alpha);', '}' ].join('\n'), diff --git a/src/core/renderers/webgl/shaders/PrimitiveShader.js b/src/core/renderers/webgl/shaders/PrimitiveShader.js index 1446f28..753c475 100644 --- a/src/core/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/core/renderers/webgl/shaders/PrimitiveShader.js @@ -12,12 +12,11 @@ // vertex shader [ 'attribute vec2 aVertexPosition;', - // 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', 'uniform mat3 translationMatrix;', - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', + 'uniform mat3 projectionMatrix;', + 'uniform float alpha;', 'uniform float flipY;', 'uniform vec3 tint;', @@ -25,9 +24,7 @@ 'varying vec4 vColor;', 'void main(void){', - ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', - ' v -= offsetVector.xyx;', - ' gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);', + ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vColor = aColor * vec4(tint * alpha, alpha);', '}' ].join('\n'), @@ -44,7 +41,6 @@ // custom uniforms { tint: { type: '3f', value: [0, 0, 0] }, - flipY: { type: '1f', value: 0 }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) } }, diff --git a/src/core/renderers/webgl/shaders/Shader.js b/src/core/renderers/webgl/shaders/Shader.js index 4fc4232..d065a76 100644 --- a/src/core/renderers/webgl/shaders/Shader.js +++ b/src/core/renderers/webgl/shaders/Shader.js @@ -31,6 +31,9 @@ uSampler: { type: 'sampler2D', value: 0 }, projectionVector: { type: '2f', value: { x: 0, y: 0 } }, offsetVector: { type: '2f', value: { x: 0, y: 0 } }, + projectionMatrix: { type: 'mat3', value: new Float32Array(1, 0, 0, + 0, 1, 0, + 0, 0, 1) }, dimensions: { type: '4f', value: new Float32Array(4) } }; @@ -59,6 +62,7 @@ 'attribute vec2 aTextureCoord;', 'attribute vec4 aColor;', + 'uniform mat3 projectionMatrix;', 'uniform vec2 projectionVector;', 'uniform vec2 offsetVector;', @@ -68,7 +72,9 @@ 'const vec2 center = vec2(-1.0, 1.0);', 'void main(void){', - ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + // ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + // ' gl_Position = vec4( projectionMatrix * vec3(aVertexPosition, 1.0) ), 0.0, 1.0);', + 'gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', '}' diff --git a/src/core/renderers/webgl/shaders/SpriteShader.js b/src/core/renderers/webgl/shaders/SpriteShader.js index e3de909..1805b0a 100644 --- a/src/core/renderers/webgl/shaders/SpriteShader.js +++ b/src/core/renderers/webgl/shaders/SpriteShader.js @@ -9,27 +9,7 @@ { Shader.call(this, gl, - // vertex shader - [ - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform vec2 projectionVector;', - 'uniform vec2 offsetVector;', - - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'const vec2 center = vec2(-1.0, 1.0);', - - 'void main(void){', - ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', - ' vTextureCoord = aTextureCoord;', - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - - ].join('\n'), + null, // fragment shader [ 'precision lowp float;', diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js new file mode 100644 index 0000000..ced29a2 --- /dev/null +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -0,0 +1,189 @@ +var math = require('../../../math'), + CONST = require('../../../const'); + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** +* @class FrameBuffer +* @constructor +* @param gl {WebGLContext} the current WebGL drawing context +* @param width {Number} the horizontal range of the filter +* @param height {Number} the vertical range of the filter +* @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values +*/ +var RenderTarget = function(gl, width, height, scaleMode, root) +{ + /** + * @property gl + * @type WebGLContext + */ + this.gl = gl; + + // next time to create a frame buffer and texture + + /** + * @property frameBuffer + * @type Any + */ + this.frameBuffer = null; + + /** + * @property texture + * @type Any + */ + this.texture = null + + this.width = width; + this.height = height; + + this.resolution = 1; + + this.projectionMatrix = new math.Matrix(); + + + + /** + * @property scaleMode + * @type Number + */ + this.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; + + this.root = root; + + if(!this.root) + { + this.flipY = true; + + this.projectionMatrix.a = 1/width*2; + this.projectionMatrix.d = 1/height*2; + + this.projectionMatrix.tx = -1; + this.projectionMatrix.ty = -1; + + this.frameBuffer = gl.createFramebuffer(); + + + /* + A frame buffer needs a target to render to.. + create a texture and bind it attach it to the framebuffer.. + */ + + this.texture = gl.createTexture(); + + gl.bindTexture(gl.TEXTURE_2D, this.texture); + + // set the scale properties of the texture.. + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + /* + The stencil buffer is used for masking in pixi + lets create one and then add attach it to the framebuffer.. + */ + this.stencilBuffer = gl.createRenderbuffer(); + gl.bindRenderbuffer(gl.RENDERBUFFER, this.stencilBuffer); + gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.stencilBuffer); + } + else + { + this.projectionMatrix.a = 1/width*2; + this.projectionMatrix.d = -1/height*2; + + this.projectionMatrix.tx = -1; + this.projectionMatrix.ty = 1; + + + } +}; + +RenderTarget.prototype.constructor = RenderTarget; +module.exports = RenderTarget; + +/** +* Clears the filter texture. +* +* @method clear +*/ +RenderTarget.prototype.clear = function() +{ + var gl = this.gl; + + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); +}; + +RenderTarget.prototype.activate = function() +{ + this.gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); +} + +/** + * Resizes the texture to the specified width and height + * + * @method resize + * @param width {Number} the new width of the texture + * @param height {Number} the new height of the texture + */ +RenderTarget.prototype.resize = function(width, height) +{ + if(this.width === width && this.height === height) return; + + this.width = width; + this.height = height; + + this.projectionMatrix = new math.Matrix(); + + this.projectionMatrix.a = 1/width*2; + this.projectionMatrix.d = -1/height*2; + + this.projectionMatrix.tx = -1; + this.projectionMatrix.ty = 1; + + + if(!this.root) + { + var gl = this.gl; + + this.projectionMatrix.a = 1/width*2; + this.projectionMatrix.d = 1/height*2; + + this.projectionMatrix.tx = -1; + this.projectionMatrix.ty = -1; + + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + // update the stencil buffer width and height + gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); + gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); + } + else + { + this.projectionMatrix.a = 1/width*2; + this.projectionMatrix.d = -1/height*2; + + this.projectionMatrix.tx = -1; + this.projectionMatrix.ty = 1; + } +}; + +/** +* Destroys the filter texture. +* +* @method destroy +*/ +RenderTarget.prototype.destroy = function() +{ + var gl = this.gl; + gl.deleteFramebuffer( this.frameBuffer ); + gl.deleteTexture( this.texture ); + + this.frameBuffer = null; + this.texture = null; +}; diff --git a/src/core/sprites/SpriteRenderer.js b/src/core/sprites/SpriteRenderer.js index fcb1e24..fd9a802 100644 --- a/src/core/sprites/SpriteRenderer.js +++ b/src/core/sprites/SpriteRenderer.js @@ -2,6 +2,7 @@ Shader = require('../renderers/webgl/shaders/Shader'), SpriteShader = require('../renderers/webgl/shaders/SpriteShader'), WebGLRenderer = require('../renderers/webgl/WebGLRenderer'); + math = require('../math'); /** * @author Mat Groves @@ -386,7 +387,7 @@ var batchSize = 0; var start = 0; - var currentBaseTexture = null; + var currentBaseTexture = sprite; var currentBlendMode = this.renderer.blendModeManager.currentBlendMode; var currentShader = null; @@ -442,14 +443,7 @@ // both thease only need to be set if they are changing.. // set the projection - var projection = this.renderer.projection; - gl.uniform2f(shader.uniforms.projectionVector._location, projection.x, projection.y); - - // TODO - this is temprorary! - var offsetVector = this.renderer.offset; - gl.uniform2f(shader.uniforms.offsetVector._location, offsetVector.x, offsetVector.y); - - // set the pointers + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); } }