ウィジェットの操作 > 3D > モデル > シェーダー
シェーダー
* 
これらのシェーダーは、HoloLens デバイスではサポートされていません。
パラメータエントリ
次の形式を使用して、カスタムシェーダー値を Vuforia Studio シェーダーに渡すことができます。
example_widget.shader = shader_name; uniform_name uniform_type uniform_value
シェーダー
次のテーブルに、Vuforia Studio のモデルとモデルアイテムで使用可能な、基本的なシェーダーを示します。
シェーダー
説明
パラメータ
desaturate
モデルの色の彩度を下げるシェーダー。
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 でシェードされています。
flow
アニメーション化された UV 座標でテクスチャマッピングを使用して方向を示すためのシェーダー。
• speedU - テクスチャ座標の水平速度 (1 秒あたり 1 テクスチャ単位)。
• speedV - テクスチャ座標の垂直速度 (1 秒あたり 1 テクスチャ単位)。
• 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);
highlight
モデル全体または特定の部品をハイライトするためのシェーダー。
次のパラメータは、輪郭の色とサーフェス塗りつぶしを定義します。
• 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);
以下の例では、青いポンプの下半分がオレンジ色でハイライトされています。
planar_cut
モデルのジオメトリを直線または平面の形状に切り取るためのシェーダー。
以下のパラメータは、切断平面の位置を定義します。
• 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);
spherical_cut
モデルのジオメトリを球の形状に切り取るためのシェーダー。
• 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);
* 
spherical_cut シェーダーは、内部ジオメトリも存在する詳細なモデルに対してのみ有効に機能します。それ以外の場合、背面カリングは望ましくない結果をもたらす可能性があります。
xray
モデルの 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);
モデルの色を変更するために色が適用され、同時にシェーダーも適用されるため、シェーダーが適用されている箇所がハイライトされます。
contour
深度勾配に基づいて輪郭線を抽出するためのシェーダー。
* 
このシェーダは現在ベータ版であるため、その他のシェーダと同時に組み合わせないでください。異なるシェーダーを連続して適用するだけでも、予期しない結果が生じる可能性があります。
• 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);
wave_radial
円またはさざ波効果を表示できるシェーダー。
• offsetU/V - 波動円の原点
• surface(R/G/B/A) - 原点での波動の色
• waveLength - 連続する 2 つの波動のピーク間の距離
• 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);
これは役に立ちましたか?