Hi, my name is Edwin Hernández. I’m a Grasshopper expert at ShapeDiver. In this blog post I will tell you why I switched from SketchFab in order to create product configurators for my clients.
How And Why I Started Using SketchFab
When I was asked to create a product configurator for a client, the first platform that came to my mind was SketchFab. I was introduced to it while I was studying Computer Animation at the SAE Creative Media Institute in Melbourne, Australia.
SketchFab is one of the best platforms to share and sell 3D models online. It has realistic rendering, scene settings, animations and sounds that make models look amazing and really brings them to life. Additionally, one can inspect the model at a technical level by checking its mesh, texture mapping, normals and other variations.
At that point, I had already used the platform for quite a while for creating static presentations of architectural models, furniture and other various projects. However, I had never used it to create a product configurator.
This is when I discovered that with SketchFab’s API, one can create configurators by changing materials, hiding or showing parts of the model, or even by moving and rotating geometry. The materials (or textures) can be as complex as a video file playing or even custom text that the user can input.
The other functions respect the hierarchy in the model. In other words, if a shape is “parent” of others shapes, its “children” are also affected. For example, “children” shapes move or hide according to their “parent”. This way, if one plans the structure of the 3d model, there can already be a level of logic when uploading files to SketchFab.
Example of parent-children geometry relation created in Cinema4D which could be used in a SketchFab-based configurator.
Finally, one can create camera movements, change lighting, scene settings, filters, annotations, animations and even create clickable and hoverable elements for more intuitive interactions in the scene.
My first attempt was to create a Night Table with options such as cornice style, base style, drawers style and material options. As long as the dimensions of the night table stayed the same, I could simply hide and show geometry (using the parent/children technique) to visualize the final result depending on the selected options. Here's the final result.
Things To Consider When Using SketchFab
Up to this level of complexity, I was pretty happy using SketchFab. Nevertheless, I started to wonder how far the product logic complexity could go:
With SketchFab there is no real "standard" way of doing this, though it can be simulated with different tricks. For example, if the product is only available in few predefined dimensions, all of them can live in the same scene and be hidden so that only the one selected by the user is shown.
This is efficient if there are only a few options to show. But once the amount of options grows, so does the data. As a result, the configurators become heavy and require a long time to load depending on your Internet speed. Some phones will not even be able to load them. Besides, managing the model hierarchy and logic would become
Another way to simulate size changes is by overlapping static shapes, generally boxes, and moving them away from each other. Let’s say we want a wall taking any size between one meter long and two meters long.
To make this possible, two boxes of one meter long, which represent the wall, need to be placed in the exact same position. Then one of them is moved via the API so that it simulates the wall getting longer. If the wall needs to change in length and height, then four boxes are needed as the other two need to be moved upwards.
Example of parametric wall created in Cinema4D which could be used in a SketchFab based configurator.
But, what if the wall could become as long as eight meters or more? Then we need to add more geometry to simulate these increments. On top of that, the logic to move the different pieces via the API is not ideal, especially in terms of maintenance. This means that any future changes, like adding a depth option to the wall, would require a huge effort.
Additionally, with this method, textures need to have a seamless pattern so that when the pieces get moved, they all look like one single unit.
I took this overlapping method to the extreme and created a complete shed configurator. It allows users to change the length of the entire building. I went as far as being able to change the dimensions of each door and window. Here's a quick video of this configurator in action.
Unfortunately, as I have mentioned before, I ran into many limitations. On the one hand, it was not possible to extend the building to any precise length. On the other hand, the model loaded quite slowly, as each option available in each wall had to exist at the same time and be hidden or shown depending on the user's choices.
In summary, even though the rendering in SketchFab looked fantastic, I needed a different solution in order for the Night Table, and any other complex configurator, to have a real product logic.
Finding A New Solution: Grasshopper + ShapeDiver
Fortunately, while studying Architecture at the Andes University in my native Colombia, I learned about a software called Rhinoceros 3D by McNeel and one of its plugins: Grasshopper.
Grasshopper is a visual programming interface that allows the creation of parametric models of any kind or complexity by using precise logic. This seemed to be exactly what I needed...
Same parametric wall I showed before, now created with Grasshopper.
For example, to create a simple wall, as the example above using Cinema 4D, a box can be created with specific parameters for the length, height and thickness of the wall. Another box can also control the texture map of the wall. These boxes can have any dimension and to update them it is just a matter of moving some sliders.
Now I only needed to figure out how to bring the power of Grasshopper and parametric 3D online, in the same way that SketchFab brings the power of visualizing 3D models that come from offline software.
As it turned out, in 2015 a company named ShapeDiver was founded with the vision of making online parametric models a reality. With their technology I was able to upload Grasshopper models and share them online.
Additionally, I realized they also offer an API, which gives similar options as the SketchFab one. One can create clickable and draggable elements, simple animations, and have full control over the parameters of the model and full control over the objects in the scene.
Things To Consider When Using ShapeDiver
One of the first differences that I could see between ShapeDiver and SketchFab was the quality of rendering and viewer capabilities. Indeed, the main goal of SketchFab is to offer a super realistic rendering and a complete viewer.
Therefore they have developed this area further than ShapeDiver, whose main developing power has focused on the tools that allow the creation of any kind of configurator with no restrictions. Despite this, with ShapeDiver I was able to get good results when adding the right combination of texture maps and a good set up.
Additionally, there are some features that are only available via ShapeDiver’s API, like adding or creating simple animations, which is something that can be controlled in SketchFab edition panels. However at ShapeDiver, developers are constantly releasing features that give more options to designers who don’t have web development knowledge.
For example, in one of the latest releases, ShapeDiver includes a new tab inside the viewer where designers can set up scene lighting to enhance their models.
Lighting Settings on ShapeDiver viewer v2.15
Model by Thys Kotzé from Pekka Parametrics
SketchFab offers post-processing filters, which help enhance models, however these filters are more relevant when working on animation or game design.
One big benefit that SketchFab has is the compatibility with different 3D software and file types. Currently, ShapeDiver is only compatible with .gh or .ghx files, which are the ones created in Rhinoceros 3D and Grasshopper.
The reason for this choice is that Grasshopper is one of the most complete, affordable and easy to use parametric software out there, with a big user community all around the world. Nevertheless, ShapeDiver’s backend was built with a flexible structure that will be able to handle other parametric software based on what the market requires in the future. If you want to learn more about ShapeDiver’s architecture, check out this post written by ShapeDiver's CTO.
One last thing to consider is that ShapeDiver’s technology relies on remote servers to compute the changes made to any model. As a result, the solutions are not displayed "live" but instead models update a few seconds or even milliseconds after an option changes.
For example, if the length of a shelf gets changed, the shelf will not get longer or shorter immediately, but rather it will wait for ShapeDiver's servers to send the new updated geometry. This is also the reason why ShapeDiver is much more powerful in terms of product logic and performance, as it allows for a model to have potentially billions of variations without having to load all of them at the same time in the browser.
Why I Choose ShapeDiver For My Product Configurators
As I explained above, if you have a big amount of options for a product, in SketchFab all those options have to exist in the scene at the same time. Sometimes hundreds of meshes need to be computed, therefore making the viewer very slow.
On the contrary, ShapeDiver just sends to the viewer the geometry that was requested. With each parameter change, a new set of geometry is created, eliminating any unnecessary geometry. Additionally, ShapeDiver has a smart cache system that stores (remembers) all options that have been previously computed, so the more a configurator is used, the faster it gets. This means that when someone around the world opens a configurator and requests certain changes that have been precomputed before, the servers will send the answer back to the user's browser in a matter of milliseconds.
Besides performance, with ShapeDiver you can create “intelligent” 3D models. Since ShapeDiver is based on an actual CAD software and not 3D design software, the models are full of information that can be extracted to be used in calculations, summaries and even production!
For instance, after a user settles on a result, precise data can automatically be extracted and used for anything from price calculations, shipping estimates, images with production details or even files that can be used for 3D printing (.stl files), laser cutting (.dxf and .dwg files) or CNC cutting (.gcode).
For example, if you have a table configurator, you could get a summary image with the different views and dimensions, or even a .dwg file with the nested parts with the correct layers and curve colors ready for production.
Image produced automatically using the Ares Table Configurator.
In addition to extracting data, ShapeDiver also lets users import data and files directly in the online configurator. ShapeDiver supports importing text files, images, .dwg files and .obj files.
With the text files, companies can import entire databases containing their whole product information and pricing logic. With ShapeDiver’s image processing tools, an image can turn from something simple to a dynamic composition with custom text, for instance.
Image before processing.
Image after processing.
Complex operations such as converting a 2D drawing into a complete 3D models can also be performed without much problem.
Converting the 2D drawing of a garage floor plan into a 3D structure.
Furthermore, the CAD software allows you to do complex computations such as checking collisions between objects, calculating if an object could fit in a space, checking if an object is inside a given space, intersections between different types of objects, etc. This means that all kinds of complex mathematical and geometrical calculations can be easily done by using the power of Grasshopper. If you know programming languages such as C# or Python, ShapeDiver is also able to handle them.
Finally, as I have mentioned before, the complexity of the product logic does not have limits. You can build a complete application for a simple pen, but also for a complex building or any other product.
How can this be possible? One of the main ways to manage limitless product logic is by using JSON Objects, which I've covered in the past, and ShapeDiver provides tools to process, read and construct such objects.
For example, let’s say you are building a configurator for a house which can have any number of doors or windows, and you want the user to be able to select the location, dimensions and design of each of those. In that case, a JSON data structure will be the ideal solution to manage all those parameters at the same time.
Which Platform Should You Choose For Your Product Configurators?
If you are a digital artist working in animation and game design, SketchFab is certainly your solution. If you have products with very few parameters or just material based parameters, and your models need to have as much realism as possible, SketchFab might also be for you. 3D Ads, for example, are a good use case for SketchFab’s technology.
However, if your models have a product logic that needs to be flexible, expandable, easily manageable and future proof, ShapeDiver is the best way to go.
Additionally, if you need to create user interfaces where the model is able to make geometrical and mathematical calculations so that the user gets feedback while using the configurator, the only way to do that is by using ShapeDiver.
Automation is another big factor that separates SketchFab from ShapeDiver, due to the capabilities of ShapeDiver for importing and exporting different types of files, making the use of external databases or the export of production data feasible.
Final Thoughts
As a conclusion, SketchFab offers the best rendering and scene tools to share 3D models in the most authentic and immersive way online. However, it was not really built with the end goal of creating configurators. Thanks to SketchFab's API, it is possible to give some parametric power to the models as well as interactive ways to explore them. Unfortunately, these parameters are quite restrictive. Those constraint will eventually complicate the development of any app in case it needs to be extended into many options or into a production or technical tool.
On the other hand, ShapeDiver was built from the ground up as a platform to create product configurators. The results can be used directly within the ShapeDiver app, or embedded in any website with the extended possibilities of the API.
ShapeDiver gives the freedom to plan any product logic, import and export data, make mathematical and geometrical calculations and much more. With these tools, it is possible to create everything from simple marketing configurators to complex technical ones. If you want to know more about the different types of product configurators, ShapeDiver's Head of Product wrote this great guide about it. Additionally, if you'd like to see how some of our clients use ShapeDiver to build amazing online experiences, make sure to check out our Success Stories section.
My Decision(s)
After I analyzed both of these great options, not only did I decide to move all my clients from SketchFab to ShapeDiver, but I was so convinced about the potential of ShapeDiver that one year ago I moved to Vienna, Austria to work directly as part of their team. Today, I work as a Grasshopper specialist within the team.
ShapeDiver's 2019 team (from left to right): Michael Oppitz, Luka Erkapic, Alex Schiftner, Ezequiel Lopez, Mathieu Huard, Mathias Höbinger, Edwin Hernández.
If you'd like to get in touch with me and discuss this or other configurator-related topics, make sure to add me on LinkedIn.
/f/92524/1423x870/5649aa2ea2/1.png)