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
• 2. Dynamic Text Geometry
• 3. Static Text Geometry
• 4. Textures with Text
• 5. Canvas Textures

#

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:

• Using some third-party website builder like Webflow.
• Manual editing of project HTML/CSS files.
• Using HTML puzzles.
• Using Verge3D annotations.

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

Pros

• Approach common in web development.
• Good quality of rendered text.
• Possibility to use advanced text styles, such as custom strokes, fonts and 3D transformations.

Cons

• No easy integration with rendered scene. In most situations you simply render HTML text above your 3D content.
• No easy way to use HTML text in Virtual Reality mode.
• Slow rendering if you have too many dynamic textual elements (such as annotations) in your app.

#

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:

Blender

3ds Max

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.

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.

Pros

• Text objects are full-featured 3D meshes which can be moved/animated/assigned with custom materials, just like any other 3D meshes in your scene.
• Dynamic text rendered in runtime, as such does not consume bandwidth to load geometry via network.
• You can modify not only content, but also font, extrusion depth and bevels.

Cons

• Takes some time to generate text during scene loading.
• Requires loading of font asset (TTF or WOFF) and using additional font converter module.
• Not all text parameters supported in Verge3D.

#

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:

Blender

3ds Max

Maya

Pros

• Text looks exactly as you see it in the modelling suite.
• Does not require additional font asset or spending time during scene loading to generate glyphs.

Cons

• Long texts increase the size of the loaded glTF asset. As such, it might take a lot of time to load your scene, especially via slow connections.
• You can't edit text in runtime.

#

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

• Good rendering performance and moderate GPU memory consumption.
• You can add various text effects by using node materials (for example, create bump mapped texture with text).

Cons

• Might be slow if you change your text frequently (e.g each frame).
• You can't use complex text alignments.
• Text is 2D only, hence no extrusion/bevel effect.
• Quality is somewhat reduced, especially for small images (less than 1K).

#

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

• You can do any text customizations with JavaScript.
• It's possible to draw shapes and images along with text.
• Good rendering performance and moderate GPU memory consumption.
• You can add various text effects by using node materials (for example, create bump mapped texture with text).

Cons

• Requires JavaScript programming skills.
• Text is 2D only, hence no extrusion/bevel effect.
• Quality is somewhat reduced, especially for small images (less than 1K).

Got Questions?

Feel free to ask on the forums!