I have always wanted the one platform where I could both perform building analysis and interactively explain or demonstrate the results. Ecotect got pretty close towards the end with its Lua-based scripting, but you couldn’t easily indicate or highlight things directly within the 3D model. However, with my web apps, I want to make sure that this kind of functionality is baked in at their very core.
3D Text
Screenshot of text3d designer app.
To support this, I needed to be able to render 3D text directly within the context of the 3D model. This is typically done using canvas rendered font glyphs textured onto transparent flat surfaces, but pixellation is often a big issue with this approach. An alternative is to load font files and tesselate them into triangles and lines, however this requires multiple font files for bold and italic styles which can add significant overhead to page load times.
My alternative approach was to hard-code my own very simple font that:
- Generates glyphs on demand as renderable geometry,
- Creates each glyph from as few triangles and lines as practical,
- Is highly customisable and able to be restyled in real-time,
- Hopefully looks good and is legible across many different sizes,
- Understands holes and allows glyphs to be extruded, and
- Exists within as small a code-base as possible.
To keep the code tight, I only generate glyphs for core ASCII characters and use small caps if there is a need to differentiate case. I fully understand that this will cause all sorts of internationalisation problems in the future and already have a plan to address this, but at least I can move forward with what I have now.
Check out the app description or launch it directly to have a play around.
Dynamic Annotations
Screenshot of annotation designer app.
An annotation is basically some text with an optional background, indicator line and/or arrow that points to some element within the 3D model. Key to this is the ability of the annotation to dynamically track the element if it is moved or as the view changes.
The aim is to use dynamic annotations as part of a scriptable narration of the model, having them appear and disappear sequentially as part of the process of explaining or demonstrating something. Making this visually interesting means that they need to be animatable, not just fading in/out but supporting complex transitions and multiple simultaneous transformations.
Check out the app description or launch it now to have a play around with some different annotations and animations.
Click here to comment on this page.