Skip to content

Commit 06a0a61

Browse files
bitnenferbitnenfer
committed
Line rendering for webgl on Graphics Game Object
1 parent fdc627f commit 06a0a61

2 files changed

Lines changed: 330 additions & 0 deletions

File tree

‎v3/src/gameobjects/graphics/Graphics.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ var Graphics = new Class({
109109
this.lineTo(x + width, y + height);
110110
this.lineTo(x, y + height);
111111
this.lineTo(x, y);
112+
this.strokePath();
112113
this.closePath();
113114
},
114115

‎v3/src/gameobjects/graphics/GraphicsWebGLRenderer.js‎

Lines changed: 329 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ var Earcut = require('./earcut');
33
var pathArray = [];
44
var cos = Math.cos;
55
var sin = Math.sin;
6+
var sqrt = Math.sqrt;
67

78
var Point = function (x, y)
89
{
@@ -22,6 +23,128 @@ var lerp = function (norm, min, max)
2223
return (max - min) * norm + min;
2324
};
2425

26+
var renderLine = function (
27+
/* start and end of line */
28+
ax, ay, bx, by,
29+
/* buffers */
30+
vertexBufferF32, vertexBufferU32, vertexDataBuffer,
31+
/* camera scroll */
32+
cameraScrollX, cameraScrollY,
33+
/* Camera transform */
34+
a, b, c, d, e, f,
35+
/* line properties */
36+
lineColor, lineAlpha, lineWidth,
37+
/* vertex count and limits */
38+
vertexCount, maxVertices,
39+
/* batch */
40+
shapeBatch,
41+
/* Game Object transform */
42+
srcX, srcY, srcScaleX, srcScaleY, srcRotation
43+
)
44+
{
45+
if (vertexCount + 6 > maxVertices)
46+
{
47+
shapeBatch.flush();
48+
vertexCount = 0;
49+
}
50+
shapeBatch.vertexCount = vertexCount + 6;
51+
52+
ax -= cameraScrollX;
53+
bx -= cameraScrollX;
54+
ay -= cameraScrollY;
55+
by -= cameraScrollY;
56+
57+
var vertexOffset = vertexDataBuffer.allocate(9 * 6);
58+
var dx = bx - ax;
59+
var dy = by - ay;
60+
var len = sqrt(dx * dx + dy * dy);
61+
var l0 = lineWidth * (by - ay) / len;
62+
var l1 = lineWidth * (ax - bx) / len;
63+
var lx0 = bx - l0;
64+
var ly0 = by - l1;
65+
var lx1 = ax - l0;
66+
var ly1 = ay - l1;
67+
var lx2 = bx + l0;
68+
var ly2 = by + l1;
69+
var lx3 = ax + l0;
70+
var ly3 = ay + l1;
71+
var x0 = lx0 * a + ly0 * c + e;
72+
var y0 = lx0 * b + ly0 * d + f;
73+
var x1 = lx1 * a + ly1 * c + e;
74+
var y1 = lx1 * b + ly1 * d + f;
75+
var x2 = lx2 * a + ly2 * c + e;
76+
var y2 = lx2 * b + ly2 * d + f;
77+
var x3 = lx3 * a + ly3 * c + e;
78+
var y3 = lx3 * b + ly3 * d + f;
79+
80+
vertexBufferF32[vertexOffset++] = x0;
81+
vertexBufferF32[vertexOffset++] = y0;
82+
vertexBufferU32[vertexOffset++] = lineColor;
83+
vertexBufferF32[vertexOffset++] = lineAlpha;
84+
vertexBufferF32[vertexOffset++] = srcX;
85+
vertexBufferF32[vertexOffset++] = srcY;
86+
vertexBufferF32[vertexOffset++] = srcScaleX;
87+
vertexBufferF32[vertexOffset++] = srcScaleY;
88+
vertexBufferF32[vertexOffset++] = srcRotation;
89+
90+
vertexBufferF32[vertexOffset++] = x1;
91+
vertexBufferF32[vertexOffset++] = y1;
92+
vertexBufferU32[vertexOffset++] = lineColor;
93+
vertexBufferF32[vertexOffset++] = lineAlpha;
94+
vertexBufferF32[vertexOffset++] = srcX;
95+
vertexBufferF32[vertexOffset++] = srcY;
96+
vertexBufferF32[vertexOffset++] = srcScaleX;
97+
vertexBufferF32[vertexOffset++] = srcScaleY;
98+
vertexBufferF32[vertexOffset++] = srcRotation;
99+
100+
vertexBufferF32[vertexOffset++] = x2;
101+
vertexBufferF32[vertexOffset++] = y2;
102+
vertexBufferU32[vertexOffset++] = lineColor;
103+
vertexBufferF32[vertexOffset++] = lineAlpha;
104+
vertexBufferF32[vertexOffset++] = srcX;
105+
vertexBufferF32[vertexOffset++] = srcY;
106+
vertexBufferF32[vertexOffset++] = srcScaleX;
107+
vertexBufferF32[vertexOffset++] = srcScaleY;
108+
vertexBufferF32[vertexOffset++] = srcRotation;
109+
110+
vertexBufferF32[vertexOffset++] = x1;
111+
vertexBufferF32[vertexOffset++] = y1;
112+
vertexBufferU32[vertexOffset++] = lineColor;
113+
vertexBufferF32[vertexOffset++] = lineAlpha;
114+
vertexBufferF32[vertexOffset++] = srcX;
115+
vertexBufferF32[vertexOffset++] = srcY;
116+
vertexBufferF32[vertexOffset++] = srcScaleX;
117+
vertexBufferF32[vertexOffset++] = srcScaleY;
118+
vertexBufferF32[vertexOffset++] = srcRotation;
119+
120+
vertexBufferF32[vertexOffset++] = x3;
121+
vertexBufferF32[vertexOffset++] = y3;
122+
vertexBufferU32[vertexOffset++] = lineColor;
123+
vertexBufferF32[vertexOffset++] = lineAlpha;
124+
vertexBufferF32[vertexOffset++] = srcX;
125+
vertexBufferF32[vertexOffset++] = srcY;
126+
vertexBufferF32[vertexOffset++] = srcScaleX;
127+
vertexBufferF32[vertexOffset++] = srcScaleY;
128+
vertexBufferF32[vertexOffset++] = srcRotation;
129+
130+
vertexBufferF32[vertexOffset++] = x2;
131+
vertexBufferF32[vertexOffset++] = y2;
132+
vertexBufferU32[vertexOffset++] = lineColor;
133+
vertexBufferF32[vertexOffset++] = lineAlpha;
134+
vertexBufferF32[vertexOffset++] = srcX;
135+
vertexBufferF32[vertexOffset++] = srcY;
136+
vertexBufferF32[vertexOffset++] = srcScaleX;
137+
vertexBufferF32[vertexOffset++] = srcScaleY;
138+
vertexBufferF32[vertexOffset++] = srcRotation;
139+
140+
return [
141+
x0, y0,
142+
x1, y1,
143+
x2, y2,
144+
x3, y3
145+
];
146+
};
147+
25148
var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
26149
{
27150
if (this.renderMask !== this.renderFlags)
@@ -203,6 +326,212 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
203326
}
204327
break;
205328
case Commands.STROKE_PATH:
329+
var pathArrayLength = pathArray.length;
330+
var lineWidth = lineWidth * 0.5;
331+
var pathArrayIndex, path, pathLength, pathIndex, point0, point1;
332+
var polylines = [];
333+
var lineColor = lineColor;
334+
var index, length, last, curr;
335+
var x0, y0, x1, y1, x2, y2, offset, position, color;
336+
337+
for (pathArrayIndex = 0; pathArrayIndex < pathArrayLength; ++pathArrayIndex) {
338+
path = pathArray[pathArrayIndex].points;
339+
pathLength = path.length;
340+
for (pathIndex = 0; pathIndex + 1 < pathLength; pathIndex += 1) {
341+
point0 = path[pathIndex];
342+
point1 = path[pathIndex + 1];
343+
polylines.push(renderLine(
344+
point0.x, point0.y, point1.x, point1.y,
345+
vertexBufferF32, vertexBufferU32, vertexDataBuffer,
346+
cameraScrollX, cameraScrollY,
347+
a, b, c, d, e, f,
348+
lineColor, lineAlpha, lineWidth,
349+
vertexCount, maxVertices,
350+
shapeBatch,
351+
srcX, srcY, srcScaleX, srcScaleY, srcRotation
352+
));
353+
vertexCount = shapeBatch.vertexCount;
354+
}
355+
if (pathArray[pathArrayIndex] === this._lastPath) {
356+
for (index = 1, length = polylines.length; index < length; ++index) {
357+
last = polylines[index - 1];
358+
curr = polylines[index];
359+
if (vertexCount + 6 > maxVertices) {
360+
shapeBatch.flush();
361+
vertexCount = 0;
362+
}
363+
364+
vertexOffset = vertexDataBuffer.allocate(9 * 6);
365+
vertexCount += 6;
366+
367+
x0 = last[2 * 2 + 0] - cameraScrollX;
368+
y0 = last[2 * 2 + 1] - cameraScrollY;
369+
x1 = last[2 * 0 + 0] - cameraScrollX;
370+
y1 = last[2 * 0 + 1] - cameraScrollY;
371+
x2 = curr[2 * 3 + 0] - cameraScrollX;
372+
y2 = curr[2 * 3 + 1] - cameraScrollY;
373+
374+
vertexBufferF32[vertexOffset++] = x0;
375+
vertexBufferF32[vertexOffset++] = y0;
376+
vertexBufferU32[vertexOffset++] = lineColor;
377+
vertexBufferF32[vertexOffset++] = lineAlpha;
378+
vertexBufferF32[vertexOffset++] = srcX;
379+
vertexBufferF32[vertexOffset++] = srcY;
380+
vertexBufferF32[vertexOffset++] = srcScaleX;
381+
vertexBufferF32[vertexOffset++] = srcScaleY;
382+
vertexBufferF32[vertexOffset++] = srcRotation;
383+
384+
vertexBufferF32[vertexOffset++] = x1;
385+
vertexBufferF32[vertexOffset++] = y1;
386+
vertexBufferU32[vertexOffset++] = lineColor;
387+
vertexBufferF32[vertexOffset++] = lineAlpha;
388+
vertexBufferF32[vertexOffset++] = srcX;
389+
vertexBufferF32[vertexOffset++] = srcY;
390+
vertexBufferF32[vertexOffset++] = srcScaleX;
391+
vertexBufferF32[vertexOffset++] = srcScaleY;
392+
vertexBufferF32[vertexOffset++] = srcRotation;
393+
394+
vertexBufferF32[vertexOffset++] = x2;
395+
vertexBufferF32[vertexOffset++] = y2;
396+
vertexBufferU32[vertexOffset++] = lineColor;
397+
vertexBufferF32[vertexOffset++] = lineAlpha;
398+
vertexBufferF32[vertexOffset++] = srcX;
399+
vertexBufferF32[vertexOffset++] = srcY;
400+
vertexBufferF32[vertexOffset++] = srcScaleX;
401+
vertexBufferF32[vertexOffset++] = srcScaleY;
402+
vertexBufferF32[vertexOffset++] = srcRotation;
403+
404+
x0 = last[2 * 0 + 0] - cameraScrollX;
405+
y0 = last[2 * 0 + 1] - cameraScrollY;
406+
x1 = last[2 * 2 + 0] - cameraScrollX;
407+
y1 = last[2 * 2 + 1] - cameraScrollY;
408+
x2 = curr[2 * 1 + 0] - cameraScrollX;
409+
y2 = curr[2 * 1 + 1] - cameraScrollY;
410+
411+
vertexBufferF32[vertexOffset++] = x0;
412+
vertexBufferF32[vertexOffset++] = y0;
413+
vertexBufferU32[vertexOffset++] = lineColor;
414+
vertexBufferF32[vertexOffset++] = lineAlpha;
415+
vertexBufferF32[vertexOffset++] = srcX;
416+
vertexBufferF32[vertexOffset++] = srcY;
417+
vertexBufferF32[vertexOffset++] = srcScaleX;
418+
vertexBufferF32[vertexOffset++] = srcScaleY;
419+
vertexBufferF32[vertexOffset++] = srcRotation;
420+
421+
vertexBufferF32[vertexOffset++] = x1;
422+
vertexBufferF32[vertexOffset++] = y1;
423+
vertexBufferU32[vertexOffset++] = lineColor;
424+
vertexBufferF32[vertexOffset++] = lineAlpha;
425+
vertexBufferF32[vertexOffset++] = srcX;
426+
vertexBufferF32[vertexOffset++] = srcY;
427+
vertexBufferF32[vertexOffset++] = srcScaleX;
428+
vertexBufferF32[vertexOffset++] = srcScaleY;
429+
vertexBufferF32[vertexOffset++] = srcRotation;
430+
431+
vertexBufferF32[vertexOffset++] = x2;
432+
vertexBufferF32[vertexOffset++] = y2;
433+
vertexBufferU32[vertexOffset++] = lineColor;
434+
vertexBufferF32[vertexOffset++] = lineAlpha;
435+
vertexBufferF32[vertexOffset++] = srcX;
436+
vertexBufferF32[vertexOffset++] = srcY;
437+
vertexBufferF32[vertexOffset++] = srcScaleX;
438+
vertexBufferF32[vertexOffset++] = srcScaleY;
439+
vertexBufferF32[vertexOffset++] = srcRotation;
440+
441+
vertexCount += 6;
442+
}
443+
} else {
444+
for (index = 0, length = polylines.length; index < length; ++index) {
445+
last = polylines[index - 1] || polylines[polylines.length - 1];
446+
curr = polylines[index];
447+
448+
if (vertexCount + 6 > maxVertices) {
449+
shapeBatch.flush();
450+
vertexCount = 0;
451+
}
452+
453+
vertexOffset = vertexDataBuffer.allocate(9 * 6);
454+
vertexCount += 6;
455+
456+
x0 = last[2 * 2 + 0] - cameraScrollX;
457+
y0 = last[2 * 2 + 1] - cameraScrollY;
458+
x1 = last[2 * 0 + 0] - cameraScrollX;
459+
y1 = last[2 * 0 + 1] - cameraScrollY;
460+
x2 = curr[2 * 3 + 0] - cameraScrollX;
461+
y2 = curr[2 * 3 + 1] - cameraScrollY;
462+
463+
vertexBufferF32[vertexOffset++] = x0;
464+
vertexBufferF32[vertexOffset++] = y0;
465+
vertexBufferU32[vertexOffset++] = lineColor;
466+
vertexBufferF32[vertexOffset++] = lineAlpha;
467+
vertexBufferF32[vertexOffset++] = srcX;
468+
vertexBufferF32[vertexOffset++] = srcY;
469+
vertexBufferF32[vertexOffset++] = srcScaleX;
470+
vertexBufferF32[vertexOffset++] = srcScaleY;
471+
vertexBufferF32[vertexOffset++] = srcRotation;
472+
473+
vertexBufferF32[vertexOffset++] = x1;
474+
vertexBufferF32[vertexOffset++] = y1;
475+
vertexBufferU32[vertexOffset++] = lineColor;
476+
vertexBufferF32[vertexOffset++] = lineAlpha;
477+
vertexBufferF32[vertexOffset++] = srcX;
478+
vertexBufferF32[vertexOffset++] = srcY;
479+
vertexBufferF32[vertexOffset++] = srcScaleX;
480+
vertexBufferF32[vertexOffset++] = srcScaleY;
481+
vertexBufferF32[vertexOffset++] = srcRotation;
482+
483+
vertexBufferF32[vertexOffset++] = x2;
484+
vertexBufferF32[vertexOffset++] = y2;
485+
vertexBufferU32[vertexOffset++] = lineColor;
486+
vertexBufferF32[vertexOffset++] = lineAlpha;
487+
vertexBufferF32[vertexOffset++] = srcX;
488+
vertexBufferF32[vertexOffset++] = srcY;
489+
vertexBufferF32[vertexOffset++] = srcScaleX;
490+
vertexBufferF32[vertexOffset++] = srcScaleY;
491+
vertexBufferF32[vertexOffset++] = srcRotation;
492+
493+
x0 = last[2 * 0 + 0] - cameraScrollX;
494+
y0 = last[2 * 0 + 1] - cameraScrollY;
495+
x1 = last[2 * 2 + 0] - cameraScrollX;
496+
y1 = last[2 * 2 + 1] - cameraScrollY;
497+
x2 = curr[2 * 1 + 0] - cameraScrollX;
498+
y2 = curr[2 * 1 + 1] - cameraScrollY;
499+
500+
vertexBufferF32[vertexOffset++] = x0;
501+
vertexBufferF32[vertexOffset++] = y0;
502+
vertexBufferU32[vertexOffset++] = lineColor;
503+
vertexBufferF32[vertexOffset++] = lineAlpha;
504+
vertexBufferF32[vertexOffset++] = srcX;
505+
vertexBufferF32[vertexOffset++] = srcY;
506+
vertexBufferF32[vertexOffset++] = srcScaleX;
507+
vertexBufferF32[vertexOffset++] = srcScaleY;
508+
vertexBufferF32[vertexOffset++] = srcRotation;
509+
510+
vertexBufferF32[vertexOffset++] = x1;
511+
vertexBufferF32[vertexOffset++] = y1;
512+
vertexBufferU32[vertexOffset++] = lineColor;
513+
vertexBufferF32[vertexOffset++] = lineAlpha;
514+
vertexBufferF32[vertexOffset++] = srcX;
515+
vertexBufferF32[vertexOffset++] = srcY;
516+
vertexBufferF32[vertexOffset++] = srcScaleX;
517+
vertexBufferF32[vertexOffset++] = srcScaleY;
518+
vertexBufferF32[vertexOffset++] = srcRotation;
519+
520+
vertexBufferF32[vertexOffset++] = x2;
521+
vertexBufferF32[vertexOffset++] = y2;
522+
vertexBufferU32[vertexOffset++] = lineColor;
523+
vertexBufferF32[vertexOffset++] = lineAlpha;
524+
vertexBufferF32[vertexOffset++] = srcX;
525+
vertexBufferF32[vertexOffset++] = srcY;
526+
vertexBufferF32[vertexOffset++] = srcScaleX;
527+
vertexBufferF32[vertexOffset++] = srcScaleY;
528+
vertexBufferF32[vertexOffset++] = srcRotation;
529+
530+
vertexCount += 6;
531+
}
532+
}
533+
polylines.length = 0;
534+
}
206535
break;
207536
case Commands.FILL_RECT:
208537
if (vertexCount + 6 > maxVertices)

0 commit comments

Comments
 (0)