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.

HTML-based UI used in the Jewelry Configurator demo
HTML-based UI used in the Jewelry Configurator demo.

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.



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:

Disable text baking in Blender
Disable text baking in 3ds Max
Disable text baking in Maya

Dynamic objects can also be created on the fly by using the create text object puzzle.

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.

Enable font converter

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 installation directory to your app directory.



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:

Baking text in Blender
Baking text in 3ds Max
Baking text in Maya



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:

Engraving in the Jewelry Configurator demo
Engraving in the Jewelry Configurator demo.

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



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.

Canvas Texture demo
Canvas Texture demo.

Check out the create canvas elem puzzle for more info.



Got Questions?

Feel free to ask on the forums!