How to set material colours

Introduction

Would you like to display your geometry with different colours? Then set material colours by following these steps.

Prerequisites

• You followed the get started with the workbench guides.
• You followed the web viewer guide.

1. Define materials

To assign materials to the incoming geometries, the materials should be defined in the viewer.

• Define your materials with `kind: StandardMaterial``.

• Define the material colors with RGB codes.

  💡 To assign material textures, see the how to apply materials and textures guide.
  💡 To display gradient colors, see the how to show analysis results guide.

The configuration should look similar to the example below:

  my-viewer:
    kind: Viewer
    materials:
      blurple:
        kind: StandardMaterial
        color: [42, 75, 240]
      spicy-orange:
        kind: StandardMaterial
        color: [119, 173, 238]

2. Assign materials to the geometry

Materials can be assigned to the geometries in two ways:

• In the solution.yaml file, with the assignMaterials entity.
• In the Grasshopper definition with the Assign material component.

To assign materials in the solution.yaml file

• Use the assignMaterials entity under the viewer to model subscription.
• Use the incoming geometry name and assign one of the previously defined materials to it.

❗ The materials don’t need to be defined in the Rhino Grasshopper file, if this method is used.

The configuration should look similar to the example below:

  my-viewer:
    kind: Viewer
    materials:
      blurple:
        kind: StandardMaterial
        color: [42, 75, 240]
      spicy-orange:
        kind: StandardMaterial
        color: [119, 173, 238]
    subscribe:
      - kind: Model
        frame: my-home-frame
        source: my-model
        assignMaterials:
          sphere: spicy-orange
          box: blurple

To assign materials in the Grasshopper definition

• Connect the Assign material component to your geometry.
• Define the material name.
• Connect the output of the Assign material component to the Data output component.

See the image below for an example Grasshopper definition.

💡 If this method is preferred, the material names in the solution.yaml file and Rhino Grasshopper definition should match.

Example

For the rest of the configuration and an example Rhino Grasshopper file, see the basic example .

Configuration

See the viewerconfig configuration docs for more information.