Uso de luces

Las API Microsoft.UI.Composition del SDK de aplicaciones de Windows permiten crear animaciones y efectos en tiempo real. La iluminación por composición permite la iluminación tridimensional en aplicaciones bidimensionales. En esta introducción, veremos la funcionalidad de cómo configurar luces de composición, identificar objetos visuales para recibir cada luz y usar efectos para definir materiales para su contenido.

Nota:

Para leer cómo los objetos XamlLight aplican CompositionLights para iluminar UIElements XAML, consulta Iluminación XAML.

La iluminación de composición le permite crear una interfaz de usuario interesante al permitir lo siguiente:

  • Transformación de una luz independiente de otros objetos de la escena para habilitar escenarios envolventes como escenas de reproducción de música.
  • La capacidad de emparejar un objeto con una luz para que se desplacen juntos de forma independiente del resto de la escena, permitiendo escenarios como Fluent Reveal iluminado.
  • Transformación de la luz y de la escena completa en conjunto para crear materiales y profundidad.

La iluminación de composición admite tres conceptos clave: Light, Targets y SceneLightingEffect.

Luz

CompositionLight permite crear varias luces y colocarlas en el espacio de coordenadas. Estas luces tienen como destino los objetos visuales que desea identificar como iluminados por la luz.

Tipos de luz

Tipo Descripción
AmbientLight Fuente de luz que emite luz no direccional que aparece reflejada por todo en la escena.
DistantLight Fuente de luz distante e infinita que emite luz en una sola dirección. Como el sol.
PointLight Fuente de luz puntual que emite luz en todas las direcciones. Como una bombilla.
SpotLight Fuente de luz que emite conos internos y externos de luz. Como una linterna.

Objetivos

Cuando las luces tienen como destino un objeto visual (agregar a la lista destinos ), el objeto visual y todos sus descendientes son conscientes y responden a esta fuente de luz. Esto puede ser algo tan sencillo como establecer un origen PointLight en la raíz de un árbol y todos los objetos visuales siguientes reaccionan a la animación de la dirección de la luz de punto.

ExclusionsFromTargets le ofrece la posibilidad de quitar la iluminación de un objeto visual o de un subárbol de objetos visuales de forma similar a la adición de destinos. Los elementos secundarios del árbol que están enraizados por el objeto visual excluido no se iluminan como resultado.

Ejemplo (Objetivos)

En el ejemplo siguiente, usamos pointLight para tener como destino un TextBlock XAML.

    _pointLight = _compositor.CreatePointLight();
    _pointLight.Color = Colors.White;
    _pointLight.CoordinateSpace = text; //set up co-ordinate space for offset
    _pointLight.Targets.Add(text); //target XAML TextBlock

Al agregar animación al desplazamiento de la luz puntual, se consigue fácilmente un efecto de parpadeo.

_pointLight.Offset = new Vector3(-(float)TextBlock.ActualWidth, (float)TextBlock.ActualHeight / 2, (float)TextBlock.FontSize);

Consulte el ejemplo completo de Text Shimmer en GitHub para obtener más información.

Restrictions

Hay varios factores que se deben tener en cuenta al determinar qué contenido se iluminará en CompositionLight.

Concepto Detalles
Luz ambiente Agregar una luz no ambiental a la escena desactivará toda la luz existente. Los elementos no dirigidos por una luz no ambiental aparecerán negros. Para iluminar los objetos visuales circundantes no dirigidos por la luz de forma natural, utilice una luz ambiente junto con otras luces.
Número de luces Puede usar dos luces de composición no ambiente en cualquier combinación para orientar la interfaz. Las luces ambientales no están restringidas; las luces puntuales, de punto y distantes sí lo están.
Tiempo de Vida CompositionLight puede experimentar condiciones de ciclo de vida (ejemplo: el recolector de basura puede reciclar el objeto de luz antes de que se use). Se recomienda mantener una referencia a las luces agregándolas como miembro para ayudar a la aplicación a administrar el ciclo de vida.
Transformaciones Las luces deben colocarse en un nodo encima de la interfaz de usuario que utilice efectos como transformaciones de perspectiva en la estructura visual para que se dibujen correctamente.
Destinos y espacio de coordenadas CoordinateSpace es el espacio visual en el que se deben establecer todas las propiedades de la luz. CompositionLight.Targets debe estar dentro del árbol CoordinateSpace.

Propiedades de iluminación

Dependiendo del tipo de luz utilizada, una luz puede tener propiedades para atenuación y espacio. No todos los tipos de luces usan todas las propiedades.

Propiedad Descripción
color Color de la luz. Los valores de color de iluminación se definen mediante D3D Difusa, Ambiente y Especular, que definen el color que se emite. La iluminación utiliza valores RGBA para las luces; no se usa el componente de color alfa.
Direction Dirección de la luz. La dirección en la que apunta la luz se especifica en relación con su Visual de CoordinateSpace.
Espacio de coordenadas Cada objeto visual tiene un espacio de coordenadas 3D implícito. La dirección X va de izquierda a derecha. La dirección Y es de arriba abajo. La dirección Z es un punto fuera del plano. El punto original de esta coordenada es la esquina superior izquierda del objeto visual y la unidad es Píxel independiente del dispositivo (DIP). El desplazamiento de una luz se define en esta coordenada.
Conos internos y externos Los focos emiten un cono de luz que tiene dos partes: un cono interno brillante y un cono exterior. La composición permite controlar los ángulos y el color internos y externos del cono.
de desplazamiento Desplazamiento de la fuente de luz en relación con su espacio de coordenadas Visual.

Nota:

Cuando varias luces alcanzan el mismo Visual o cuando el valor del color de una luz es lo suficientemente grande como para exceder 1.0, el color de la luz puede cambiar debido a la limitación del canal de color de la luz.

Propiedades avanzadas de iluminación

Propiedad Descripción
Intensidad Controla el brillo de la luz.
Atenuación La atenuación controla cómo disminuye la intensidad de una luz hacia la distancia máxima especificada en la propiedad rango. Se pueden usar las propiedades constantes, cuadráticas y de atenuación lineal.

Introducción a la iluminación

Siga estos pasos generales para agregar luces:

  • Crear y colocar las luces: cree luces y colóquelas en un espacio de coordenadas especificado.
  • Identificar elementos que se van a iluminar: enfocar la luz en los elementos visuales pertinentes.
  • [Opcional] Defina cómo reaccionan los objetos individuales a las luces: utilice SceneLightingEffect con un EffectBrush para personalizar la reflexión de la luz al mostrar el SpriteVisual. Los valores predeterminados de reflexión admiten la iluminación de los elementos secundarios en el espacio de coordenadas de una fuente de luz. Un objeto visual pintado con sceneLightingEffect sobrescribe la iluminación predeterminada para ese objeto visual.

SceneLightingEffect

SceneLightingEffect se usa para modificar la iluminación predeterminada aplicada al contenido de un SpriteVisual dirigido por compositionLight.

SceneLightingEffect se usa con frecuencia para la creación de materiales. SceneLightingEffect es un efecto que se usa cuando se quiere lograr algo más complejo, como habilitar propiedades reflectantes en una imagen o proporcionar una ilusión de profundidad con un mapa normal. SceneLightingEffect permite personalizar la interfaz de usuario mediante las propiedades de iluminación como cantidades especulares y difusas. Puede personalizar aún más los efectos de iluminación con el resto de la canalización de efectos, lo que le permite combinar y componer diferentes reacciones de iluminación con su contenido.

Nota:

La iluminación de la escena no produce sombras; es un efecto centrado en la representación 2D. No tiene en cuenta los escenarios de iluminación 3D que incluyen modelos de iluminación reales, incluidas las sombras.

Propiedad Descripción
Mapa normal NormalMaps crean un efecto de textura en el que una normal que apunta hacia la luz será más brillante y una normal que apunta alejándose será más atenuada. Para agregar un objeto NormalMap al objeto visual de destino, use CompositionSurfaceBrush mediante LoadedImageSurface para cargar un recurso NormalMap.
Ambiente Las propiedades ambientales se usan principalmente para controlar la reflexión de color general.
Specular La reflexión especular crea resaltados en objetos, lo que hace que aparezcan brillantes. Puede controlar el nivel de reflexión especular, así como el nivel de brillo. Estas propiedades se manipulan para crear efectos materiales como metales brillantes o papel brillante.
Difusa La reflexión difusa dispersa la luz en todas las direcciones.
Modelo de reflectancia El modelo de reflectancia le permite elegir entre Blinn Phong y Blinn Phong Basado en Física. Elige Blinn Phong basado en física cuando desees tener resaltos especulares intensos.

Ejemplo (SceneLightingEffect)

En el ejemplo siguiente se muestra cómo agregar un mapa normal a sceneLightingEffect.

CompositionBrush CreateNormalMapBrush(ICompositionSurface normalMapImage)
{
    var colorSourceEffect = new ColorSourceEffect()
    {
        Color = Colors.White
    };
    var sceneLightingEffect = new SceneLightingEffect()
    {
        NormalMapSource = new CompositionEffectSourceParameter("NormalMap")
    };

    var compositeEffect = new ArithmeticCompositeEffect()
    {
        Source1 = colorSourceEffect,
        Source2 = sceneLightingEffect,
    };

    var factory = _compositor.CreateEffectFactory(sceneLightingEffect);

    var normalMapBrush = _compositor.CreateSurfaceBrush();
    normalMapBrush.Surface = normalMapImage;
    normalMapBrush.Stretch = CompositionStretch.Fill;

    var brush = factory.CreateBrush();
    brush.SetSourceParameter("NormalMap", normalMapBrush);

    return brush;
}
  • Last updated on