Arbeiten mit Widgets > 3D > Modell > Shader
Shader
* 
Diese Shader werden auf HoloLens-Geräten nicht unterstützt.
Parametereintrag
Sie können das folgende Format verwenden, um benutzerdefinierte Shader-Werte an einen Vuforia Studio Shader zu übergeben:
example_widget.shader = shader_name; uniform_name uniform_type uniform_value
Shader
In der folgenden Tabelle werden die verfügbaren einfachen Shader für Modelle und Modellelemente in Vuforia Studio beschrieben.
Shader
Beschreibung
Parameter
desaturate
Shader, der die Farbsättigung des Modells verringert
saturation float [0-1]
Beispiel-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);
Im folgenden Beispiel wurde das gesamte Modell mit der Einstellung saturation=0 schattiert, sodass es in einer Graustufe angezeigt wird.
flow
Shader, der Textur-Mapping mit animierten UV-Koordinaten verwendet, um die Richtung anzuzeigen
• speedU – horizontale Geschwindigkeit der Texturkoordinaten (eine Textureinheit pro Sekunde)
• speedV – vertikale Geschwindigkeit der Texturkoordinaten (eine Textureinheit pro Sekunde)
• scaleU – horizontale Skalierung (wie oft das Bild in der Animation gerendert wird)
• scaleV – vertikale Skalierung (wie oft das Bild in der Animation gerendert wird)
• opacity– steuert die Opazität (0.0 = vollständig transparent, 1.0 = vollständig undurchsichtig)
* 
Durch das Zurücksetzen des Shaders "flow" werden Texturen im Modell und in den Modellelementen entfernt, auf das bzw. die der Shader angewendet wurde.
Beispiel-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, der das gesamte Modell oder einzelne Teile hervorhebt
Die folgenden Parameter definieren die Farbe des Umrisses und der Flächenfüllung:
• r float [0-1]
• g float [0-1]
• b float [0-1]
• a float [0-1] – Definiert die Opazität der Flächenfüllung. Der Umriss ist immer undurchsichtig.
• virtualMode– Bei Einstellung auf "wahr" rendert der Shader die virtuelle Oberfläche als Standardvolumenkörper und mit standardmäßigem Tiefentest-Modus. Dieser Parameter sollte auf "falsch" festgelegt werden, wenn das physische Objekt vorhanden ist.
Beispiel-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);
Im folgenden Beispiel wurde die untere Hälfte der blauen Pumpe orange hervorgehoben.
planar_cut
Shader, der die Modellgeometrie in Form einer geraden Linie oder als Ebene abschneidet
Die folgenden Parameter definieren die Position der Abtrennungsebene:
• clipCenterX float
• clipCenterY float
• clipCenterZ float
Die folgenden Parameter definieren die Orientierung der Abtrennungsebene:
• clipAxisX float
• clipAxisY float
• clipAxisZ float
Der folgende Parameter definiert die Dicke der verdeckten Kante des Modells in Raumeinheiten (Meter).
• clipLineWidth float
* 
Wenn Sie diesen Parameter nicht anwenden möchten, legen Sie ihn auf 0 fest.
Beispiel-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, der die Modellgeometrie in Form einer Kugel abschneidet
• clipCenterX float
• clipCenterY float
• clipCenterZ float
• clipRadius float (in Metern)
Beispiel-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);
* 
Der Shader "spherical_cut" funktioniert nur bei detaillierten Modellen, bei denen die interne Geometrie ebenfalls vorhanden ist, gut. Andernfalls kann das Entfernen der Rückseiten zu unerwünschten Ergebnissen führen.
xray
Shader, der eine Röntgenansicht des Modells sowie Innenteile anzeigt
• r float [0-1]
• g float [0-1]
• b float [0-1]
• a float [0-1]
Beispiel-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);
Es wird Farbe angewendet, um das Modell neu einzufärben, während gleichzeitig der Shader angewendet wird. Dadurch wird hervorgehoben, wo der Shader angewendet wird.
contour
Shader, der Konturlinien basierend auf Tiefengradienten extrahiert
* 
Da sich dieser Shader derzeit in der Beta-Phase befindet, sollte er nicht mit anderen Shadern kombiniert werden. Selbst die aufeinanderfolgende Anwendung verschiedener Shader kann zu unerwarteten Ergebnissen führen.
• lineR float [0-1]
• lineG float [0-1]
• lineB float [0-1]
• lineA float [0-1]
Beispiel-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, der einen Kreis- oder Welleneffekt anzeigen kann.
• offsetU/V – Ursprung des Wellenkreises
• surface(R/G/B/A) – Wellenfarbe am Ursprung
• waveLength – Abstand zwischen zwei aufeinanderfolgenden Wellenspitzen
• speed – Ausbreitungsgeschwindigkeit der Wellenfront (in Standardeinheiten)
Beispiel-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);
War dies hilfreich?