Working with Widgets > 3D > Model > Shaders
Shaders
* 
These shaders are not supported on HoloLens devices.
Parameter Entry
You can use the following format to pass custom shader values to a Vuforia Studio shader:
example_widget.shader = shader_name; uniform_name uniform_type uniform_value
Shaders
The following table describes available basic shaders for models and model items in Vuforia Studio.
Shader
Description
Parameters
Desaturate
Shader for reducing the model's color saturation.
saturation float [0-1]
Example JavaScript:
$scope.init = function() {
  // Desaturate shader:
  //   * saturation (float [0-1])
  let desaturateModel = $scope.view.wdg['desaturate-model'];
  desaturateModel.shader = 'desaturate; saturation f 0.0 ';

};

angular.element(window.document.body).ready($scope.init);
In the example below, the entire model was shaded with saturation=0 so that it appears in a gray-scale.
Flow
Shader for using texture mapping with animated UV coordinates to indicate direction.
• speedU—horizontal speed of the texture coordinates (one texture unit per second)
• speedV—vertical speed of the texture coordinates (one texture unit per second)
• scaleU—horizontal scaling (number of repetitions the image is rendered in the animation)
• scaleV—vertical scaling (number of repetitions the image is rendered in the animation)
• opacity—controls the opacity (0.0 = fully transparent, 1.0 = fully opaque)
* 
Resetting the flow shader will remove textures to the Model and Model Items where the shader was applied.
Example JavaScript:
$scope.init = function() {

let flowImage = $scope.view.wdg['flow-image'];
flowImage.shader = 'flow; speedU f 0.3; speedV f 0.0; scaleU f 1.0; scaleV f 1.0; opacity f 1.0';
flowImage.src = 'app/resources/Uploaded/flow_texture.png?edge=repeat';
};

angular.element(window.document.body).ready($scope.init);
Highlight
Shader for highlighting the entire model or specific parts.
The following parameters define the color of the outline and the surface fill:
• r float [0-1]
• g float [0-1]
• b float [0-1]
• a float [0-1]—defines the opacity of the surface fill. The outline will always be opaque.
• virtualMode—when set to true, the shader renders the virtual surface as standard solid and with standard depth-testing mode. This parameter should be set to false when the physical object is present.
Example JavaScript:
$scope.init = function() {

let highlightModelItem = $scope.view.wdg['highlight-modelitem'];
highlightModelItem.shader = 'highlight; r f 1.0; g f 0.49; b f 0.15; a f 1.0; virtualMode f 1.0';

};

angular.element(window.document.body).ready($scope.init);
In the example below, the bottom half of the blue pump has been highlighted with an orange color.
Planar cut
Shader for cutting away the model's geometry in the shape of a straight line or plane.
The following parameters define the location of the cutaway plane:
• clipCenterX float
• clipCenterY float
• clipCenterZ float
The following parameters define the orientation of the cutaway plane:
• clipAxisX float
• clipAxisY float
• clipAxisZ float
The following parameter defines the thickness of the occluded edge of the model in space units (meter).
• clipLineWidth float
* 
If you do not want to apply this parameter, set it to 0.
Example JavaScript:

$scope.init = function() {

  let planarCutModel = $scope.view.wdg['planar-cut-model'];
  planarCutModel.shader = 'planar_cut; clipCenterX f 0.0; clipCenterY f 0.26; clipCenterZ f 0.0; clipAxisX f 0.0; clipAxisY f -1.0; clipAxisZ f 0.0; clipLineWidth f 0.003';
};

angular.element(window.document.body).ready($scope.init);
Spherical cut
Shader for cutting away the model's geometry in the shape of a sphere.
• clipCenterX float
• clipCenterY float
• clipCenterZ float
• clipRadius float (in meters)
Example JavaScript:
$scope.init = function() {

  let sphericalCutModel = $scope.view.wdg['spherical-cut-model'];
  sphericalCutModel.shader = 'spherical_cut; clipCenterX f 0.05; clipCenterY f 0.05; clipCenterZ f 0.05; clipRadius f 0.4';

};

angular.element(window.document.body).ready($scope.init);
* 
The spherical cut shader only works well with detailed models where the internal geometry is also present; otherwise, backface culling might lead to less than desirable results.
X-ray
Shader for displaying an x-ray view of the model and revealing interior parts.
• r float [0-1]
• g float [0-1]
• b float [0-1]
• a float [0-1]
Example JavaScript:
$scope.init = function() {

  let xrayModel = $scope.view.wdg['xray-model'];
  xrayModel.shader = 'xray; r f 0.882; g f 0; b f 1; a f 0.5';

};

angular.element(window.document.body).ready($scope.init);
Color is applied to recolor the model while also applying the shader, thus highlighting where the shader is applied.
Contour
Shader for extracting contour lines based on depth gradients.
* 
As this shader is currently in beta, the shader should not be combined with other shaders simultaneously. Even applying different shaders sequentially may lead to unexpected results.
• lineR float [0-1]
• lineG float [0-1]
• lineB float [0-1]
• lineA float [0-1]
Example JavaScript:
$scope.init = function() {

  let contourModel = $scope.view.wdg['model-1'];
  contourModel.shader = 'contour; lineR f 1.0; lineG f 0.0; lineB f 0.0; lineA f 1.0';
  
};

angular.element(window.document.body).ready($scope.init);
Wave radial
Shader that can display circle or ripple effect.
• offsetU/V—the origin of the wave circle
• surface(R/G/B/A)—the wave color at the origin
• waveLength—distance between two consecutive wave peaks
• speed—propagation speed of the wave front (in standard units)
Example JavaScript:
scope.init = function() {
  let waveImage = $scope.view.wdg['wave-image'];
  waveImage.shader = 'wave_radial; speed f 20.0; waveLength f 0.03; offsetU f -0.5; offsetV f -0.5; sourceR f 1.0; sourceG f 0.0; sourceB f 1.0; sourceA f 1.0';
};
angular.element(window.document.body).ready($scope.init);
Was this helpful?