From Grasshopper to WebGL

Hi everyone,

We know this is a commonly discussed topic, but we've haven't find any good answer so far :

How one could proceed to generate a WebGL interactive online 3D model (.js format) from a grasshopper 3D model, conserving all parameters (like sliders etc...) and being able to interactively edit it on the web ?

We heard about the following reference :

Chrysalis project, but it seems to have stopped/failed ??? http://fabripod.com/webstore/chrysalis/

The best lead we got so far would be to export in processing.js and export again in WebGL !

The only successful and best exemple of what we're after is the work of nervous system :

http://n-e-r-v-o-u-s.com/

Any ideas ?

Thanks in advance !

Replies to This Discussion

Permalink Reply by Ángel Linares on December 17, 2012 at 7:50am

The path was drawn...you only need to start to code :P

There is no easy/direct/ready-to-use solution for this problem in the present. If you find/code it I'll be happy to test ;)

Permalink Reply by Daniel Piker on December 17, 2012 at 8:32am

The problem here is that Grasshopper runs on top of Rhino...

So unless you want to rewrite all the geometry generation and transformation functions of Rhino and Grasshopper in WebGL, this isn't going to happen.

(Or just rewrite some small subset of them, and limit the GH definitions to those functions - which appears to be what that Chrysalis project was doing).

(see also David's answers here about controlling GH/Rhino on a remote machine)

Alternatively, I suppose you could potentially bake/save your output geometry for all the possible slider value combinations in your definition, and make a web interface for scrolling around the resulting multi-dimensional data set. I think speed could be problematic here though, even if you limited yourself to a few sliders with limited resolution.

Maybe if your output was a mesh, where only the position of the vertices varied-

Then you could just store a table of positions (and maybe have some multi-dimensional interpolation to get a smoothly varying result from a smaller set of sample outputs)

Permalink Reply by Luis Fraguada on December 17, 2012 at 9:24am

It's not exactly WebGL, but it is a good attempt to get data to the web. Ben was using SVG to create a workflow between GH and the web.

http://www.grasshopper3d.com/photo/gh-python-svg-arbitrary-attribut...

Permalink Reply by Andy Payne on December 17, 2012 at 9:55am

I think its possible. Panagiotis Michalatos recently wrote a little script which exports the mesh vertices into a proper JSON object, which can be read by a webgl program. We've been using it for a class that he is teaching at the GSD this semester. The data isn't 'live' in that it's a single export of the mesh vertices... but I don't think it would be impossible to figure out a workflow to update the vertex positions based on solution cycles. I don't really have much time to look into this in the near future... but perhaps early in Jan I can take a look.

-Andy

Permalink Reply by OUR NAME on December 17, 2012 at 10:35am

Thanks Andy !

In our preliminary attempts, we have written a obj. to json converte, which works fine. But we are now actually having troubles to update all the associative parameters that belongs to the grasshopper model without baking each potential object...

Please let us know if you find time to have a look at it more deeply. It will help us a lot, and probably everyone here in the near future !

OURgroup

Permalink Reply by Helena De Wolf on January 11, 2015 at 4:02am

Do you know where I can find that script from Panagiotis?

Thank you allot!

Permalink Reply by Floris on March 17, 2013 at 2:28am

Perhaps we can make a fork or adaption to Threenode.js

Example / demo here

It stores the geometry and process in a JSON object.

Permalink Reply by Suqi on April 2, 2014 at 2:32pm

hey, i have been solving this problem a year ago. basically, you could stream your mesh to website and using webgl to render your model in certain format, i did it in JSON. here is the video of the demo:https://vimeo.com/78568658

check directly at 3'34" , and later one there is a realtime slider simulation and a real time kinect scan simulation, all using the same technique.

Permalink Reply by Jonathan Sheridan on December 9, 2014 at 6:33am