Using WireFusion for 3D animation

Demicron recently released a Linux version of its WireFusion Web3D animation program, aimed at making animations easier for Web designers. With WireFusion you can make 3D objects spin or fly around or zoom in and out. You can design 3D worlds, where customers can move around through virtual show rooms. And you can make simple animations, such as a clock where the hands move and display the correct time. A quick look at Demicron’s animation gallery (with a Java-enabled browser) will show you what WireFusion can do.

While I frequently produce Web content, I don’t have much experience with animations. I found the WireFusion “object and wires” approach useful and worthwhile.

Put WireFusion on your laptop

Working with animations requires up-to-date and fairly stout hardware, but Linux (any version) can be a bit temperamental on very late-model hardware. Laptops can be even more troublesome, because of video driver issues, late-breaking changes to the kernel, and so on.

I’m happy to report that installing WireFusion on my HP5460 Athlon64 notebook with SUSE 9.2 64-bit Linux caused me no heartache whatsoever. My notebook has an nVidia GeForce 440 graphics chip with 64MB of memory. I had to go back to SUSE version 9.2 from 9.3 because the current nVidia driver doesn’t work out of the box with 9.3. The notebook also has 1MB L2 cache and 1GB of main memory. It worked great for creating, serving, and viewing my modest animation experiments.

WireFusion requires Java be installed on your system. You’ll also need a Java-enabled browser for Web site animation viewing. Using Konqueror as my browser headed off any fiddling around.

To get the software, go to the Demicron WireFusion download page and fill out the registration information. You can then download and un-tar the wf41.tar.gz file. The Install.txt file is a whopping 26 lines long. Installation amounts to switching to the un-tarred directory and running sh ./wf41.bin followed by ./Wire_Fusion4.1. The program was then ready to go.

Making WireFusion do things

The concept of WireFusion is pretty simple. Take some objects and arrange them in the WireFusion script window, add some “wires” to connect the object actions together, and then run the resulting Java applet to view.

Figure 1: The WireFusion main screen

To get a better idea of how this works, Figure 1 shows the WireFusion screen. The Folders pane lists the objects that are used in the animation. The center pane shows a graphical representation of the WireFusion animation in its native script form. The right pane displays library objects and tools you can use in creating an animation. The bottom center pane shows my animation of a clock, created from one of the WireFusion tutorials. I chose to use a JPEG rendered text string for the second hand instead of the GIF graphic used in the tutorial. I also created a JPEG smiley clock face (using Inkscape), for the background, instead of the tutorial suggested Omega watch face.

The result of my handiwork, following the tutorial, is shown in my Konqueror browser screenshot (Figure 2). I uploaded the .html file and associated Java applet directory to my Web server using gftp.

I was able to get a basic level of user interaction going, which amounted to resizing the clock face using a slider. The face grew from a line on the left to its full size by pushing the slider to the right. Getting it to grow in size from the center would require awareness of positioning, calculating scene dimensions, and triggering of events. Demicron has done a good job of creating the tools, but users will need to know the mechanics behind why things work. People that programmatically design interactive animated Web sites should be able to use the package right away.

While I was able to re-create the moving hand watch tutorial, mastering other techniques like zooming and spinning a 3D model around in sync with a mouse take some time and effort to learn. The tutorials I found on the company’s Web site didn’t really go over advanced topics very well. Some of the Demicron online tutorials also seemed to be works in progress or “coming soon.”

To fully use WireFusion, you’ll also need to be comfortable creating bitmaps, vector graphics, and 3D models. I personally like working with vectors objects more than bitmaps. I used Inkscape to create my clock smiley face and seconds hand, and exported the files as .jpgs. I chose Inkscape for its ease of use and vector capabilities. You could get the same results using the GIMP if you prefer bitmaps.

WireFusion imports VRML 97/2.0 standard files from tools like Blender, AutoCad, and Maya. Marketing types could take 3D models created in these packages and turn them into interactive sales pieces.

Figure 2: Konqueror view clock

Demicron also offers a couple of interesting add-ons.

The WF-Video program puts video onto your objects. One example on the Demicron site shows a spinning cube with a video clip of a Compaq commercial playing on its sides. On my laptop, the animation ran smoothly but the focus was a little soft.

Using the WF-MP3 add-on, designers can add MP3 audio to their sites and animations. Buffer size is adjustable so quality can be good even on a low-bandwidth connection.

Wrapup

WireFusion is available in several different models, depending on your needs and budget. The Linux version is a $399 commercial product, and the company provides 30-day free trial downloads. A boxed Linux set is in the works. Similar Web3D animation creation tools include Vizx3D and SwirlX3D, though both run on Windows.

WireFusion worked well for me in my modest review. Much more advanced animations would have a pretty high learning curve. Readers who already create 3D Web animations are probably knowledgeable enough to be productive after a short period.