위젯 작업 > 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 - 질감 좌표의 수평 속도(초당 하나의 질감 단위)
• speedV - 질감 좌표의 수직 속도(초당 하나의 질감 단위)
• scaleU - 수평 스케일링(애니메이션에서 이미지가 렌더링되는 반복 횟수)
• scaleV - 수직 스케일링(애니메이션에서 이미지가 렌더링되는 반복 횟수)
• opacity - 불투명도 제어(0.0 = 완전 투명, 1.0 = 완전 불투명)
* 
flow 셰이더를 재설정하면 셰이더가 적용된 모델 및 모델 항목의 질감이 제거됩니다.
예제 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” 셰이더는 내부 형상도 있는 상세 모델에서만 잘 작동하며, 그렇지 않으면 백페이스 컬링으로 인해 원하는 결과를 얻지 못할 수 있습니다.
X-ray
모델의 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 - 두 개의 연속된 파동 피크 사이의 거리
• 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);
도움이 되셨나요?