This year in February, I heard for the first time of A-Frame (at RWDSL@CGO). In a nutshell, A-Frame aims on easing web-based 3D visualisation.

Based on my previous work involving Event-driven Architecture (EDA) and Message-oriented Middleware (MoM), I was curious if A-Frame could be used for visualizing near real-time data from EDA/MoM in a web browser. In this post, I briefly write about some very early experiments and how you can run them on your own.

In this post, my focus is on a simple example, which, I hope, you can easily reproduce on your own computer with a few simple steps. If you are interested in more technical details please refer to:

• for bowerick: my previous posts about bowerick and the bowerick repository,
• for using STOMP in a web-browser: the JavaScript STOMP library and its example,
• for A-Frame: the A-Frame web site and other resources,
• or the corresponding example source code (example HTML/JavaScript & bowerick Clojure code).

If everything works out, you should be able to see a simple 3D animation in your web browser. Thereby, the animated coordinates are calculated outside of your browser and sent to the browser via the MoM.

Below the results are shown in two screenshots. In the first screenshot, a simple sphere is used. In the second screenshot, I used a tetrahedron to which I added a “trail” to better visualize the animated movement. Note that I deliberately enabled shadows for the sphere example and disabled shadows for the tetrahedron-trail example.

For easing the reproducibility of the examples, I made the corresponding web-pages available via the github pages of the bowerick project:

• The Sphere Example
• The Tetrahedron-trail Example

Alternatively, you can also find the web pages in the examples directory of the bowerick repository.

In addition to the web pages, you need a MoM broker and an event/message producer for generating messages with the animated coordinates. To ease the use of this example, I included a corresponding event/message generator in bowerick.

In the simplest way of using it, the event/message generator will be created along with a broker instance. Thus, you only need to download an appropriate bowerick version, start the example, and connect to the broker using the example web pages mentioned above. Below, commands for optionally downloading bowerick and running the example are shown:

 
# Optionally, use, e.g., wget or curl to download bowerick:
# wget https://github.com/ruedigergad/bowerick/raw/master/dist/bowerick-2.2.2-standalone.jar
# curl -o https://github.com/ruedigergad/bowerick/raw/master/dist/bowerick-2.2.2-standalone.jar
# Start the example including an appropriate broker:
java -jar bowerick-2.2.2-standalone.jar -A

The example web pages use default settings for the broker URL and topic name that matches this simple setup of running the example on localhost. Thus, to see the animated visualization, you simply need to press the “Connect” button of the example web pages.

For another example and as an outlook on a post I plan on more sophisticated event/message generation, you can try to run the bowerick event/message generation as shown below. As shown in the image underneath, this example plots a heart shape using a more complex mathematical function than the simple circle above (This is actually an Easter egg dedicated to family.).

 
java -jar bowerick-2.2.2-standalone.jar -G heart4family -D /topic/aframe -u "[\"ws://127.0.0.1:1864\"]"

I hope you consider bowerick and this post useful. If you have constructive criticism and comments just let me know. I am very much looking forward to helpful feedback.