haxiomic
commented
4 years ago Hey Vanush, sorry about the wait there! So once you've got a font file (like OpenSans-Regular.msdf.bin), you load that as an ArrayBuffer and pass it to GPUText.parse(). This will give you a GPUTextFont object.
A GPUTextFont object is simply the character textures as HTMLImageElements along with a map that describes the location of each character in the map (and kerning information). You should create a GPU texture from the images
Then, when you want to render a string of characters, you first need to layout the characters, for example, in the string hello\nworld, we get a sequence that says character h at position (0,0), character e at position (0.6, 0) and so on, handling kerning, newlines, space characters (and in theory line wrapping). To do this call GPUText.layout( gpuTextFont ) and this gives us a GlyphLayout object
Now we have the text laid out abstractly, we want to generate something we can pass to the GPU. We generate a mesh, where each character has it's own quad and uvs. The character quads are laid out to match the sequence from layout() and the uvs correspond to the character location in the texture map. To generate this run GPUText.generateVertexData( glyphLayout ). The result is a single buffer containing both positions and uvs and layout information to pass to OpenGL that describes how the data is laid out. But generally it's a Float32Array, where each quad vertex has the format p.x, p.y, uv.x, uv.y, uv.z where uv.z is a scale factor.
To render you can use gputext-webgl.js or copy the shader from there and implement in your own engine
https://github.com/VALIS-software/GPUText/blob/master/example/gputext-webgl.js#L23
Here's a more advanced implementation used in production https://github.com/VALIS-software/Engine/blob/master/src/ui/Text.ts
The layout part of the code is the least complete – laying out text is a can of worms so I've only provided a minimal implementation (just plain RTL with newlines). You might want to use something like harfbuzz if you need to handle other writing systems or word wrapping
zoldello
I'm new to GPU text. Can you briefly describe how from a given character, the coordinates of the texels are passed to the shader to render?