Wednesday, September 4, 2013

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


  1. Have you got anything that you developed that we can tinker with?

  2. This comment has been removed by the author.

  3. Metal components are the one which has been the major part of things which we use in day to day office. These metal components are used for making products like seat belts, seat brackets and so on such that they can also be used for fixing repairs in vehicles.

  4. The 3DWH Revolution

    Please implement these things, because the people who control the warehouse aren't doing anything to stop all the spamming

    1. HIERARCHY implementation would make it so we could have multiple levels of monitorors:
    Top level: Administrator (can delete models, collections, ratings, and reviews, can block users, and have direct access to contacting the modeler to alert them that their model/s are stolen, abusive, etc)
    Middle Level: Moderator (can delete ratings, can report models to admins, along with the same direct access to contacting the modeler as the admins)
    Bottom Level: Normal users (can report models and collections and ratings and reviews to moderators and administrators)

    2. A COMPLETELY REDESIGNED AND EASY-TO-USE SITE would be nice. The 3D Warehouse has been up since 2006, and the design has changed very little since. Maybe something to fit in with the design of A nice feature in the redesigned site would be tabs, so you can "tab" back and forth from an author's models, collections, and ratings/reviews. A "follow" button would allow you to follow a user you find good and you will receive an email or Google+ notification.

    3. THE ABILITY TO BLOCK USERS would make it so if there is a user who is purposely going after you (such as attempting to defame you, rating your models poorly for no reason, reuploading your models with derogatory comments towards them, degrading the model via reviews, etc.) you can go to their profile, click "block" and then they cannot see, download, review, rate or do anything else to your models. You could also set it so everyone can view it, but only certain people can download it, along with making it so only certain people CANNOT download it, such as someone who often steals your models and reuploads them without credit.

    OPTIONAL. MORE INTEGRATION WITH GOOGLE+ would be nice, but not one of the top priorities.

  5. With every passing day, there have been numerous trends emerging in the web development. It has become a huge task for both the designers and developers.

    Toronto web designer


You are welcome to contribute comments, but they should be relevant to the conversation. We reserve the right to remove off-topic remarks in the interest of keeping the conversation focused and engaging. Shameless self-promotion is well, shameless, and will get canned.