Skip to content

Commit e0c22c5

Browse files
photonstormphotonstorm
committed
Added QuadShader Pipeline
1 parent 7d74425 commit e0c22c5

2 files changed

Lines changed: 239 additions & 0 deletions

File tree

‎src/renderer/webgl/pipelines/QuadShaderPipeline.js‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
/**
2+
* @author Richard Davey <rich@photonstorm.com>
3+
* @copyright 2019 Photon Storm Ltd.
4+
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
5+
*/
6+
7+
var Class = require('../../../utils/Class');
8+
var ModelViewProjection = require('./components/ModelViewProjection');
9+
var ShaderSourceFS = require('../shaders/QuadShader-frag.js');
10+
var ShaderSourceVS = require('../shaders/QuadShader-vert.js');
11+
var TransformMatrix = require('../../../gameobjects/components/TransformMatrix');
12+
var WebGLPipeline = require('../WebGLPipeline');
13+
14+
/**
15+
* @classdesc
16+
*
17+
* A single quad with its own custom shader applied to it.
18+
* The quad can have a size, position, rotation and scale.
19+
*
20+
* Once the quad is drawn the batch is flushed. There is no batching of these objects.
21+
*
22+
* @class QuadShaderPipeline
23+
* @extends Phaser.Renderer.WebGL.WebGLPipeline
24+
* @memberof Phaser.Renderer.WebGL.Pipelines
25+
* @constructor
26+
* @since 3.17.0
27+
*
28+
* @param {object} config - The configuration options for this Pipeline, as described above.
29+
*/
30+
var QuadShaderPipeline = new Class({
31+
32+
Extends: WebGLPipeline,
33+
34+
Mixins: [
35+
ModelViewProjection
36+
],
37+
38+
initialize:
39+
40+
function QuadShaderPipeline (config)
41+
{
42+
WebGLPipeline.call(this, {
43+
game: config.game,
44+
renderer: config.renderer,
45+
gl: config.renderer.gl,
46+
topology: config.renderer.gl.TRIANGLES,
47+
vertShader: ShaderSourceVS,
48+
fragShader: ShaderSourceFS,
49+
vertexCapacity: 6,
50+
vertexSize: Float32Array.BYTES_PER_ELEMENT * 2,
51+
attributes: [
52+
{
53+
name: 'inPosition',
54+
size: 2,
55+
type: config.renderer.gl.FLOAT,
56+
normalized: false,
57+
offset: 0
58+
}
59+
]
60+
});
61+
62+
/**
63+
* Float32 view of the array buffer containing the pipeline's vertices.
64+
*
65+
* @name Phaser.Renderer.WebGL.Pipelines.QuadShaderPipeline#vertexViewF32
66+
* @type {Float32Array}
67+
* @since 3.17.0
68+
*/
69+
this.vertexViewF32 = new Float32Array(this.vertexData);
70+
71+
/**
72+
* A temporary Transform Matrix, re-used internally during batching.
73+
*
74+
* @name Phaser.Renderer.WebGL.Pipelines.QuadShaderPipeline#_tempMatrix1
75+
* @private
76+
* @type {Phaser.GameObjects.Components.TransformMatrix}
77+
* @since 3.17.0
78+
*/
79+
this._tempMatrix1 = new TransformMatrix();
80+
81+
/**
82+
* A temporary Transform Matrix, re-used internally during batching.
83+
*
84+
* @name Phaser.Renderer.WebGL.Pipelines.QuadShaderPipeline#_tempMatrix2
85+
* @private
86+
* @type {Phaser.GameObjects.Components.TransformMatrix}
87+
* @since 3.17.0
88+
*/
89+
this._tempMatrix2 = new TransformMatrix();
90+
91+
/**
92+
* A temporary Transform Matrix, re-used internally during batching.
93+
*
94+
* @name Phaser.Renderer.WebGL.Pipelines.QuadShaderPipeline#_tempMatrix3
95+
* @private
96+
* @type {Phaser.GameObjects.Components.TransformMatrix}
97+
* @since 3.17.0
98+
*/
99+
this._tempMatrix3 = new TransformMatrix();
100+
101+
/**
102+
* A temporary Transform Matrix, re-used internally during batching.
103+
*
104+
* @name Phaser.Renderer.WebGL.Pipelines.QuadShaderPipeline#_tempMatrix4
105+
* @private
106+
* @type {Phaser.GameObjects.Components.TransformMatrix}
107+
* @since 3.17.0
108+
*/
109+
this._tempMatrix4 = new TransformMatrix();
110+
111+
this.defaultProgram = this.program;
112+
113+
this.mvpInit();
114+
},
115+
116+
/**
117+
* Called every time the pipeline needs to be used.
118+
* It binds all necessary resources.
119+
*
120+
* @method Phaser.Renderer.WebGL.Pipelines.QuadShaderPipeline#bind
121+
* @since 3.17.0
122+
*
123+
* @return {this} This WebGLPipeline instance.
124+
*/
125+
// bind: function ()
126+
// {
127+
// WebGLPipeline.prototype.bind.call(this);
128+
// },
129+
130+
/**
131+
* Resizes this pipeline and updates the projection.
132+
*
133+
* @method Phaser.Renderer.WebGL.Pipelines.QuadShaderPipeline#resize
134+
* @since 3.17.0
135+
*
136+
* @param {number} width - The new width.
137+
* @param {number} height - The new height.
138+
* @param {number} resolution - The resolution.
139+
*
140+
* @return {this} This WebGLPipeline instance.
141+
*/
142+
resize: function (width, height, resolution)
143+
{
144+
WebGLPipeline.prototype.resize.call(this, width, height, resolution);
145+
146+
this.projOrtho(0, this.width, this.height, 0, -1000.0, 1000.0);
147+
148+
return this;
149+
},
150+
151+
/**
152+
* Uploads the vertex data and emits a draw call for the current batch of vertices.
153+
*
154+
* @method Phaser.Renderer.WebGL.Pipelines.QuadShaderPipeline#flush
155+
* @since 3.17.0
156+
*
157+
* @return {this} This WebGLPipeline instance.
158+
*/
159+
flush: function ()
160+
{
161+
if (this.flushLocked)
162+
{
163+
return this;
164+
}
165+
166+
var gl = this.gl;
167+
var vertexCount = 6;
168+
var topology = this.topology;
169+
var vertexSize = this.vertexSize;
170+
171+
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.bytes.subarray(0, vertexCount * vertexSize));
172+
173+
// 0 = first batch index
174+
// 6 = batchVertexCount
175+
gl.drawArrays(topology, 0, vertexCount);
176+
177+
return this;
178+
},
179+
180+
/**
181+
* Renders a single quad using the current shader and then flushes the batch.
182+
*
183+
* @method Phaser.Renderer.WebGL.Pipelines.QuadShaderPipeline#draw
184+
* @since 3.17.0
185+
*
186+
* @param {number} x - Horizontal top left coordinate of the rectangle.
187+
* @param {number} y - Vertical top left coordinate of the rectangle.
188+
* @param {number} width - Width of the rectangle.
189+
* @param {number} height - Height of the rectangle.
190+
* @param {Phaser.GameObjects.Components.TransformMatrix} currentMatrix - The current transform.
191+
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - The parent transform.
192+
*/
193+
draw: function (x, y, width, height, currentMatrix, parentMatrix)
194+
{
195+
var calcMatrix = this._tempMatrix3;
196+
197+
// Multiply and store result in calcMatrix, only if the parentMatrix is set, otherwise we'll use whatever values are already in the calcMatrix
198+
if (parentMatrix)
199+
{
200+
parentMatrix.multiply(currentMatrix, calcMatrix);
201+
}
202+
203+
var xw = x + width;
204+
var yh = y + height;
205+
206+
var x0 = calcMatrix.getX(x, y);
207+
var y0 = calcMatrix.getY(x, y);
208+
209+
var x1 = calcMatrix.getX(x, yh);
210+
var y1 = calcMatrix.getY(x, yh);
211+
212+
var x2 = calcMatrix.getX(xw, yh);
213+
var y2 = calcMatrix.getY(xw, yh);
214+
215+
var x3 = calcMatrix.getX(xw, y);
216+
var y3 = calcMatrix.getY(xw, y);
217+
218+
var vertexViewF32 = this.vertexViewF32;
219+
220+
vertexViewF32[0] = x0;
221+
vertexViewF32[1] = y0;
222+
vertexViewF32[2] = x1;
223+
vertexViewF32[3] = y1;
224+
vertexViewF32[4] = x2;
225+
vertexViewF32[5] = y2;
226+
vertexViewF32[6] = x0;
227+
vertexViewF32[7] = y0;
228+
vertexViewF32[8] = x2;
229+
vertexViewF32[9] = y2;
230+
vertexViewF32[10] = x3;
231+
vertexViewF32[11] = y3;
232+
233+
this.flush();
234+
}
235+
236+
});
237+
238+
module.exports = QuadShaderPipeline;

‎src/renderer/webgl/pipelines/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ module.exports = {
1212

1313
BitmapMaskPipeline: require('./BitmapMaskPipeline'),
1414
ForwardDiffuseLightPipeline: require('./ForwardDiffuseLightPipeline'),
15+
QuadShaderPipeline: require('./QuadShaderPipeline'),
1516
TextureTintPipeline: require('./TextureTintPipeline'),
1617
ModelViewProjection: require('./components/ModelViewProjection')
1718

0 commit comments

Comments
 (0)