Load Contour Shader to Identify Differences

Sample Projects and Use Cases > Use Case: Load and Compare Assets Dynamically > Dynamic Load 201: Build the Data Loading Logic > Load Contour Shader to Identify Differences

Now that you’ve built logic into your experience to load assets dynamically at runtime using a product ID, you need to add a shader to your experience. This shader will help identify differences between the loaded model and the tracked object.

1. Navigate to the Visualization view of your experience.

2. Click Visualization.js in the project tree. We’ll use the Model Loaded event as a trigger to activate the shader, ensuring it only initializes once the model has been fully loaded into the scene. For this use case, we’ll apply a bright green contour shader to highlight the model. Feel free to customize the color or experiment with alternative shaders to suit your design preferences or application requirements. As described in the Shaders topic, define the contour shader.

$scope.$on("modelLoaded", () => {

  $scope.view.wdg.dynamicModel.shader = "contour;lineR f 0;lineG f 1;lineB f 0;lineA f 0.5";
})

In the next section, you’ll start building the 2D user interface.

Was this helpful?