Aframe: Support multiple pages with text component

[donmccurdy]

Currently the text component supports only a single texture page. For chinese characters, even the most common ~1000 characters require 40 texture pages using an msdf bmfont generator.

Related: https://github.com/aframevr/aframe/blob/master/src/components/text.js#L209-L211

Here is a zip with what should be the most common 1000 characters, in the Microsoft YaHei font:

yahei.zip

npm install -g msdf-bmfont-xml

# simple test
msdf-bmfont -f json yahei/yahei.ttf -i yahei/charset-test.txt --pot --square

# 1000 characters
msdf-bmfont -f json yahei/yahei.ttf -i yahei/charset-1000.txt --pot --square

Related: https://github.com/aframevr/aframe/issues/3343

[donmccurdy]

As long as I keep the charset small, this method does work:

Should also point out that those 1000 characters are 2.4 MB in this format, so users may still need to generate these fonts specially for each scene unfortunately.

[arpu]

why not use the system fonts with canvas filltext?
the chinese Font should be installed on the System
(https://www.html5canvastutorials.com/tutorials/html5-canvas-text-font-size/)

[donmccurdy]

That sounds like a good option. Anyone have thoughts on whether:

1. canvas can be a fallback option within the text component
2. a second text component should be available in A-Frame
3. we should add an FAQ entry about options for intl text, linking to outside components like aframe-canvas-text and aframe-text-geometry-component

SDF is the default now because it is performant and looks nice, but it is unfortunately harder to use with some languages.

[bryik]

@donmccurdy You got a lot further than I did!

Apparently, game devs generate fonts with the exact characters needed for a given script. I'm not sure if supporting every character is feasible.

[donmccurdy]

Apparently, game devs generate fonts with the exact characters needed for a given script. I'm not sure if supporting every character is feasible.

Hm yeah that sounds realistic. It would be nice to have a web-based tool where you can autogenerate that JSON for some common free fonts automatically, with your own charset. Unfortunately getting msdf-bmfont-xml running on the cloud seems to be a bit inconvenient. :/

[donmccurdy]

I've put together a little web tool for generating these MSDF fonts. It will support special characters correctly, and you can provide your own fonts if you wish.

http://msdf-bmfont.donmccurdy.com/

^note, this requires the negate: false setting on A-Frame's text component, which is only available on the master branch and will be released with 0.8.0.

[ngokevin]

Will have http://msdf-bmfont.donmccurdy.com/ be the soluton?

[arpu]

https://codesandbox.io/s/3v9z2z34p6

testing different variants

canvas-text
a-text (msdf font)
aframe-text-geometry-component