Skip to content

Commit caffc9c

Browse files
photonstormphotonstorm
committed
Added FilterManager and StencilManager to new renderer.
1 parent a096dd4 commit caffc9c

9 files changed

Lines changed: 489 additions & 6 deletions

File tree

‎build/config.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,11 +206,14 @@
206206
207207
<script src="$path/src/renderer/webgl/WebGLRenderer.js"></script>
208208
<script src="$path/src/renderer/webgl/ShaderManager.js"></script>
209+
<script src="$path/src/renderer/webgl/StencilManager.js"></script>
210+
<script src="$path/src/renderer/webgl/FilterManager.js"></script>
209211
<script src="$path/src/renderer/webgl/SpriteBatch.js"></script>
210212
<script src="$path/src/renderer/webgl/shaders/Sprite.js"></script>
211213
<script src="$path/src/renderer/webgl/shaders/SpriteBatch.js"></script>
212214
<script src="$path/src/renderer/webgl/shaders/Strip.js"></script>
213215
<script src="$path/src/renderer/webgl/shaders/PrimitiveGraphics.js"></script>
216+
<script src="$path/src/renderer/webgl/shaders/ComplexPrimitiveGraphics.js"></script>
214217
<script src="$path/src/renderer/webgl/gameobjects/Container.js"></script>
215218
<script src="$path/src/renderer/webgl/gameobjects/Sprite.js"></script>
216219
<script src="$path/src/renderer/webgl/gameobjects/Stage.js"></script>

‎src/renderer/webgl/FilterManager.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* @author Richard Davey <rich@photonstorm.com>
3+
* @author Mat Groves (@Doormat23)
4+
* @copyright 2016 Photon Storm Ltd.
5+
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
6+
*/
7+
8+
/**
9+
* New version of PIXI.WebGLFilterManager
10+
*
11+
* @class Phaser.Renderer.Canvas
12+
* @constructor
13+
* @param {Phaser.Game} game - Game reference to the currently running game.
14+
*/
15+
Phaser.Renderer.WebGL.FilterManager = function (renderer)
16+
{
17+
this.renderer = renderer;
18+
19+
this.gl = null;
20+
};
21+
22+
Phaser.Renderer.WebGL.FilterManager.prototype.constructor = Phaser.Renderer.WebGL.FilterManager;
23+
24+
Phaser.Renderer.WebGL.FilterManager.prototype = {
25+
26+
init: function ()
27+
{
28+
this.gl = this.renderer.gl;
29+
30+
}
31+
32+
};

‎src/renderer/webgl/ShaderManager.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ Phaser.Renderer.WebGL.ShaderManager.prototype = {
6262
// the next one is used for rendering primitives
6363
this.primitiveShader = new Phaser.Renderer.WebGL.Shaders.PrimitiveGraphics(this.renderer);
6464

65-
// the next one is used for rendering triangle strips
66-
// this.complexPrimitiveShader = new PIXI.ComplexPrimitiveShader(this);
65+
// the next one is used by the stencil buffer manager when Graphics.mode = 1
66+
this.complexPrimitiveShader = new Phaser.Renderer.WebGL.Shaders.ComplexPrimitiveGraphics(this);
6767

6868
this.setShader(this.defaultShader);
6969
},

‎src/renderer/webgl/StencilManager.js‎

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
/**
2+
* @author Richard Davey <rich@photonstorm.com>
3+
* @author Mat Groves (@Doormat23)
4+
* @copyright 2016 Photon Storm Ltd.
5+
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
6+
*/
7+
8+
/**
9+
* New version of PIXI.WebGLStencilManager
10+
*
11+
* @class Phaser.Renderer.Canvas
12+
* @constructor
13+
* @param {Phaser.Game} game - Game reference to the currently running game.
14+
*/
15+
Phaser.Renderer.WebGL.StencilManager = function (renderer)
16+
{
17+
this.renderer = renderer;
18+
19+
this.gl = null;
20+
21+
this.stencilStack = [];
22+
23+
this.reverse = true;
24+
25+
this.count = 0;
26+
};
27+
28+
Phaser.Renderer.WebGL.StencilManager.prototype.constructor = Phaser.Renderer.WebGL.StencilManager;
29+
30+
Phaser.Renderer.WebGL.StencilManager.prototype = {
31+
32+
init: function ()
33+
{
34+
this.gl = this.renderer.gl;
35+
},
36+
37+
/**
38+
* Applies the Mask and adds it to the current filter stack.
39+
*
40+
* @method pushMask
41+
* @param graphics {Graphics}
42+
* @param webGLData {Array}
43+
* @param renderSession {Object}
44+
*/
45+
pushStencil: function (graphics, webGLData)
46+
{
47+
var gl = this.gl;
48+
49+
this.bindGraphics(graphics, webGLData);
50+
51+
if (this.stencilStack.length === 0)
52+
{
53+
gl.enable(gl.STENCIL_TEST);
54+
gl.clear(gl.STENCIL_BUFFER_BIT);
55+
this.reverse = true;
56+
this.count = 0;
57+
}
58+
59+
this.stencilStack.push(webGLData);
60+
61+
var level = this.count;
62+
63+
gl.colorMask(false, false, false, false);
64+
65+
gl.stencilFunc(gl.ALWAYS, 0, 0xFF);
66+
gl.stencilOp(gl.KEEP, gl.KEEP, gl.INVERT);
67+
68+
// draw the triangle strip!
69+
70+
if (webGLData.mode === 1)
71+
{
72+
gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0);
73+
74+
if (this.reverse)
75+
{
76+
gl.stencilFunc(gl.EQUAL, 0xFF - level, 0xFF);
77+
gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR);
78+
}
79+
else
80+
{
81+
gl.stencilFunc(gl.EQUAL, level, 0xFF);
82+
gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
83+
}
84+
85+
// draw a quad to increment..
86+
gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, (webGLData.indices.length - 4) * 2);
87+
88+
if (this.reverse)
89+
{
90+
gl.stencilFunc(gl.EQUAL, 0xFF - (level + 1), 0xFF);
91+
}
92+
else
93+
{
94+
gl.stencilFunc(gl.EQUAL, level + 1, 0xFF);
95+
}
96+
97+
this.reverse = !this.reverse;
98+
}
99+
else
100+
{
101+
if (!this.reverse)
102+
{
103+
gl.stencilFunc(gl.EQUAL, 0xFF - level, 0xFF);
104+
gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR);
105+
}
106+
else
107+
{
108+
gl.stencilFunc(gl.EQUAL,level, 0xFF);
109+
gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
110+
}
111+
112+
gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0);
113+
114+
if (!this.reverse)
115+
{
116+
gl.stencilFunc(gl.EQUAL,0xFF - (level + 1), 0xFF);
117+
}
118+
else
119+
{
120+
gl.stencilFunc(gl.EQUAL,level + 1, 0xFF);
121+
}
122+
}
123+
124+
gl.colorMask(true, true, true, true);
125+
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
126+
127+
this.count++;
128+
},
129+
130+
/**
131+
* @method bindGraphics
132+
* @param graphics {Graphics}
133+
* @param webGLData {Array}
134+
* @param renderSession {Object}
135+
*/
136+
bindGraphics: function (graphics, webGLData)
137+
{
138+
this._currentGraphics = graphics;
139+
140+
var gl = this.gl;
141+
142+
// bind the graphics object..
143+
var projection = renderSession.projection;
144+
var offset = this.renderer.offset;
145+
var shader;
146+
147+
if (webGLData.mode === 1)
148+
{
149+
shader = this.renderer.shaderManager.complexPrimitiveShader;
150+
151+
this.renderer.shaderManager.setShader(shader);
152+
153+
gl.uniform1f(shader.flipY, this.renderer.flipY);
154+
155+
gl.uniformMatrix3fv(shader.translationMatrix, false, graphics.worldTransform.toArray(true));
156+
157+
gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
158+
gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
159+
160+
gl.uniform3fv(shader.tintColor, Phaser.Color.hexToRGBArray(graphics.tint));
161+
gl.uniform3fv(shader.color, webGLData.color);
162+
163+
gl.uniform1f(shader.alpha, graphics.worldAlpha * webGLData.alpha);
164+
165+
gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
166+
167+
gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 4 * 2, 0);
168+
169+
// now do the rest..
170+
// set the index buffer!
171+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
172+
}
173+
else
174+
{
175+
shader = this.renderer.shaderManager.primitiveShader;
176+
this.renderer.shaderManager.setShader(shader);
177+
178+
gl.uniformMatrix3fv(shader.translationMatrix, false, graphics.worldTransform.toArray(true));
179+
180+
gl.uniform1f(shader.flipY, this.renderer.flipY);
181+
gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
182+
gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
183+
184+
gl.uniform3fv(shader.tintColor, Phaser.Color.hexToRGBArray(graphics.tint));
185+
186+
gl.uniform1f(shader.alpha, graphics.worldAlpha);
187+
188+
gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
189+
190+
gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
191+
gl.vertexAttribPointer(shader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
192+
193+
// set the index buffer!
194+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
195+
}
196+
},
197+
198+
/**
199+
* @method popStencil
200+
* @param graphics {Graphics}
201+
* @param webGLData {Array}
202+
* @param renderSession {Object}
203+
*/
204+
popStencil: function (graphics, webGLData)
205+
{
206+
var gl = this.gl;
207+
208+
this.stencilStack.pop();
209+
210+
this.count--;
211+
212+
if (this.stencilStack.length === 0)
213+
{
214+
// the stack is empty!
215+
gl.disable(gl.STENCIL_TEST);
216+
}
217+
else
218+
{
219+
var level = this.count;
220+
221+
this.bindGraphics(graphics, webGLData);
222+
223+
gl.colorMask(false, false, false, false);
224+
225+
if (webGLData.mode === 1)
226+
{
227+
this.reverse = !this.reverse;
228+
229+
if (this.reverse)
230+
{
231+
gl.stencilFunc(gl.EQUAL, 0xFF - (level + 1), 0xFF);
232+
gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
233+
}
234+
else
235+
{
236+
gl.stencilFunc(gl.EQUAL, level + 1, 0xFF);
237+
gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR);
238+
}
239+
240+
// draw a quad to increment..
241+
gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, (webGLData.indices.length - 4) * 2);
242+
243+
gl.stencilFunc(gl.ALWAYS, 0, 0xFF);
244+
gl.stencilOp(gl.KEEP, gl.KEEP, gl.INVERT);
245+
246+
// draw the triangle strip!
247+
gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0);
248+
249+
if (!this.reverse)
250+
{
251+
gl.stencilFunc(gl.EQUAL, 0xFF - (level), 0xFF);
252+
}
253+
else
254+
{
255+
gl.stencilFunc(gl.EQUAL, level, 0xFF);
256+
}
257+
}
258+
else
259+
{
260+
if (!this.reverse)
261+
{
262+
gl.stencilFunc(gl.EQUAL, 0xFF - (level + 1), 0xFF);
263+
gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
264+
}
265+
else
266+
{
267+
gl.stencilFunc(gl.EQUAL, level + 1, 0xFF);
268+
gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR);
269+
}
270+
271+
gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0);
272+
273+
if (!this.reverse)
274+
{
275+
gl.stencilFunc(gl.EQUAL, 0xFF - (level), 0xFF);
276+
}
277+
else
278+
{
279+
gl.stencilFunc(gl.EQUAL,level, 0xFF);
280+
}
281+
}
282+
283+
gl.colorMask(true, true, true, true);
284+
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
285+
}
286+
},
287+
288+
/**
289+
* Destroys the mask stack.
290+
*
291+
* @method destroy
292+
*/
293+
destroy: function ()
294+
{
295+
this.stencilStack = null;
296+
297+
this.gl = null;
298+
299+
this.renderer = null;
300+
}
301+
302+
};

‎src/renderer/webgl/WebGLRenderer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ Phaser.Renderer.WebGL = function (game)
140140
* @property stencilManager
141141
* @type WebGLStencilManager
142142
*/
143-
// this.stencilManager = new PIXI.WebGLStencilManager();
143+
this.stencilManager = new Phaser.Renderer.WebGL.StencilManager(this);
144144

145145
this.gl = null;
146146

0 commit comments

Comments
 (0)