3D surface in browser

Question

I have a python web server (cherrypy) and I want the user to be able to calculate specific surfaces of this exact type. This is what I can generate with user input. It gives me some parameters, I calculate my things, generate them as PNG on the server (matplotlib / numpy) and send them back via jQuery download.

The problem is that it is rather lame, and surfaces can have different aspects. I would like to have the actual widget or so that the user can rotate its surface ...

My main limitations are that it should work on IE 7 (8 will be cool too), and allows me to enter data that I somehow compute. I have seen many things on the Internet that allow you to enter parametric functions. I need to be able to input raw data triplets.

I looked at a few things, Javascript would be the best, but I could not see something in jQuery or equivalents. I looked around WebGL for quite some time and started to implement stuff ... from scratch ... but sometimes too frequent and random behavior in IE.

Perhaps I completely missed something on some technologies or a format compatible with my python, but I spent a few days before making a temporary solution for building in PNG.

Looking forward to you guys, Thanks in advance;)

Answer 1

As far as I know, if you need compatibility with IE7, most of the available libraries in JS will not work for you - they require canvas or SVG support. You still have static images, Flash, or Java applets.

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

If you want some fantasy, you can also offer processing.js for browsers that support the canvas element. This will avoid loading the Java applet for these browsers, creating a slightly smoother interface and eliminating the Java dependency. You will need to check browser compatibility and then load either the applet code or the processing.js code. The surface of this is that you should be able to use exactly the same processing code in both cases.

Answer 2

return the python script tops / points of the 3D model in json format, and then use mrdoob 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 hold of mrdoob for insights ...)

EDIT: Oh, just noticed the IE7 requirement. No webGL for IE7 :( you have to use Flash for 3D rendering. EIther, or your python script creates different presentation angles that can be loaded as images in the browser (for example, the user clicks the right button and the next image that loads , rotates at a certain angle to the right).

EDIT: It looks like IEWebGL will enable webGL for IE7!

EIDT: processing.js looks very good for rendering too!

Answer 3

I was looking for something similar (outline graphics in JS) and came across one that looks like it works in IE6 (using excanvas): http://code.google.com/p/javascript-surface-plot/

It uses the Google visualization API:

 var data = new google.visualization.DataTable(); for (var i = 0; i < numCols; i++) { data.addColumn('number', 'col' + i); } data.addRows(numRows); var d = 360 / numRows; var idx = 0; for (var i = 0; i < numRows; i++) { for (var j = 0; j < numCols; j++) { var value = (Math.cos(i * d * Math.PI / 180.0) * Math.cos(j * d * Math.PI / 180.0)); data.setValue(i, j, value / 4.0); tooltipStrings[idx] = "x:" + i + ", y:" + j + " = " + value; idx++; } } 

so maybe you can load this using triplet data.

Answer 4

You want to use Pre3d. It does not use WebGL. He uses the canvas element. here is an example of this http://www.graphycalc.com/

Use explorecanvas to add canvas support in IE.