Skip to content

Commit 7283fde

Browse files
pandamicropandamicro
committed
Merge pull request #3250 from 1scaR1/webgl_clipping
Refactor using of stencil clipping in WebGL render
2 parents ba8f995 + c16cd4b commit 7283fde

File tree

2 files changed

+16
-102
lines changed

2 files changed

+16
-102
lines changed

‎cocos2d/clipping-nodes/CCClippingNodeWebGLRenderCmd.js

+8-56
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,7 @@
3232
this._afterDrawStencilCmd = new cc.CustomRenderCmd(this, this._onAfterDrawStencil);
3333
this._afterVisitCmd = new cc.CustomRenderCmd(this, this._onAfterVisit);
3434

35-
this._currentStencilFunc = null;
36-
this._currentStencilRef = null;
37-
this._currentStencilValueMask = null;
38-
this._currentStencilFail = null;
39-
this._currentStencilPassDepthFail = null;
40-
this._currentStencilPassDepthPass = null;
41-
this._currentStencilWriteMask = null;
4235
this._currentStencilEnabled = null;
43-
this._currentDepthWriteMask = null;
4436
this._mask_layer_le = null;
4537
};
4638

@@ -142,33 +134,6 @@
142134
node._stencil._parent = node;
143135
};
144136

145-
proto._drawFullScreenQuadClearStencil = function () {
146-
// draw a fullscreen solid rectangle to clear the stencil buffer
147-
var projStack = cc.projection_matrix_stack;
148-
//cc.kmGLMatrixMode(cc.KM_GL_PROJECTION);
149-
//cc.kmGLPushMatrix();
150-
//cc.kmGLLoadIdentity();
151-
projStack.push();
152-
projStack.top.identity();
153-
154-
//cc.kmGLMatrixMode(cc.KM_GL_MODELVIEW);
155-
//cc.kmGLPushMatrix();
156-
//cc.kmGLLoadIdentity();
157-
var modelViewStack = cc.modelview_matrix_stack;
158-
modelViewStack.push();
159-
modelViewStack.top.identity();
160-
161-
cc._drawingUtil.drawSolidRect(cc.p(-1, -1), cc.p(1, 1), cc.color(255, 255, 255, 255));
162-
163-
//cc.kmGLMatrixMode(cc.KM_GL_PROJECTION);
164-
//cc.kmGLPopMatrix();
165-
projStack.pop();
166-
167-
//cc.kmGLMatrixMode(cc.KM_GL_MODELVIEW);
168-
//cc.kmGLPopMatrix();
169-
modelViewStack.pop();
170-
};
171-
172137
proto._onBeforeVisit = function(ctx){
173138
var gl = ctx || cc._renderContext, node = this._node;
174139
cc.ClippingNode.WebGLRenderCmd._layer++;
@@ -182,28 +147,19 @@
182147
this._mask_layer_le = mask_layer | mask_layer_l;
183148
// manually save the stencil state
184149
this._currentStencilEnabled = gl.isEnabled(gl.STENCIL_TEST);
185-
this._currentStencilWriteMask = gl.getParameter(gl.STENCIL_WRITEMASK);
186-
this._currentStencilFunc = gl.getParameter(gl.STENCIL_FUNC);
187-
this._currentStencilRef = gl.getParameter(gl.STENCIL_REF);
188-
this._currentStencilValueMask = gl.getParameter(gl.STENCIL_VALUE_MASK);
189-
this._currentStencilFail = gl.getParameter(gl.STENCIL_FAIL);
190-
this._currentStencilPassDepthFail = gl.getParameter(gl.STENCIL_PASS_DEPTH_FAIL);
191-
this._currentStencilPassDepthPass = gl.getParameter(gl.STENCIL_PASS_DEPTH_PASS);
192150

151+
gl.clear(gl.DEPTH_BUFFER_BIT);
193152
// enable stencil use
194153
gl.enable(gl.STENCIL_TEST);
195-
gl.stencilMask(mask_layer);
196-
this._currentDepthWriteMask = gl.getParameter(gl.DEPTH_WRITEMASK);
197154

198155
gl.depthMask(false);
199156

157+
gl.clear(gl.STENCIL_BUFFER_BIT);
200158
gl.stencilFunc(gl.NEVER, mask_layer, mask_layer);
201-
gl.stencilOp(!node.inverted ? gl.ZERO : gl.REPLACE, gl.KEEP, gl.KEEP);
202-
203-
this._drawFullScreenQuadClearStencil();
159+
gl.stencilOp(gl.REPLACE, gl.KEEP, gl.KEEP);
204160

205-
gl.stencilFunc(gl.NEVER, mask_layer, mask_layer);
206-
gl.stencilOp(!node.inverted ? gl.REPLACE : gl.ZERO, gl.KEEP, gl.KEEP);
161+
gl.stencilMask(mask_layer);
162+
gl.clear(gl.STENCIL_BUFFER_BIT);
207163

208164
if (node.alphaThreshold < 1) { //TODO desktop
209165
var program = cc.shaderCache.programForKey(cc.SHADER_POSITION_TEXTURECOLORALPHATEST);
@@ -217,18 +173,14 @@
217173

218174
proto._onAfterDrawStencil = function(ctx){
219175
var gl = ctx || cc._renderContext;
220-
gl.depthMask(this._currentDepthWriteMask);
221-
222-
gl.stencilFunc(gl.EQUAL, this._mask_layer_le, this._mask_layer_le);
176+
gl.depthMask(true);
177+
gl.stencilFunc(!this._node.inverted ? gl.EQUAL : gl.NOTEQUAL, this._mask_layer_le, this._mask_layer_le);
223178
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
224179
};
225180

226181
proto._onAfterVisit = function(ctx){
227182
var gl = ctx || cc._renderContext;
228-
229-
gl.stencilFunc(this._currentStencilFunc, this._currentStencilRef, this._currentStencilValueMask);
230-
gl.stencilOp(this._currentStencilFail, this._currentStencilPassDepthFail, this._currentStencilPassDepthPass);
231-
gl.stencilMask(this._currentStencilWriteMask);
183+
232184
if (!this._currentStencilEnabled)
233185
gl.disable(gl.STENCIL_TEST);
234186

‎extensions/ccui/layouts/UILayoutWebGLRenderCmd.js

+8-46
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,6 @@
3131
this._needDraw = false;
3232

3333
this._currentStencilEnabled = 0;
34-
this._currentStencilWriteMask = 0;
35-
this._currentStencilFunc = 0;
36-
this._currentStencilRef = 0;
37-
this._currentStencilValueMask = 0;
38-
this._currentStencilFail = 0;
39-
this._currentStencilPassDepthFail = 0;
40-
this._currentStencilPassDepthPass = 0;
41-
this._currentDepthWriteMask = false;
42-
4334
this._mask_layer_le = 0;
4435

4536
this._beforeVisitCmdStencil = new cc.CustomRenderCmd(this, this._onBeforeVisitStencil);
@@ -85,45 +76,31 @@
8576

8677
// manually save the stencil state
8778
this._currentStencilEnabled = gl.isEnabled(gl.STENCIL_TEST);
88-
this._currentStencilWriteMask = gl.getParameter(gl.STENCIL_WRITEMASK);
89-
this._currentStencilFunc = gl.getParameter(gl.STENCIL_FUNC);
90-
this._currentStencilRef = gl.getParameter(gl.STENCIL_REF);
91-
this._currentStencilValueMask = gl.getParameter(gl.STENCIL_VALUE_MASK);
92-
this._currentStencilFail = gl.getParameter(gl.STENCIL_FAIL);
93-
this._currentStencilPassDepthFail = gl.getParameter(gl.STENCIL_PASS_DEPTH_FAIL);
94-
this._currentStencilPassDepthPass = gl.getParameter(gl.STENCIL_PASS_DEPTH_PASS);
95-
96-
gl.enable(gl.STENCIL_TEST);
9779

98-
gl.stencilMask(mask_layer);
80+
gl.clear(gl.DEPTH_BUFFER_BIT);
9981

100-
this._currentDepthWriteMask = gl.getParameter(gl.DEPTH_WRITEMASK);
82+
gl.enable(gl.STENCIL_TEST);
10183

10284
gl.depthMask(false);
10385

10486
gl.stencilFunc(gl.NEVER, mask_layer, mask_layer);
105-
gl.stencilOp(gl.ZERO, gl.KEEP, gl.KEEP);
87+
gl.stencilOp(gl.REPLACE, gl.KEEP, gl.KEEP);
10688

107-
// draw a fullscreen solid rectangle to clear the stencil buffer
108-
this._drawFullScreenQuadClearStencil();
89+
gl.stencilMask(mask_layer);
90+
gl.clear(gl.STENCIL_BUFFER_BIT);
10991

110-
gl.stencilFunc(gl.NEVER, mask_layer, mask_layer);
111-
gl.stencilOp(gl.REPLACE, gl.KEEP, gl.KEEP);
11292
};
11393

11494
proto._onAfterDrawStencil = function(ctx){
11595
var gl = ctx || cc._renderContext;
116-
gl.depthMask(this._currentDepthWriteMask);
96+
gl.depthMask(true);
11797
gl.stencilFunc(gl.EQUAL, this._mask_layer_le, this._mask_layer_le);
11898
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
11999
};
120100

121101
proto._onAfterVisitStencil = function(ctx){
122102
var gl = ctx || cc._renderContext;
123-
// manually restore the stencil state
124-
gl.stencilFunc(this._currentStencilFunc, this._currentStencilRef, this._currentStencilValueMask);
125-
gl.stencilOp(this._currentStencilFail, this._currentStencilPassDepthFail, this._currentStencilPassDepthPass);
126-
gl.stencilMask(this._currentStencilWriteMask);
103+
127104
if (!this._currentStencilEnabled)
128105
gl.disable(gl.STENCIL_TEST);
129106
ccui.Layout.WebGLRenderCmd._layer--;
@@ -141,22 +118,7 @@
141118
var gl = ctx || cc._renderContext;
142119
gl.disable(gl.SCISSOR_TEST);
143120
};
144-
145-
proto._drawFullScreenQuadClearStencil = function(){
146-
// draw a fullscreen solid rectangle to clear the stencil buffer
147-
cc.kmGLMatrixMode(cc.KM_GL_PROJECTION);
148-
cc.kmGLPushMatrix();
149-
cc.kmGLLoadIdentity();
150-
cc.kmGLMatrixMode(cc.KM_GL_MODELVIEW);
151-
cc.kmGLPushMatrix();
152-
cc.kmGLLoadIdentity();
153-
cc._drawingUtil.drawSolidRect(cc.p(-1,-1), cc.p(1,1), cc.color(255, 255, 255, 255));
154-
cc.kmGLMatrixMode(cc.KM_GL_PROJECTION);
155-
cc.kmGLPopMatrix();
156-
cc.kmGLMatrixMode(cc.KM_GL_MODELVIEW);
157-
cc.kmGLPopMatrix();
158-
};
159-
121+
160122
proto.rebindStencilRendering = function(stencil){};
161123

162124
proto.transform = function(parentCmd, recursive){

0 commit comments

Comments
 (0)