Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BitmapFont Text Rendering #375

Open
itsjamie opened this issue Mar 27, 2022 · 1 comment
Open

BitmapFont Text Rendering #375

itsjamie opened this issue Mar 27, 2022 · 1 comment

Comments

@itsjamie
Copy link
Contributor

itsjamie commented Mar 27, 2022

I'm opening an issue to discuss implementation in Lightning for Text Rendering that is based on Bitmap Fonts rather than the usage of Canvas2D and the browser-based text rendering.

Positives of current implementation as I see it:

  • Broad support of text styling properties
    • fontSize
    • lineHeight
    • letterSpacing
    • textAlign
    • textColor
    • verticalAlignment
    • highlighting
    • maxLines (automatic delimitation)
    • textOverflow
    • word wrapping
    • shadow
    • text indentation
  • Easy path for getting custom font support, document.fonts
  • Browser support for text rendering
    • kerning
    • right-to-left (direction) - not exposed

The negatives:

  • High VRAM usage
    • every text string is stored as a texture for GPU usage
    • leads to more GC loops
  • A fair amount of CPU-bound work to set up the text draws on canvas, measuring text.

I'm working on benchmarking an implementation that uses https://github.com/Chlumsky/msdf-atlas-gen to generate an MSDF text atlas. It outputs font information such as kerning pairs and line-height already all in a GL normalized coordinate system.

I was planning that if the implementation had any positive impact on our own project I would raise a PR that added a BitmapFontMSDF shader to Lightning Core. However, it is unlikely that it would support every text styling property above. Which is what I wanted to open for discussion.

My intention was the shader would be written to support the following attributes:

  • fontSize
  • textColor
  • word wrap width
  • font (atlas image + font JSON)

The bonus I've been made aware of is that there are some browsers where the ability to load custom fonts through the document.fonts API is not available, which may offer a path on those browsers.

The benchmark we are doing internally will be focused on testing lines of text that increase by character pairs. So I would include some of the resulting data on the PR to help aid any supporting documentation. My expectation is that there will not be a large reduction in CPU work, but hopefully GCs and memory pressure issues will be reduced.


Is this something that the Lightning team would be interested in accepting into the core?

@g-zachar
Copy link
Contributor

Hi @itsjamie

this is indeed something we were considering for some time now but haven't come up with any POC yet.
The main reason was the current implementation of text rendering proved to be good enough.

The points you've raised are valid:

  • under some circumstances, text textures might significantly impact VRAM usage, but in general, it's caused by a large number of image textures (especially high-resolution ones),
  • we haven't noticed the negative impact of rendering text texture on the CPU (as it's a one-time operation), but in some cases, it might indeed contribute to CPU spikes.

The main advantage of the MSDF approach is that the text retains its quality after scaling up/down and this is our primary point of interest. We're definitely interested in any contributions, especially in the aforementioned areas.

Best regards

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants