Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

3d surface plot in browser

I have a python web server (cherrypy), and I want the user to be able to compute certain surfaces of this precise type. This is what I am able to generate from user input. He gives me some parameters, I compute my things, generate it as PNG on the server (matplotlib/numpy) and send it back through a JQuery load.

enter image description here

Problem is, this is pretty lame, and the surfaces can have various aspects. I'd like to be able to have an actual widget or so that would enable the user to rotate his surface...

My major constraints is that it has to work on IE 7 (8 would be cool as well), and allow the input of the data I compute somehow. I've seen many things on the web that only permit to input parametric functions. What I need is to be able to push in raw data triplets.

I've been looking at several things, Javascript would be the best but I failed to see something in JQuery or equivalents. I did look quite long around WebGL and started implementing stuff...from scratch... but way too long and random behavior in IE sometimes.

Maybe I'm missing out completely on something, on some technology or format that is compatible with my python, but I've spent days before adopting the temporary solution of plotting into PNGs.

Looking forward to reading you guys, Thanks in advance ;)

like image 955
BuZz Avatar asked Nov 04 '11 16:11

BuZz


People also ask

When would you use a 3D surface plot?

Use a 3D surface plot to see how a response variable relates to two predictor variables. A 3D surface plot is a three-dimensional graph that is useful for investigating desirable response values and operating conditions.

How do you plot a 3D surface in Python?

We could plot 3D surfaces in Python too, the function to plot the 3D surfaces is plot_surface(X,Y,Z), where X and Y are the output arrays from meshgrid, and Z=f(X,Y) or Z(i,j)=f(X(i,j),Y(i,j)). The most common surface plotting functions are surf and contour. TRY IT!

How do you plot a 3D graph in Origin?

To create a 3D graph from matrix or worksheet data, you select the data, and click the appropriate graph button on the 3D and Contour Graphs toolbar. Alternately, you select a graph from the Plot menu.


2 Answers

have the python script return the vertices/points of the 3D model in json format then use mrdoob's three.js to create a live, javascript-powered, 3D, webGL model directly in the browser.

Check out three.js here: https://github.com/mrdoob/three.js

(Look at the amazing examples there for inspiration, you can probably get a hold of mrdoob for insights also...)

EDIT: Oops, just noticed the IE7 requirement. No webGL for IE7 :(. You'll have to use Flash for 3D rendering. EIther that or have your python script create different angles of the view that can be loaded as images in the browser (for example the user clicks on the right button and the next image that loads is rotated at a certain angle to the right).

EDIT: Looks like IEWebGL will enable webGL for IE7!

EIDT: processing.js looks really nice for visualizations too!

like image 32
trusktr Avatar answered Sep 27 '22 18:09

trusktr


As far as I know, if you need IE7 compatibility, most of the available libraries in JS won't work for you - they require either canvas or SVG support. You're left with static images, Flash, or Java applets.

I would look into processing, which has good 3D support and can create Java applets for web use. See the 3D tutorials for good examples of interactive 3D surfaces.

If you wanted to get fancy, you could potentially also offer processing.js for browsers that support the canvas element. This would avoid loading a Java applet for those browsers, making for a slightly smoother UI and removing the Java dependency. You'd need to check for browser compatibility and then load either the applet code or the processing.js code. The upside of this is that you should be able to use exactly the same processing code in both cases.

like image 168
nrabinowitz Avatar answered Sep 27 '22 19:09

nrabinowitz