Utilizzo dei widget > 3D > Modello > Shader
Shader
* 
Questi shader non sono supportati nei dispositivi HoloLens.
Immissione dei parametri
Per passare valori di shader personalizzati a uno shader Vuforia Studio è possibile utilizzare il formato seguente:
example_widget.shader = shader_name; uniform_name uniform_type uniform_value
Shader
Nella tabella seguente vengono descritti gli shader di base disponibili per i modelli e i relativi elementi in Vuforia Studio.
Shader
Descrizione
Parametri
desaturate
Shader per ridurre la saturazione dei colori del modello.
saturation float [0-1]
Esempio di 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);
Nell'esempio riportato di seguito, l'intero modello è stato ombreggiato con saturation=0 in modo da essere visualizzato in una scala di grigi.
flow
Shader per l'utilizzo della mappatura di texture con coordinate UV animate per indicare la direzione.
• speedU - Velocità orizzontale delle coordinate della texture (un'unità di texture al secondo).
• speedV - Velocità verticale delle coordinate della texture (un'unità di texture al secondo).
• scaleU - Scala orizzontale (numero di ripetizioni di rendering dell'immagine nell'animazione).
• scaleV - Scala verticale (numero di ripetizioni di rendering dell'immagine nell'animazione).
• opacity - Controlla l'opacità (0.0 = completamente trasparente, 1.0 = completamente opaco).
* 
Se si reimposta lo shader flow, le texture vengono rimosse dal modello e dagli elementi del modello a cui era applicato lo shader.
Esempio di 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 per evidenziare l'intero modello o parti specifiche.
I seguenti parametri definiscono il colore del profilo e il riempimento della superficie.
• r float [0-1]
• g float [0-1]
• b float [0-1]
• a float [0-1] - Definisce l'opacità del riempimento della superficie. Il profilo sarà sempre opaco.
• virtualMode - Quando è impostato su true, lo shader esegue il rendering della superficie virtuale come solido standard e con la modalità di test di profondità standard. Questo parametro deve essere impostato su false quando è presente l'oggetto fisico.
Esempio di 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);
Nell'esempio riportato di seguito, la metà inferiore della pompa blu è stata evidenziata con un colore arancione.
planar cut
Shader per tagliare la geometria del modello sotto forma di linea retta o piano.
I seguenti parametri definiscono la posizione del piano di sezione:
• clipCenterX float
• clipCenterY float
• clipCenterZ float
I seguenti parametri definiscono l'orientamento del piano di sezione.
• clipAxisX float
• clipAxisY float
• clipAxisZ float
Il seguente parametro definisce lo spessore dello spigolo occluso del modello in unità di spazio (metri).
• clipLineWidth float
* 
Se non si desidera applicare questo parametro, impostarlo su 0.
Esempio di 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 per tagliare la geometria del modello sotto forma di sfera.
• clipCenterX float
• clipCenterY float
• clipCenterZ float
• clipRadius float (in metri)
Esempio di 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);
* 
Lo shader spherical cut funziona bene solo con modelli dettagliati in cui è presente anche la geometria interna. In caso contrario, la rimozione delle facce non esposte potrebbe portare a risultati non desiderati.
x-ray
Shader per visualizzare una vista a raggi X del modello e rivelare le parti interne.
• r float [0-1]
• g float [0-1]
• b float [0-1]
• a float [0-1]
Esempio di 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);
Il colore viene applicato per ricolorare il modello durante l'applicazione dello shader, evidenziando in questo modo i punti in cui viene applicato lo shader.
contour
Shader per estrarre le linee di contorno in base ai gradienti di profondità.
* 
Poiché questo shader è al momento in versione beta, non deve essere utilizzato in contemporanea con altri shader. Anche l'applicazione di shader diversi in sequenza può determinare risultati imprevisti.
• lineR float [0-1]
• lineG float [0-1]
• lineB float [0-1]
• lineA float [0-1]
Esempio di 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 in grado di visualizzare un effetto di cerchi concentrici o di increspatura.
• offsetU/V - Origine del cerchio d'onda.
• surface(R/G/B/A) - Colore dell'onda all'origine.
• waveLength - Distanza tra due picchi d'onda consecutivi.
• speed - Velocità di propagazione del fronte d'onda (in unità standard).
Esempio di 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);
È stato utile?