Interactive Template Editor

TL;DR

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.

Advertisement