Skip to main content
Skip table of contents

Attribute Visualization

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.

The complete API documentation of the attribute visualization module can be found here.

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

To install it call

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

or if you use the viewer via a CDN just can just get the SDVAttributeVisualization property from the window object.


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.


Additional CodeSandBoxes

  • Attribute Explorer
    Clicking on objects with attributes selects them and provides output in the console.

  • Attribute Explorer - Tower
    Clicking on objects with attributes selects them and provides output in the console.

  • Attribute Explorer - Material Options
    Clicking on objects with attributes selects them and provides output in the console. Material options are made accessible.

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

  • Min / Max custom restrictions
    To properly analyze the attribute data, the minimum and maximum values that are used in the visualization can be adjusted.

  • Attribute Interactivity
    Clicking on an object in the scene fetches the corresponding attribute data and displays this data.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.