Interactive Template Editor


3DTin’s principal workflow is to provide you with lots of templates, which you can  customize and add to your 3D models. Obviously we asked ourselves, what can we do to make this set of actions as fluid as possible? Earlier this week we tried to improve it a little by introducing Template search and Geometry toolbar. Today we are releasing another big improvement to make template instantiation seamless – Interactive Template Editor.

Until now the template instantiation process has been like this: You get a form with a  static image of the template and rows of text boxes. You enter values and click ‘Add’. We do some basic validation checks on values and if they pass we tell the server to compute the resulting shape. If server finds ambiguity in input values during runtime, it returns error. You have to start back again. If server successfully computes the resulting shape, it will return it and you can add it to your model. If you find that the dimensions are not exactly right, too bad. You have to repeat the whole process again. I know, it sucks.

Once we had this epiphany, we decided to fix it. That was few months ago. In order to give you realtime feedback as you change the parameter values, we need to compute the shapes at great speeds. This involves performing boolean CSG operations on solid meshes. These algorithms are not famous for speed. Moreover we perform them on server. So even if we do them instantaneously by some magic, the network delay will spoil the realtime interaction. It was clear we had to do something totally new. We started to explore the academic research done in this field to solve this problem. Soon enough we found a solution.

A family of algorithms known as ‘Image based CSG’ came to help. The idea is to simulate the CSG boolean operations using graphics card facilities. The result is near realtime CSG computations. These algorithms have been implemented in libraries on desktop like OpenCSG. However these implementations are based on OpenGL API (i.e. desktop graphics card API), whereas WebGL is based on OpenGL-ES API (i.e. mobile graphics card API). To the best of my knowledge no one has implemented Image based CSG algorithms on OpenGL ES API so far. After studying the algorithms we found there is a good reason for that. The ES API does not provide all the necessary facilities that the algorithm requires. Therefore you cannot implement these fast CSG algorithms on WebGL with desired performance. But the prospect for realtime CSG computation was too promising for us to give up on this approach. We spent last two months hacking WebGL any which way we could to get the results. After two false starts and lot of hair-pulling we finally found the right approach and things started taking shape in late April. Today I am glad to present the culmination of that effort in the form of Interactive Template Editor.

You may have observed in the video above that in the new editor as you change the parameter values in text boxes the change instantly reflects in the preview. The preview is no longer a static image, but a canvas that we update with results of CSG computations. Furthermore if you enter some values that are basically valid, but violate conditions during CSG computations then we detect them on client side itself and show you an error indication. With this interactivity, you can visualize the effect of parameter changes before actually adding the resulting shape to the model. In contrast to the previous interface where you had to guess values for parameters and imagine in your mind how it might look after instantiation, now the result is computed and shown to you pronto. No more trial-n-error guesswork for making new shapes from templates.

The new interface has another advantage. Now you don’t have to necessarily know the meaning of various geometrical terms, e.g. Angle of Chord, Inner radius of cross-section and what not. Even if you don’t know what the parameters mean, you can quickly find out how they behave by scrolling their values up and down. This learn-by-doing attitude is a better approach to learning geometry than reading from the books. This will make 3DTin accessible to younger students who aren’t yet introduced to Geometrical concepts.

Real time feedback is of paramount importance in any creative tool. We were aware of this notion, but it was engraved on our minds after we learnt about Bret Victor’s philosophy and work on this subject. He is a great designer trying to revolutionize the way we teach and learn Science and Math. We have tried to apply his ideas in the context of CAD.

The interactive editor is available for all the 59 templates except for the two text based ones. Please give it a try and let’s know what you think.

This entry was posted in Uncategorized. Bookmark the permalink.

5 Responses to Interactive Template Editor

  1. David says:

    I am using Firefox 12.0 with WebGL enabled but when I try to add a geometry (quarter pyramid) I get the message “Advanced Geometry requires WebGL for correct rendering. Please use browser with WebGL support.” 3DTin looks perfect for my needs. I hope this can be resolved.

  2. jyro says:

    Hi David, if you visit this page can you see a rotating cube? If not then WebGL is not working in your browser despite any settings.
    You may have enabled WebGL, but your graphics card may not have sufficient features to support it. You may also try using Chrome to see if it’s an issue with graphics card or browser settings.

    • David says:

      No rotating cube. I updated the display driver, but still no joy. There’s nothing I can do for this old laptop but move on. I guess 3dTin is just one more reason I should make time for the inconvenient, but necessary, process of moving to another system. Oh, well…

  3. David says:

    Ok, I got the spinning cube working by forcing my way past the blocklist. I have had no crash problems related to AMD display drivers, though the extra load on the graphics hardware may increase the propensity of ye ol’ laptop to overheat and shutdown. At least I’ll get to try 3DTin now.

  4. Pingback: Geometry Builder (featuring CSG Subtraction) | 3DTin

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s