Help me display and rotate data

July 11, 2011 7:20 PM

What's the best way to render and rotate data on a web page?

I'm trying to post a very general question here, no wrong answers. Any and all suggestions are welcome please.

Suppose I have some data, maybe it's just XYZ points, or maybe it's a triangular mesh, or some kind of surface.

What I need to do is to render this data on a web page and have the user be able to drag and rotate it to view it from all angles.

My question is what are some good ways to accomplish this? Suggestions of programming languages, programs, addons, plugins, whatever are all welcome, ideally free but licensable might also be ok if it's affordable.

If a web browser is problematic, then suggestions for other ways to get it to someone else and have them rotate it would be just as useful.

Also, as a related question, I seem to remember looking at car websites where you could view a car from all angles, though the few I just looked at didn't seem to have this feature. How does something like that work? It probably isn't applicable to what I need to do, but now I'm curious.

Thank you.

posted by cali59 to computers & internet (8 answers total)

The looking at cars thing was probably implemented by taking pictures of the car from all possible angles and using software to show the pictures in series as the user drags the mouse. Some websites used to use Quicktime to do this, but these days you can do it in Javascript without a plugin. Apple used to have examples of this type of thing on their website, but I just checked and they seem to have been removed.

Your problem is pretty specialized, so an existing solution might not exist, but you probably want to look into Javascript graphing libraries. There are a bunch to choose from at varying costs (some free) - I don't have any direct experience so I cannot recommend a particular one. The ones I have seen tend to be 2D only though.
posted by AndrewStephens at 7:40 PM on July 11, 2011

RaphaelJS would work for 2D data (example).
posted by Blazecock Pileon at 7:42 PM on July 11, 2011

Most websites with complex interaction today, or fancy animations use Flash from Adobe.

You'd probably want to make a movie with Actionscript (using Flash) of the data and rotations. Flash allows interaction, so the user could drag the object around.

Actionscript is a scripting language. That's where you'd have to write the data rendering code.
posted by minx at 8:31 PM on July 11, 2011

Generally, you're talking about a web visualization library of some kind here. These tend to be either JavaScript-based or Flash-based. While you can write the entire visualization system yourself, there are existing libraries of various complexity (some free and others commercial) that handle some of these tasks for you. The choice of library would depend, of course, on more details about what you wanted to produce, what technologies you wanted to use, etc...

Off the top of my head, the Google Visualization API comes to mind as a free, fairly flexible interactive charting package, though I'm not sure it really handles rotation quite like you seem to be looking for.
posted by zachlipton at 8:39 PM on July 11, 2011

Thingiverse uses WebGL to display interactice 3d meshes in the page. Example. (Works in FF4, Chrome, and the development builds of Safari and Opera)
posted by Ookseer at 10:34 PM on July 11, 2011

Let me preface this by saying I only have a vague understanding of some of what I'm about to say.

I was going to suggest RaphaelJS, too, but since you want to be able to rotate surfaces, that might not work. Any 2D drawing system will probably not do what you need. You'd have to keep track of which parts of the surface are closest in order to draw them last. If you draw the farthest-away surfaces last, they'd be blocking the close surfaces. Besides that, moving around parts of the surface that are blocked takes unnecessary computing. 3D drawing systems will have "hidden surface removal" algortihms that take care of this stuff (keep in mind the "vague understanding" caveat).

Ookseer mentions WebGL. Learning WebGL seems like a really good resource. You might try the lessons there, if you decide to go that route.

If you're comfortable with distributing your 3D models in pdfs, you might try Asymptote. Here's a gallery of pdfs with 3D models embedded. (If they look cheesy to you, don't be put off by that; Asymptote models don't have to look that way.) Click on a picture to get the pdf. I think Adobe's pdf reader is the only one that renders the 3D models. If you try this out, a word of caution. It seems that having more than a few models in one pdf tends to make it run slow and/or crash. Also, if you start looking into Asymptote, you might get the impression that you need to use LaTeX, but that's not the case. You might need LaTeX to get more than one model into a pdf, or to put other stuff in the pdf with the model, but it's not necessary if you're just putting a single model into a pdf by itself.
posted by -jf- at 11:48 PM on July 11, 2011

I just thought of another option. Processing or Processing.js. Here are two examples (requires Java plugin). Processing is fairly easy to learn, and a lot of people use it, so it shouldn't be too hard to get help if you get stuck.

If you want something that works in a browser, this might be a better option than WebGL (since only newer browsers will have WebGL) and Asymptote (since its models would have to be embedded within pdfs; also, I might have been wrong about not needing LaTeX).
posted by -jf- at 12:45 AM on July 12, 2011

The state of the art is to use html5 and some JavaScript, preferably a framework such as jQuery that adds liberal amounts of sanity to web coding.

But it really depends on what you are trying to accomplish.

jQuery is extremly powerful and has plugins to extend it to Mordor and back. It wouldn't surprise me the least if there was a plugin for generic animation wizardry. Here are other JavaScript frameworks that might be more suitable.

If everything else fails you can always use Flash, it's even more powerful but not as standards compliant as html5+js.
posted by Foci for Analysis at 4:59 AM on July 12, 2011