glTF 2.0 Material
For applications needing fine-tuning, the glTF 2.0 Material component provides advanced control over all the parameters of the Metalness / Roughness PBR workflow. A complete overview of this approach is out of the scope of our documentation, but you can find more information here.
Use the glTF 2.0 Material component along with the glTF 2.0 Display component to define materials including textures and all PBR properties supported in WebGL. On top of that, using those components creates fully standard glTF 2.0 assets which can be used in any other viewer supporting this format.
Material properties
The glTF 2.0 Material components includes the following inputs:
Input Name | Type | Definition |
|---|---|---|
Name | Text | The material name which will be stored in the standard glTF 2.0 name property. |
Base Color Factor | Color | The main color of the material (equivalent of the Diffuse color in Rhino, sometimes called Albedo). The alpha channel can be used to control opacity. |
Base Color Texture | URL of a texture map or a Grasshopper Bitmap object | Defines different color values over the geometry using the texture coordinates. Multiplied by the value of the Color input. The alpha channel can be used to control opacity. |
Metallic Factor | Number | This is a parameter in the [0..1] range. Defines how metallic the object looks by handling reflection factors. |
Roughness Factor | Number | This is a parameter in the [0..1] range. It introduces some blurring to the reflections that simulate imperfections. |
Metallic Roughness Texture | URL of a texture map or a Grasshopper Bitmap object | Defines different metalness and roughness values over the geometry using the texture coordinates. Multiplied by the value of the Metalness and Roughness inputs. The blue channel is used to define metalness, the green channel is used for roughness. |
Normal Texture | URL of a texture map or a Grasshopper Bitmap object | RGB values of this map affect the surface normals of pixel fragments. |
Emissive Factor | Number | This is a parameter in the [0..1] range. It defines how emissive (lighting) the material appears. |
Emissive Texture | URL of a texture map or a Grasshopper Bitmap object | Defines different emissive values over the geometry using the texture coordinates. Multiplied by the value of the Emissive Factor input. |
Text | One of OPAQUE (ignore the base color alpha channel), BLEND (use the base color alpha channel) or MASK (don’t show parts whose alpha value is below the Alpha Cutoff input). | |
Number | This is a parameter in the [0..1] range. Parts of geometry whose alpha value is below this input’s value will appear transparent. | |
Double Sided | Boolean | Specifies whether the material is double sided. If false, the material only applies to the parts on the positive normal side. |
Using textures
There are two ways to define texture inputs:
Image accessible through a public URL: the bitmap textures need to be uploaded in a public online location. Their public URL can then be used as a text parameter input to the ShapeDiver Material component.
Using the Grasshopper Bitmap object: Directly internalize images in the definition using the Grasshopper Bitmap primitive or create them using the various image components and the Squid plugin. Read more about the Image components here.
ShapeDiver’s caching system stores all processed solutions to speed up the computation time, read more here. This means also that any texture loaded from a public URL is cached and stays the same even if the file on the remote location changed. In order to update textures, a timestamp or version string can to be added to the query part of the URL, for example:
https://www.mywebsite.com/ShapeDiverTextures/texture.png?v=TIMESTAMP_OR_VERSION
The caching system then takes it as a different URL and updates the image on the server side.
Adjust materials after uploading
The preview in Grasshopper is only an approximation of the final online result. For that reason, it is not practical to define all material settings before uploading to the platform. We recommend to connect most material factors (roughness, metalness, opacity...) to number sliders. It will give some room for fine-tuning the rendering once the model is online.
Vertex colors
Mesh vertex colors are supported and will be displayed in ShapeDiver. If a mesh within an uploaded definition contains vertex colors, they will be used instead of the base color defined in the material components. However, the color textures can still be used in conjunction with vertex colors, both values being multiplied together for rendering.