In previous posts, we imported interactive vector geometry and WebGL models into the browser using D3JS and ThreeJS. The new task in front of us is to enable animations and transitions to WebGL geometry. Applying live animations enables us to validate design concepts, and making them interactive adds more power to the punch.
Before jumping into the browser, let’s start with some background: a few months ago we created a tool in Grasshopper which allows linear interpolation of transformation matrices. This lets us demonstrate a range of processes from fabrication to building masses, and it’s been helpful for visualizing these transitions quickly. However, the final deliverable is a series of iterative renderings which takes a good deal of time and is ultimately static.
Using the same concepts as the transformation tool in Grasshopper, we can export any affine transformation matrix for each object in the ThreeJS scene and apply that transformation from the browser in real time. This allows the user to have immediate feedback, watching live animations from any particular view or scene setting.
The demo we’re using in this case is the handout we gave to visitors of the Octahedron. This was a laser-cut toy with each part of the Octahedron module laid out in a fashion similar to the final cut file. We made 100 of these (thanks to our fearless intern Nick Ames) and it was great to see people tinkering with them and creating completely different designs from the base module.
This demo shows some of the ‘design options’ from the laser-cut toy. The image below is a representation of the interface, with controls for view changes, transformations, and SVG to WebGL transitions. Click on the link to jump into the model, but be sure you’re using Firefox or Chrome. The mesh is drastically reduced to be web-friendly, but the interface may still take a minute to load:
As was mentioned in the previous post on transformation matrices with Grasshopper, there are definitely limitations to linear interpolation. ThreeJS allows for the decomposition of matrices into translations, quaternions, and scales; so that may be an option further down the road if we have the need for it.
And a final note about browser based interactivity: while direct geometry manipulation is possible in ThreeJS, it’s much more limited when compared to a program like Rhino. For this application, the design intent is therefore to make interaction purely demonstrative, allowing user options for only navigation and visualization (at the moment at least). To make the interface clean, we need to continue to focus on a simple design with minimized bells and whistles. There is still much more to implement into an interface like this, but the attitude we’re embracing is a minimal one which can lend itself well to generic implementation.