Loading - please wait...

This page requires a reasonably modern HTML5 browser
with both Javascript and WebGL enabled.

If this message is not soon replaced by an interactive 3D model,
then it is likely that your browser does not support this web app.
Check your JavaScript Console for specific error messages.

Aspect Ratio:
Small Caps Ratio:
Letter Spacing:
Word Spacing:
Line Spacing:




Projection (Shortcut keys: 1 to 6)




Time Zone



This app demonstrates my new triangulated 3D font library. It lets you dynamically adjust various font parameters including different shapes, spacings and extrusions. Use the sliders and controls in the top-left of the app to interactively change settings. If you are keen, you can also enter your own text and export the resulting geometry as an OBJ, STL or PLY file.

I wrote this because I really needed to see and experiment with various font shapes, and to thoroughly stress test and optimise the code. Also, code-based unit tests can't really give the same qualitative feedback as actually seeing what example text looks like as various metrics are dynamically adjusted.

Why 3D Vector Fonts

Whilst the typical approach to 3D text is to texture map font glyphs onto transparent flat surfaces, this is tricky to get looking good and not totally suited to the kinds of model annotation I need/want to be doing.

I was using using my own line-based vector font library for annotating things, however Chrome version 57 onwards stopped supporting line widths greater than 1 pixel in WebGL on all platforms, regardless of the capabilities of the underlying graphics hardware. As Chrome is one of the most popular browsers at the moment, and single pixel lines on retina and other high resolution displays can barely be seen, I needed to sort something out quickly.

Interesting Features

Designing a dynamic 3D font is way harder than it looks. There are still a few configurations of stroke thickness and aspect ratio that cause same self-intersection in one or two glyphs, however on the whole I'm pretty happy with the results. Moreover, it has proved surprisingly fast and quite memory efficient.

© Dr. Andrew J. Marsh, 2017.

View Manipulation

You can interactively adjust the 3D view of the model using a mouse, pen or stylus, or by touch on a tablet or phone. You can also use the items in the 3D View Settings popup.

Drag with the left/right button or a single finger,
or use the arrow keys.
Drag with the middle button or two/three fingers,
or use the A and D keys.
Use the scroll wheel or pinch with two fingers,
or use the W and S keys.

NOTE: You can use the Shift and Ctrl/Meta keys to adjust the increment of each scroll event or key press.

Keyboard Modifiers

The Shift and Ctrl/Meta keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements.

Shift Key:
Increases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times.
Ctrl or Meta Key:
Decreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times.

NOTE: You can use the scroll wheel to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility.


This page uses the following frameworks/components:

Bootstrap  v3.3.2
Copyright © 2011-2015 Twitter, Inc. - github.com/twbs,
http://getbootstrap.com/   (LICENSE)

Bootstrap-popover-x  v1.4.0
Copyright © 2014, Kartik Visweswaran, Krajee.com,
https://github.com/kartik-v/bootstrap-popover-x   (LICENSE)

jQuery  v1.11.2
Copyright © jQuery Foundation and other contributors,
https://jquery.com/   (LICENSE)

JSON Editor
Copyright © 2015 Jos de Jong - github.com/josdejong
https://github.com/josdejong/jsoneditor/   (LICENSE)

Copyright © 2011 Bruno Jouhier - github.com/Sage
https://github.com/Sage/jsurl/   (LICENSE)

KnockoutJS  v3.2.0
Copyright © Steven Sanderson and the Knockout.js team,
http://knockoutjs.com/   (LICENSE)

Knockstrap  v1.2.0
Copyright © 2013 Artem Stepanyuk - github.com/faulknercs,
http://faulknercs.github.io/Knockstrap/   (LICENSE)

Copyright © 2011 by Evan Wallace - https://github.com/evanw
https://github.com/evanw/lightgl.js/   (LICENSE)

Leaflet Maps API  v1.4.0
Copyright © Cloudmade, Vladimir Agafonkin - github.com/Leaflet,
https://leafletjs.com/   (LICENSE)

OpenStreetMap Map Data
Copyright © OpenStreetMap contributors - openstreetmap.org,
https://www.openstreetmap.org/about   (LICENSE)

Copyright © 2014 Federico Zivolo - github.com/FezVrasta
http://fezvrasta.github.io/snackbarjs/   (LICENSE)