Category Archives: 3D

Messing with P5Sunflow

Cube Explosion

Ray tracing is the CG rendering technique used in Pixar movies and most other broadcast quality CG. Basically it bounces millions of virtual photons around the scene to simulate how objects reflect light and cast shadows on each other. This produces super realistic images at the cost of being very computationally expensive.

P5Sunflow is a Processing version of the SunFlow open source Java ray tracing implementation created by Mark Chadwick.

P5Sunflow produces images with creamy shadows and a solid sculptural feel that are quite different to anything you can achieve with most real-time 3D engines. Unfortunately rendering times are really slow. The videos below are overnight renders. I’d be interested to find out if there is some kind of ‘fake’ ray tracing that produces similar results quicker.

Click through to see the HD and downloadable QuickTime versions. These work well looped in QT.


Cube Wall from felixturner on Vimeo.


Sunflow Phase Towers from felixturner on Vimeo.

You can download the Processing sketch for the cube wall animation here. To use it you need to install the P5Sunflow library as described here. To run P5Sunflow you need to use the version of Processing that comes without Java, since it requires Java v1.5 and Processing comes with Java1.4.

Flash Player 10 3D versus Away3D

3d test

One of the most exciting new features of the new Flash Player is the native 3D support. I put together a couple of demos to compare FP10′s 3D performance versus the ‘old-school’ approach, using the Away3D library (I didn’t have time to build a PaperVision example, but I imagine the performance would be similar to the Away3D one).

These demos display video and text on multiple 3D planes. Take a look and see what kind of frame rates you get.

Here are some observations based on the demos:

  • FP10 wins in terms of performance. This make sense when you consider that the 3D math is being handled internally.
  • FP10 wins in terms of SWF size (6k versus 110k). Away3D has to load in all the 3D code externally.
  • FP10 3D has no concept of depth sort. Depth sort must be handled manually. For simple scenes this is trivial, but once you get many polygons intersecting, depth sort can become a complex problem.
  • The FP10 perspective distortion looks a little odd to me. The plane seems to get bigger at the right and bottom of the view.

FP10 offers a very limited subset of the functionality offered by Away3D and PV3D (no cameras, complex objects, collada import etc), but for simple 3D scenes it gives much better performance. In the near future I imagine the PV3D and Away3D teams will incorporate FP10′s native 3D support to give the best of both worlds.

(Thanks to Keith Peters for his minimal components used here.)

Towards the Next Generation of 3D Visualization

desaxis

I love Flash – I’ve been using it for years and know most of it’s tricks. Now with papervision and away3D we have a some nice 3D APIs. While these are great, 3D in Flash is seriously lacking in rendering power. Once you throw a few hundred simple 3D shapes on the stage, your frame rate starts to plummet.

Flash is still the best choice for ubiquitous interaction on the web, but for 3D graphics, there are some better alternatives. Please note that I am not lobbying for native 3D graphic card support inside Flash (that didn’t work out too well for shockwave).

From my research so far, 2 of the most interesting apps for creating next-gen realtime 3D graphics are processing and vvvv.

PROCESSING

Processing has been around for a while and is gaining traction as a 3D visualization tool. Processing is free and cross-platform. The flickr processing pool shows the kind of stuff you can build with it. Since Sun updated the java preloader graphic to be cool and orange, we might even start seeing some all processing websites.

proccessing IDE

I’ve resisted learning processing for a while, but when Robert Hodgin generously released some of his source code I had the motivation to download and try it out. Surprisingly, processing comes with a nice, lightweight IDE. Each project is a sketch which is basically a folder containing simple text files. Processing has a number of libraries and examples for handling 3D graphics.

Lennyjpg is creating some beautiful work with processing:

...

As is Flight404:

VVVV

vvvv is a ‘toolkit for real time video synthesis’. It’s a crazy app built by some crazy german people. The tutorials are written with typical deadpan teutonic humor. It’s currently windows-only and free. Jitter is a similar cross-platform app.

The concept of vvvv’s UI is ‘patches’. Modules are laid out in a 2D space and patched together with virtual wires. The beauty of this paradigm is that there is no compilation – results are rendered in realtime as you tweak the patches. Since I come from a textual programming background I find this to be quite baffling, but maybe it’s good to have your head turned around now and again.

patches

Desaxismundi has been creating some fantastically beautiful pieces using vvvvv such as this deconstructed sphere:

and these:

desaxis

desaxis

TiltViewer Update

tilt grab

I just posted an update to TiltViewer. The main difference is that there is now a free version you can download and use on your own website.

The list of updates is listed here. Many of these updates are based on the great feedback that is posted in the TiltViewer-Pro forum.

TiltViewer-Pro customers are notified via email when there is an update. All 1.x updates are provided free of charge.

Yet Another 3D Ribbon

Sometimes simpler is better. This is a modified version of my last experiment with only one ribbon. Right-click to go full-screen. I added a nice glow filter plus some color tweening. It looks a bit like 3D graffiti or Japanese calligraphy. I think it would look good projected big on a wall, or as a screensaver. The code was retro-fitted to work with Papervision v1.7, since the v2 alpha does not give access to a DisplayObject3D’s sprites.

3D Ribbons Revisited

Ribbons

I’ve been playing with this 3D bezier code for a while now. I finally got some nice motion happening. Click and drag to rotate the space.

The last time I tried this, the ribbon was actually a 2D bezier curve that was then rotated in 3D. This time I got a hang of the math to create real 3D ribbons.

Source code is here and includes instructions for how to compile it. The code was compiled using Flex Builder 3 and Papervision 2.0 alpha ‘Great White’ rev 387.