BitmapText optimisation #6641

GoodBoyDigital · 2020-05-24T11:38:31Z

Description of change

As BitmapFont has now become much more accessible to our users thanks to recent efforts from the team, figured we could do with doing a bit of an optimisation pass for how bitmap fonts are rendering!

Main thing is that instead of rendering each letter as a sprite, we now render them as a mesh. This has a few benefits straight out of the box!

lower memory footprint as we don't needs loads of sprites anymore, just a mesh or two
faster creation updateText
- pooling objects in this function.
- including the meshes.
- mesh buffers only reallocated if size grows.
faster runtime render
- as the text is either batched automatically if small.
- OR if its massive it is rendered in a single draw call (super fast, as no per character update is required)
- tinting no longer required an updateText call as we leverage the mesh tint functionality.
Ensure support for multipage fonts still works (made things a bit trickier :P)
Added a couple of interfaces to some internal BitmapText bits.
No surface API changes, all under the hood stuff.
Character limit is about 11,000 - which is a lot of text :)

Pre-Merge Checklist

Documentation is changed or added
Lint process passed (npm run lint)
Tests passed (npm run test)

ShukantPal · 2020-05-24T12:55:54Z

@GoodBoyDigital I see Matt's commits in this PR, maybe you need to rebase it?

ShukantPal

This sounds nice - I have a few suggestions related to readability & see a potential problem with how the data flows around.

packages/text-bitmap/src/BitmapText.ts

packages/text-bitmap/src/BitmapFont.ts

- optimise bitmapfont renderer - use mesh instead of sprites - optimised tinting - smart batching - less memory overhead - support for multipage fonts - pooling data objects - expose `baseTexture` uid as readonly

bigtimebuddy · 2020-05-24T14:00:14Z

This is awesome @GoodBoyDigital! Super excited about our new and improved BitmapText.

Some tests might need to be looked at, these are failing:

PIXI.BitmapText
should render text even if there are unsupported characters:
PIXI.BitmapText
should support font without page reference:

packages/text-bitmap/src/BitmapText.ts

themoonrat · 2020-05-24T14:15:14Z

Question: How does this effect the Canvas renderer?

Co-authored-by: Matt Karl <matt@mattkarl.com>

GoodBoyDigital · 2020-05-24T15:14:04Z

Hey @SukantPal , thanks for the feedback man! Push some changes. Let me know if its all cool 👍

GoodBoyDigital · 2020-05-24T15:14:23Z

@bigtimebuddy , will look at those tests now..

GoodBoyDigital · 2020-05-24T15:25:53Z

Question: How does this effect the Canvas renderer?

Good question. i will test, it should work but I guess would technically be slower perf than the old method. If it turns out to be a deal breaker and we should keep the previous method around and move it into Canvas Renderer.

codecov-commenter · 2020-05-24T15:49:54Z

Codecov Report

Merging #6641 into dev will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #6641   +/-   ##
=======================================
  Coverage   82.59%   82.59%           
=======================================
  Files          35       35           
  Lines        1724     1724           
=======================================
  Hits         1424     1424           
  Misses        300      300

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 311d7e1...7221292. Read the comment docs.

ShukantPal · 2020-05-24T17:22:31Z

packages/text-bitmap/src/BitmapText.ts

+            charRenderData.position.x = pos.x + charData.xOffset + (this._letterSpacing / 2);
+            charRenderData.position.y = pos.y + charData.yOffset;
+
+            chars.push(charRenderData);


What do ya think about optimizing this one as well?

Instead of pushing each character to the (initially) zero-length array, do something like:

// textLength is a _good_ heuristic of the actual no. of chars const chars: CharRenderData = new Array(textLength); let charsRendered = 0; for (let i = 0; i < textLength; i++) { if (<skipCondition>) { continue; } chars[charsRendered] = charREnderData; ++charsRenderered; } // Make sure undefined slots aren't at the end of the array, if needed chars.length = charsRendered;

@GoodBoyDigital I'm leaving this one on your will. It would be cool to do this optimization but not necessarily required.

packages/text-bitmap/test/BitmapText.js

bigtimebuddy · 2020-05-24T18:25:20Z

Seems to still render fine on canvas:
https://pixijs.download/feature/turbo-bitmap-fonts/pixi-legacy.min.js
https://jsfiddle.net/bigtimebuddy/hzrx6p47/

bigtimebuddy

Overall, I'm happy with this @GoodBoyDigital. I think it represents a big step forward and with BitmapFont will be a huge win for 5.3.0. I'm sure you and @SukantPal can sort out any stylistic issues, otherwise g2g!

- fixed batching issue - added unit test for adding / removing children - fixed issue found when making unit test :) - don't call updateText on creation

GoodBoyDigital · 2020-05-25T21:02:44Z

Ok, good to go now! Final updates and new unit test

fixed batching issue
added unit test for adding / removing children
fixed issue found when making unit test :)
don't call updateText on creation

ShukantPal · 2020-05-26T00:28:07Z

packages/text-bitmap/src/BitmapText.ts

+            charRenderData.position.x = pos.x + charData.xOffset + (this._letterSpacing / 2);
+            charRenderData.position.y = pos.y + charData.yOffset;
+
+            chars.push(charRenderData);


GoodBoyDigital added the 👀 Needs Review PR needs to be reviewed by someone on the core team. label May 24, 2020

GoodBoyDigital requested review from ivanpopelyshev, bigtimebuddy, themoonrat and ShukantPal May 24, 2020 11:38

ShukantPal requested changes May 24, 2020

View reviewed changes

ShukantPal reviewed May 24, 2020

View reviewed changes

packages/text-bitmap/src/BitmapFont.ts Outdated Show resolved Hide resolved

BitmapText render optimisation

df38932

- optimise bitmapfont renderer - use mesh instead of sprites - optimised tinting - smart batching - less memory overhead - support for multipage fonts - pooling data objects - expose `baseTexture` uid as readonly

bigtimebuddy force-pushed the feature/turbo-bitmap-fonts branch from 7dea79a to df38932 Compare May 24, 2020 13:53

bigtimebuddy reviewed May 24, 2020

View reviewed changes

packages/text-bitmap/src/BitmapText.ts Show resolved Hide resolved

bigtimebuddy reviewed May 24, 2020

View reviewed changes

packages/text-bitmap/src/BitmapText.ts Outdated Show resolved Hide resolved

bigtimebuddy reviewed May 24, 2020

View reviewed changes

packages/text-bitmap/src/BitmapText.ts Outdated Show resolved Hide resolved

GoodBoyDigital and others added 2 commits May 24, 2020 15:29

BitmapText.ts - remove extra line

3c11c7d

Co-authored-by: Matt Karl <matt@mattkarl.com>

address feedback

ed488b4

GoodBoyDigital requested a review from ShukantPal May 24, 2020 15:14

fix tint issue

07772f3

fix unit tests

48dfb43

GoodBoyDigital requested a review from bigtimebuddy May 24, 2020 15:54

ShukantPal requested changes May 24, 2020

View reviewed changes

Updated documentation

ad708be

bigtimebuddy approved these changes May 24, 2020

View reviewed changes

finaly tweaks and tests

7921d4e

- fixed batching issue - added unit test for adding / removing children - fixed issue found when making unit test :) - don't call updateText on creation

GoodBoyDigital requested a review from ShukantPal May 25, 2020 22:25

ShukantPal approved these changes May 26, 2020

View reviewed changes

bigtimebuddy added ✅ Ready To Merge Helpful when issues are in the queue waiting to get merged. This means the PR is completed and has t and removed 👀 Needs Review PR needs to be reviewed by someone on the core team. labels May 26, 2020

Merge branch 'dev' into feature/turbo-bitmap-fonts

7221292

bigtimebuddy merged commit cfc05d1 into dev May 28, 2020

bigtimebuddy deleted the feature/turbo-bitmap-fonts branch May 28, 2020 02:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

BitmapText optimisation #6641

BitmapText optimisation #6641

GoodBoyDigital commented May 24, 2020

ShukantPal commented May 24, 2020

ShukantPal left a comment

bigtimebuddy commented May 24, 2020

themoonrat commented May 24, 2020

GoodBoyDigital commented May 24, 2020

GoodBoyDigital commented May 24, 2020

GoodBoyDigital commented May 24, 2020

codecov-commenter commented May 24, 2020 •

edited

ShukantPal May 24, 2020

ShukantPal May 25, 2020

ShukantPal May 26, 2020

bigtimebuddy commented May 24, 2020

bigtimebuddy left a comment •

edited

GoodBoyDigital commented May 25, 2020

ShukantPal May 26, 2020

BitmapText optimisation #6641

BitmapText optimisation #6641

Conversation

GoodBoyDigital commented May 24, 2020

Description of change

Pre-Merge Checklist

ShukantPal commented May 24, 2020

ShukantPal left a comment

Choose a reason for hiding this comment

bigtimebuddy commented May 24, 2020

themoonrat commented May 24, 2020

GoodBoyDigital commented May 24, 2020

GoodBoyDigital commented May 24, 2020

GoodBoyDigital commented May 24, 2020

codecov-commenter commented May 24, 2020 • edited

Codecov Report

ShukantPal May 24, 2020

Choose a reason for hiding this comment

ShukantPal May 25, 2020

Choose a reason for hiding this comment

ShukantPal May 26, 2020

Choose a reason for hiding this comment

bigtimebuddy commented May 24, 2020

bigtimebuddy left a comment • edited

Choose a reason for hiding this comment

GoodBoyDigital commented May 25, 2020

ShukantPal May 26, 2020

Choose a reason for hiding this comment

codecov-commenter commented May 24, 2020 •

edited

bigtimebuddy left a comment •

edited