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).

Related video explaining glTF and this component:

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: 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, 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.

You can also use a list of default materials, which will get matched to branches of the input geometry tree. See this article for more information about this method: ShapeDiver Display | Applying-several-materials-with-a-single-component.

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 object will be stored in the glTF and transferred only once, and 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.

Naming objects - Influencing the scene tree

You can assign names to objects, using the Construct Attributes and Inject Attributes components. Use the reserved attribute “name”.

Attaching names to objects allows you to influence how the scene tree will be constructed. Section glTF 2.0 Display | Details-about-the-generated-glTF-2.0-assets explains the details. You will also be available to identify the resulting scene tree nodes by their name when using the Viewer’s API.

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.

Scene tree

Using the name attribute which can optionally be attached to geometric objects, we sort objects into a scene tree of nodes. Example: Assume you feed 5 objects to the component, which have the following names:

  • parent.child

  • parent.child.grandchild

  • parent.child2

  • parent.child2.grandchild

  • parent.child (Note that this name appears twice!)

  • parent2

This will result in the following scene tree of nodes:

  • node parent (contains no objects)

    • node child (contains both objects whose name is parent.child)

      • node grandchild (contains the object named parent.child.grandchild)

    • node child2 (contains the object named parent.child2)

      • node grandchild (contains the object named parent.child2.grandchild)

  • node parent2 (contains the object named parent2)

Group

Objects are grouped by the type of discretized geometry, and by the transformations attached to them. This happens separately for each node of the scene tree, and 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, separately for each node of the scene tree. 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.

Right click the component

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.