Compartir a través de

Uso de luces en la interfaz de usuario de Windows

Las API de Windows.UI.Composition permiten crear animaciones y efectos en tiempo real. La iluminación de composición permite la iluminación 3D en aplicaciones 2D. 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 muevan juntos independientemente del resto de la escena para habilitar escenarios como fluent Reveal resaltado.
  • Transformación de la luz y toda la escena como un grupo para crear materiales y profundidad.

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

Claro

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 infinitamente grande 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.
Foco Fuente de luz que emite conos internos y externos de luz. Como una linterna.

Destinos

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 las luces 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 raíz del objeto visual que se excluyen no se iluminan como resultado.

Ejemplo (destinos)

En el ejemplo siguiente, usamos CompositionPointLight 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 atenuación.

_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.

Restricciones

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 dirigirse a la interfaz de usuario. Las luces ambientales no están restringidas; las luces puntuales, puntuales y distantes son.
Duración CompositionLight puede experimentar condiciones de duración (ejemplo: el recolector de elementos no utilizados puede reciclar el objeto de luz antes de usarlo). Se recomienda mantener una referencia a las luces agregando luces como miembro para ayudar a la aplicación a administrar la duración.
Transformaciones Las luces deben colocarse en un nodo encima de la interfaz de usuario que use efectos como transformaciones de perspectiva en la estructura visual para dibujarse correctamente.
Destinos y espacio de coordenadas CoordinateSpace es el espacio visual en el que se deben establecer todas las propiedades de las luces. 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 Difuso, Ambiente y Especular que define el color que se emite. La iluminación utiliza valores RGBA para las luces; no se usa el componente de color alfa.
Dirección Dirección de la luz. La dirección en la que apunta la luz se especifica en relación con su objeto visual 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 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). Desplazamiento de una luz definida 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 objeto visual de espacio de coordenadas.

Nota:

Cuando varias luces alcanzan el mismo objeto Visual o cada vez que el valor de color de la luz es lo suficientemente grande como para superar los 1,0, el color de la luz puede cambiar debido a la fijación de un canal de color de luces.

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 por la propiedad range. 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 objetos que se van a iluminar: luz de destino en los objetos visuales pertinentes.
  • [Opcional] Definir cómo reaccionan los objetos individuales a las luces: use SceneLightingEffect con un EffectBrush para personalizar la reflexión de luz para mostrar spriteVisual. Los valores predeterminados de reflexión admiten la iluminación de los elementos secundarios del objeto CoordinateSpace de una fuente de luz. Un objeto visual pintado con sceneLightingEffect sobrescribe la iluminación predeterminada para ese objeto visual.

Efecto de Iluminación de Escena

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 una textura en la que un normal que apunta hacia la luz será más brillante y un puntero normal será atenuado. 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.
Especular 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 shinny 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 físicamente. Elegiría Blinn Phong basado físicamente cuando desee tener resaltados especulares condensados.

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;
}