Skip to content

Commit 5170784

Browse files
bitnenferbitnenfer
committed
Graphics WebGL Rendering
1 parent ca465c8 commit 5170784

6 files changed

Lines changed: 644 additions & 418 deletions

File tree

‎src/gameobjects/graphics/Graphics.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -745,9 +745,9 @@ var Graphics = new Class({
745745
{
746746
this.renderCanvas(sys.game.renderer, this, 0, Graphics.TargetCamera, ctx);
747747

748-
if (this.gl && texture)
748+
if (sys.game.renderer.gl && texture)
749749
{
750-
sys.game.renderer.uploadCanvasToGPU(ctx.canvas, texture.source[0].glTexture, true);
750+
texture.source[0].glTexture = sys.game.renderer.canvasToTexture(ctx.canvas, texture.source[0].glTexture, true, 0);
751751
}
752752
}
753753

‎src/gameobjects/graphics/GraphicsWebGLRenderer.js‎

Lines changed: 3 additions & 363 deletions
Original file line numberDiff line numberDiff line change
@@ -1,373 +1,13 @@
1-
var Commands = require('./Commands');
21
var GameObject = require('../GameObject');
3-
var TransformMatrix = require('../components/TransformMatrix');
42

5-
var cos = Math.cos;
6-
var sin = Math.sin;
7-
8-
var currentMatrix = new TransformMatrix();
9-
var matrixStack = new Float32Array(6 * 1000);
10-
var matrixStackLength = 0;
11-
var pathArray = [];
12-
var tempMatrix = new TransformMatrix();
13-
14-
var Point = function (x, y, width, rgb, alpha)
15-
{
16-
this.x = x;
17-
this.y = y;
18-
this.width = width;
19-
this.rgb = rgb;
20-
this.alpha = alpha;
21-
};
22-
23-
var Path = function (x, y, width, rgb, alpha)
3+
var GraphicsWebGLRenderer = function (renderer, graphics, interpolationPercentage, camera, forceRenderTarget)
244
{
25-
this.points = [];
26-
this.pointsLength = 1;
27-
this.points[0] = new Point(x, y, width, rgb, alpha);
28-
};
29-
30-
var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercentage, camera, forceRenderTarget)
31-
{
32-
if (GameObject.RENDER_MASK !== gameObject.renderFlags || (gameObject.cameraFilter > 0 && (gameObject.cameraFilter & camera._id)))
5+
if (GameObject.RENDER_MASK !== graphics.renderFlags || (graphics.cameraFilter > 0 && (graphics.cameraFilter & camera._id)))
336
{
347
return;
358
}
369

37-
var renderTarget = forceRenderTarget || gameObject.renderTarget;
38-
var shapeBatch = renderer.shapeBatch;
39-
var cameraScrollX = camera.scrollX * gameObject.scrollFactorX;
40-
var cameraScrollY = camera.scrollY * gameObject.scrollFactorY;
41-
var srcX = gameObject.x - cameraScrollX;
42-
var srcY = gameObject.y - cameraScrollY;
43-
var srcScaleX = gameObject.scaleX;
44-
var srcScaleY = gameObject.scaleY;
45-
var srcRotation = -gameObject.rotation;
46-
var commandBuffer = gameObject.commandBuffer;
47-
var lineAlpha = 1.0;
48-
var fillAlpha = 1.0;
49-
var lineColor = 0;
50-
var fillColor = 0;
51-
var lineWidth = 1.0;
52-
var cameraMatrix = camera.matrix.matrix;
53-
var lastPath = null;
54-
var iteration = 0;
55-
var iterStep = 0.01;
56-
var tx = 0;
57-
var ty = 0;
58-
var ta = 0;
59-
var x, y, radius, startAngle, endAngle, anticlockwise;
60-
var path;
61-
var tempMatrixMatrix = tempMatrix.matrix;
62-
var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf;
63-
var mva, mvb, mvc, mvd, mve, mvf;
64-
65-
tempMatrix.applyITRS(srcX, srcY, srcRotation, srcScaleX, srcScaleY);
66-
67-
sra = tempMatrixMatrix[0];
68-
srb = tempMatrixMatrix[1];
69-
src = tempMatrixMatrix[2];
70-
srd = tempMatrixMatrix[3];
71-
sre = tempMatrixMatrix[4];
72-
srf = tempMatrixMatrix[5];
73-
74-
cma = cameraMatrix[0];
75-
cmb = cameraMatrix[1];
76-
cmc = cameraMatrix[2];
77-
cmd = cameraMatrix[3];
78-
cme = cameraMatrix[4];
79-
cmf = cameraMatrix[5];
80-
81-
mva = sra * cma + srb * cmc;
82-
mvb = sra * cmb + srb * cmd;
83-
mvc = src * cma + srd * cmc;
84-
mvd = src * cmb + srd * cmd;
85-
mve = sre * cma + srf * cmc + cme;
86-
mvf = sre * cmb + srf * cmd + cmf;
87-
88-
renderer.setRenderer(shapeBatch, null, renderTarget);
89-
90-
for (var cmdIndex = 0, cmdLength = commandBuffer.length; cmdIndex < cmdLength; ++cmdIndex)
91-
{
92-
cmd = commandBuffer[cmdIndex];
93-
94-
switch (cmd)
95-
{
96-
case Commands.ARC:
97-
iteration = 0;
98-
x = commandBuffer[cmdIndex + 1];
99-
y = commandBuffer[cmdIndex + 2];
100-
radius = commandBuffer[cmdIndex + 3];
101-
startAngle = commandBuffer[cmdIndex + 4];
102-
endAngle = commandBuffer[cmdIndex + 5];
103-
anticlockwise = commandBuffer[cmdIndex + 6];
104-
105-
if (anticlockwise)
106-
{
107-
ta = endAngle;
108-
endAngle = startAngle;
109-
startAngle = -ta;
110-
}
111-
112-
while (iteration < 1)
113-
{
114-
ta = (endAngle - startAngle) * iteration + startAngle;
115-
tx = x + cos(ta) * radius;
116-
ty = y + sin(ta) * radius;
117-
118-
if (iteration === 0)
119-
{
120-
lastPath = new Path(tx, ty, lineWidth, lineColor, lineAlpha);
121-
pathArray.push(lastPath);
122-
}
123-
else
124-
{
125-
lastPath.points.push(new Point(tx, ty, lineWidth, lineColor, lineAlpha));
126-
}
127-
128-
iteration += iterStep;
129-
}
130-
cmdIndex += 6;
131-
break;
132-
133-
case Commands.LINE_STYLE:
134-
lineWidth = commandBuffer[cmdIndex + 1];
135-
lineColor = commandBuffer[cmdIndex + 2];
136-
lineAlpha = commandBuffer[cmdIndex + 3];
137-
cmdIndex += 3;
138-
break;
139-
140-
case Commands.FILL_STYLE:
141-
fillColor = commandBuffer[cmdIndex + 1];
142-
fillAlpha = commandBuffer[cmdIndex + 2];
143-
cmdIndex += 2;
144-
break;
145-
146-
case Commands.BEGIN_PATH:
147-
pathArray.length = 0;
148-
break;
149-
150-
case Commands.CLOSE_PATH:
151-
if (lastPath !== null && lastPath.points.length > 0)
152-
{
153-
var firstPoint = lastPath.points[0];
154-
var lastPoint = lastPath.points[lastPath.points.length - 1];
155-
lastPath.points.push(firstPoint);
156-
lastPath = new Path(lastPoint.x, lastPoint.y, lastPoint.width, lastPoint.rgb, lastPoint.alpha);
157-
pathArray.push(lastPath);
158-
}
159-
break;
160-
161-
case Commands.FILL_PATH:
162-
for (var pathArrayIndex = 0, pathArrayLength = pathArray.length;
163-
pathArrayIndex < pathArrayLength;
164-
++pathArrayIndex)
165-
{
166-
shapeBatch.addFillPath(
167-
/* Graphics Game Object Properties */
168-
srcX, srcY, srcScaleX, srcScaleY, srcRotation,
169-
/* Rectangle properties */
170-
pathArray[pathArrayIndex].points,
171-
fillColor,
172-
fillAlpha,
173-
/* Transform */
174-
mva, mvb, mvc, mvd, mve, mvf,
175-
currentMatrix
176-
);
177-
}
178-
break;
179-
180-
case Commands.STROKE_PATH:
181-
for (var pathArrayIndex = 0, pathArrayLength = pathArray.length;
182-
pathArrayIndex < pathArrayLength;
183-
++pathArrayIndex)
184-
{
185-
path = pathArray[pathArrayIndex];
186-
shapeBatch.addStrokePath(
187-
/* Graphics Game Object Properties */
188-
srcX, srcY, srcScaleX, srcScaleY, srcRotation,
189-
/* Rectangle properties */
190-
path.points,
191-
lineWidth,
192-
lineColor,
193-
lineAlpha,
194-
/* Transform */
195-
mva, mvb, mvc, mvd, mve, mvf,
196-
path === this._lastPath,
197-
currentMatrix
198-
);
199-
}
200-
break;
201-
202-
case Commands.FILL_RECT:
203-
shapeBatch.addFillRect(
204-
/* Graphics Game Object Properties */
205-
srcX, srcY, srcScaleX, srcScaleY, srcRotation,
206-
/* Rectangle properties */
207-
commandBuffer[cmdIndex + 1],
208-
commandBuffer[cmdIndex + 2],
209-
commandBuffer[cmdIndex + 3],
210-
commandBuffer[cmdIndex + 4],
211-
fillColor,
212-
fillAlpha,
213-
/* Transform */
214-
mva, mvb, mvc, mvd, mve, mvf,
215-
currentMatrix
216-
);
217-
218-
cmdIndex += 4;
219-
break;
220-
221-
case Commands.FILL_TRIANGLE:
222-
shapeBatch.addFillTriangle(
223-
/* Graphics Game Object Properties */
224-
srcX, srcY, srcScaleX, srcScaleY, srcRotation,
225-
/* Triangle properties */
226-
commandBuffer[cmdIndex + 1],
227-
commandBuffer[cmdIndex + 2],
228-
commandBuffer[cmdIndex + 3],
229-
commandBuffer[cmdIndex + 4],
230-
commandBuffer[cmdIndex + 5],
231-
commandBuffer[cmdIndex + 6],
232-
fillColor,
233-
fillAlpha,
234-
/* Transform */
235-
mva, mvb, mvc, mvd, mve, mvf,
236-
currentMatrix
237-
);
238-
239-
cmdIndex += 6;
240-
break;
241-
242-
case Commands.STROKE_TRIANGLE:
243-
shapeBatch.addStrokeTriangle(
244-
/* Graphics Game Object Properties */
245-
srcX, srcY, srcScaleX, srcScaleY, srcRotation,
246-
/* Triangle properties */
247-
commandBuffer[cmdIndex + 1],
248-
commandBuffer[cmdIndex + 2],
249-
commandBuffer[cmdIndex + 3],
250-
commandBuffer[cmdIndex + 4],
251-
commandBuffer[cmdIndex + 5],
252-
commandBuffer[cmdIndex + 6],
253-
lineWidth,
254-
lineColor,
255-
lineAlpha,
256-
/* Transform */
257-
mva, mvb, mvc, mvd, mve, mvf,
258-
currentMatrix
259-
);
260-
261-
cmdIndex += 6;
262-
break;
263-
264-
case Commands.LINE_TO:
265-
if (lastPath !== null)
266-
{
267-
lastPath.points.push(new Point(commandBuffer[cmdIndex + 1], commandBuffer[cmdIndex + 2], lineWidth, lineColor, lineAlpha));
268-
}
269-
else
270-
{
271-
lastPath = new Path(commandBuffer[cmdIndex + 1], commandBuffer[cmdIndex + 2], lineWidth, lineColor, lineAlpha);
272-
pathArray.push(lastPath);
273-
}
274-
cmdIndex += 2;
275-
break;
276-
277-
case Commands.MOVE_TO:
278-
lastPath = new Path(commandBuffer[cmdIndex + 1], commandBuffer[cmdIndex + 2], lineWidth, lineColor, lineAlpha);
279-
pathArray.push(lastPath);
280-
cmdIndex += 2;
281-
break;
282-
283-
case Commands.LINE_FX_TO:
284-
if (lastPath !== null)
285-
{
286-
lastPath.points.push(new Point(
287-
commandBuffer[cmdIndex + 1],
288-
commandBuffer[cmdIndex + 2],
289-
commandBuffer[cmdIndex + 3],
290-
commandBuffer[cmdIndex + 4],
291-
commandBuffer[cmdIndex + 5]
292-
));
293-
}
294-
else
295-
{
296-
lastPath = new Path(
297-
commandBuffer[cmdIndex + 1],
298-
commandBuffer[cmdIndex + 2],
299-
commandBuffer[cmdIndex + 3],
300-
commandBuffer[cmdIndex + 4],
301-
commandBuffer[cmdIndex + 5]
302-
);
303-
pathArray.push(lastPath);
304-
}
305-
cmdIndex += 5;
306-
break;
307-
308-
case Commands.MOVE_FX_TO:
309-
lastPath = new Path(
310-
commandBuffer[cmdIndex + 1],
311-
commandBuffer[cmdIndex + 2],
312-
commandBuffer[cmdIndex + 3],
313-
commandBuffer[cmdIndex + 4],
314-
commandBuffer[cmdIndex + 5]
315-
);
316-
pathArray.push(lastPath);
317-
cmdIndex += 5;
318-
break;
319-
320-
case Commands.SAVE:
321-
matrixStack[matrixStackLength + 0] = currentMatrix.matrix[0];
322-
matrixStack[matrixStackLength + 1] = currentMatrix.matrix[1];
323-
matrixStack[matrixStackLength + 2] = currentMatrix.matrix[2];
324-
matrixStack[matrixStackLength + 3] = currentMatrix.matrix[3];
325-
matrixStack[matrixStackLength + 4] = currentMatrix.matrix[4];
326-
matrixStack[matrixStackLength + 5] = currentMatrix.matrix[5];
327-
matrixStackLength += 6;
328-
break;
329-
330-
case Commands.RESTORE:
331-
matrixStackLength -= 6;
332-
currentMatrix.matrix[0] = matrixStack[matrixStackLength + 0];
333-
currentMatrix.matrix[1] = matrixStack[matrixStackLength + 1];
334-
currentMatrix.matrix[2] = matrixStack[matrixStackLength + 2];
335-
currentMatrix.matrix[3] = matrixStack[matrixStackLength + 3];
336-
currentMatrix.matrix[4] = matrixStack[matrixStackLength + 4];
337-
currentMatrix.matrix[5] = matrixStack[matrixStackLength + 5];
338-
break;
339-
340-
case Commands.TRANSLATE:
341-
currentMatrix.translate(
342-
commandBuffer[cmdIndex + 1],
343-
commandBuffer[cmdIndex + 2]
344-
);
345-
cmdIndex += 2;
346-
break;
347-
348-
case Commands.SCALE:
349-
currentMatrix.scale(
350-
commandBuffer[cmdIndex + 1],
351-
commandBuffer[cmdIndex + 2]
352-
);
353-
cmdIndex += 2;
354-
break;
355-
356-
case Commands.ROTATE:
357-
currentMatrix.rotate(
358-
-commandBuffer[cmdIndex + 1]
359-
);
360-
cmdIndex += 1;
361-
break;
362-
363-
default:
364-
console.error('Phaser: Invalid Graphics Command ID ' + cmd);
365-
break;
366-
}
367-
}
368-
369-
currentMatrix.loadIdentity();
370-
pathArray.length = 0;
10+
renderer.pipelines.FlatTintPipeline.batchGraphics(this, camera);
37111
};
37212

37313
module.exports = GraphicsWebGLRenderer;

0 commit comments

Comments
 (0)