Gleaming the Cube: displaying a 3-d box of perspective-transformed bitmaps using client-side web technologies?
April 19, 2006 3:11 AM Subscribe
How would one create a web page showing a 3D rotating cube, with sides of the cube displaying arbitrary visitor-supplied images as their faces?
posted by weston to computers & internet (27 answers total)
So, obviously this is a multi-step process: user visits site, user uploads up to six images, then user sees rotating cube. Getting users to visit isn't my responsibility, so I'm not worried about that, and uploading images is easy, so I'm not worried about that. Generating the rotating cube, on the other hand, is somewhat unfamiliar to me, so that's what I'm looking for help on.
My initial thought was to feed the visitor-uploaded images to a Flash movie, which would then smoothly execute a few perspective-transformation tweens on them, creating the cube illusion, right? However, the somewhat experienced Flash developer on my team showed me that Flash won't do perspective transformations (or even stuff like skew, transpose, and rotate) on bitmaps -- it simply treats bitmaps like a special fill-pattern on a polygon, and transforms only the border. This seems like a serious limitation to me, and I'm surpsised that Flash has it, but we can't find a way around it at the moment. Can someone prove us wrong and point us to a working method?
(In fact, curiously enough, tools or code libraries that perform transformations on raster images in general seem to be thinner on the ground than I would have thought. I was thinking there'd be all kinds of free libraries that did everything from rotations/translations to crazy conformal mappings, when in reality I'm having trouble finding much that does something beyond shrinking or cropping or some work in the colorspace.)
We also looked at using a 3D tool (Swift3D) to accomplish the job, but it didn't seem to allow for us to pass arbitrary images adorn the sides of the final rendered cube. And I'm not sure that it's outputting anything more sophisticated than outputting the swf equivalent of an animated gif.
If Flash really can't do this, I'm considering:
(1) Java applets. Never been a huge fan of them, but if I recall correctly, the Java 2D API has facilities for doing affine transformations on raster images. Heck, maybe even some super spiffy 3D API that'd make this easy (anybody know?)
(3) SVG? VML? VRML? I don't know much about any of those, so I'm just sortof hoping a passing MeFite might know these well enough to comment on whether or not they have any suitability for this task. Preferably more than #2.
(4) Are there better 3D tools than Swift3D that could let us script the behavior of the cube and parametrize the images displayed on its side, and deliver in Flash? If perspective transformations on bitmaps are truly impossible, then I suspect this doesn't exist, but one can hope...
(5) Anything else people want to suggest. Up to and including "don't do it" (though the client has convinced me the visual would in fact really help in selling his product).
Finally... any general pointers to resources about transformations on raster images or otherwise using raster images in a 3d context are welcome!