Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-12-18 00:53:42 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fill canvas rendering on WebGL for Graphics GO

Browse source
This commit is contained in:
Felipe Alfonso 2017-03-01 18:08:10 -03:00
parent 011014d645
commit ac9d8ff44f
9 changed files with 329 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
v3/src/gameobjects/graphics/Commands.js
View file

@ -10,5 +10,6 @@ module.exports = {
STROKE_CIRCLE: 8,
STROKE_RECT: 9,
FILL_PATH: 10,
STROKE_PATH: 11
STROKE_PATH: 11,
FILL_STYLE: 12
};

21
v3/src/gameobjects/graphics/Graphics.js
View file

@ -3,6 +3,7 @@ var GameObject = require('../GameObject');
var Components = require('../../components');
var Render = require('./GraphicsRender');
var Commands = require('./Commands');
var PI2 = 2 * Math.PI;
var Graphics = new Class({
@ -78,32 +79,32 @@ var Graphics = new Class({
fillCircle: function (x, y, radius)
{
this.commandBuffer.push(
Commands.DRAW_CIRCLE,
x, y, radius
);
this.beginPath();
this.arc(x, y, radius, 0, PI2);
this.fillPath();
this.closePath();
},
fillRect: function (x, y, width, height)
{
this.commandBuffer.push(
Commands.DRAW_RECT,
Commands.FILL_RECT,
x, y, width, height
);
},
strokeCircle: function (x, y, radius)
{
this.commandBuffer.push(
Commands.DRAW_CIRCLE,
x, y, radius
);
this.beginPath();
this.arc(x, y, radius, 0, PI2);
this.strokePath();
this.closePath();
},
strokeRect: function (x, y, width, height)
{
this.commandBuffer.push(
Commands.DRAW_RECT,
Commands.STROKE_RECT,
x, y, width, height
);
},

13
v3/src/gameobjects/graphics/GraphicsCanvasRenderer.js
View file

@ -103,19 +103,6 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
ctx.lineWidth = lineWidth;
ctx.stroke();
break;
case Commands.FILL_CIRCLE:
ctx.beginPath();
ctx.arc(
commandBuffer[index + 1],
commandBuffer[index + 2],
commandBuffer[index + 3],
0,
PI2
);
ctx.fill();
ctx.closePath();
index += 3;
break;
case Commands.FILL_RECT:
ctx.fillRect(
commandBuffer[index + 1],

288
v3/src/gameobjects/graphics/GraphicsWebGLRenderer.js
View file

@ -1,9 +1,297 @@
var Commands = require('./Commands');
var Earcut = require('./earcut');
var pathArray = [];
var cos = Math.cos;
var sin = Math.sin;
var Point = function (x, y)
{
this.x = x;
this.y = y;
};
var Path = function (x, y)
{
this.points = [];
this.points.push(new Point(x, y));
};
var lerp = function (norm, min, max)
{
return (max - min) * norm + min;
};
var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
{
if (this.renderMask !== this.renderFlags)
{
return;
}
var shapeBatch = renderer.shapeBatch;
var vertexDataBuffer = shapeBatch.vertexDataBuffer;
var vertexBufferF32 = vertexDataBuffer.floatView;
var vertexBufferU32 = vertexDataBuffer.uintView;
var vertexOffset = 0;
var cameraScrollX = camera.scrollX;
var cameraScrollY = camera.scrollY;
var srcX = src.x;
var srcY = src.y;
var srcScaleX = src.scaleX;
var srcScaleY = src.scaleY;
var srcRotation = src.rotation;
var commandBuffer = src.commandBuffer;
var value;
var lineAlpha = 1.0;
var fillAlpha = 1.0;
var lineColor = 0;
var fillColor = 0;
var lineWidth = 1.0;
var cameraMatrix = camera.matrix.matrix;
var a = cameraMatrix[0];
var b = cameraMatrix[1];
var c = cameraMatrix[2];
var d = cameraMatrix[3];
var e = cameraMatrix[4];
var f = cameraMatrix[5];
var lastPath = null;
var iteration = 0;
var iterStep = 0.01;
var tx = 0;
var ty = 0;
var ta = 0;
var x, y, radius, startAngle, endAngle, anticlockwise;
var width, height, txw, tyh;
var vertexCount = shapeBatch.vertexCount;
var polygon = [];
var x0, y0, x1, y1, x2, y2;
var tx0, ty0, tx1, ty1, tx2, ty2;
var v0, v1, v2;
var polygonIndex;
var path;
var pathLength;
var point;
renderer.setBatch(shapeBatch, null);
for (var cmdIndex = 0, cmdLength = commandBuffer.length; cmdIndex < cmdLength; ++cmdIndex)
{
var cmd = commandBuffer[cmdIndex];
switch(cmd)
{
case Commands.ARC:
x = commandBuffer[cmdIndex + 1];
y = commandBuffer[cmdIndex + 2];
radius = commandBuffer[cmdIndex + 3];
startAngle = commandBuffer[cmdIndex + 4];
endAngle = commandBuffer[cmdIndex + 5];
anticlockwise = commandBuffer[cmdIndex + 6];
while (iteration < 1) {
ta = lerp(iteration, startAngle, endAngle);
tx = x + cos(ta) * radius;
ty = y + sin(ta) * radius;
if (iteration === 0) {
lastPath = new Path(tx, ty);
pathArray.push(lastPath);
} else {
lastPath.points.push(new Point(tx, ty));
}
iteration += iterStep;
}
cmdIndex += 6;
break;
case Commands.LINE_STYLE:
lineWidth = commandBuffer[cmdIndex + 1];
lineColor = commandBuffer[cmdIndex + 2]
lineAlpha = commandBuffer[cmdIndex + 3];
cmdIndex += 3;
break;
case Commands.FILL_STYLE:
fillColor = commandBuffer[cmdIndex + 1];
fillAlpha = commandBuffer[cmdIndex + 2];
cmdIndex += 2;
break;
case Commands.BEGIN_PATH:
pathArray.length = 0;
break;
case Commands.CLOSE_PATH:
if (lastPath !== null && lastPath.points.length > 0) {
var firstPoint = lastPath.points[0];
var lastPoint = lastPath.points[lastPath.points.length - 1];
lastPath.points.push(firstPoint);
lastPath = new Path(x, y);
pathArray.push(lastPath);
}
break;
case Commands.FILL_PATH:
for (var pathArrayIndex = 0, pathArrayLength = pathArray.length; pathArrayIndex < pathArrayLength; ++pathArrayIndex)
{
path = pathArray[pathArrayIndex].points;
pathLength = path.length;
for (var pathIndex = 0; pathIndex < pathLength; ++pathIndex)
{
point = path[pathIndex];
polygon.push(point.x, point.y);
}
polygonIndex = Earcut(polygon);
for (var index = 0, length = polygonIndex.length; index < length; index += 3)
{
v0 = polygonIndex[index + 0] * 2;
v1 = polygonIndex[index + 1] * 2;
v2 = polygonIndex[index + 2] * 2;
vertexOffset = vertexDataBuffer.allocate(9 * 3);
vertexCount += 3;
x0 = polygon[v0 + 0] - cameraScrollX;
y0 = polygon[v0 + 1] - cameraScrollY;
x1 = polygon[v1 + 0] - cameraScrollX;
y1 = polygon[v1 + 1] - cameraScrollY;
x2 = polygon[v2 + 0] - cameraScrollX;
y2 = polygon[v2 + 1] - cameraScrollY;
tx0 = x0 * a + y0 * c + e;
ty0 = x0 * b + y0 * d + f;
tx1 = x1 * a + y1 * c + e;
ty1 = x1 * b + y1 * d + f;
tx2 = x2 * a + y2 * c + e;
ty2 = x2 * b + y2 * d + f;
vertexBufferF32[vertexOffset++] = tx0;
vertexBufferF32[vertexOffset++] = ty0;
vertexBufferU32[vertexOffset++] = fillColor;
vertexBufferF32[vertexOffset++] = fillAlpha;
vertexBufferF32[vertexOffset++] = srcX;
vertexBufferF32[vertexOffset++] = srcY;
vertexBufferF32[vertexOffset++] = srcScaleX;
vertexBufferF32[vertexOffset++] = srcScaleY;
vertexBufferF32[vertexOffset++] = srcRotation;
vertexBufferF32[vertexOffset++] = tx1;
vertexBufferF32[vertexOffset++] = ty1;
vertexBufferU32[vertexOffset++] = fillColor;
vertexBufferF32[vertexOffset++] = fillAlpha;
vertexBufferF32[vertexOffset++] = srcX;
vertexBufferF32[vertexOffset++] = srcY;
vertexBufferF32[vertexOffset++] = srcScaleX;
vertexBufferF32[vertexOffset++] = srcScaleY;
vertexBufferF32[vertexOffset++] = srcRotation;
vertexBufferF32[vertexOffset++] = tx2;
vertexBufferF32[vertexOffset++] = ty2;
vertexBufferU32[vertexOffset++] = fillColor;
vertexBufferF32[vertexOffset++] = fillAlpha;
vertexBufferF32[vertexOffset++] = srcX;
vertexBufferF32[vertexOffset++] = srcY;
vertexBufferF32[vertexOffset++] = srcScaleX;
vertexBufferF32[vertexOffset++] = srcScaleY;
vertexBufferF32[vertexOffset++] = srcRotation;
}
polygon.length = 0;
}
break;
case Commands.STROKE_PATH:
break;
case Commands.FILL_RECT:
vertexOffset = vertexDataBuffer.allocate(9 * 6);
vertexCount += 6;
x = commandBuffer[cmdIndex + 1] - cameraScrollX;
y = commandBuffer[cmdIndex + 2] - cameraScrollY;
xw = x + commandBuffer[cmdIndex + 3];
yh = y + commandBuffer[cmdIndex + 4];
tx = x * a + y * c + e;
ty = x * b + y * d + f;
txw = xw * a + yh * c + e;
tyh = xw * b + yh * d + f;
vertexBufferF32[vertexOffset++] = tx;
vertexBufferF32[vertexOffset++] = ty;
vertexBufferU32[vertexOffset++] = fillColor;
vertexBufferF32[vertexOffset++] = fillAlpha;
vertexBufferF32[vertexOffset++] = srcX;
vertexBufferF32[vertexOffset++] = srcY;
vertexBufferF32[vertexOffset++] = srcScaleX;
vertexBufferF32[vertexOffset++] = srcScaleY;
vertexBufferF32[vertexOffset++] = srcRotation;
vertexBufferF32[vertexOffset++] = tx;
vertexBufferF32[vertexOffset++] = tyh;
vertexBufferU32[vertexOffset++] = fillColor;
vertexBufferF32[vertexOffset++] = fillAlpha;
vertexBufferF32[vertexOffset++] = srcX;
vertexBufferF32[vertexOffset++] = srcY;
vertexBufferF32[vertexOffset++] = srcScaleX;
vertexBufferF32[vertexOffset++] = srcScaleY;
vertexBufferF32[vertexOffset++] = srcRotation;
vertexBufferF32[vertexOffset++] = txw;
vertexBufferF32[vertexOffset++] = tyh;
vertexBufferU32[vertexOffset++] = fillColor;
vertexBufferF32[vertexOffset++] = fillAlpha;
vertexBufferF32[vertexOffset++] = srcX;
vertexBufferF32[vertexOffset++] = srcY;
vertexBufferF32[vertexOffset++] = srcScaleX;
vertexBufferF32[vertexOffset++] = srcScaleY;
vertexBufferF32[vertexOffset++] = srcRotation;
vertexBufferF32[vertexOffset++] = tx;
vertexBufferF32[vertexOffset++] = ty;
vertexBufferU32[vertexOffset++] = fillColor;
vertexBufferF32[vertexOffset++] = fillAlpha;
vertexBufferF32[vertexOffset++] = srcX;
vertexBufferF32[vertexOffset++] = srcY;
vertexBufferF32[vertexOffset++] = srcScaleX;
vertexBufferF32[vertexOffset++] = srcScaleY;
vertexBufferF32[vertexOffset++] = srcRotation;
vertexBufferF32[vertexOffset++] = txw;
vertexBufferF32[vertexOffset++] = tyh;
vertexBufferU32[vertexOffset++] = fillColor;
vertexBufferF32[vertexOffset++] = fillAlpha;
vertexBufferF32[vertexOffset++] = srcX;
vertexBufferF32[vertexOffset++] = srcY;
vertexBufferF32[vertexOffset++] = srcScaleX;
vertexBufferF32[vertexOffset++] = srcScaleY;
vertexBufferF32[vertexOffset++] = srcRotation;
vertexBufferF32[vertexOffset++] = txw;
vertexBufferF32[vertexOffset++] = ty;
vertexBufferU32[vertexOffset++] = fillColor;
vertexBufferF32[vertexOffset++] = fillAlpha;
vertexBufferF32[vertexOffset++] = srcX;
vertexBufferF32[vertexOffset++] = srcY;
vertexBufferF32[vertexOffset++] = srcScaleX;
vertexBufferF32[vertexOffset++] = srcScaleY;
vertexBufferF32[vertexOffset++] = srcRotation;
cmdIndex += 4;
break;
case Commands.STROKE_CIRCLE:
cmdIndex += 3;
break;
case Commands.STROKE_RECT:
cmdIndex += 4;
break;
case Commands.LINE_TO:
if (lastPath !== null) {
lastPath.points.push(new Point(commandBuffer[cmdIndex + 1], commandBuffer[cmdIndex + 2]));
} else {
lastPath = new Path(commandBuffer[cmdIndex + 1], commandBuffer[cmdIndex + 2]);
pathArray.push(lastPath);
}
cmdIndex += 2;
break;
case Commands.MOVE_TO:
lastPath = new Path(commandBuffer[cmdIndex + 1], commandBuffer[cmdIndex + 2]);
pathArray.push(lastPath);
cmdIndex += 2;
break;
default:
console.error('Phaser: Invalid Graphics Command ID ' + cmd);
break;
}
}
shapeBatch.vertexCount = vertexCount;
pathArray.length = 0;
}
module.exports = GraphicsWebGLRenderer;

1
v3/src/gameobjects/graphics/earcut.js Normal file
View file

File diff suppressed because one or more lines are too long

3
v3/src/renderer/webgl/batches/shape/FragmentShader.js
View file

@ -1,7 +1,8 @@
module.exports = [
'precision mediump float;',
'varying vec4 v_color;',
'varying float v_alpha;',
'void main() {',
' gl_FragColor = v_color;',
' gl_FragColor = vec4(v_color.bgr, v_alpha);',
'}'
].join('\n');

18
v3/src/renderer/webgl/batches/shape/ShapeBatch.js
View file

@ -62,7 +62,11 @@ ShapeBatch.prototype = {
var program = CreateProgram(gl, vertShader, fragShader);
var attribArray = [
CreateAttribDesc(gl, program, 'a_position', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 0),
CreateAttribDesc(gl, program, 'a_color', 4, gl.FLOAT, true, CONST.VERTEX_SIZE, 8),
CreateAttribDesc(gl, program, 'a_color', 4, gl.UNSIGNED_BYTE, true, CONST.VERTEX_SIZE, 8),
CreateAttribDesc(gl, program, 'a_alpha', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 12),
CreateAttribDesc(gl, program, 'a_translate', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 16),
CreateAttribDesc(gl, program, 'a_scale', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 24),
CreateAttribDesc(gl, program, 'a_rotation', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 32),
];
var vertexArray = new VertexArray(CreateBuffer(gl, gl.ARRAY_BUFFER, gl.STREAM_DRAW, null, vertexDataBuffer.getByteCapacity()), attribArray);
var viewMatrixLocation = gl.getUniformLocation(program, 'u_view_matrix');
@ -108,11 +112,13 @@ ShapeBatch.prototype = {
var gl = this.glContext;
var vertexDataBuffer = this.vertexDataBuffer;
gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertexDataBuffer.getUsedBufferAsFloat());
gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount);
vertexDataBuffer.clear();
this.vertexCount = 0;
if (this.vertexCount > 0)
{
gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertexDataBuffer.getUsedBufferAsFloat());
gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount);
vertexDataBuffer.clear();
this.vertexCount = 0;
}
},
resize: function (width, height, resolution)

11
v3/src/renderer/webgl/batches/shape/VertexShader.js
View file

@ -2,9 +2,18 @@ module.exports = [
'uniform mat4 u_view_matrix;',
'attribute vec2 a_position;',
'attribute vec4 a_color;',
'attribute float a_alpha;',
'attribute vec2 a_translate;',
'attribute vec2 a_scale;',
'attribute float a_rotation;',
'varying vec4 v_color;',
'varying float v_alpha;',
'void main () {',
' gl_Position = u_view_matrix * vec4(a_position, 1.0, 1.0);',
' float c = cos(a_rotation);',
' float s = sin(a_rotation);',
' vec2 t_position = vec2(a_position.x * c - a_position.y * s, a_position.x * s + a_position.y * c);',
' gl_Position = u_view_matrix * vec4(t_position * a_scale + a_translate, 1.0, 1.0);',
' v_color = a_color;',
' v_alpha = a_alpha;',
'}'
].join('\n');

7
v3/src/renderer/webgl/batches/shape/const.js
View file

@ -3,14 +3,13 @@ var VertexShader = require('./VertexShader');
var CONST = {
// VERTEX_SIZE = sizeof(vec2) + sizeof(uint32)
VERTEX_SIZE: 12,
VERTEX_SIZE: 36,
// How many 32-bit components does the vertex have.
SHAPE_VERTEX_COMPONENT_COUNT: 5,
SHAPE_VERTEX_COMPONENT_COUNT: 9,
// Can't be bigger than 10,000 since index are 16-bit
MAX_VERTICES: 10000,
MAX_VERTICES: 1000000,
VERTEX_SHADER_SOURCE: VertexShader,
FRAGMENT_SHADER_SOURCE: FragmentShader