Text Rendering

In many 3D web applications you need to display text that supplements 3D models with some informative content. In this section you will find out how to create text in your apps.

1. HTML/CSS, Annotations

HTML/CSS is the most natural way to display information in web-based applications.

There are possible ways to render text with HTML:

Check out HTML-Based User Interfaces section to get more info on using HTML, as well as add annotation and HTML puzzles references.

Pros

Cons

2. Dynamic Text Geometry

You can use Text objects from your modelling suite to create text geometry similar to regular meshes. "Dynamic" means Verge3D does not store text geometry in the exported glTF asset, instead, it recreates it upon scene loading (using the font data). It also means, that you can edit your text in runtime with update text object puzzle or via JavaScript.

To make your text objects dynamic, make sure that the Bake Text option in the export settings is unchecked:

You also need to specify the Font Converter option (enabled by default) when creating your app to be able to use dynamic text geometry. This option activates opentype.js module in your application which is required to load and process font data.

If you forget to enable Font Converter option or created your application before Verge3D 3.6, simply copy opentype.js file from the build directory of your Verge3D distribution to your application directory.

Pros

Cons

3. Static Text Geometry

Static text geometry is very similar to dynamic, except it uses baked text mesh which gets stored in exported glTF asset. You cannot edit such meshes in runtime, e.g change their content or font. However, you still able to assign materials or move that text similar to other geometry objects.

To make your exported text use static geometry, specify Bake Text option in the export settings:

Pros

Cons

4. Textures with Text

You can render your text to a bitmap texture and then apply that texture to your object. Popular use cases for such technique include customized billboars, personalized cups/T-shirts, as well as jewelry engraving:

Check out the texture from text puzzle for more info on how to use textures with custom text.

Pros

Cons

5. Canvas Textures

This method is an extension to the previous technique which allows you to perform more sophisticated tasks by using JavaScript and canvas element. Check out the create canvas elem puzzle for more info.

Pros

Cons

Got Questions?

Feel free to ask on the forums!