Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-12-17 16:43:30 +00:00
Code Issues Projects Releases Packages Wiki Activity

Static BitmapText rendering. Added rect culling to TextureTintPipeline

Browse source
This commit is contained in:
Felipe Alfonso 2018-01-23 20:36:49 -03:00
parent dd9cef61cf
commit 502ce8ddea
4 changed files with 284 additions and 231 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

173
src/gameobjects/bitmaptext/static/BitmapTextWebGLRenderer.js
View file

@ -12,178 +12,7 @@ var BitmapTextWebGLRenderer = function (renderer, gameObject, interpolationPerce
return;
}
var textureFrame = gameObject.frame;
var cameraScrollX = camera.scrollX * gameObject.scrollFactorX;
var cameraScrollY = camera.scrollY * gameObject.scrollFactorY;
var chars = gameObject.fontData.chars;
var lineHeight = gameObject.fontData.lineHeight;
var spriteBatch = renderer.spriteBatch;
var alpha = gameObject.alpha;
var tintTL = gameObject._tintTL;
var tintTR = gameObject._tintTR;
var tintBL = gameObject._tintBL;
var tintBR = gameObject._tintBR;
var vertexDataBuffer = spriteBatch.vertexDataBuffer;
var vertexBuffer = vertexDataBuffer.floatView;
var vertexBufferU32 = vertexDataBuffer.uintView;
var vertexOffset = 0;
var srcX = gameObject.x;
var srcY = gameObject.y;
var textureData = gameObject.texture.source[textureFrame.sourceIndex];
var textureX = textureFrame.cutX;
var textureY = textureFrame.cutY;
var textureWidth = textureData.width;
var textureHeight = textureData.height;
var texture = textureData.glTexture;
var xAdvance = 0;
var yAdvance = 0;
var indexCount = 0;
var charCode = 0;
var glyph = null;
var glyphX = 0;
var glyphY = 0;
var glyphW = 0;
var glyphH = 0;
var x = 0;
var y = 0;
var xw = 0;
var yh = 0;
var umin = 0;
var umax = 0;
var vmin = 0;
var vmax = 0;
var lastGlyph = null;
var lastCharCode = 0;
var tempMatrixMatrix = tempMatrix.matrix;
var cameraMatrix = camera.matrix.matrix;
var mva, mvb, mvc, mvd, mve, mvf, tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3;
var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf;
var scale = (gameObject.fontSize / gameObject.fontData.size);
var renderTarget = gameObject.renderTarget;
tempMatrix.applyITRS(
(srcX - cameraScrollX) + textureFrame.x, (srcY - cameraScrollY) + textureFrame.y,
-gameObject.rotation,
gameObject.scaleX, gameObject.scaleY
);
sra = tempMatrixMatrix[0];
srb = tempMatrixMatrix[1];
src = tempMatrixMatrix[2];
srd = tempMatrixMatrix[3];
sre = tempMatrixMatrix[4];
srf = tempMatrixMatrix[5];
cma = cameraMatrix[0];
cmb = cameraMatrix[1];
cmc = cameraMatrix[2];
cmd = cameraMatrix[3];
cme = cameraMatrix[4];
cmf = cameraMatrix[5];
mva = sra * cma + srb * cmc;
mvb = sra * cmb + srb * cmd;
mvc = src * cma + srd * cmc;
mvd = src * cmb + srd * cmd;
mve = sre * cma + srf * cmc + cme;
mvf = sre * cmb + srf * cmd + cmf;
for (var index = 0; index < textLength; ++index)
{
charCode = text.charCodeAt(index);
if (charCode === 10)
{
xAdvance = 0;
indexCount = 0;
yAdvance += lineHeight;
lastGlyph = null;
continue;
}
glyph = chars[charCode];
if (!glyph)
{
continue;
}
glyphX = textureX + glyph.x;
glyphY = textureY + glyph.y;
glyphW = glyph.width;
glyphH = glyph.height;
x = (indexCount + glyph.xOffset + xAdvance) * scale;
y = (glyph.yOffset + yAdvance) * scale;
if (lastGlyph !== null)
{
var kerningOffset = glyph.kerning[lastCharCode];
x += (kerningOffset !== undefined) ? kerningOffset : 0;
}
xAdvance += glyph.xAdvance;
indexCount += 1;
lastGlyph = glyph;
lastCharCode = charCode;
// Nothing to render or a space? Then skip to the next glyph
if (glyphW === 0 || glyphH === 0 || charCode === 32)
{
continue;
}
xw = x + glyphW * scale;
yh = y + glyphH * scale;
tx0 = x * mva + y * mvc + mve;
ty0 = x * mvb + y * mvd + mvf;
tx1 = x * mva + yh * mvc + mve;
ty1 = x * mvb + yh * mvd + mvf;
tx2 = xw * mva + yh * mvc + mve;
ty2 = xw * mvb + yh * mvd + mvf;
tx3 = xw * mva + y * mvc + mve;
ty3 = xw * mvb + y * mvd + mvf;
umin = glyphX / textureWidth;
umax = (glyphX + glyphW) / textureWidth;
vmin = glyphY / textureHeight;
vmax = (glyphY + glyphH) / textureHeight;
if (spriteBatch.elementCount >= spriteBatch.maxParticles)
{
spriteBatch.flush();
}
renderer.setRenderer(spriteBatch, texture, renderTarget);
vertexOffset = vertexDataBuffer.allocate(24);
spriteBatch.elementCount += 6;
vertexBuffer[vertexOffset++] = tx0;
vertexBuffer[vertexOffset++] = ty0;
vertexBuffer[vertexOffset++] = umin;
vertexBuffer[vertexOffset++] = vmin;
vertexBufferU32[vertexOffset++] = tintTL;
vertexBuffer[vertexOffset++] = alpha;
vertexBuffer[vertexOffset++] = tx1;
vertexBuffer[vertexOffset++] = ty1;
vertexBuffer[vertexOffset++] = umin;
vertexBuffer[vertexOffset++] = vmax;
vertexBufferU32[vertexOffset++] = tintBL;
vertexBuffer[vertexOffset++] = alpha;
vertexBuffer[vertexOffset++] = tx2;
vertexBuffer[vertexOffset++] = ty2;
vertexBuffer[vertexOffset++] = umax;
vertexBuffer[vertexOffset++] = vmax;
vertexBufferU32[vertexOffset++] = tintTR;
vertexBuffer[vertexOffset++] = alpha;
vertexBuffer[vertexOffset++] = tx3;
vertexBuffer[vertexOffset++] = ty3;
vertexBuffer[vertexOffset++] = umax;
vertexBuffer[vertexOffset++] = vmin;
vertexBufferU32[vertexOffset++] = tintBR;
vertexBuffer[vertexOffset++] = alpha;
}
renderer.pipelines.TextureTintPipeline.batchBitmapText(this, camera);
};
module.exports = BitmapTextWebGLRenderer;

6
src/gameobjects/index.js
View file

@ -11,7 +11,7 @@ var GameObjects = {
Components: require('./components'),
//BitmapText: require('./bitmaptext/static/BitmapText'),
BitmapText: require('./bitmaptext/static/BitmapText'),
Blitter: require('./blitter/Blitter'),
//Container: require('./container/Container'),
//DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapText'),
@ -44,7 +44,7 @@ var GameObjects = {
//PathFollower: require('./pathfollower/PathFollowerFactory'),
Sprite: require('./sprite/SpriteFactory'),
//Sprite3D: require('./sprite3d/Sprite3DFactory'),
//StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'),
StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'),
//Text: require('./text/static/TextFactory'),
//Tilemap: require('./tilemap/TilemapFactory'),
//TileSprite: require('./tilesprite/TileSpriteFactory'),
@ -61,7 +61,7 @@ var GameObjects = {
//Particles: require('./particles/ParticleManagerCreator'),
Sprite: require('./sprite/SpriteCreator'),
//Sprite3D: require('./sprite3d/Sprite3DCreator'),
//StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'),
StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'),
//Text: require('./text/static/TextCreator'),
//Tilemap: require('./tilemap/TilemapCreator'),
//TileSprite: require('./tilesprite/TileSpriteCreator'),

63
src/renderer/webgl/WebGLRenderer.js
View file

@ -204,6 +204,40 @@ var WebGLRenderer = new Class({
return this;
},
beginScissor: function (x, y, width, height)
{
var gl = this.gl;
var scissorState = this.currentScissorState;
if (!x !== 0 || y !== 0 || width !== gl.canvas.width || height !== gl.canvas.height)
{
return;
}
if (!scissorState.enabled)
{
gl.enable(gl.SCISSOR_TEST);
scissorState.enabled = true;
}
scissorState.x = x;
scissorState.y = gl.drawingBufferHeight - y - height;
scissorState.width = width;
scissorState.height = height;
gl.scissor(scissorState.x, scissorState.y, scissorState.width, scissorState.height);
},
endScissor: function ()
{
var gl = this.gl;
var scissorState = this.currentScissorState;
if (scissorState.enabled)
{
gl.disable(gl.SCISSOR_TEST);
}
},
setPipeline: function (pipelineInstance, overrideProgram)
{
if (this.currentPipeline !== pipelineInstance)
@ -511,21 +545,8 @@ var WebGLRenderer = new Class({
var gl = this.gl;
var list = children.list;
var childCount = list.length;
var scissorEnabled = (camera.x !== 0 || camera.y !== 0 || camera.width !== gl.canvas.width || camera.height !== gl.canvas.height);
var pipeline = null;
this.currentScissorState.enabled = scissorEnabled;
if (scissorEnabled)
{
gl.enable(gl.SCISSOR_TEST);
this.currentScissorState.x = camera.x;
this.currentScissorState.y = gl.drawingBufferHeight - camera.y - camera.height;
this.currentScissorState.width = camera.width;
this.currentScissorState.height = camera.height;
gl.scissor(this.currentScissorState.x, this.currentScissorState.y, this.currentScissorState.width, this.currentScissorState.height);
}
this.beginScissor(camera.x, camera.y, camera.width, camera.height);
for (var index = 0; index < childCount; ++index)
{
@ -552,20 +573,10 @@ var WebGLRenderer = new Class({
{
child.mask.postRenderWebGL(this, child);
}
pipeline = this.currentPipeline;
}
if (pipeline && pipeline.vertexCount > 0)
{
pipeline.flush();
}
if (scissorEnabled)
{
gl.disable(gl.SCISSOR_TEST);
}
this.flush();
this.endScissor();
},
postRender: function ()

273
src/renderer/webgl/pipelines/TextureTintPipeline.js
View file

@ -102,6 +102,10 @@ var TextureTintPipeline = new Class({
var list = blitter.getRenderList();
var length = list.length;
var cameraMatrix = camera.matrix.matrix;
var cameraWidth = camera.width + 50;
var cameraHeight = camera.height + 50;
var cameraX = -50;
var cameraY = -50;
var a = cameraMatrix[0];
var b = cameraMatrix[1];
var c = cameraMatrix[2];
@ -119,6 +123,7 @@ var TextureTintPipeline = new Class({
{
var batchSize = Math.min(length, 2000);
var vertexOffset = 0;
var vertexCount = 0;
for (var index = 0; index < batchSize; ++index)
{
@ -135,60 +140,65 @@ var TextureTintPipeline = new Class({
var y = blitterY + bob.y + frame.y - cameraScrollY + (height * ((flipY) ? 1.0 : 0.0));
var xw = x + width;
var yh = y + height;
var tx = x * a + y * c + e;
var ty = x * b + y * d + f;
var txw = xw * a + yh * c + e;
var tyh = xw * b + yh * d + f;
var tx0 = x * a + y * c + e;
var ty0 = x * b + y * d + f;
var tx1 = xw * a + yh * c + e;
var ty1 = xw * b + yh * d + f;
if ((tx0 < cameraX || tx0 > cameraWidth || ty0 < cameraX || ty0 > cameraHeight) &&
(tx1 < cameraY || tx1 > cameraWidth || ty1 < cameraY || ty1 > cameraHeight))
{
continue;
}
// Bind Texture if texture wasn't bound.
// This needs to be here because of multiple
// texture atlas.
renderer.setTexture2D(frame.texture.source[frame.sourceIndex].glTexture, 0);
vertexViewF32[vertexOffset + 0] = tx;
vertexViewF32[vertexOffset + 1] = ty;
vertexViewF32[vertexOffset + 0] = tx0;
vertexViewF32[vertexOffset + 1] = ty0;
vertexViewF32[vertexOffset + 2] = uvs.x0;
vertexViewF32[vertexOffset + 3] = uvs.y0;
vertexViewU32[vertexOffset + 4] = tint;
vertexViewF32[vertexOffset + 5] = tx;
vertexViewF32[vertexOffset + 6] = tyh;
vertexViewF32[vertexOffset + 5] = tx0;
vertexViewF32[vertexOffset + 6] = ty1;
vertexViewF32[vertexOffset + 7] = uvs.x1;
vertexViewF32[vertexOffset + 8] = uvs.y1;
vertexViewU32[vertexOffset + 9] = tint;
vertexViewF32[vertexOffset + 10] = txw;
vertexViewF32[vertexOffset + 11] = tyh;
vertexViewF32[vertexOffset + 10] = tx1;
vertexViewF32[vertexOffset + 11] = ty1;
vertexViewF32[vertexOffset + 12] = uvs.x2;
vertexViewF32[vertexOffset + 13] = uvs.y2;
vertexViewU32[vertexOffset + 14] = tint;
vertexViewF32[vertexOffset + 15] = tx;
vertexViewF32[vertexOffset + 16] = ty;
vertexViewF32[vertexOffset + 15] = tx0;
vertexViewF32[vertexOffset + 16] = ty0;
vertexViewF32[vertexOffset + 17] = uvs.x0;
vertexViewF32[vertexOffset + 18] = uvs.y0;
vertexViewU32[vertexOffset + 19] = tint;
vertexViewF32[vertexOffset + 20] = txw;
vertexViewF32[vertexOffset + 21] = tyh;
vertexViewF32[vertexOffset + 20] = tx1;
vertexViewF32[vertexOffset + 21] = ty1;
vertexViewF32[vertexOffset + 22] = uvs.x2;
vertexViewF32[vertexOffset + 23] = uvs.y2;
vertexViewU32[vertexOffset + 24] = tint;
vertexViewF32[vertexOffset + 25] = txw;
vertexViewF32[vertexOffset + 26] = ty;
vertexViewF32[vertexOffset + 25] = tx1;
vertexViewF32[vertexOffset + 26] = ty0;
vertexViewF32[vertexOffset + 27] = uvs.x3;
vertexViewF32[vertexOffset + 28] = uvs.y3;
vertexViewU32[vertexOffset + 29] = tint;
vertexOffset += 30;
vertexCount += 6;
}
batchOffset += batchSize;
length -= batchSize;
this.vertexCount = (batchSize * 6);
this.flush();
if (vertexCount <= this.vertexCapacity)
{
this.vertexCount = vertexCount;
this.flush();
}
}
},
@ -206,12 +216,10 @@ var TextureTintPipeline = new Class({
var vertexViewU32 = this.vertexViewU32;
var renderer = this.renderer;
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 cameraWidth = camera.width + 50;
var cameraHeight = camera.height + 50;
var cameraX = -50;
var cameraY = -50;
var frame = sprite.frame;
var texture = frame.texture.source[frame.sourceIndex].glTexture;
var forceFlipY = (texture.isRenderTexture ? true : false);
@ -271,6 +279,14 @@ var TextureTintPipeline = new Class({
var tint3 = getTint(tintBR, alphaBR);
var vertexOffset = 0;
if ((tx0 < cameraX || tx0 > cameraWidth || ty0 < cameraY || ty0 > cameraHeight) &&
(tx1 < cameraX || tx1 > cameraWidth || ty1 < cameraY || ty1 > cameraHeight) &&
(tx2 < cameraX || tx2 > cameraWidth || ty2 < cameraY || ty2 > cameraHeight) &&
(tx3 < cameraX || tx3 > cameraWidth || ty3 < cameraY || ty3 > cameraHeight))
{
return;
}
renderer.setTexture2D(texture, 0);
vertexOffset = this.vertexCount * this.vertexComponentCount;
@ -364,7 +380,7 @@ var TextureTintPipeline = new Class({
var mve = sre * cma + srf * cmc + cme;
var mvf = sre * cmb + srf * cmd + cmf;
var vertexOffset = 0;
renderer.setTexture2D(texture, 0);
vertexOffset = this.vertexCount * this.vertexComponentCount;
@ -386,6 +402,203 @@ var TextureTintPipeline = new Class({
}
this.vertexCount += vertexCount;
},
batchBitmapText: function (bitmapText, camera)
{
this.renderer.setPipeline(this);
if (this.vertexCount + 6 > this.vertexCapacity)
{
this.flush();
}
var text = bitmapText.text;
var textLength = text.length;
var getTint = Utils.getTintAppendFloatAlpha;
var vertexViewF32 = this.vertexViewF32;
var vertexViewU32 = this.vertexViewU32;
var renderer = this.renderer;
var cameraMatrix = camera.matrix.matrix;
var cameraWidth = camera.width + 50;
var cameraHeight = camera.height + 50;
var cameraX = -50;
var cameraY = -50;
var frame = bitmapText.frame;
var textureSource = bitmapText.texture.source[frame.sourceIndex];
var cameraScrollX = camera.scrollX * bitmapText.scrollFactorX;
var cameraScrollY = camera.scrollY * bitmapText.scrollFactorY;
var fontData = bitmapText.fontData;
var lineHeight = fontData.lineHeight;
var scale = (bitmapText.fontSize / fontData.size);
var chars = fontData.chars;
var alpha = bitmapText.alpha;
var tint0 = getTint(bitmapText._tintTL, alpha);
var tint1 = getTint(bitmapText._tintTR, alpha);
var tint2 = getTint(bitmapText._tintBL, alpha);
var tint3 = getTint(bitmapText._tintBR, alpha);
var srcX = bitmapText.x;
var srcY = bitmapText.y;
var textureX = frame.cutX;
var textureY = frame.cutY;
var textureWidth = textureSource.width;
var textureHeight = textureSource.height;
var texture = textureSource.glTexture;
var xAdvance = 0;
var yAdvance = 0;
var indexCount = 0;
var charCode = 0;
var glyph = null;
var glyphX = 0;
var glyphY = 0;
var glyphW = 0;
var glyphH = 0;
var x = 0;
var y = 0;
var xw = 0;
var yh = 0;
var umin = 0;
var umax = 0;
var vmin = 0;
var vmax = 0;
var lastGlyph = null;
var lastCharCode = 0;
var translateX = (srcX - cameraScrollX) + frame.x;
var translateY = (srcY - cameraScrollY) + frame.y;
var rotation = -bitmapText.rotation;
var scaleX = bitmapText.scaleX;
var scaleY = bitmapText.scaleY;
var sr = Math.sin(rotation);
var cr = Math.cos(rotation);
var sra = cr * scaleX;
var srb = -sr * scaleX;
var src = sr * scaleY;
var srd = cr * scaleY;
var sre = translateX;
var srf = translateY;
var cma = cameraMatrix[0];
var cmb = cameraMatrix[1];
var cmc = cameraMatrix[2];
var cmd = cameraMatrix[3];
var cme = cameraMatrix[4];
var cmf = cameraMatrix[5];
var mva = sra * cma + srb * cmc;
var mvb = sra * cmb + srb * cmd;
var mvc = src * cma + srd * cmc;
var mvd = src * cmb + srd * cmd;
var mve = sre * cma + srf * cmc + cme;
var mvf = sre * cmb + srf * cmd + cmf;
var vertexOffset = 0;
renderer.setTexture2D(texture, 0);
for (var index = 0; index < textLength; ++index)
{
charCode = text.charCodeAt(index);
if (charCode === 10)
{
xAdvance = 0;
indexCount = 0;
yAdvance += lineHeight;
lastGlyph = null;
continue;
}
glyph = chars[charCode];
if (!glyph)
{
continue;
}
glyphX = textureX + glyph.x;
glyphY = textureY + glyph.y;
glyphW = glyph.width;
glyphH = glyph.height;
x = (indexCount + glyph.xOffset + xAdvance) * scale;
y = (glyph.yOffset + yAdvance) * scale;
if (lastGlyph !== null)
{
var kerningOffset = glyph.kerning[lastCharCode];
x += (kerningOffset !== undefined) ? kerningOffset : 0;
}
xAdvance += glyph.xAdvance;
indexCount += 1;
lastGlyph = glyph;
lastCharCode = charCode;
// Nothing to render or a space? Then skip to the next glyph
if (glyphW === 0 || glyphH === 0 || charCode === 32)
{
continue;
}
xw = x + glyphW * scale;
yh = y + glyphH * scale;
tx0 = x * mva + y * mvc + mve;
ty0 = x * mvb + y * mvd + mvf;
tx1 = x * mva + yh * mvc + mve;
ty1 = x * mvb + yh * mvd + mvf;
tx2 = xw * mva + yh * mvc + mve;
ty2 = xw * mvb + yh * mvd + mvf;
tx3 = xw * mva + y * mvc + mve;
ty3 = xw * mvb + y * mvd + mvf;
umin = glyphX / textureWidth;
umax = (glyphX + glyphW) / textureWidth;
vmin = glyphY / textureHeight;
vmax = (glyphY + glyphH) / textureHeight;
if ((tx0 < cameraX || tx0 > cameraWidth || ty0 < cameraY || ty0 > cameraHeight) &&
(tx1 < cameraX || tx1 > cameraWidth || ty1 < cameraY || ty1 > cameraHeight) &&
(tx2 < cameraX || tx2 > cameraWidth || ty2 < cameraY || ty2 > cameraHeight) &&
(tx3 < cameraX || tx3 > cameraWidth || ty3 < cameraY || ty3 > cameraHeight))
{
continue;
}
if (this.vertexCount + 6 > this.vertexCapacity)
{
this.flush();
}
vertexOffset = this.vertexCount * this.vertexComponentCount;
vertexViewF32[vertexOffset + 0] = tx0;
vertexViewF32[vertexOffset + 1] = ty0;
vertexViewF32[vertexOffset + 2] = umin;
vertexViewF32[vertexOffset + 3] = vmin;
vertexViewU32[vertexOffset + 4] = tint0;
vertexViewF32[vertexOffset + 5] = tx1;
vertexViewF32[vertexOffset + 6] = ty1;
vertexViewF32[vertexOffset + 7] = umin;
vertexViewF32[vertexOffset + 8] = vmax;
vertexViewU32[vertexOffset + 9] = tint1;
vertexViewF32[vertexOffset + 10] = tx2;
vertexViewF32[vertexOffset + 11] = ty2;
vertexViewF32[vertexOffset + 12] = umax;
vertexViewF32[vertexOffset + 13] = vmax;
vertexViewU32[vertexOffset + 14] = tint2;
vertexViewF32[vertexOffset + 15] = tx0;
vertexViewF32[vertexOffset + 16] = ty0;
vertexViewF32[vertexOffset + 17] = umin;
vertexViewF32[vertexOffset + 18] = vmin;
vertexViewU32[vertexOffset + 19] = tint0;
vertexViewF32[vertexOffset + 20] = tx2;
vertexViewF32[vertexOffset + 21] = ty2;
vertexViewF32[vertexOffset + 22] = umax;
vertexViewF32[vertexOffset + 23] = vmax;
vertexViewU32[vertexOffset + 24] = tint2;
vertexViewF32[vertexOffset + 25] = tx3;
vertexViewF32[vertexOffset + 26] = ty3;
vertexViewF32[vertexOffset + 27] = umax;
vertexViewF32[vertexOffset + 28] = vmin;
vertexViewU32[vertexOffset + 29] = tint3;
this.vertexCount += 6;
}
}
});