Figure 1: A screenshot of the 3D Annotation app running within a web browser.

Launch app in new tab...

This app provides both a simple demonstration of my new model annotation features as well as an interface for designing and refining annotations for use within a 3D model.

An annotation is basically an image or some text with an optional background, indicator line and arrow that points to some element within the 3D model. The key to an annotation is its ability to dynamically track an element as it moves around or when 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.

Four annotations with different styling.
Figure 2: Some example annotations with different styling applied.

User Interface vs API

First off, it’s obvious that the controls provided in this app for setting up and tweaking annotations are pretty overwhelming at first and probably too extensive. However, the aim is to expose all the settings available within the annotation API and illustrate their effects though dynamic interaction.

Any API has to balance two competing needs – to work immediately straight out of the box and require as few additional settings as possible to change styles and behaviours, whilst at the same time facilitating as much detailed customisation as may be required by specific situations and user applications.

Balancing these is not easy. For example, the concept of block alignment doesn’t always sit that well with the ability to set arbitrary offset distances in each axis. Some configurations can quickly produce horrible results as indicator lines try to snake around left-aligned blocks that have been offset to the right. At the same time, there are many situations where the offset is just as important as block alignment in achieving the required effect.

Whilst it would be relatively simple to derive indicator and line configurations from the current offset, when coding via the API directly without any visual feedback from a user interface, the user would need to know the rendered dimensions of the resulting annotation block before they could set the offset required to achieve their desired result. Using block alignment means that pretty well all that goes away and it is far easier to make things work with just a few settings.

This app and its ongoing evolution is really my attempt to better understand these competing requirements as well as how all the various settings work together, and then try to rationalise and optimise things wherever I can.


Change Log

0.0.1 2017-11-01

  • Initial release.

Click here to comment on this page.