diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 1bebf64..91eda1c 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -43,15 +43,13 @@ * @param graphics {PIXI.Graphics} * @param webGLData {any[]} */ -WebGLMaskManager.prototype.pushStencil = function (graphics, webGLData) +WebGLMaskManager.prototype.pushStencil = function (graphics) { this.renderer._activeRenderTarget.attachStencilBuffer(); var gl = this.renderer.gl, sms = this.stencilMaskStack; - this.bindGraphics(graphics, webGLData); - if (sms.stencilStack.length === 0) { gl.enable(gl.STENCIL_TEST); @@ -60,71 +58,17 @@ sms.count = 0; } - sms.stencilStack.push(webGLData); - - var level = sms.count; + sms.stencilStack.push(graphics); gl.colorMask(false, false, false, false); - gl.stencilFunc(gl.ALWAYS,0,0xFF); - gl.stencilOp(gl.KEEP,gl.KEEP,gl.INVERT); - // draw the triangle strip! + gl.stencilFunc(gl.ALWAYS,1,1); + gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - if (webGLData.mode === 1) - { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); + this.renderGraphics(graphics); - if (sms.reverse) - { - gl.stencilFunc(gl.EQUAL, 0xFF - level, 0xFF); - gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); - } - else - { - gl.stencilFunc(gl.EQUAL,level, 0xFF); - gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - } - - // draw a quad to increment.. - gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); - - if (sms.reverse) - { - gl.stencilFunc(gl.EQUAL,0xFF-(level+1), 0xFF); - } - else - { - gl.stencilFunc(gl.EQUAL,level+1, 0xFF); - } - - sms.reverse = !sms.reverse; - } - else - { - if (!sms.reverse) - { - gl.stencilFunc(gl.EQUAL, 0xFF - level, 0xFF); - gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); - } - else - { - gl.stencilFunc(gl.EQUAL,level, 0xFF); - gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - } - - gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); - - if (!sms.reverse) - { - gl.stencilFunc(gl.EQUAL,0xFF-(level+1), 0xFF); - } - else - { - gl.stencilFunc(gl.EQUAL,level+1, 0xFF); - } - } - + gl.stencilFunc(gl.NOTEQUAL,0, sms.stencilStack.length); gl.colorMask(true, true, true, true); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); @@ -137,84 +81,11 @@ * @param graphics {PIXI.Graphics} * @param webGLData {any[]} */ -WebGLMaskManager.prototype.bindGraphics = function (graphics, webGLData) +WebGLMaskManager.prototype.renderGraphics = function (graphics) { - //if (this._currentGraphics === graphics)return; - var gl = this.renderer.gl; - // bind the graphics object.. - var shader = this.renderer.plugins.graphics.primitiveShader; - - if (webGLData.mode === 1) - { - /* - shader = this.renderer.shaderManager.complexPrimitiveShader; - - this.renderer.shaderManager.setShader(shader); - - gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - - gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); - - gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); - - gl.uniform3fv(shader.uniforms.color._location, webGLData.color); - - gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); - - gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); - - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 2, 0); - - // now do the rest.. - // set the index buffer! - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); - */ - } - else - { - //this.renderer.shaderManager.activatePrimitiveShader(); -// shader = this.renderer.shaderManager.primitiveShader; - - this.renderer.bindShader(shader) - - shader.uniforms.translationMatrix = graphics.worldTransform.toArray(true); - shader.uniforms.tint = utils.hex2rgb(graphics.tint); - shader.uniforms.alpha = graphics.worldAlpha; - - - gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); - - - shader.attributes.aVertexPosition.pointer(gl.FLOAT, false, 4 * 6, 0); - shader.attributes.aColor.pointer(gl.FLOAT, false, 4 * 6, 2 * 4); - - gl.enableVertexAttribArray(shader.attributes.aVertexPosition.location); - gl.enableVertexAttribArray(shader.attributes.aColor.location); - - // set the index buffer! - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); -// gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); - - - /* this.renderer.shaderManager.setShader(shader); - - gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - - gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); - - gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); - - gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); - - gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); - - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); - gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); - - // set the index buffer! - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);*/ - } + this.renderer.plugins.graphics.render(graphics) + }; /** @@ -222,7 +93,7 @@ * @param graphics {PIXI.Graphics} * @param webGLData {any[]} */ -WebGLMaskManager.prototype.popStencil = function (graphics, webGLData) +WebGLMaskManager.prototype.popStencil = function (graphics) { var gl = this.renderer.gl, sms = this.stencilMaskStack; @@ -235,85 +106,22 @@ { // the stack is empty! gl.disable(gl.STENCIL_TEST); - } else { - var level = sms.count; - this.bindGraphics(graphics, webGLData); - gl.colorMask(false, false, false, false); - if (webGLData.mode === 1) - { - sms.reverse = !sms.reverse; + + gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); - if (sms.reverse) - { - gl.stencilFunc(gl.EQUAL, 0xFF - (level+1), 0xFF); - gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - } - else - { - gl.stencilFunc(gl.EQUAL,level+1, 0xFF); - gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); - } - - // draw a quad to increment.. - gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); - - gl.stencilFunc(gl.ALWAYS,0,0xFF); - gl.stencilOp(gl.KEEP,gl.KEEP,gl.INVERT); - - // draw the triangle strip! - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); - - this.renderer.drawCount += 2; - - if (!sms.reverse) - { - gl.stencilFunc(gl.EQUAL,0xFF-(level), 0xFF); - } - else - { - gl.stencilFunc(gl.EQUAL,level, 0xFF); - } - - } - else - { - // console.log("<<>>") - if (!sms.reverse) - { - gl.stencilFunc(gl.EQUAL, 0xFF - (level+1), 0xFF); - gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - } - else - { - gl.stencilFunc(gl.EQUAL,level+1, 0xFF); - gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); - } - - gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); - - this.renderer.drawCount++; - - if (!sms.reverse) - { - gl.stencilFunc(gl.EQUAL,0xFF-(level), 0xFF); - } - else - { - gl.stencilFunc(gl.EQUAL,level, 0xFF); - } - } + this.renderGraphics(graphics); + + gl.stencilFunc(gl.NOTEQUAL,0,sms.stencilStack.length); gl.colorMask(true, true, true, true); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); - - } }; @@ -336,19 +144,7 @@ WebGLMaskManager.prototype.pushMask = function (maskData) { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - - //TODO FIX - if (maskData.dirty) - { - this.renderer.plugins.graphics.updateGraphics(maskData, this.renderer.gl); - } - - if (!maskData._webGL[this.renderer.gl.id].data.length) - { - return; - } - - this.pushStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0]); + this.pushStencil(maskData) }; /** @@ -358,8 +154,6 @@ */ WebGLMaskManager.prototype.popMask = function (maskData) { - this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - - this.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0]); + this.popStencil(maskData) };