Use the glTF 2.0 Display component to assign materials defined with the glTF 2.0 Material component to geometry. The component takes two inputs: the geometry to display, and the material definition that is returned by the glTF 2.0 Material component. The material input is used as default material for all the input geometry, except when material attributes are defined (see below section).

Applying several materials with a single component

It is possible to use a tree of geometry along with a list of materials, in order to apply different materials to each branch of the input geometry tree . See this article for more information about this method: https://shapediver.atlassian.net/wiki/spaces/DOC/pages/1877999628/ShapeDiver+Display#Applying-several-materials-with-a-single-component .

However, the glTF 2.0 Display component also offers a more flexible and intuitive way to apply separate materials to each piece of geometry, and that without having to use any complex data structure.

Each geometric object can be assigned a material attribute individually, using the Construct Attributes and Inject Attributes components. Construct an Attributes object using the reserved attribute name “material” and use a glTF 2.0 material as the value, and then inject this attribute in the geometry:

When using this method, it is not necessary to connect any material to the Material input of the Display component. However, if a material is connected, it will be used as the default for all geometric objects which do not contain a material attribute. In the example below, the sphere gets a material attribute (blue material) while the cube does not get any attribute. Therefore the sphere is displayed with its assigned attribute while the cube is displayed using the fallback red material used as input of the display component.

Read more about the Attributes system here.

Attaching transformations

If the same geometric object is reused multiple times in the final display, it is more efficient to store the object only once and attach transformations to it. That way the online viewer only needs to receive the object once and read the attached transformations to display the other instances of the same object. Attach transformations using the Attach Transformations component before sending geometry to the glTF 2.0 Display component and the viewport will preview all instances of the object. Read more about attaching transformations here.

Using other materials

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 to use materials defined by the ShapeDiver Material component with the glTF 2.0 Display component. Please see this Note.

Details about the generated glTF 2.0 assets

The glTF 2.0 Display component outputs a single glTF 2.0 asset which embeds the materials that were assigned to the geometric objects as explained above. This happens in strong contrast to the ShapeDiver Display component, which creates a number of glTF 1.0 assets depending on the data provided, and does not embed the materials. This section explains the pros and cons.

These are the processing steps applied by the glTF 2.0 Display component when generating the glTF 2.0 asset:

Step

Description

Discretize

Surface-like objects are discretized to meshes.
Curve-like objects are discretized to polylines.
Point clouds are not supported.
Individual points are supported.

Group

Objects are grouped by the type of discretized geometry, and by the transformations attached to them. This allows to minimize the amount of data to be transferred.

Each group is given a name depending on its transformations. Group name no_transformations is used for objects without transformation.

Split

Objects which exceed the maximum vertex count of 65535 vertices are split into smaller objects which do not exceed this limit. This happens due to a limitation of WebGL on most graphics cards.

Create nodes

A flat list of nodes is created from the groups. Groups with transformations result in a node containing child nodes, one for each transformation.

Create asset

A glTF 2.0 asset is created from the nodes resulting from the previous step. A single top level node is used to apply a global transformation to all objects. This transformation rotates the +Z direction to the +Y direction, which is the “up” direction defined by glTF.

Right clicking the glTF 2.0 Display component allows to export the glTF 2.0 asset.

The resulting glTF asset can be used with the External Display component, loaded directly into the viewer using the glTF loader, or quickly previewed for debugging using the glTF monster.