Teaching Dynamic Components to the web: a SketchUp summer research project

Hey there. My name is Brandon, and this summer I interned at SketchUp.

I attend the Colorado School of Mines and, as you might guess, I study computer science. Regardless of your major at Mines, all students are required to take a class on drafting. When I was offered a position on the SketchUp team this past spring, I was hesitant to believe I could accomplish anything in three short months. After all, it took me an entire semester to learn another 3D modeling program (which will remain nameless). Thankfully, SketchUp is as easy to use today as it was when I first opened it in middle school.

One of SketchUp’s most powerful feature sets are dynamic components, groups of geometry that have advanced functionality. To use a dynamic component today, you’d download one from the 3D Warehouse (or create it from scratch) and open it in SketchUp before you can change its parametric options. My summer research project was to investigate the feasibility of configuring those parameters from within a browser, before downloading the component to your computer. Another way of looking at it: can we teach a web browser to customize a dynamic component?

Here I am presenting a prototype of my research project to the SketchUp developer team

Last year, we unveiled the SketchUp Showcase which featured the prototype of a web-based model viewer that lets you to rotate and view models in a browser without having to install any additional software. It’s still a prototype, but this viewer offered me a basic way to display a dynamic component online, and then redraw it as parameters changed.

I spent a great deal of time making sure that when an input parameter changed, the browser displayed component transformed just as it would inside SketchUp. To pull this off, I thoroughly investigated how dynamic components work. This involved hours of playing inside SketchUp on my own and bugging numerous engineers for help. Reading through the source code didn’t hurt, either. This allowed me to properly rewrite the dynamic component functionality in JavaScript so that the behavior in a web browser would be consistent for users.

A screenshot of my research project in action: the configurator changes the material in a NanaWall dynamic component, then the component is re-drawn in a web browser

Proving that a web application could configure a SketchUp model was only one part of my research. I also had to investigate how to teach a web browser what a dynamic component is in the first place. You see, what our viewer prototype reads and displays is the geometry contained within a SketchUp file. But dynamic components are more than just geometry; they contain attributes like variable values and formulas.

To close this gap, I used SketchUp’s Ruby API to create an extension that exports the component along with its dynamic properties wrapped up in a separate JavaScipt object. The browser is then able to reunite the geometry from the exported file to its JavaScript counterpart, so the component can be parametrically manipulated. In a way, the extension acts like a moving truck. All the geometry gets packed and sent in one file, while all the attribute data gets sent in another. Everything ends up in the same place, albeit in pieces, and everything works just the same after being reassembled.

My extension exports a dynamic component to the web, packaging its dynamic properties separately so that they can be read by web browsers

This idea of using technologies that require no additional software fits pretty well with SketchUp’s development philosophy, and my research this summer hints at the potential of a SketchUp configurator for the web. For example, components could be viewed and modified on mobile devices, allowing people to share and collaborate more effectively. 3D Warehouse users might be able to manipulate components online, allowing them to find the right modeling asset even faster. Reporting tools could be built in to model viewers, allowing real-time cost analysis, helping designers keep projects on budget and on track.

There were many other highlights from my summer at SketchUp: helping launch SketchUp 2013, learning a ton about LayOut from architects and designers at the AIA National Convention in Denver, and mastering high-tech hardware configurations via our office espresso machine and 3D printer. All in all, I feel pretty lucky to have joined Trimble, and I’m curious to see what’s next from the minds behind SketchUp.

Posted by Brandon Rodriguez, SketchUp Web Intern