With our new Grasshopper Plugin and the invention of sdTF a lot more data can be added to your models. This data can potentially be anything at all, in this case, we’ll look at how we can visualize primitive data. This can be expanded by yourself to much more complex data though. Attributes are key-value pairs that can be specified at every step of the node tree. The number and type of attributes does not have to be consistent over the scene tree. They can be completely freely chosen.

This is a feature that can be added via a separate CDN or npm-module on top of our viewer module.

To install it, simply add the CDN

<script src="https://viewer.shapediver.com/v3/VERSION_NUMBER/cdn-attribute-visualization/bundle.js"></script>

Note: Please select a fixed version by replacing VERSION_NUMBER with the same version as you have selected for the main viewer CDN.

or call

npm install --save @shapediver/viewer.features.attribute-visualization

Attribute Visualization Mode

The first thing to do is to switch on the correct rendering mode and initialize the AttributeVisualizationEngine. All cubes are now black, as we did not select attributes to display.

In the next demo, we focus on layers. Objects can have layers assigned and these layers can be used to change the opacity and the color of the objects assigned to them. Please note, that the color adjustment is only done as long as there are no attributes selected.

In our next step, we now visualize an attribute. We provide the key and type and select a visualization method. Via the call of api.createSDTFOverview() you get an overview of all the attribute in the current scene.


  • Attribute Data Collection
    Storing all attribute data and their geometry into a shared data structure. To showcase the structure and how to access data.