使用小组件 > 3D > 模型 > 着色器
着色器
* 
HoloLens 设备不支持这些着色器。
参数条目
可以使用以下格式向 Vuforia Studio 着色器传递自定义着色器值：
example_widget.shader = shader_name; uniform_name uniform_type uniform_value
着色器
下表介绍 Vuforia Studio 中模型和模型项可用的基本着色器。
着色器
说明
参数
去饱和
着色器 - 降低模型的颜色饱和度。
saturation float [0-1]
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);
在下例中，整个模型按 saturation=0 进行着色，因此以灰度显示。
工作流
着色器 - 使用纹理贴图和动画 UV 坐标来指示方向。
• speedU - 基于纹理坐标的水平速度 (每秒一个纹理单位)
• speedV - 基于纹理坐标的竖直速度 (每秒一个纹理单位)
• scaleU - 水平缩放 (图像在动画中渲染时的重复次数)
• scaleV - 竖直缩放 (图像在动画中渲染时的重复次数)
• opacity - 控制不透明度 (0.0 = 完全透明、1.0 = 完全不透明)
* 
如果重置流式着色器，应用了着色器的“模型”和“模型项”的纹理将被移除。
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);
突出显示
着色器 - 突出显示整个模型或特定部件。
下列参数定义轮廓和曲面填充的颜色：
• r float [0-1]
• g float [0-1]
• b float [0-1]
• a float [0-1] - 定义曲面填充的不透明度。轮廓始终是不透明的。
• virtualMode - 设置为 true 时，着色器将虚拟曲面渲染为标准实体，并采用标准深度测试模式。当存在实际物体时，应将此参数设置为 false。
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);
在下例中，蓝色泵的下半部分以橙色突出显示。
平面切除
着色器 - 按直线或平面形状，对模型的几何进行切除。
以下参数定义切断平面的位置：
• clipCenterX float
• clipCenterY float
• clipCenterZ float
以下参数定义切断平面的方向：
• clipAxisX float
• clipAxisY float
• clipAxisZ float
以下参数以空间单位 (米) 定义模型遮蔽边的厚度。
• clipLineWidth float
* 
若无需应用此参数，请将其设置为 0。
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);
球形切除
着色器 - 按球形切除模型的几何。
• clipCenterX float
• clipCenterY float
• clipCenterZ float
• clipRadius float (米)
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);
* 
球形切除着色器仅适用于包含内部几何的详细模型。否则，背面剔除可能导致结果不理想。
X 射线
着色器 - 显示模型的 X 射线视图，呈现内部部件。
• r float [0-1]
• g float [0-1]
• b float [0-1]
• a float [0-1]
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);
所用颜色在对模型进行重新着色的同时，也应用于着色器，从而突出显示着色器的应用位置。
轮廓
着色器 - 根据深度梯度，提取轮廓线。
* 
由于此着色器当前处于测试阶段，因此不应与其他着色器同时组合。即使依次应用不同的着色器，也可能导致意外结果。
• lineR float [0-1]
• lineG float [0-1]
• lineB float [0-1]
• lineA float [0-1]
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);
波浪径向
可显示圆或涟漪效果的着色器。
• offsetU/V - 波圈的原点
• surface(R/G/B/A) - 原点的波浪颜色
• waveLength - 两个连续波峰之间的距离
• speed - 波前的传播速度 (标准单位)
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);
这对您有帮助吗?