What is ShapeDiver?

ShapeDiver is an online platform used by businesses and design professionals across various industries, including AEC, Automotive, Furniture, and Jewelry. It helps them create online tools such as 3D product configurators that automate their sales, design, or manufacturing workflows.

Our platform requires a specific type of parametric 3D file called Grasshopper. By using this file type rather than traditional static ones, we leverage the power of parametric design to make creating and maintaining a library of 3D product configurators simple and cost-effective.

We do this by automatically translating Grasshopper files into online applications that can be embedded into any external website and connected to external systems such as eCommerce platforms, like WooCommerce and Shopify, inventory systems, or databases.

When clients place orders via a ShapeDiver configurator, not only do they see in real-time an accurate visualization of the product, but the configurator can also generate the right production file or technical drawing because Grasshopper files can generate other file types such as PDF, STL, DXF, and GCODE, etc.

While ShapeDiver can be used to create more than just 3D product configurators, the process in all cases is very similar to the steps presented in this guide.

Grasshopp... what?

To emphasize the point above. ShapeDiver can only accept Grasshopper files, which are a specific type of 3D file created with software called Grasshopper.

Grasshopper is a visual programming software that runs within Rhinoceros 3D, a computer-aided design (CAD) application. It allows users to create algorithmic designs (basically, rules) and automate repetitive tasks without having to write code in a traditional text-based language.

Grasshopper files have traditionally been difficult to share or operate for non-technical stakeholders. Therefore, ShapeDiver was created with the goal of making them easier to share online and even to embed them on websites. This results in powerful yet cost-efficient 2D and 3D online applications that have traditionally been very expensive and complex to build, as they require geometric logic to be hard-coded using libraries such as three.js.

You can think of ShapeDiver as the "YouTube for Grasshopper files." Just like you'd upload a video to YouTube to easily share it with a wide audience via the Internet, the same way you can upload your Grasshopper files to ShapeDiver. This way, instead of sending files via email and risking your intellectual property, you can have them securely hosted online while we handle the rest. Then, just like countless people can watch a YouTube video simultaneously, multiple users can interact with your Grasshopper files at the same time, all without needing specialized software or expertise in Grasshopper.

If you're new to Grasshopper, we recommend taking a look at this section to get a better understanding.

Who is this guide for?

This guide is intended for businesses in any industry looking to solve various challenges by creating online 3D configurators with ShapeDiver. Whether you aim to streamline time-consuming sales processes or automate the generation of production files for custom orders, ShapeDiver could be the solution for you. We'll walk you through the three steps needed to launch your first online tool. Let's get started!

Step 1: Creating the Right Grasshopper File

As mentioned above, ShapeDiver operates only with Grasshopper files. Therefore, the first step for creating 3D product configurators using ShapeDiver is to create the right Grasshopper files according to the products you want to offer on your website. These files will be the foundation of your online configurators, powering all their geometry and production logic. Therefore, they must follow the guidelines and best practices shared in our documentation and video tutorials for the best results.

Grasshopper files are created by computational designers. If you don't know how to create a Grasshopper file, or your company doesn't have access to computational designers, don't worry! You have several options to get started:

a) You can learn Grasshopper yourself by watching tutorials on YouTube or searching for guided online courses. This is by far the most “affordable” way of creating your Grasshopper files. However, depending on your CAD design experience, it could take some time to master Grasshopper to the level needed to create a file compatible with ShapeDiver.

b) Another option is to hire a freelancer. Grasshopper is widely popular, and plenty of freelancers would gladly use their skills to help you build your Grasshopper files. However, you are responsible for finding the right computational designer. The quality of the files will depend on this expert following all of our guidelines and best practices. This option can also be quite affordable, but it might also take time if your freelancer is unfamiliar with ShapeDiver or if you have to go through multiple ones before finding the right one.

c) Finally, you can reach out to our team to build these files for you. Since 2017, we have assisted multiple companies in different industries with creating the right Grasshopper files to meet their objectives. We offer Grasshopper professional services, including optimization, consultation, and full development. If you need to get your Grasshopper files right on the first try and time is of the essence, our team is here to help. We have more information on Our Professional Services page, so reach out if interested.

In general, creating one Grasshopper file for each product is recommended. However, depending on the number and type of products, you may want to merge multiple products into a single Grasshopper file or use multiple Grasshopper files for a single highly complex product (this makes debugging far easier!). It's important to have a clear strategy in place before you start developing these files, as the approach may vary from business to business. If you're unsure how to approach your specific use case, we offer consultation services, so feel free to reach out if you need qualified guidance.

Please note that this is the most important step in this whole process! If your Grasshopper files are slow, buggy, or don’t render properly, this will affect your 3D product configurators with ShapeDiver. In other words, the end result will only be as good as the initial input!

With the Grasshopper part out of the way, the next step is to choose the right ShapeDiver plan for your project.

Step 2: Choosing the right ShapeDiver plan

Now that you have at least one Grasshopper file ready, it's time to host it online. That's when ShapeDiver comes into play. Native Grasshopper files can only be created and used on a computer running Rhinoceros 3D, which limits their accessibility and utility. But if you host them online using a platform like ShapeDiver, anyone can access the power of these files and benefit from them, yet the IP remains safely protected by our system.

While you can start testing your Grasshopper files with a Free plan (you can create one here), you'll find that you won't be able to use some key features, such as scripted components, import/export data, or embedding your models on external websites. In this case, you'll need to start a trial of any of our paid plans.

We offer different options according to your website integration requirements, Grasshopper file complexity, and predicted monthly usage of the 3D product configurator on your website. Our Pricing page has a comparison table that summarizes each plan's features, which can be useful when deciding between two or more options.

We have five different plans available. This guide will focus on three of our most popular ones: Designer, Designer Plus, and Business. They are part of a shared server system based in Frankfurt, Germany, which means that all Grasshopper files are stored and processed in that location. This system's performance and availability are shared between all of our ShapeDiver users to ensure subscription costs are as low as possible.

If you're interested in learning more about our two other higher-end plans, Business Plus, and Business, our sales team will happily schedule a video call with you and your team.

Designer Plan | from €49/month

The Designer plan is our most affordable offering, starting from €49/month billed yearly. It's usually the right choice for early entrepreneurs or small businesses with tight budgets or dipping their toes into 3D product configurators.

This plan includes iframe embedding, a very simple way to integrate our 3D viewer and standard UI into your website, including the ability to generate data such as technical drawings, production files for CNC or 3D printing, and visualization of geometry in Augmented Reality.

The two most important restrictions to pay attention to with this plan are the computation time, up to 10 seconds, and the lack of any API access, which means online configurators created with this plan can not connect to external systems or have custom user interfaces.

Nonetheless, this is still a great option for those businesses wanting to test their MVPs before deciding to make a bigger investment down the line.

Some great examples of clients using this type of plan are:

- Interstate Brick | AEC

- Web Shaping Bay | Surfboards

Designer Plus Plan | from €199/month

The Designer Plus plan starts from €199/month, billed yearly. It includes all of the features offered in the Designer plan, plus Viewer API access, larger file size export limits, and 2 seats (please consult our FAQ section on our pricing page to learn more about seats).

Our Viewer API is the perfect solution for those businesses who need a custom frontend for their 3D product configurators or to connect their models to external systems, such as eCommerce platforms like Shopify or WooCommerce. Additionally, it allows the creation of advanced interactions with our viewer, such as clickable and draggable elements, which greatly increases the overall UX of an online configurator.

We have plenty of documentation on this API, plus an in-depth video tutorial series. Needless to say, you'll need at least some web development knowledge to truly make the most out of our Viewer API. If you need help in this area, we recommend looking for a local web developer with knowledge in JavaScript, TypeScript, HTML, CSS, etc., or browsing through our recommended Web Development Partners page.

The main constraint to pay attention to with this plan is the computation time, which is still kept at up to 10 seconds, just like the Designer plan, although it can be increased to up to 30 seconds if needed (please consult our pricing page for more information).

Some great examples of clients using this type of plan are:

- Ecale | AEC

- Aectual | Interior Design

Business Plan | from €499/month

The Business plan is the top-of-the-line offering within our shared server system and starts from €499/month billed yearly. It includes all features offered in the Designer Plus plan, plus access to a second API called Geometry Backend API, up to 30 sec. of computation time by default, private technical support (instead of the Forum support included with other plans), bigger Grasshopper file sizes, bigger import and export sizes, 5 seats, and more.

The key feature of this plan is the inclusion of our Geometry Backend API. Unlike our Viewer API, which requires an active viewer session to communicate with your Grasshopper files in our servers, this advanced API allows your web development team to build more complex workflows by directly communicating with your Grasshopper files hosted in our servers without having to go through an active (opened) viewer. If you or your web developer believe your online application requires this API, you can check out our documentation and this video tutorial.

Some great examples of clients using this type of plan are:

- Re:Ukraine Villages | AEC

- Dish | Kitchen Design

For a more detailed look at our prices and features, including our Enterprise plan, please check our Pricing page, including our FAQ at the bottom of the page, as it explains important concepts such as monthly credits, seats, and support.

Now that you’ve chosen the right ShapeDiver plan and your Grasshopper files are hosted online, the third and final step is to integrate your models into your website.

Step 3: Integrating Everything into Your Website

Before you can successfully complete a ShapeDiver-powered 3D product configurator, the last and final step involves embedding our viewer (and your models!) into your website and, if needed, connecting it to a custom front-end and/or any other external systems. Please note that depending on the type of integration you need, you might need the help of a web developer.

iframe Embedding

If you choose iframe embedding, a feature included with all paid plans, integrating your models into your website is as simple as copying and pasting the automatically generated embed code of any of your ShapeDiver models. It can literally be done in under 1 minute. Our documentation includes a section dedicated to this type of embedding, so please review it carefully in case you're interested.

Direct Embedding

If you choose direct embedding, included with Designer Plus and above, you or your preferred web development team will use our Viewer and/or Backend APIs to create the perfect (and custom!) integration. This includes advanced concepts like animations and clickable elements, plus connecting your models to:

- A custom frontend

- An eCommerce platform like Shopify, WooCommerce, Prestashop, etc.

- Inventory systems and other types of databases

Our documentation includes dedicated sections for our Viewer API and Geometry Backend API & SDKs, so send these resources to your web development team.

If needed, our team can take over some of the more advanced API-related tasks, such as draggable and clickable elements, so your team can focus on the website development aspect of your project. For more information on this, please refer to the API Development Services on our Professional Services page.

As mentioned previously, we provide plenty of video tutorials and documentation covering how to use our various tools properly, so make sure you and your team thoroughly explore these resources. When in doubt, use our Support Forum to receive qualified and cost-free assistance from our development team.

Takeaways

In conclusion, building an online 3D product configurator with ShapeDiver is an excellent option for those businesses that want to keep control of the development process and move at their own pace, especially if you already have Grasshopper knowledge and/or web development resources. These online applications can help automate different processes, such as sales, design, or manufacturing, by leveraging the power of parametric design via Grasshopper.

On the other hand, if your business needs help with Step 1 or Step 3 in this guide, it's relatively easy and affordable, compared to alternative technologies, such as three.js, to find a professional willing to help you (including ourselves!).

To have a complete overview of our different plans and professional services, check our Pricing page. If you want to discuss a project with our team, use the contact request form on our website, and our sales team will be happy to schedule an introduction call with you.