Skip to content

Commit 7414158

Browse files
bitnenferbitnenfer
committed
Per vertex color added to SpriteBatch
1 parent 67d6845 commit 7414158

7 files changed

Lines changed: 106 additions & 89 deletions

File tree

‎v3/src/gameobjects/image/ImageWebGLRenderer.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ var ImageWebGLRenderer = function (renderer, src, interpolationPercentage)
2424
transform._pivotX, transform._pivotY,
2525
transform.world.tx, transform.world.ty,
2626
transform._worldScaleX, transform._worldScaleY,
27-
transform._worldRotation
27+
transform._worldRotation,
28+
src.color._glTint
2829
);
2930
};
3031

‎v3/src/renderer/webgl/batches/sprite/FragmentShader.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ module.exports = [
22
'precision lowp float;',
33
'uniform sampler2D u_sampler2D;',
44
'varying vec2 v_tex_coord;',
5+
'varying vec3 v_color;',
56
'void main() {',
6-
' gl_FragColor = texture2D(u_sampler2D, v_tex_coord);',
7+
' gl_FragColor = texture2D(u_sampler2D, v_tex_coord) * vec4(v_color, 1.0);',
78
'}'
89
].join('\n');

‎v3/src/renderer/webgl/batches/sprite/SpriteBatch.js‎

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ SpriteBatch.prototype = {
8383
CreateAttribDesc(gl, program, 'a_tex_coord', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 8),
8484
CreateAttribDesc(gl, program, 'a_translate', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 16),
8585
CreateAttribDesc(gl, program, 'a_scale', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 24),
86-
CreateAttribDesc(gl, program, 'a_rotation', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 32)
86+
CreateAttribDesc(gl, program, 'a_rotation', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 32),
87+
CreateAttribDesc(gl, program, 'a_color', 3, 5121, true, CONST.VERTEX_SIZE, 36)
8788
];
8889

8990
var vertexArray = new VertexArray(CreateBuffer(gl, gl.ARRAY_BUFFER, gl.STREAM_DRAW, null, vertexDataBuffer.getByteCapacity()), attribArray);
@@ -132,60 +133,65 @@ SpriteBatch.prototype = {
132133
return (this.vertexDataBuffer.getByteLength() >= this.vertexDataBuffer.getByteCapacity());
133134
},
134135

135-
add: function (frame, pivotX, pivotY, translateX, translateY, scaleX, scaleY, rotation)
136+
add: function (frame, pivotX, pivotY, translateX, translateY, scaleX, scaleY, rotation, vertexColor)
136137
{
137138
this.manager.setBatch(this, frame.texture.source[0].glTexture);
138139

139140
// The user must check if the buffers are full before flushing
140141
// this is to give freedom of when should the renderer flush. var vertexDataBuffer = this.vertexDataBuffer;
141142
var vertexDataBuffer = this.vertexDataBuffer;
142-
var vertexBuffer = vertexDataBuffer.floatView;
143+
var vertexBufferF32 = vertexDataBuffer.floatView;
144+
var vertexBufferU32 = vertexDataBuffer.uintView;
143145
var vertexOffset = vertexDataBuffer.allocate(CONST.SPRITE_VERTEX_COMPONENT_COUNT * CONST.SPRITE_VERTEX_COUNT);
144146
var uvs = frame.uvs;
145147
var x = -pivotX;
146148
var y = -pivotY;
147149
var width = frame.width;
148150
var height = frame.height;
149151

150-
vertexBuffer[vertexOffset++] = x;
151-
vertexBuffer[vertexOffset++] = y;
152-
vertexBuffer[vertexOffset++] = uvs.x0;
153-
vertexBuffer[vertexOffset++] = uvs.y0;
154-
vertexBuffer[vertexOffset++] = translateX;
155-
vertexBuffer[vertexOffset++] = translateY;
156-
vertexBuffer[vertexOffset++] = scaleX;
157-
vertexBuffer[vertexOffset++] = scaleY;
158-
vertexBuffer[vertexOffset++] = rotation;
159-
160-
vertexBuffer[vertexOffset++] = x;
161-
vertexBuffer[vertexOffset++] = y + height;
162-
vertexBuffer[vertexOffset++] = uvs.x1;
163-
vertexBuffer[vertexOffset++] = uvs.y1;
164-
vertexBuffer[vertexOffset++] = translateX;
165-
vertexBuffer[vertexOffset++] = translateY;
166-
vertexBuffer[vertexOffset++] = scaleX;
167-
vertexBuffer[vertexOffset++] = scaleY;
168-
vertexBuffer[vertexOffset++] = rotation;
152+
vertexBufferF32[vertexOffset++] = x;
153+
vertexBufferF32[vertexOffset++] = y;
154+
vertexBufferF32[vertexOffset++] = uvs.x0;
155+
vertexBufferF32[vertexOffset++] = uvs.y0;
156+
vertexBufferF32[vertexOffset++] = translateX;
157+
vertexBufferF32[vertexOffset++] = translateY;
158+
vertexBufferF32[vertexOffset++] = scaleX;
159+
vertexBufferF32[vertexOffset++] = scaleY;
160+
vertexBufferF32[vertexOffset++] = rotation;
161+
vertexBufferU32[vertexOffset++] = vertexColor.topLeft;
162+
163+
vertexBufferF32[vertexOffset++] = x;
164+
vertexBufferF32[vertexOffset++] = y + height;
165+
vertexBufferF32[vertexOffset++] = uvs.x1;
166+
vertexBufferF32[vertexOffset++] = uvs.y1;
167+
vertexBufferF32[vertexOffset++] = translateX;
168+
vertexBufferF32[vertexOffset++] = translateY;
169+
vertexBufferF32[vertexOffset++] = scaleX;
170+
vertexBufferF32[vertexOffset++] = scaleY;
171+
vertexBufferF32[vertexOffset++] = rotation;
172+
vertexBufferU32[vertexOffset++] = vertexColor.bottomLeft;
169173

170-
vertexBuffer[vertexOffset++] = x + width;
171-
vertexBuffer[vertexOffset++] = y + height;
172-
vertexBuffer[vertexOffset++] = uvs.x2;
173-
vertexBuffer[vertexOffset++] = uvs.y2;
174-
vertexBuffer[vertexOffset++] = translateX;
175-
vertexBuffer[vertexOffset++] = translateY;
176-
vertexBuffer[vertexOffset++] = scaleX;
177-
vertexBuffer[vertexOffset++] = scaleY;
178-
vertexBuffer[vertexOffset++] = rotation;
179-
180-
vertexBuffer[vertexOffset++] = x + width;
181-
vertexBuffer[vertexOffset++] = y;
182-
vertexBuffer[vertexOffset++] = uvs.x3;
183-
vertexBuffer[vertexOffset++] = uvs.y3;
184-
vertexBuffer[vertexOffset++] = translateX;
185-
vertexBuffer[vertexOffset++] = translateY;
186-
vertexBuffer[vertexOffset++] = scaleX;
187-
vertexBuffer[vertexOffset++] = scaleY;
188-
vertexBuffer[vertexOffset++] = rotation;
174+
vertexBufferF32[vertexOffset++] = x + width;
175+
vertexBufferF32[vertexOffset++] = y + height;
176+
vertexBufferF32[vertexOffset++] = uvs.x2;
177+
vertexBufferF32[vertexOffset++] = uvs.y2;
178+
vertexBufferF32[vertexOffset++] = translateX;
179+
vertexBufferF32[vertexOffset++] = translateY;
180+
vertexBufferF32[vertexOffset++] = scaleX;
181+
vertexBufferF32[vertexOffset++] = scaleY;
182+
vertexBufferF32[vertexOffset++] = rotation;
183+
vertexBufferU32[vertexOffset++] = vertexColor.bottomRight;
184+
185+
vertexBufferF32[vertexOffset++] = x + width;
186+
vertexBufferF32[vertexOffset++] = y;
187+
vertexBufferF32[vertexOffset++] = uvs.x3;
188+
vertexBufferF32[vertexOffset++] = uvs.y3;
189+
vertexBufferF32[vertexOffset++] = translateX;
190+
vertexBufferF32[vertexOffset++] = translateY;
191+
vertexBufferF32[vertexOffset++] = scaleX;
192+
vertexBufferF32[vertexOffset++] = scaleY;
193+
vertexBufferF32[vertexOffset++] = rotation;
194+
vertexBufferU32[vertexOffset++] = vertexColor.topRight;
189195

190196
this.elementCount += CONST.SPRITE_INDEX_COUNT;
191197
},

‎v3/src/renderer/webgl/batches/sprite/SpriteBatch32.js‎

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,8 @@ SpriteBatch32.prototype = {
8787
CreateAttribDesc(gl, program, 'a_tex_coord', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 8),
8888
CreateAttribDesc(gl, program, 'a_translate', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 16),
8989
CreateAttribDesc(gl, program, 'a_scale', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 24),
90-
CreateAttribDesc(gl, program, 'a_rotation', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 32)
90+
CreateAttribDesc(gl, program, 'a_rotation', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 32),
91+
CreateAttribDesc(gl, program, 'a_color', 3, 5121, true, CONST.VERTEX_SIZE, 36)
9192
];
9293

9394
var vertexArray = new VertexArray(CreateBuffer(gl, gl.ARRAY_BUFFER, gl.STREAM_DRAW, null, vertexDataBuffer.getByteCapacity()), attribArray);
@@ -136,60 +137,65 @@ SpriteBatch32.prototype = {
136137
return (this.vertexDataBuffer.getByteLength() >= this.vertexDataBuffer.getByteCapacity());
137138
},
138139

139-
add: function (frame, pivotX, pivotY, translateX, translateY, scaleX, scaleY, rotation)
140+
add: function (frame, pivotX, pivotY, translateX, translateY, scaleX, scaleY, rotation, vertexColor)
140141
{
141142
this.manager.setBatch(this, frame.texture.source[0].glTexture);
142143

143144
// The user must check if the buffers are full before flushing
144145
// this is to give freedom of when should the renderer flush. var vertexDataBuffer = this.vertexDataBuffer;
145146
var vertexDataBuffer = this.vertexDataBuffer;
146-
var vertexBuffer = vertexDataBuffer.floatView;
147+
var vertexBufferF32 = vertexDataBuffer.floatView;
148+
var vertexBufferU32 = vertexDataBuffer.uintView;
147149
var vertexOffset = vertexDataBuffer.allocate(CONST.SPRITE_VERTEX_COMPONENT_COUNT * CONST.SPRITE_VERTEX_COUNT);
148150
var uvs = frame.uvs;
149151
var x = -pivotX;
150152
var y = -pivotY;
151153
var width = frame.width;
152154
var height = frame.height;
153155

154-
vertexBuffer[vertexOffset++] = x;
155-
vertexBuffer[vertexOffset++] = y;
156-
vertexBuffer[vertexOffset++] = uvs.x0;
157-
vertexBuffer[vertexOffset++] = uvs.y0;
158-
vertexBuffer[vertexOffset++] = translateX;
159-
vertexBuffer[vertexOffset++] = translateY;
160-
vertexBuffer[vertexOffset++] = scaleX;
161-
vertexBuffer[vertexOffset++] = scaleY;
162-
vertexBuffer[vertexOffset++] = rotation;
163-
164-
vertexBuffer[vertexOffset++] = x;
165-
vertexBuffer[vertexOffset++] = y + height;
166-
vertexBuffer[vertexOffset++] = uvs.x1;
167-
vertexBuffer[vertexOffset++] = uvs.y1;
168-
vertexBuffer[vertexOffset++] = translateX;
169-
vertexBuffer[vertexOffset++] = translateY;
170-
vertexBuffer[vertexOffset++] = scaleX;
171-
vertexBuffer[vertexOffset++] = scaleY;
172-
vertexBuffer[vertexOffset++] = rotation;
156+
vertexBufferF32[vertexOffset++] = x;
157+
vertexBufferF32[vertexOffset++] = y;
158+
vertexBufferF32[vertexOffset++] = uvs.x0;
159+
vertexBufferF32[vertexOffset++] = uvs.y0;
160+
vertexBufferF32[vertexOffset++] = translateX;
161+
vertexBufferF32[vertexOffset++] = translateY;
162+
vertexBufferF32[vertexOffset++] = scaleX;
163+
vertexBufferF32[vertexOffset++] = scaleY;
164+
vertexBufferF32[vertexOffset++] = rotation;
165+
vertexBufferU32[vertexOffset++] = vertexColor.topLeft;
166+
167+
vertexBufferF32[vertexOffset++] = x;
168+
vertexBufferF32[vertexOffset++] = y + height;
169+
vertexBufferF32[vertexOffset++] = uvs.x1;
170+
vertexBufferF32[vertexOffset++] = uvs.y1;
171+
vertexBufferF32[vertexOffset++] = translateX;
172+
vertexBufferF32[vertexOffset++] = translateY;
173+
vertexBufferF32[vertexOffset++] = scaleX;
174+
vertexBufferF32[vertexOffset++] = scaleY;
175+
vertexBufferF32[vertexOffset++] = rotation;
176+
vertexBufferU32[vertexOffset++] = vertexColor.bottomLeft;
173177

174-
vertexBuffer[vertexOffset++] = x + width;
175-
vertexBuffer[vertexOffset++] = y + height;
176-
vertexBuffer[vertexOffset++] = uvs.x2;
177-
vertexBuffer[vertexOffset++] = uvs.y2;
178-
vertexBuffer[vertexOffset++] = translateX;
179-
vertexBuffer[vertexOffset++] = translateY;
180-
vertexBuffer[vertexOffset++] = scaleX;
181-
vertexBuffer[vertexOffset++] = scaleY;
182-
vertexBuffer[vertexOffset++] = rotation;
183-
184-
vertexBuffer[vertexOffset++] = x + width;
185-
vertexBuffer[vertexOffset++] = y;
186-
vertexBuffer[vertexOffset++] = uvs.x3;
187-
vertexBuffer[vertexOffset++] = uvs.y3;
188-
vertexBuffer[vertexOffset++] = translateX;
189-
vertexBuffer[vertexOffset++] = translateY;
190-
vertexBuffer[vertexOffset++] = scaleX;
191-
vertexBuffer[vertexOffset++] = scaleY;
192-
vertexBuffer[vertexOffset++] = rotation;
178+
vertexBufferF32[vertexOffset++] = x + width;
179+
vertexBufferF32[vertexOffset++] = y + height;
180+
vertexBufferF32[vertexOffset++] = uvs.x2;
181+
vertexBufferF32[vertexOffset++] = uvs.y2;
182+
vertexBufferF32[vertexOffset++] = translateX;
183+
vertexBufferF32[vertexOffset++] = translateY;
184+
vertexBufferF32[vertexOffset++] = scaleX;
185+
vertexBufferF32[vertexOffset++] = scaleY;
186+
vertexBufferF32[vertexOffset++] = rotation;
187+
vertexBufferU32[vertexOffset++] = vertexColor.bottomRight;
188+
189+
vertexBufferF32[vertexOffset++] = x + width;
190+
vertexBufferF32[vertexOffset++] = y;
191+
vertexBufferF32[vertexOffset++] = uvs.x3;
192+
vertexBufferF32[vertexOffset++] = uvs.y3;
193+
vertexBufferF32[vertexOffset++] = translateX;
194+
vertexBufferF32[vertexOffset++] = translateY;
195+
vertexBufferF32[vertexOffset++] = scaleX;
196+
vertexBufferF32[vertexOffset++] = scaleY;
197+
vertexBufferF32[vertexOffset++] = rotation;
198+
vertexBufferU32[vertexOffset++] = vertexColor.topRight;
193199

194200
this.elementCount += CONST.SPRITE_INDEX_COUNT;
195201
},

‎v3/src/renderer/webgl/batches/sprite/VertexShader.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ module.exports = [
44
'attribute vec2 a_tex_coord;',
55
'attribute vec2 a_translate;',
66
'attribute vec2 a_scale;',
7+
'attribute vec3 a_color;',
78
'attribute float a_rotation;',
89
'varying vec2 v_tex_coord;',
10+
'varying vec3 v_color;',
911
'void main () {',
1012
' float t_cos = cos(a_rotation);',
1113
' float t_sin = sin(a_rotation);',
@@ -14,5 +16,6 @@ module.exports = [
1416
' t_position += a_translate;',
1517
' gl_Position = u_view_matrix * vec4(t_position, 1.0, 1.0);',
1618
' v_tex_coord = a_tex_coord;',
19+
' v_color = a_color;',
1720
'}'
1821
].join('\n');

‎v3/src/renderer/webgl/batches/sprite/const.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ var VertexShader = require('./VertexShader');
33

44
var CONST = {
55

6-
// VERTEX_SIZE = (sizeof(vec2) * 4) + (sizeof(float))
7-
VERTEX_SIZE: 36,
6+
// VERTEX_SIZE = (sizeof(vec2) * 4) + (sizeof(float) + sizeof(uint32))
7+
VERTEX_SIZE: 40,
88
INDEX_SIZE: 2,
99
SPRITE_VERTEX_COUNT: 4,
1010
SPRITE_INDEX_COUNT: 6,
1111

1212
// How many 32-bit components does the vertex have.
13-
SPRITE_VERTEX_COMPONENT_COUNT: 9,
13+
SPRITE_VERTEX_COMPONENT_COUNT: 10,
1414

1515
// Can't be bigger since index are 16-bit
1616
MAX_SPRITES: 10000,

‎v3/src/renderer/webgl/utils/vao/Attribute.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
var Attribute = function (location, size, type, normalize, stride, offset)
1+
var Attribute = function (location, size, type, normalized, stride, offset)
22
{
33
this.location = location;
44
this.size = size;
55
this.type = type;
6-
this.normalize = normalize;
6+
this.normalized = normalized;
77
this.stride = stride;
88
this.offset = offset;
99
};

0 commit comments

Comments
 (0)