Building 3D Configurators with Grasshopper and Rhino Compute on Modelup's Platform

Our mission at Modelup is to deliver powerful, high-performance 3D configurators with exceptional user experiences. To achieve this, we’ve developed a versatile platform built on Rhino Compute, enabling Grasshopper to serve as the core geometric engine behind our configurators.

For most of our customers, we offer a complete solution that includes developing the product logic in Grasshopper and hosting the script in the cloud. However, if you’re already proficient with Grasshopper, you can use our platform to transform your scripts into dynamic web applications.

Follow along as we explain how it works. 🔍

Building Grasshopper Definitions with our Plugin

Each configurator in our platform is directly powered by a Grasshopper definition. These definitions consist of two key components: inputs and outputs. The inputs define the parameters users can customize on the web, while the outputs represent the results — whether that’s a visual 3D model, performance metrics, bill of material, 2D drawings, or something else entirely.

To streamline this process, we’ve developed a quite simple Grasshopper plugin. This plugin makes it easy to define inputs, outputs and design the user interface of the web configurator itself.

An example of a Grasshopper definition that powers a configurator. It uses the Modelup Grasshopper plugin (FormXP) to define inputs and outputs.

Uploading the Grasshopper Definition to our Platform

To upload Grasshopper files and handle other aspects related to the configurator app, we’ve developed a backoffice application. As a customer, you get your own backoffice account where you can manage everything in one place.

Here’s how it works:

Select your Grasshopper definition.
Upload the file - it usually only takes a second.
Navigate to your configurator, and it’s ready to use.

Since the process of developing configurator logic in Grasshopper is often iterative, updating is simple. If you find a bug or need to tweak the logic in the Grasshopper script, you can easily resubmit an updated file to reflect the changes.

Upload-demo Example of uploading a Grasshopper file in the Modelup backoffice app.

In addition to uploading your Grasshopper definition, the platform also allows you to customize various aspects of it. For example, you can adjust settings for the background, environment, and lighting.

Compute Performance is our Top Priority

We firmly believe that configurators should be enjoyable and engaging to use. If users have to wait several seconds for a response, for example when adjusting the value of a slider, the experience is ruined. To address this, we’ve built a high-performance system capable of computing Grasshopper definitions in the cloud within milliseconds, ensuring a seamless and responsive experience.

Performance Triggering computes with the chrome developer tools enabled. As you can see in the network trafic, most computs finish in about 100 ms.

We use a combination of smart techniques, such as byte streaming, an optimized protocol, and geometry instancing, to achieve the speed and efficiency required for a seamless experience.

Flexible and Dynamic User Interfaces

With our Grasshopper plugin, you can define dynamic and responsive user interfaces directly within Grasshopper. This isn’t limited to just sliders and value lists in a vertical stack - you can create UIs with tabs, stacked screens, icons, images, mesh highlight effects, and more without having to write a single line of code.

Dynamic UIs The layout of the control panel on the right is entirely defined in Grasshopper, without writing any code.

The system can also update the control panel during computations. For instance, the Grasshopper logic can show or hide certain parameters based on specific conditions, allowing for adaptable interfaces.

Tools and Features to Support Grasshopper Pros

Since we use our platform to create all our 3D configurators, we are also its biggest user. This drives us to constantly refine workflows and develop tools to ensure a smooth and efficient process. Some examples include:

A screenshot API for generating static images.
Direct preview of GLB files from Grasshopper.
Support for defining language translations and attaching info modals to inputs.

Tooling and additional services Example of developer tooling: web preview directly from Grasshopper.

We’ve developed best practices for working with Grasshopper, which we’re happy to share with our customers and partners. This includes everything from optimizing Grasshopper definitions for speed to organizing large scripts effectively. As a customer, you’ll get access to our expertise and guidance, ensuring your project is set up for success.

Another argument to work with us: We’re nice people ¯\_(ツ)_/¯

We don’t have pushy salespeople or investors to please. We’re simply nerds who are passionate about Grasshopper and its possibilities. This independence allows us to focus on what we think matters most: creating solutions that make sense for both us and our customers. Modelup is fully owned by its founders, who have spent their careers working with Grasshopper and building scalable web applications.

If you’re interested in using our platform to host your Grasshopper powered 3D configurator online, feel free to get in touch - we’d love to hear from you! ❤️