12.10 - 3D Text — Learn Computer Graphics using WebGL

3D Models of Textual Characters¶

To display text in a 3D scene, a geometric model of each character is required. If the text is static, a single geometric model can be created to represent the entire string. If text is composed during run-time, a set of individual models for each possible character must be used to render the string one character at a time, using transformations to appropriately place each character.

Modeling Static Text¶

Using Blender:

Add a text object. (Add –> Text.)
Enter edit mode. (Tab key)
Edit the text object’s characters.
Use the “Font” tool of the “Properties” editor to set properties of the text object. Among other things:
- The font can be modified.
- The characters can be extruded to 3D by setting the “Geometry” “Extrude” value.
- The edges of the characters can be beveled using the “Geometry” “Depth” value.
Exit edit mode. (Tab key)
Convert the text object to a geometric model. (ALT-C –> “Mesh from Curve/Meta/Surf/Text”)
Manipulate the polygonal mesh as needed or desired. (For example, rotate the model 90 degrees about the x axis to make it face “forward” instead of “up”.)
Export the model to an *.obj data file and render it in a WebGL program as any other 3D model.

Modeling Dynamic Text¶

Using Blender:

Add a text object. (Add –> Text.)
Enter edit mode. (Tab key)
Add a single instance of every possible character that a text string might contain. For example, here is every possible ASCII character in their ASCII order (ordinal values 33 through 126).
```
!"#$%&'()*+,-./0123456789:;<=>?
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_
`abcdefghijklmnopqrstuvwxyz{|}~
```
Use the “Font” tool of the “Properties” editor to set properties of the text object.
Exit edit mode. (Tab key)
Convert the text object to a geometric model. (ALT-C –> “Mesh from Curve/Meta/Surf/Text”)
Select the model and enter edit mode. (Tab key)
Select each character and make it a separate model. (“P” –> Selection.)
Use the “Outliner” to give each model an appropriate name. (The model name should be a legal JavaScript variable name.) The WebGL program below uses names that start with a “c” and include the ordinal value of the character. For example, “A” has the name “c65”.
Export the models to an *.obj data file.

In a WebGL program, a dynamic string must be parsed into its individual characters and each character rendered as a separate model. The translation of each model to an appropriate location in the string is performed by a translation matrix.

Some fonts are proportional – each character has a different width. Other fonts are non-proportional – each character has the same width. In either case, code can be written to gather information about each character’s model and this data can be used to space the characters appropriately.

Experiments¶

Please experiment with the following WebGL program and study the JavaScript code.

Show: Code Canvas Run Info

text_3d.js
text_3d_scene.js

/**
 * text_3d.js, By Wayne Brown, Spring 2018
 */

/**
 * The MIT License (MIT)
 *
 * Copyright (c) 2015 C. Wayne Brown
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

"use strict";

/** -----------------------------------------------------------------------
 * Use models of individual characters to render a text string in 3D.
 * @param characters {Array} of models, one for each character
 * @constructor
 */
window.Text3d = function (characters) {

let self = this;

// Indexes into dimensions array for each character.
  const MIN_X  = 0;
  const MAX_X  = 1;
  const MIN_Y  = 2;
  const MAX_Y  = 3;
  const MIN_Z  = 4;
  const MAX_Z  = 5;
  const OFFSET_TO = 6;
  const SPACE_BETWEEN = 7;

// Store data about each character model.
  let sizes = new Array(characters.length);

// General spacing values:
  let space_width = 0;
  let character_height = 0;
  let baseline = 0;
  let line_height = 0;
  let line_spacing = 0;
  const line_spacing_factor = 1.08;

// Transformations used for rendering the character models.
  let matrix = new GlMatrix4x4();
  let translate = matrix.create();
  let new_clipping_transform = matrix.create();
  let new_camera_transform = matrix.create();

/**----------------------------------------------------------------------
   * Calculate dimensions and offsets for each individual character model.
   * @private
   */
  function _gatherCharacterInfo() {
    let limits, vertices, x, y, z, min_y, max_y, sum_width, number_characters;

min_y = 10e10;
    max_y = -10e10;

number_characters = 0;
    sum_width = 0;
    for (let j = 0; j < characters.length; j++) {
      if (characters[j]) {

// Determine a bounding box for the character
        limits = new Array(8);
        limits[MIN_X] = 10e10;
        limits[MAX_X] = -10e10;
        limits[MIN_Y] = 10e10;
        limits[MAX_Y] = -10e10;
        limits[MIN_Z] = 10e10;
        limits[MAX_Z] = -10e10;

vertices = characters[j].model_buffers.raw_data.triangles.vertices;
        for (let k = 0; k < vertices.length; k += 3) {
          x = vertices[k];
          y = vertices[k + 1];
          z = vertices[k + 2];
          if (x < limits[MIN_X]) {
            limits[MIN_X] = x;
          }
          if (x > limits[MAX_X]) {
            limits[MAX_X] = x;
          }
          if (y < limits[MIN_Y]) {
            limits[MIN_Y] = y;
          }
          if (y > limits[MAX_Y]) {
            limits[MAX_Y] = y;
          }
          if (z < limits[MIN_Z]) {
            limits[MIN_Z] = z;
          }
          if (z > limits[MAX_Z]) {
            limits[MAX_Z] = z;
          }
        }

// Find height limits for all character.
        if (limits[MAX_Y] > max_y) { max_y = limits[MAX_Y]; }
        if (limits[MIN_Y] < min_y) { min_y = limits[MIN_Y]; }

limits[OFFSET_TO] = limits[MIN_X];
        sum_width += (limits[MAX_X] - limits[MIN_X]);
        number_characters += 1;

sizes[j] = limits;
      }
    }

// Set the distance between each letter and the next letter.
    for (let j = 0; j < characters.length - 1; j++) {
      if (characters[j]) {
        sizes[j][SPACE_BETWEEN] = sizes[j+1][MIN_X] - sizes[j][MAX_X];
      }
    }

// Set the SPACE_BETWEEN for the "~" character, use "^" spacing.
    sizes[characters.length - 1][SPACE_BETWEEN] = sizes[94][SPACE_BETWEEN];

// Use the capital "A" to set the vertical dimensions.
    baseline = sizes[65][MIN_Y];
    character_height = sizes[65][MAX_Y] - sizes[65][MIN_Y];

// Let the offset for a "space" be the average distance between characters.
    space_width = sum_width / number_characters;

// Set the line spacing.
    line_height = max_y - min_y;
    line_spacing = line_height * line_spacing_factor;
  }

/**----------------------------------------------------------------------
   * Render a string of characters using a model for each character.
   * @param my_string {string}
   * @param to_clipping_space {Float32Array} transformation to clipping space
   * @param to_camera_space {Float32Array} transformation to camera space
   * @param color {Float32Array} RGBA color
   */
  self.render = function (my_string, to_clipping_space, to_camera_space, color) {
    let c, x_offset, y_offset;

x_offset = 0;
    y_offset = 0;
    for (let j=0; j<my_string.length; j++) {
      c = my_string.charCodeAt(j);

if (c === 32) { // space
        x_offset += space_width;
      } else if (c === 10 || c === 13) { // new-line
        x_offset = 0;
        y_offset -= line_spacing;
      } else if (c > 32 && c <= 126 && characters[c]) {
        matrix.translate(translate,  x_offset - sizes[c][OFFSET_TO], y_offset, 0.0);

matrix.multiply(new_clipping_transform, to_clipping_space, translate);
        matrix.multiply(new_camera_transform, to_camera_space, translate);

characters[c].render(new_clipping_transform, new_camera_transform, color);

x_offset += (sizes[c][MAX_X] - sizes[c][MIN_X]) + sizes[c][SPACE_BETWEEN];
      }
    }
  };

// Constructor
  _gatherCharacterInfo();
};

/**
 * text_3d_scene.js, By Wayne Brown, Spring 2018
 */

/**
 * The MIT License (MIT)
 *
 * Copyright (c) 2015 C. Wayne Brown
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

"use strict";

/** -----------------------------------------------------------------------
 * Create a WebGL 3D scene, store its state, and render its models.
 *
 * @param id {string} The id of the webglinteractive directive
 * @param download {SceneDownload} An instance of the SceneDownload class
 * @param vshaders_dictionary {object} A dictionary of vertex shaders.
 * @param fshaders_dictionary {object} A dictionary of fragment shaders.
 * @param models {object} A dictionary of models.
 * @constructor
 */
window.Text3dScene = function (id, download, vshaders_dictionary,
                                fshaders_dictionary, models) {

// Private variables
  let self = this;
  let my_canvas = null;

let gl = null;
  let uniform_program;
  let characters;
  let alphabet;
  let model_gpu;

let matrix = new window.GlMatrix4x4();
  let vec3 = new GlVector3(); // {GlVector3}

let translate = matrix.create();
  let to_camera_space = matrix.create();
  let to_clipping_space = matrix.create();
  let projection;
  let camera = matrix.create();
  let rotate_x_matrix = matrix.create();
  let rotate_y_matrix = matrix.create();

// Public variables that will possibly be used or changed by event handlers.
  self.angle_x = 0.0;
  self.angle_y = 0.0;
  self.tx = 0.0;
  self.ty = 0.0;
  self.tz = 0.0;
  self.animate_active = false;
  self.out = download.out;

self.my_string = "test";

//-----------------------------------------------------------------------
  self.render = function () {

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// Set the location of the light source
    gl.useProgram(uniform_program);
    gl.uniform3fv(uniform_program.u_Light_position, [5.0, 5.0, 5.0]);
    gl.uniform3fv(uniform_program.u_Light_color, [1.0, 1.0, 1.0]);
    gl.uniform3fv(uniform_program.u_Ambient_intensities, [0.3, 0.3, 0.3]);

// Build individual transforms
    matrix.rotate(rotate_x_matrix, self.angle_x, 1, 0, 0);
    matrix.rotate(rotate_y_matrix, self.angle_y, 0, 1, 0);
    matrix.translate(translate, self.tx, self.ty, self.tz);

// Render the cubes models
    matrix.multiplySeries(to_camera_space, camera, translate,
                          rotate_x_matrix, rotate_y_matrix);
    matrix.multiply(to_clipping_space, projection, to_camera_space);

alphabet.render(self.my_string, to_clipping_space, to_camera_space, [1.0, 0.0, 0.0, 1.0]);
  };

//-----------------------------------------------------------------------
  self.delete = function () {

// Clean up shader programs
    gl.deleteShader(uniform_program.vShader);
    gl.deleteShader(uniform_program.fShader);
    gl.deleteProgram(uniform_program);

// Delete each model's VOB
    for (let c=33; c <= 126; c += 1) {
      characters[c].delete(gl);
    }

events.removeAllEventHandlers();

// Disable any animation
    self.animate_active = false;
  };

//-----------------------------------------------------------------------
  // Object constructor. One-time initialization of the scene.

// Get the rendering context for the canvas
  my_canvas = download.getCanvas(id + "_canvas");  // by convention
  if (my_canvas) {
    gl = download.getWebglContext(my_canvas);
  }
  if (!gl) {
    return;
  }

// Set up the rendering program and set the state of webgl
  uniform_program = download.createProgram(gl, vshaders_dictionary["uniform_color_with_lighting"],
                                               fshaders_dictionary["uniform_color_with_lighting"]);

gl.enable(gl.DEPTH_TEST);

gl.clearColor(0.98, 0.98, 0.98, 1.0);

projection = matrix.createPerspective(45.0, 1.0, 1.0, 100.0);
  matrix.lookAt(camera, 0, 0, 5, 0, 0, 0, 0, 1, 0);

// Create Vertex Object Buffers for the cubes models and
  // pre-processing for rendering.
  characters = new Array(127);
  for (let c=33; c <= 126; c += 1) {
    model_gpu = new ModelArraysGPU(gl, models["c" + c], self.out);
    characters[c] = new RenderUniformColorWithLighting(gl, uniform_program, model_gpu, self.out);
  }

alphabet = new Text3d(characters);

// Set up callbacks for user and timer events
  let events;
  events = new Text3dEvents(id, self);
  //events.animate();
};

Expermiment with 3D Text

Enter text to render:

Translate:
X: 0.00 : -6.0 6.0
Y: 0.00 : -6.0 6.0
Z: 0.00 : -6.0 6.0
Animate

Show: Process information Warnings Errors

Open this webgl program in a new tab or window

Notes:

Non-printable characters, such as spaces and new-lines must be dealt with as special cases. A “space” character increases the distance to the next character and does not render a model. A “new-line” character must reset the horizontal and vertical offsets to the next character.
The depth of the characters can be adjusted in real-time by scaling the z axis. However, this introduces non-uniform scaling. If lighting is used for rendering, a special transformation matrix (the inverse transposed) must be created and used to transform the normal vectors of the character models. If possible, assign an appropriate depth for the character models when they are created in Blender and avoid non-uniform scaling.
The spacing between characters in a string is called kerning. The spacing between lines can vary, such as “single spacing,” “double spacing,” etc. Given the many choices in fonts, kerning, and line spacing, a software implementation must make many decisions on how to produce a desired textual rendering.

Glossary¶

text: a sequence of characters from an alphabet.
3D text: a rendering of text in 3D space.

Self Assessment¶

Q-327: Suppose the text string “Yeah” is needed in a 3D scene and it will never change. How many models are needed to render this string into the scene?

one
Correct.
four
Incorrect. It could be modeled as four separate characters, but why go to the trouble?
eight
Incorrect. Each character could be modeled using two separate models, but why?
none (just use the gl.renderText() function)
Incorrect. No such function in the WebGL API exists.

Q-328: Suppose there is a need to display various text strings in a 3D scene, but the characters in those strings are not know in advance. It is known that examples include “This”, “that”, and “whatever.” In addition, digits or special characters will never be included. How many models are needed to render these strings into the scene?

52
Correct. Upper and lower case for each of the 26 letters in the English alphabet.
26 (each letter in the english alphabet)
Incorrect. What about upper and lower case letters?
1
Incorrect.
20
Incorrect.

Q-329: How does the WebGL program above decide the width of a “space” character?

It uses the average width of all character models.
Correct.
It uses the width of the capital “A” character.
Incorrect. The capital “A” character is used to set the baseline and character_height values, but not the width of a space.
It uses the width of the model that describes a “space”.
Incorrect. No such model is included in the character models. A “space” model has no geometry, so it has no model.
It uses the width of the “m” character.
Incorrect.

Q-330: The WebGL program above renders characters using models from a proportional font. How could the program be simplified if the characters were defined from a non-proportional font. (Select all that apply.)

The variable sizes would not need to be an array; it could be a single set of MIN/MAX values.
Correct. Because each model would have the same size.
The doubly nested loop in _gatherCharacterInfo() could be simplified to a single loop.
Correct. Because only one character would need to be tested for its size.
The height of the characters could be hard-coded instead of calculated.
Incorrect. The height could be hard-coded, but not because the font is non-proportional.
The depth along the z axis of the characters could be set to zero instead of calculated.
Incorrect. The depth could be hard-coded, but not because the font is non-proportional.

12.10 - 3D Text¶