3D, three ways

As a result of some people wanting to display cave surveys on the web, I started looking at options for displaying 3D graphics in a web browser. I ended up implementing more or less the same thing in SVG, Flash and as a Java Applet. What we wanted was real time three dimentional rotation and translation of a set of points, surfaces and bitmaps and all these technologies seemed, at least on paper, capable of displaying this kind of data.

Before you all shout VRML, that seems to be lacking some momentum these days, and I guess it will take a few years for HTML5 to get wide spread uptake - although browser updating seems a lot mre frequent than it used to be.

Scroll down to see the three examples. The SVG and Flash versions use basically the same code, the Java example started out the same but has been much extended. The source is provided for all versions under the GPL, if you want to use this code under another license contact me. They all use quaternions for the rotations to speed things up and avoid the divide by zero issus (some times called "gimbal lock") when passing through 90 degrees.

So what is the conclusion? They all have advantages and disadvantages and it is really down to installed base for the plugin versus speed. SVG is widely installed but is only good for up to around 100 vertices. Java is not widely installed but can handle tens of thousands of vertices. Flash seems to be somewhere in between.

SVG - Scalable Vector Graphics

Here is the SVG example. Click and drag to rotate/zoom; Shift-Drag to rotate on other axes; Alt-Drag to Pan

The source svg file is HERE and you need this javascript file

SVG is natively supported in some browsers and is likely to have a a future because it is an open standard. The programming language for SVG is JavaScript and this proved to be a limitation. with tens of vertices it is ok but in the hundreds it starts to slow down too much (I'm not claiming the code could not be optimised further, but the limit will still be hit at some point).


Here is the Flash example, again click and drag to rotate

There are quite a few files for the flash version as each class seems to have to be in its own action script file (there may be another way - my ActionScript is pretty much non-existent). But I was impressed with Flex which meant I could do this with freely available software.

Here is a zip containing the source

The Flash version seems good for many hundreds of vertices (again it could probably be optimised) and for me, the programming language feels a bit more natural than JavaScript.

The Java Applet

You will need the Java Plugin (available here)

Right button drag to pan, Left button drag to rotate, scroll wheel to zoom in/out (you may need to click on the applet to give it focus before it responds to mouse commands)

The source for this is here

The Java version is capable of handling tens of thousands of vertices but Java, especially Java Applets do not have a very wide installed base. However for the original objective of displaying cave surveys it was decided to develop the Java version of the code because of it's ability to handle large numbers of vertices. As the project developed into displaying surface bitmaps, the ability to create threads in Java came in handy.