The ShapeDiver plugin was initially created as a material kit for facilitating and improving online rendering. It's not strictly necessary to use the plugin for uploading models on ShapeDiver and render them in the online viewer, but it is strongly recommended because it allows more advanced control over the rendering parameters and supports textures.

Without the plugin

Default material

Every geometry with the preview turned on in the Rhino viewport will be displayed in the online ShapeDiver viewer. For all components except Custom Preview and the ShapeDiver display components, the geometry will be displayed with a default material since no material information is contained in those components. In the online viewer, the default material is a bright blue that makes it easy to spot:

In most cases, you want to disable the preview for most components and only keep the display components with preview turned on.

Custom materials

In order to play with materials, one can use the standard preview components included in Grasshopper. Define a material with the Create Material component and preview how it looks directly in Grasshopper with the Custom Preview component.

This model will display the materials as expected after it is uploaded on ShapeDiver. We do our best to render the outputs of those components in a satisfying way. However, they will not make use of the advanced shaders of the online viewer using PBR (physically based rendering), and textures cannot be applied to them. This is the reason why we developed alternative components with more advanced possibilities. We recommend using them for all applications.

With the plugin

Overview

The ShapeDiver plugin contains components that can be used to replace Create Material and Custom Preview. Construct a material definition using one of the material components (glTF 2.0 Material, Preset Material or ShapeDiver Material) and send it to one of the display components (glTF 2.0 Display, ShapeDiver Display or External Display). See below an example using the ShapeDiver Material component and the ShapeDiver Display component:

The ShapeDiver display components let you define PBR materials that are optimized for viewing online, including the various textures used for those materials. For these reasons, we recommend to use them for any application where advanced rendering is needed.

Different approaches

The two main ways to define materials using the ShapeDiver plugin are the following:

  1. Define a material using the ShapeDiver Material or the Preset Material component and display using the ShapeDiver Display component.

  2. Define a material using the glTF 2.0 Material component and display using the glTF 2.0 Display component.

Each of these workflows have their pros and cons, depending on your application. We sum up the differences in the table below:

Reasons to use

ShapeDiver Material or Preset Material + ShapeDiver Display workflow

  • Faster material updates (the materials are stored separately from the geometry)

  • Easier to use if the textures are stored in the following way:

    • Separate metalness / roughness textures

    • Separate color and opacity maps

glTF 2.0 Material + glTF 2.0 Display workflow

  • Creation of self-contained glTF 2.0 assets that can be used in any viewer out of the box.

  • More flexibility for assigning different materials to different pieces of geometry for complex data structures (using the attribute system)

  • Easier to use if the textures are stored in the following way:

    • Combined MetallicRoughness texture

    • Opacity map stored in the alpha channel of the color map

  • Supports more material properties: (emissive textures, alpha mode, alpha cutoff, double sided…)

It is possible to use materials defined by the Preset Material component with the glTF 2.0 Display component. Please see this Note.

It is possible though not recommended to use materials defined by the ShapeDiver Material component with the glTF 2.0 Display component. Please see this Note.

Materials and the Viewer API

The API of our Viewer offers extensive functionality to change materials directly without involving computations of the Grasshopper model. This kind be used for quickly switching between materials in the frontend, e.g. for e-Commerce applications. Also it provides access to material properties that are not yet exposed in our material components. Please refer to section Materials for details about this.

An important hint related to this: Giving unique names to the material components in your model will make it easier to identify and replace materials using the viewer’s API.

Preset Material
ShapeDiver Material
glTF 2.0 Material
ShapeDiver Display
glTF 2.0 Display
External Display
Explode Material components