Find solution
Are there any Java client libraries for OpenSocial?

Gleaming the Cube: displaying a 3-d box of perspective-transformed bitmaps using client-side web technologies?

  • 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? 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?) (2) Now with more AJAX! I could always write some unholy mess that generates a series of frames for the cube in various states of rotation on the server side, and some javascript that dispays them on the client side. However, this option makes Java applets start to sound sensible. (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!

  • Answer:

    Java actually has a 3D library, but it's probably overkill for this sort of application. You could probably get away with using double-buffering and the AWT package. http://www.soi.city.ac.uk/~dcd/ig3/s4pol1/java/CubRot2.java.pr should get you started. :)

weston at Ask.Metafilter.Com Visit the source

Was this solution helpful to you?

Other answers

to be more exact, take a look at http://www.proce55ing.net/learning/examples/rgbcube.html and set the color data points along some vertex grids for each face. so, read out each pixel's color, and make it a vertex along that face's surface. Processing does the gradient heavy lifting for you, which will create the desired effect.

potch

Do you mean something like http://incubator.quasimondo.com/flash/minority_cube.php - turn on your iSight or webcam by pressing the space bar - control the cube with your hands It is hilarious to show people on my MBP!

KimG

westion meets question, apparently.

potch

Westion: No problem, I love a challenge :) 1)I'm presumably working on it. It was a situation where for each cube face, you need to create a beginShape() endShape() pair. I also found that some of the transparent pngs can cause problems. If you stick with jpg files, or avoiding semitransparent pngs, you should be alright. 2) To get information from a session, I would call a php script in the loadImage() url that pulls session image data in.

potch

potch, your pointers have been so many kinds of awesome already that I hate to even ask any more questions, but I'm wondering if you know two things: (1) I can see in your example that you've grabbed several different images, but it looks to me like only s1 is getting used as the face of a cube. Is that correct? If so, do you know why it's happening? (2) It's obvious Processing can be used to create the effect I need. In order to merge the effect into the application, though, I'm going to need to somehow tell Processing about session information that will help it not only locate arbitrary images, but the specific arbitrary images a given user uploads. Do you know if I get the environment an applet would normally run in (and therefore the information an applet would usually have access to) for free in the context of the processing code I write? Or some other way to get session info in? This is really cool stuff. I'm glad I asked this question.

weston

All ie w/java and firefox on pc seem to be okay. I cobbled together an http://www.britely.com/imagecube. If you look at the source, you can see the urls i called. I you were to doan upload option, you could call those urls as php files that fed you the images(a la "www.smoo.com/getsideimage.php?s=2", assuming you stored the user's uploaded images in a unique directory or database or some sort of data storage jiggery pokery.)

potch

I've wanted an excuse to play with Processing for months, and this could be it. The only reservation I have is browser penetration for Java.... does anyone know if this is likely to be problematic when it comes to using Processing?

weston

As above: Flash 8 lets you do pixel graphics, but not 3D natively AFAIK. Java, Director and Processing do 3D natively, so you don't have to worry about the details of the 3D-2D transforms. Careful with Java in 3D - not all libraries are crossplatform.

cogat

jjg; it's not a "true" cube like you'd see if you were actually rotating a cube in front of your eyes. Take a look at the demo that potch linked to in comparison. Note that the "far" points of the cube appear to actually be in the distance, whereas malevolent's 2D trick cube appears more flat.

odinsdream

Load more

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.