Personal Blog Post:

Interactive 3D in a Web Page

This page discusses the results of my experiments with Processing over the Christmas break. What is interesting about Processing is that it allows you to create fully interactive 3D applets embedded in a standard web page on any platform. For visualising and playing around with complex concepts, this offers something far more exciting than even Adobe Flash.

The example below shows one of my first experiments generating an interactive sun-path diagram. This is part of a series ilustrating basic solar concepts.

This browser does not seem to have a Java plug-in.
Get the latest Java plug-in here.


An example of an embedded 3D application written in Processing.

Generating the sun-path diagram was actually pretty easy - writing the graphical user interface (GUI) turned out to be the main challenge. There are a few GUIs available for Processing, but none appeared to offer the level of interactive overlay and control I needed. Experiments with AWT and Swing components quickly showed that transparency and flickering was going to be an enormous problem there. Thus I wrote my own.

That's the smart reason - the dumb reason is that I simply haven't been able to get multiple jar files in an archive parameter to work yet, so I can't include any external libraries and had to write it myself.

The Interface

The main work in producing this applet was getting the 2D overlays over the 3D diagram and effectively managing all the user interaction with different elements. Also, because it involves a fair bit of trigonometry (which is slow to calculate), I didn't want the model looping through and constantly redrawing itself (as Processing does by default). Thus it took a while to work out how to obtain seemless interaction and activity feedback whilst only redrawing those parts of the frame that need it when they need it.

It was surprisingly fun to go back to basics and design simple stuff like buttons and sliders. Processing makes working with images pretty trivial so there seems to be huge potential for skinning all the components. Things like the menus and popup modal dialogs proved a little trickier, but that just means managing mouse and key events pretty tightly and maintaining a keyboard focus and mouse capture system. Of course, this allows you to tab between components and use keyboard control for most things.

Again, it's the end of the weekend so work is looming. I'll try to get back and describe more next weekend.

Your rating: None Average: 4.9 (14 votes)

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Very nice Andrew. I wish I

Very nice Andrew.
I wish I could be as productive as you during my holidays...
What is the best option for capturing the image/results?
Off the subject - but for some reasons,this applet reminded me of it - whatever happened to the inter-active geometry-editing function within the 3D window of the SolarTool? That never made it across Ecotect for some reasons...
Best,
Olivier