ccb 0.0.1

data/lib/ccb/builder/templates/project/folder/frameworks/cocos2d-html5/cocos2d/clipping-nodes/CCClippingNode.js

@@ -0,0 +1,224 @@
+/****************************************************************************
+ Copyright (c) 2008-2010 Ricardo Quesada
+ Copyright (c) 2011-2012 cocos2d-x.org
+ Copyright (c) 2013-2014 Chukong Technologies Inc.
+ Copyright (c) 2012 Pierre-David Bélanger
+
+ http://www.cocos2d-x.org
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in
+ all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+ ****************************************************************************/
+
+/**
+ * the value of stencil bits.
+ * @type Number
+ */
+cc.stencilBits = -1;
+
+/**
+ * <p>
+ *     cc.ClippingNode is a subclass of cc.Node.                                                            <br/>
+ *     It draws its content (children) clipped using a stencil.                                               <br/>
+ *     The stencil is an other cc.Node that will not be drawn.                                               <br/>
+ *     The clipping is done using the alpha part of the stencil (adjusted with an alphaThreshold).
+ * </p>
+ * @class
+ * @extends cc.Node
+ * @param {cc.Node} [stencil=null]
+ *
+ * @property {Number}   alphaThreshold  - Threshold for alpha value.
+ * @property {Boolean}  inverted        - Indicate whether in inverted mode.
+ */
+//@property {cc.Node}  stencil         - he cc.Node to use as a stencil to do the clipping.
+cc.ClippingNode = cc.Node.extend(/** @lends cc.ClippingNode# */{
+    alphaThreshold: 0,
+    inverted: false,
+
+    _stencil: null,
+    _className: "ClippingNode",
+
+    /**
+     * Constructor function, override it to extend the construction behavior, remember to call "this._super()" in the extended "ctor" function.
+     * @param {cc.Node} [stencil=null]
+     */
+    ctor: function (stencil) {
+        stencil = stencil || null;
+        cc.Node.prototype.ctor.call(this);
+        this._stencil = stencil;
+        this.alphaThreshold = 1;
+        this.inverted = false;
+        this._renderCmd.initStencilBits();
+    },
+
+    /**
+     * Initialization of the node, please do not call this function by yourself, you should pass the parameters to constructor to initialize it
.
+     * @function
+     * @param {cc.Node} [stencil=null]
+     */
+    init: function (stencil) {
+        this._stencil = stencil;
+        this.alphaThreshold = 1;
+        this.inverted = false;
+        this._renderCmd.initStencilBits();
+        return true;
+    },
+
+    /**
+     * <p>
+     *     Event callback that is invoked every time when node enters the 'stage'.                                   <br/>
+     *     If the CCNode enters the 'stage' with a transition, this event is called when the transition starts.        <br/>
+     *     During onEnter you can't access a "sister/brother" node.                                                    <br/>
+     *     If you override onEnter, you must call its parent's onEnter function with this._super().
+     * </p>
+     * @function
+     */
+    onEnter: function () {
+        cc.Node.prototype.onEnter.call(this);
+        this._stencil.onEnter();
+    },
+
+    /**
+     * <p>
+     *     Event callback that is invoked when the node enters in the 'stage'.                                                        <br/>
+     *     If the node enters the 'stage' with a transition, this event is called when the transition finishes.                       <br/>
+     *     If you override onEnterTransitionDidFinish, you shall call its parent's onEnterTransitionDidFinish with this._super()
+     * </p>
+     * @function
+     */
+    onEnterTransitionDidFinish: function () {
+        cc.Node.prototype.onEnterTransitionDidFinish.call(this);
+        this._stencil.onEnterTransitionDidFinish();
+    },
+
+    /**
+     * <p>
+     *     callback that is called every time the node leaves the 'stage'.  <br/>
+     *     If the node leaves the 'stage' with a transition, this callback is called when the transition starts. <br/>
+     *     If you override onExitTransitionDidStart, you shall call its parent's onExitTransitionDidStart with this._super()
+     * </p>
+     * @function
+     */
+    onExitTransitionDidStart: function () {
+        this._stencil.onExitTransitionDidStart();
+        cc.Node.prototype.onExitTransitionDidStart.call(this);
+    },
+
+    /**
+     * <p>
+     * callback that is called every time the node leaves the 'stage'. <br/>
+     * If the node leaves the 'stage' with a transition, this callback is called when the transition finishes. <br/>
+     * During onExit you can't access a sibling node.                                                             <br/>
+     * If you override onExit, you shall call its parent's onExit with this._super().
+     * </p>
+     * @function
+     */
+    onExit: function () {
+        this._stencil.onExit();
+        cc.Node.prototype.onExit.call(this);
+    },
+
+    /**
+     * <p>
+     * The alpha threshold.                                                                                   <br/>
+     * The content is drawn only where the stencil have pixel with alpha greater than the alphaThreshold.     <br/>
+     * Should be a float between 0 and 1.                                                                     <br/>
+     * This default to 1 (so alpha test is disabled).
+     * </P>
+     * @return {Number}
+     */
+    getAlphaThreshold: function () {
+        return this.alphaThreshold;
+    },
+
+    /**
+     * set alpha threshold.
+     * @param {Number} alphaThreshold
+     */
+    setAlphaThreshold: function (alphaThreshold) {
+        this.alphaThreshold = alphaThreshold;
+    },
+
+    /**
+     * <p>
+     *     Inverted. If this is set to YES,                                                                 <br/>
+     *     the stencil is inverted, so the content is drawn where the stencil is NOT drawn.                 <br/>
+     *     This default to NO.
+     * </p>
+     * @return {Boolean}
+     */
+    isInverted: function () {
+        return this.inverted;
+    },
+
+    /**
+     * set whether or not invert of stencil
+     * @param {Boolean} inverted
+     */
+    setInverted: function (inverted) {
+        this.inverted = inverted;
+    },
+
+    /**
+     * The cc.Node to use as a stencil to do the clipping.                                   <br/>
+     * The stencil node will be retained. This default to nil.
+     * @return {cc.Node}
+     */
+    getStencil: function () {
+        return this._stencil;
+    },
+
+    /**
+     * Set stencil.
+     * @function
+     * @param {cc.Node} stencil
+     */
+    setStencil: function (stencil) {
+        if(this._stencil == stencil)
+            return;
+        this._renderCmd.setStencil(stencil);
+    },
+
+    _createRenderCmd: function(){
+        if(cc._renderType === cc._RENDER_TYPE_CANVAS)
+            return new cc.ClippingNode.CanvasRenderCmd(this);
+        else
+            return new cc.ClippingNode.WebGLRenderCmd(this);
+    }
+});
+
+var _p = cc.ClippingNode.prototype;
+
+// Extended properties
+cc.defineGetterSetter(_p, "stencil", _p.getStencil, _p.setStencil);
+/** @expose */
+_p.stencil;
+
+/**
+ * Creates and initializes a clipping node with an other node as its stencil. <br/>
+ * The stencil node will be retained.
+ * @deprecated since v3.0, please use "new cc.ClippingNode(stencil)" instead
+ * @param {cc.Node} [stencil=null]
+ * @return {cc.ClippingNode}
+ * @example
+ * //example
+ * new cc.ClippingNode(stencil);
+ */
+cc.ClippingNode.create = function (stencil) {
+    return new cc.ClippingNode(stencil);
+};

data/lib/ccb/builder/templates/project/folder/frameworks/cocos2d-html5/cocos2d/clipping-nodes/CCClippingNodeCanvasRenderCmd.js

@@ -0,0 +1,227 @@
+/****************************************************************************
+ Copyright (c) 2013-2014 Chukong Technologies Inc.
+
+ http://www.cocos2d-x.org
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in
+ all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+ ****************************************************************************/
+
+//-------------------------- ClippingNode's canvas render cmd --------------------------------
+(function(){
+    cc.ClippingNode.CanvasRenderCmd = function(renderable){
+        cc.Node.CanvasRenderCmd.call(this, renderable);
+        this._needDraw = false;
+
+        this._godhelpme = false;
+        this._clipElemType = false;
+
+        this._rendererSaveCmd = new cc.CustomRenderCmd(this, this._saveCmdCallback);
+        this._rendererClipCmd = new cc.CustomRenderCmd(this, this._clipCmdCallback);
+        this._rendererRestoreCmd = new cc.CustomRenderCmd(this, this._restoreCmdCallback);
+    };
+    var proto = cc.ClippingNode.CanvasRenderCmd.prototype = Object.create(cc.Node.CanvasRenderCmd.prototype);
+    proto.constructor = cc.ClippingNode.CanvasRenderCmd;
+
+    proto.initStencilBits = function(){};
+
+    proto.setStencil = function(stencil){
+        if(stencil == null)
+            return;
+
+        this._node._stencil = stencil;
+
+        // For shape stencil, rewrite the draw of stencil ,only init the clip path and draw nothing.
+        //else
+        if (stencil instanceof cc.DrawNode) {
+            if(stencil._buffer){
+                for(var i=0; i<stencil._buffer.length; i++){
+                    stencil._buffer[i].isFill = false;
+                    stencil._buffer[i].isStroke = false;
+                }
+            }
+
+            stencil._renderCmd.rendering = function (ctx, scaleX, scaleY) {
+                scaleX = scaleX || cc.view.getScaleX();
+                scaleY = scaleY ||cc.view.getScaleY();
+                var wrapper = ctx || cc._renderContext, context = wrapper.getContext();
+                var t = this._transform;                                              //note: use local transform
+                wrapper.save();
+                context.transform(t.a, t.b, t.c, t.d, t.tx * scaleX, -t.ty * scaleY);
+                context.beginPath();
+                for (var i = 0; i < stencil._buffer.length; i++) {
+                    var vertices = stencil._buffer[i].verts;
+                    //TODO: need support circle etc
+                    //cc.assert(cc.vertexListIsClockwise(vertices),
+                    //    "Only clockwise polygons should be used as stencil");
+
+                    var firstPoint = vertices[0];
+                    context.moveTo(firstPoint.x * scaleX, -firstPoint.y * scaleY);
+                    for (var j = 1, len = vertices.length; j < len; j++)
+                        context.lineTo(vertices[j].x * scaleX, -vertices[j].y * scaleY);
+                }
+                wrapper.restore();
+            };
+        }else{
+            stencil._parent = this._node;
+        }
+    };
+
+    proto._saveCmdCallback  = function(ctx, scaleX, scaleY) {
+        var wrapper = ctx || cc._renderContext, context = wrapper.getContext();
+
+        if (this._clipElemType) {
+            var locCache = cc.ClippingNode.CanvasRenderCmd._getSharedCache();
+            var canvas = context.canvas;
+            locCache.width = canvas.width;
+            locCache.height = canvas.height;                     //note: on some browser, it can't clear the canvas, e.g. baidu
+            var locCacheCtx = locCache.getContext("2d");
+            locCacheCtx.drawImage(canvas, 0, 0);                //save the result to shareCache canvas
+        } else {
+            wrapper.save();
+            wrapper.save();                                                               //save for clip
+            //Because drawNode's content size is zero
+            wrapper.setTransform(this._worldTransform, scaleX, scaleY);
+        }
+    };
+
+    proto._setStencilCompositionOperation = function(stencil){
+         if(!stencil)
+            return;
+        var node = this._node;
+        if(stencil._renderCmd && stencil._renderCmd._setBlendFuncStr)
+            stencil._renderCmd._setBlendFuncStr(node.inverted ? "destination-out" : "destination-in");
+
+        if(!stencil._children)
+            return;
+        var children = stencil._children;
+        for(var i = 0, len = children.length; i < len; i++){
+             this._setStencilCompositionOperation(children[i]);
+        }
+    };
+
+    proto._clipCmdCallback = function(ctx) {
+        var node = this._node;
+        var wrapper = ctx || cc._renderContext, context = wrapper.getContext();
+
+        if (this._clipElemType) {
+            //hack
+            this._setStencilCompositionOperation(node._stencil);
+        } else {
+            wrapper.restore();                                 //it use for
+            if (node.inverted) {
+                var canvas = context.canvas;
+                wrapper.save();
+                context.setTransform(1, 0, 0, 1, 0, 0);
+
+                context.moveTo(0, 0);
+                context.lineTo(0, canvas.height);
+                context.lineTo(canvas.width, canvas.height);
+                context.lineTo(canvas.width, 0);
+                context.lineTo(0, 0);
+
+                wrapper.restore();
+            }
+            context.closePath();
+            context.clip();
+        }
+    };
+
+    proto._restoreCmdCallback = function (ctx) {
+        var locCache = cc.ClippingNode.CanvasRenderCmd._getSharedCache();
+        var wrapper = ctx || cc._renderContext, context = wrapper.getContext();
+        if (this._clipElemType) {
+            // Redraw the cached canvas, so that the clipped area shows the background etc.
+            context.save();
+            context.setTransform(1, 0, 0, 1, 0, 0);
+            context.globalCompositeOperation = "destination-over";
+            context.drawImage(locCache, 0, 0);
+            context.restore();
+            this._dirtyFlag = 0;
+        } else {
+            wrapper.restore();                             //use for restore clip operation
+        }
+    };
+
+    proto.transform = function(parentCmd, recursive){
+        cc.Node.CanvasRenderCmd.prototype.transform.call(this, parentCmd, recursive);
+        var node = this._node;
+        if(node._stencil && node._stencil._renderCmd)
+            node._stencil._renderCmd.transform(this, recursive);
+    };
+
+    proto._cangodhelpme = function (godhelpme) {
+        if (godhelpme === true || godhelpme === false)
+            cc.ClippingNode.CanvasRenderCmd.prototype._godhelpme = godhelpme;
+        return cc.ClippingNode.CanvasRenderCmd.prototype._godhelpme;
+    };
+
+    proto.visit = function(parentCmd){
+        var node = this._node;
+        // quick return if not visible
+        if (!node._visible)
+            return;
+
+        parentCmd = parentCmd || this.getParentRenderCmd();
+        if( parentCmd)
+            this._curLevel = parentCmd._curLevel + 1;
+        var transformRenderCmd = this;
+
+        // Composition mode, costy but support texture stencil
+        this._clipElemType = !(!this._cangodhelpme() && node._stencil instanceof cc.DrawNode);
+        if (!node._stencil || !node._stencil.visible) {
+            if (this.inverted)
+                cc.Node.CanvasRenderCmd.prototype.visit.call(this, parentCmd);   // draw everything
+            return;
+        }
+
+        this._syncStatus(parentCmd);
+        cc.renderer.pushRenderCommand(this._rendererSaveCmd);
+        if(this._clipElemType){
+            // Draw everything first using node visit function
+            cc.Node.CanvasRenderCmd.prototype.visit.call(this, parentCmd);
+        }else{
+            node._stencil.visit(this);
+        }
+        cc.renderer.pushRenderCommand(this._rendererClipCmd);
+
+        if(this._clipElemType){
+            node._stencil.visit(transformRenderCmd);
+        }else{
+            var i, children = node._children;
+            // Clip mode doesn't support recursive stencil, so once we used a clip stencil,
+            // so if it has ClippingNode as a child, the child must uses composition stencil.
+            this._cangodhelpme(true);
+            var len = children.length;
+            if (len > 0) {
+                node.sortAllChildren();
+                for (i = 0; i < len; i++)
+                    children[i]._renderCmd.visit(this);
+            }
+            this._cangodhelpme(false);
+        }
+
+        cc.renderer.pushRenderCommand(this._rendererRestoreCmd);
+        this._dirtyFlag = 0;
+    };
+
+    cc.ClippingNode.CanvasRenderCmd._sharedCache = null;
+    cc.ClippingNode.CanvasRenderCmd._getSharedCache = function () {
+        return (cc.ClippingNode.CanvasRenderCmd._sharedCache) || (cc.ClippingNode.CanvasRenderCmd._sharedCache = document.createElement("canvas"));
+    };
+})();

data/lib/ccb/builder/templates/project/folder/frameworks/cocos2d-html5/cocos2d/clipping-nodes/CCClippingNodeWebGLRenderCmd.js

@@ -0,0 +1,226 @@
+/****************************************************************************
+ Copyright (c) 2013-2014 Chukong Technologies Inc.
+
+ http://www.cocos2d-x.org
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in
+ all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+ ****************************************************************************/
+
+// ------------------------------- ClippingNode's WebGL render cmd ------------------------------
+(function(){
+    cc.ClippingNode.WebGLRenderCmd = function(renderable){
+        cc.Node.WebGLRenderCmd.call(this, renderable);
+        this._needDraw = false;
+
+        this._beforeVisitCmd = new cc.CustomRenderCmd(this, this._onBeforeVisit);
+        this._afterDrawStencilCmd = new cc.CustomRenderCmd(this, this._onAfterDrawStencil);
+        this._afterVisitCmd = new cc.CustomRenderCmd(this, this._onAfterVisit);
+
+        this._currentStencilFunc = null;
+        this._currentStencilRef = null;
+        this._currentStencilValueMask = null;
+        this._currentStencilFail = null;
+        this._currentStencilPassDepthFail = null;
+        this._currentStencilPassDepthPass = null;
+        this._currentStencilWriteMask = null;
+        this._currentStencilEnabled = null;
+        this._currentDepthWriteMask = null;
+        this._mask_layer_le = null;
+    };
+
+    var proto = cc.ClippingNode.WebGLRenderCmd.prototype = Object.create(cc.Node.CanvasRenderCmd.prototype);
+    proto.constructor = cc.ClippingNode.WebGLRenderCmd;
+
+    cc.ClippingNode.WebGLRenderCmd._init_once = null;
+    cc.ClippingNode.WebGLRenderCmd._visit_once = null;
+    cc.ClippingNode.WebGLRenderCmd._layer = -1;
+
+    proto.initStencilBits = function(){
+        // get (only once) the number of bits of the stencil buffer
+        cc.ClippingNode.WebGLRenderCmd._init_once = true;
+        if (cc.ClippingNode.WebGLRenderCmd._init_once) {
+            cc.stencilBits = cc._renderContext.getParameter(cc._renderContext.STENCIL_BITS);
+            if (cc.stencilBits <= 0)
+                cc.log("Stencil buffer is not enabled.");
+            cc.ClippingNode.WebGLRenderCmd._init_once = false;
+        }
+    };
+
+    proto.transform = function(parentCmd, recursive){
+        var node = this._node;
+        cc.Node.WebGLRenderCmd.prototype.transform.call(this, parentCmd, recursive);
+        if(node._stencil)
+            node._stencil._renderCmd.transform(this, recursive);
+    };
+
+    proto.visit = function(parentCmd){
+        var node = this._node;
+        // quick return if not visible
+        if (!node._visible)
+            return;
+
+        if( node._parent && node._parent._renderCmd)
+            this._curLevel = node._parent._renderCmd._curLevel + 1;
+
+        // if stencil buffer disabled
+        if (cc.stencilBits < 1) {
+            // draw everything, as if there where no stencil
+            cc.Node.WebGLRenderCmd.prototype.visit.call(this, parentCmd);
+            return;
+        }
+
+        if (!node._stencil || !node._stencil.visible) {
+            if (node.inverted)
+                cc.Node.WebGLRenderCmd.prototype.visit.call(this, parentCmd);   // draw everything
+            return;
+        }
+
+        if (cc.ClippingNode.WebGLRenderCmd._layer + 1 == cc.stencilBits) {
+            cc.ClippingNode.WebGLRenderCmd._visit_once = true;
+            if (cc.ClippingNode.WebGLRenderCmd._visit_once) {
+                cc.log("Nesting more than " + cc.stencilBits + "stencils is not supported. Everything will be drawn without stencil for this node and its children.");
+                cc.ClippingNode.WebGLRenderCmd._visit_once = false;
+            }
+            // draw everything, as if there where no stencil
+            cc.Node.WebGLRenderCmd.prototype.visit.call(this, parentCmd);
+            return;
+        }
+
+        cc.renderer.pushRenderCommand(this._beforeVisitCmd);
+
+        //optimize performance for javascript
+        var currentStack = cc.current_stack;
+        currentStack.stack.push(currentStack.top);
+        this._syncStatus(parentCmd);
+        currentStack.top = this._stackMatrix;
+
+        //this._stencil._stackMatrix = this._stackMatrix;
+        node._stencil._renderCmd.visit(this);
+
+        cc.renderer.pushRenderCommand(this._afterDrawStencilCmd);
+
+        // draw (according to the stencil test func) this node and its children
+        var locChildren = node._children;
+        if (locChildren && locChildren.length > 0) {
+            var childLen = locChildren.length;
+            node.sortAllChildren();
+            // draw children zOrder < 0
+            for (var i = 0; i < childLen; i++) {
+                locChildren[i]._renderCmd.visit(this);
+            }
+        }
+
+        cc.renderer.pushRenderCommand(this._afterVisitCmd);
+
+        this._dirtyFlag = 0;
+        //optimize performance for javascript
+        currentStack.top = currentStack.stack.pop();
+    };
+
+    proto.setStencil = function(stencil){
+        var node = this._node;
+        if(node._stencil)
+            node._stencil._parent = null;
+        node._stencil = stencil;
+        if(node._stencil)
+            node._stencil._parent = node;
+    };
+
+    proto._drawFullScreenQuadClearStencil = function () {
+        // draw a fullscreen solid rectangle to clear the stencil buffer
+        cc.kmGLMatrixMode(cc.KM_GL_PROJECTION);
+        cc.kmGLPushMatrix();
+        cc.kmGLLoadIdentity();
+        cc.kmGLMatrixMode(cc.KM_GL_MODELVIEW);
+        cc.kmGLPushMatrix();
+        cc.kmGLLoadIdentity();
+        cc._drawingUtil.drawSolidRect(cc.p(-1, -1), cc.p(1, 1), cc.color(255, 255, 255, 255));
+        cc.kmGLMatrixMode(cc.KM_GL_PROJECTION);
+        cc.kmGLPopMatrix();
+        cc.kmGLMatrixMode(cc.KM_GL_MODELVIEW);
+        cc.kmGLPopMatrix();
+    };
+
+    proto._onBeforeVisit = function(ctx){
+        var gl = ctx || cc._renderContext, node = this._node;
+        cc.ClippingNode.WebGLRenderCmd._layer++;
+
+        // mask of the current layer (ie: for layer 3: 00000100)
+        var mask_layer = 0x1 << cc.ClippingNode.WebGLRenderCmd._layer;
+        // mask of all layers less than the current (ie: for layer 3: 00000011)
+        var mask_layer_l = mask_layer - 1;
+        // mask of all layers less than or equal to the current (ie: for layer 3: 00000111)
+        //var mask_layer_le = mask_layer | mask_layer_l;
+        this._mask_layer_le = mask_layer | mask_layer_l;
+        // manually save the stencil state
+        this._currentStencilEnabled = gl.isEnabled(gl.STENCIL_TEST);
+        this._currentStencilWriteMask = gl.getParameter(gl.STENCIL_WRITEMASK);
+        this._currentStencilFunc = gl.getParameter(gl.STENCIL_FUNC);
+        this._currentStencilRef = gl.getParameter(gl.STENCIL_REF);
+        this._currentStencilValueMask = gl.getParameter(gl.STENCIL_VALUE_MASK);
+        this._currentStencilFail = gl.getParameter(gl.STENCIL_FAIL);
+        this._currentStencilPassDepthFail = gl.getParameter(gl.STENCIL_PASS_DEPTH_FAIL);
+        this._currentStencilPassDepthPass = gl.getParameter(gl.STENCIL_PASS_DEPTH_PASS);
+
+        // enable stencil use
+        gl.enable(gl.STENCIL_TEST);
+        gl.stencilMask(mask_layer);
+        this._currentDepthWriteMask = gl.getParameter(gl.DEPTH_WRITEMASK);
+
+        gl.depthMask(false);
+
+        gl.stencilFunc(gl.NEVER, mask_layer, mask_layer);
+        gl.stencilOp(!node.inverted ? gl.ZERO : gl.REPLACE, gl.KEEP, gl.KEEP);
+
+        this._drawFullScreenQuadClearStencil();
+
+        gl.stencilFunc(gl.NEVER, mask_layer, mask_layer);
+        gl.stencilOp(!node.inverted ? gl.REPLACE : gl.ZERO, gl.KEEP, gl.KEEP);
+
+        if (node.alphaThreshold < 1) {            //TODO desktop
+            var program = cc.shaderCache.programForKey(cc.SHADER_POSITION_TEXTURECOLORALPHATEST);
+            var alphaValueLocation = gl.getUniformLocation(program.getProgram(), cc.UNIFORM_ALPHA_TEST_VALUE_S);
+            // set our alphaThreshold
+            cc.glUseProgram(program.getProgram());
+            program.setUniformLocationWith1f(alphaValueLocation, node.alphaThreshold);
+            cc.setProgram(node._stencil, program);
+        }
+    };
+
+    proto._onAfterDrawStencil = function(ctx){
+        var gl = ctx || cc._renderContext;
+        gl.depthMask(this._currentDepthWriteMask);
+
+        gl.stencilFunc(gl.EQUAL, this._mask_layer_le, this._mask_layer_le);
+        gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
+    };
+
+    proto._onAfterVisit = function(ctx){
+        var gl = ctx || cc._renderContext;
+
+        gl.stencilFunc(this._currentStencilFunc, this._currentStencilRef, this._currentStencilValueMask);
+        gl.stencilOp(this._currentStencilFail, this._currentStencilPassDepthFail, this._currentStencilPassDepthPass);
+        gl.stencilMask(this._currentStencilWriteMask);
+        if (!this._currentStencilEnabled)
+            gl.disable(gl.STENCIL_TEST);
+
+        // we are done using this layer, decrement
+        cc.ClippingNode.WebGLRenderCmd._layer--;
+    }
+})();