From the beginning of writing code, the Chinese cause countless problems, this time is no exception.
There are two ways to use Chinese in WebGL:
One,
a new canvas to write Chinese , and then added to the WebGL, the advantage is not to load a specific font, the page can use what font it can use what font, and as long as the normal DOM API to refresh the DOM content, WebGL in the render can render the latest DOM content, easy to debug maintenance. The disadvantage is this way or 2D way, not fully play 3D effect.
Second,
each font is a 3D model , the advantage is that the 3D effect can be combined with the 3D implementation of the principle can make a very cool effect, the disadvantage is that this way requires additional preparation font model library, and then to load the page.
There are two different scenarios:
1,
static display type , this is good to do, how many words you need to be introduced in advance, there is no problem.
2,
dynamic Display Type , the display of the font based on dynamic Data at any time to change, this situation will be additional processing, this is the solution discussed in this article.
A Chinese font has the commonly used also has five thousand or six thousand words, has many websites may let you turn the TTF font to be able to use the path in WebGL,
but this process is very painful, the turn time takes very long, the important is not necessarily may use, may have the bug. After testing a few font files, incredibly found only the script can be used, the entire font file more than 30 trillion
Picture more than 1M feel big, do not say this 31M font file in the speed of how fast the case of how seconds, this is simply impossible, can only need another way to solve. Open the Lisu_regular.typeface.js file, most of the content is the path of every word, so I think you can pick up the tail, and then in the need of which font in advance to request a font path and then describe 3D.
Remove font lisu_regular.typeface.js after the path
if (_typeface_js && _typeface_js.loadface) _typeface_js.loadface ({
"Glyphs": {},
"Cssfontweight": "Normal",
"Ascender": 1194,
"Underlineposition":-59,
"Cssfontstyle": "Normal",
"BoundingBox": {"ymin": -255, "xmin": 54.25, "Ymax": 1194, "Xmax": 1378.046875},
"Resolution": 1000,
"Original_font_information": {
"Postscript_name": "Lisu",
"Version_string": "Version 3.01",
"Vendor_url": "",
"Full_font_name": "Lisu",
"Font_family_name": "Lisu",
"Copyright": "(C) Copyright Stone Co., 1996",
"description": "",
"Trademark": "Trademark of Stone Co., Beijing",
"Designer": "",
"Designer_url": "",
"Unique_font_identifier": "Lisu",
"License_url": "",
"License_description": "",
"Manufacturer_Name": "",
"Font_sub_family_name": "Regular"
},
"Descender":-196,
"Familyname": "Lisu",
"Lineheight": 1584,
"Underlinethickness": 13
});
After removal of the lisu_regular.typeface.js only 1k size, compared with the previous 31M is not comfortable a lot.
Let's see glyphs default is a font, no path.
_typeface_js.faces.lisu.normal.normal.glyphs
Object {}
We'll load a few fonts into the background request:
We rewrite the requested data _typeface_, so _typeface_ has the path to these words.
And then do some optimization, such as to the background to request font path, the first to remove the repeated words, and then the glyphs already exist to remove the word OK
