Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 03/11/2012

SVG Filters: Uso de feDiffuseLighting (Iluminaciones Difusas)

Esta primitiva de filtro ilumina una imagen utilizando el canal alfa como un mapa de relieve.

El mapa de la luz producida por esta primitiva se puede combinar con una textura usando el operador arithmetic de feDiffuseLighting. Se pueden simular múltiples fuentes de luz mediante la adición de varios de estos mapas de iluminación antes de aplicarlo a una textura.

Las fórmulas, que aquí se utilizan, están basadas filtros de 3x3 y dichos filtros se aplican a las imágenes remuestreadas. Puesto que operan o funcionan en pixeles, dichos filtros resultan ser independientes de la resolución. Para hacer que feDiffuseLighting produzca resultados independientes de la resolución se debe proporcionar un valor explícito por el atributo filterRes dentro de filter y / o en el atributo kernelUnitLength.

El atributo kernelUnitLength, en combinación con los demás atributos, define una cuadrícula de píxeles implícita en el sistema de coordenadas a afectos del filtro (el sistema de coordenadas establecido por el atributo primitiveUnits). Si la cuadrícula de píxeles establecida por kernelUnitLength no se escala para que coincida con la cuadrícula de píxeles establecida por el atributo filterRes (implícita o explícitamente), entonces la imagen de entrada se reajustará temporalmente para que coincida con sus píxeles de kernelUnitLength. Después de aplicar el filtro, la imagen se vuelve a muestrear de nuevo a su resolución original.

Cuando la imagen tiene que ser remuestreada, se recomienda usar visores de alta calidad que hacen uso de técnicas de interpolación más avanzadas y mayor rendimiento, por ejemplo bilineal o bicúbica. Dependiendo de la velocidad de las interpolantes disponibles, esta opción puede ser afectada mediante la configuración de la propiedad image-rendering. La recomendación dice que hay que evitar el remuestreo siempre que no sea necesario para producir resultados más rápidamente. Un ejemplo de ello es no remuestrear cuando el documento se reduce de tal manera que kernelUnitLength es considerablemente menor que el tamaño de un pixel del dispositivo en el que se presenta.

Para las fórmulas siguientes la norma (Ax,Ay,Az) se define como:

Norm(Ax,Ay,Az) = sqrt(Ax^2+Ay^2+Az^2)

El resultado de la imagen se calcula mediante:

Dr = kd * N.L * Lr
Dg = kd * N.L * Lg
Db = kd * N.L * Lb
Da = 1.0

VariableDescripción
Es la constante de iluminación difusa.
Es la superficie del vector unitario normal (una función de x e y que depende del gradiente de la superficie).
Es el vector unitario que apunta desde la superficie a la luz (una función de x e y en el caso de la luz para un punto y lugar concretos)
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 feSpecularLighting, la primitiva de filtro feDiffuseLighting produce una imagen opaca. Esto es debido al hecho de que el resultado especular (Dr, Dg, Db, Da) NO está destinado a ser añadido a la imagen. El canal alfa resultante es constante(1.0 como vemos arriba), de manera que añade cobertura adicional a la imagen y, por eso, ese tono blanco destacado a la opacidad.

Los filtros feDiffuseLighting y feSpecularLighting a menudo se aplican conjuntamente.

Los atributos importantes de feDiffuseLighting son:.

VariableDescripción
Esla altura de la superficie. Su valor por defecto es 1.
kd. 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.
Se compone de dos posibles valores qu son dx y dy. Cuando dy no se especifica, el valor predeterminado es el mismo valor que dx. Dichas variables representan las deltas relativas a un dado (x, y) que se utilizan para calcular la pendiente de la superficie en un punto.
Indica la distancia prevista en las unidades actuales del filtro (es decir, las unidades descritas en el atributo primitiveUnits) para dx y dy, respectivamente, en las fórmulas de cálculo normales a la superficie.Es necesario proporcionar valorores para al menos uno de filterRes y kernelUnitLength.
Que representa el color de la luz.

Pero para componer un haz de luz, o símplemente hacer un efecto de iluminación lo que necesitamos es otras primitivas que, además de usarlas aquí, tambien las podemos usar en feSpecularLighting y son:

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(#feDiffuseLighting)" />
</svg>

Elementos y propiedades de las primitivas fePointLight, feDistantLight, feSpotLight

Entre sus atributos tenemos:

AtributoDescripció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.

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.