Trabajar con widgets > 3D > Modelo > Sombreadores
Sombreadores
* 
Estos sombreadores no se soportan en dispositivos HoloLens.
Entrada de parámetros
Puede utilizar el formato siguiente para pasar valores de sombreador personalizados a un sombreador de Vuforia Studio:
example_widget.shader = shader_name; uniform_name uniform_type uniform_value
Sombreadores
En la tabla siguiente se describen los sombreadores básicos disponibles para modelos y elementos de modelo en Vuforia Studio.
Sombreador
Descripción
Parámetros
desaturate
Sombreador para reducir la saturación de color del modelo.
saturation float [0-1]
Ejemplo de 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);
En el siguiente ejemplo, todo el modelo se ha sombreado con saturation=0 para que aparezca en una escala de grises.
Flujo
Sombreador para utilizar la asignación de texturas con coordenadas UV animadas para indicar la dirección.
• speedU: velocidad horizontal de las coordenadas de textura (una unidad de textura por segundo)
• speedV: velocidad vertical de las coordenadas de textura (una unidad de textura por segundo)
• scaleU: escalado horizontal (número de veces que se crea una representación fotorrealista de la imagen en la animación)
• scaleV: escalado vertical (número de veces que se crea una representación fotorrealista de la imagen en la animación)
• opacity: controla la opacidad (0.0 = completamente transparente, 1.0 = completamente opaco)
* 
Al redefinir el sombreador de flujo, se quitarán las texturas del modelo y los elementos del modelo donde se había aplicado el sombreador.
Ejemplo de 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
Sombreador para realzar todo el modelo o piezas específicas.
Los siguientes parámetros definen el color del contorno y el relleno de la superficie:
• r float [0-1]
• g float [0-1]
• b float [0-1]
• a float [0-1]: define la opacidad del relleno de la superficie. El contorno siempre será opaco.
• virtualMode: cuando se define en true, el sombreador crea una representación fotorrealista de la superficie virtual como sólido estándar y con modo de prueba de profundidad estándar. Este parámetro debe definirse en false cuando el objeto físico está presente.
Ejemplo de 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);
En el siguiente ejemplo, la mitad inferior de la bomba azul se ha realzado en naranja.
planar cut
Sombreador para cortar la geometría del modelo en forma de línea recta o plano.
Los siguientes parámetros definen la ubicación del plano de corte:
• clipCenterX float
• clipCenterY float
• clipCenterZ float
Los siguientes parámetros definen la orientación del plano de corte:
• clipAxisX float
• clipAxisY float
• clipAxisZ float
El siguiente parámetro define el espesor de la arista obstruida del modelo en unidades espaciales (metro).
• clipLineWidth float
* 
Si no desea aplicar este parámetro, defínalo en 0.
Ejemplo de 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
Sombreador para cortar la geometría del modelo en forma de esfera.
• clipCenterX float
• clipCenterY float
• clipCenterZ float
• clipRadius float (en metros)
Ejemplo de 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);
* 
El sombreador spherical cut solo funciona correctamente con modelos detallados en los que la geometría interna también está presente; de lo contrario, la eliminación de la cara posterior podría dar lugar a resultados poco deseables.
x-ray
Sombreador para mostrar una vista de rayos X del modelo y revelar las partes interiores.
• r float [0-1]
• g float [0-1]
• b float [0-1]
• a float [0-1]
Ejemplo de 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);
Se aplica color para volver a colorear el modelo al mismo tiempo que se aplica el sombreador, lo que realza dónde se aplica el sombreador.
Contorno
Sombreador para extraer líneas de contorno basadas en gradientes de profundidad.
* 
Debido a que este sombreador es una versión beta, es aconsejable que el sombreador no se combine con otros sombreadores al mismo tiempo. Incluso la aplicación de varios sombreadores secuencialmente puede dar lugar a resultados inesperados.
• lineR float [0-1]
• lineG float [0-1]
• lineB float [0-1]
• lineA float [0-1]
Ejemplo de 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
Sombreador que puede mostrar efectos circulares o en cadena.
• offsetU/V: el origen del círculo de ondas
• surface(R/G/B/A): el color de la onda en el origen
• waveLength: distancia entre dos picos de onda consecutivos
• speed: velocidad de propagación de la parte frontal de la onda (en unidades estándar)
Ejemplo de 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);
¿Fue esto útil?