playcanvas / playcanvas/engine

SDF fonts: possible solution for downscaling

Open
#830 25 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

area: ui
Dominant language
JavaScript
Stars
16.8k
Forks
2k
Avg merge
4h 32m
Merged PRs (30d)
222

Description

Hi guys,

I've been recently playing around with rasterizing the fonts with msdf textures in playcanvas. SDF is well-known for its ability to handle upscaling well, but performs poorly when it comes to downscaled shapes. There are solutions using supersampling of various sorts, but they don't seem to be quite universal and require a lot of adjustments.

An idea: why don't we use alpha channel to store original glyph's pixel opacity and fall back to it when font size is lower than the char size in msdf map? Bitmap fonts look pretty good when chars are rendered at the scale of 1 and below (and thanks to bilinear filtering we even get a poor man's AA).

Looks like alpha channel is not used in msdf calculations in any way, so we can use it to render glyphs as if we had a bitmap font. The threshold can be controlled by material's parameter "enabling" the alpha channel to provide pixel opacity for low font sizes.

P.S. Could you please hint me which tool is supposed to be used to create JSON and PNG files for Playcanvas fonts?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue does not name implementation files or tests. Start by tracing PlayCanvas font rendering and the generation of the JSON and PNG font assets, then evaluate the proposed alpha-channel fallback for downscaled MSDF glyphs. Done should include an agreed threshold and verified low-size rendering without regressing normal MSDF scaling.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.