IslaVisual
Ultima revisión 04/11/2012
SVG Filters: Uso de feSpecularLighting (Iluminación especular)
Existen numerosas técnicas dentro de SVG para diseñar y controlar la colocación de las fuentes de luz.
Muchos de estos efectos pueden ser simulados a través de la superposición de gradientes parcialmente transparentes, pero el uso de feSpecularLighting, bien utilizado, producirá efectos potentes y fáciles de utilizar para los que ya saben algo del mundo de los efectos de iluminación.
Esta primitiva ilumina una imagen utilizando el canal alfa como un mapa de relieve haciendo uso de la variable de cálculo de iluminación explicado en el modelo de iluminación de Phong. La imagen resultante es una imagen RGBA basada en el color de la luz que dependerá del color de luz de posición, la luz y la geometría de la superficie del mapa de relieve de entrada.
Esta primitiva de filtro supone que el espectador está en el infinito en todas direcciones y produce un mapa que contiene una parte de la reflexión especular como parte del cálculo de iluminación. Dicho mapa se debe combinar mas tarde utilizando el método arithmetic de la primitiva de filtro feComposite. Dado que produce mapas independientes podemos crear múltiples fuentes de luz para conseguir los efecto que deseemos.
El resultado de la imagen RGBA se calcula mediante:
Sr = ks * pow(N.H, specularExponent) * Lr
Sg = ks * pow(N.H, specularExponent) * Lg
Sb = ks * pow(N.H, specularExponent) * Lb
Sa = max(Sr, Sg, Sb)
| Variable | Descripción |
|---|---|
| Es la constante de iluminación especular. | |
| Es la superficie del vector unitario normal (una función de x e y que depende del gradiente de la superficie). | |
| Es la unidad vectorial a medio camino entre el vector unitario del ojo (lo que decíamos antes de que se supone que estamos en el infinito en todas direcciones) e y el vector unitario de la luz. E=(0,0,1) que es una constante. H = (L + E) / Norm(L+E) dónde L es el vector unitario de la luz. |
|
| Son los componentes RGB de la luz, una función de x e y en el caso de la luz del punto. |
A diferencia de feDiffuseLighting, la primitiva de filtro feSpecularLighting produce una imagen no opaca. Esto es debido al hecho de que el resultado especular (Sr, Sg, Sb, Sa) está destinado a ser añadido a la imagen. El canal alfa resultante es el máximo de los componentes de color, de manera que cuando la luz especular es cero, no se añade cobertura adicional a la imagen ni tampoco ese tono blanco destacado a la opacidad.
Los filtros feDiffuseLighting y feSpecularLighting a menudo se aplican conjuntamente.
Los atributos importantes de feSpecularLighting son:.
| Variable | Descripción |
|---|---|
| Esla altura de la superficie. Su valor por defecto es 1. | |
| ks. Es la contante de iluminación difusa del modelo de Phong. En SVG, esta constante sólo puede adquirir valores positivos incluyendo 0. Su valor por defecto es 1. | |
| Es el exponente para el término especular que cuanto más grande sea, más "brillo" producirá. Rango 1.0 a 128.0. Su valor por defecto es 1. | |
| Que representa el color de la luz. |
Para definir una fuente de luz se debe utilizar uno, y sólo uno, de los siguientes elementos secundarios:
fePointLight (Punto de luz)
La primitiva fePointLight se utiliza para realizar un efecto de luz como el que provoca el Sol.
La primitiva tiene como atributos x, y y z.
feDistantLight (Distancia de luz)
La primitiva feDistantLight se utiliza para realizar efectos de iluminación en la imagen para conseguir imágenes más claras.
La primitiva tiene como atributos azimuth y elevation.
feSpotLight (Haz de luz)
La primitiva feSpotLight se utiliza para realizar un efecto de luz tipo foco. Como la luz que emiten los focos en un concierto.
La primitiva tiene como atributos x, y, z, pointsAtX, pointsAtY, pointsAtZ, specularExponent y limitingConeAngle.
Filtro:
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- SIN DEFINICIONES NI FILTROS -->
<!-- IMAGEN ORIGINAL -->
</defs>
<image x = "0" y = "0" width = "100%" height = "100%"
xlink:href = "../../img/svg-filters/paisajes3d.jpg" filter="url(#feSpecularLighting)" />
</svg>
Elementos y propiedades de las primitivas fePointLight, feDistantLight, feSpotLight
Entre sus atributos tenemos:
| Atributo | Descripción |
|---|---|
| Son las coordenadas X e Y que representan el punto de origen de la fuente de luz en el sistema de coordenadas establecido por primitiveUnits en filter. Su valor por defecto es 0. | |
| Es la coordenada Z que representa el punto de origen de la fuente de luz en el sistema de coordenadas establecido por primitiveUnits en filter, suponiendo que, en el sistema de coordenadas inicial, el eje Z positivo sale hacia la persona que ve el contenido, y suponiendo que una de las unidades a lo largo del eje Z es igual a X o Y. Su valor por defecto es 0. | |
| Es la coordenada X hacia dónde está apuntando la fuente de luz. Su valor por defecto es 0. | |
| Es la coordenada Y hacia dónde está apuntando la fuente de luz. Su valor por defecto es 0. | |
| Es la coordenada Z hacia dónde está apuntando la fuente de luz, suponiendo que, en el sistema de coordenadas inicial, el eje Z positivo sale hacia la persona que ve el contenido, y suponiendo que una de las unidades a lo largo del eje Z es igual a X o Y. Su valor por defecto es 0. | |
| Es el valor del exponente que controla el foco de la fuente de luz. Su valor por defecto es 1. | |
| Es un cono de limitación que restringe la región en la que se proyecta la luz. Ninguna luz se proyecta fuera de ese cono. limitingConeAngle representa el ángulo que existe entre el eje de la luz del punto y el cono de luz puntual. Por norma general, esbueno que se aplique una técnica de alisado como anti-aliasing en el límite del cono. |
|
| Es el ángulo de la fuente de luz en el plano XY que representa la dirección. Su valor debe estar entre 0 y 360 grados. Por defecto, su valor es 0. | |
| Es el ángulo de la fuente de luz en el plano YZ que representa la dirección. Su valor debe estar entre 0 y 360 grados. Por defecto, su valor es 0. |
