Compartilhar via

Usando luzes na interface do usuário do Windows

As APIs Windows.UI.Composition permitem que você crie animações e efeitos em tempo real. A iluminação de composição permite a iluminação 3D em aplicações 2D. Nesta visão geral, abordaremos a funcionalidade de como configurar luzes de composição, identificar visuais para receber cada luz e usar efeitos para definir materiais para seu conteúdo.

Observação

Para ler como os objetos XamlLight aplicam CompositionLights para iluminar UIElements XAML, consulte Iluminação XAML.

A iluminação de composição permite criar uma interface do usuário interessante, permitindo:

  • Transformação de uma luz independente de outros objetos na cena para permitir cenários imersivos, como cenas de reprodução de música.
  • A capacidade de emparelhar um objeto com uma luz para que eles se movam juntos independentemente do resto da cena para permitir cenários como o realce do Fluent Reveal .
  • Transformação da luz e de toda a cena como um grupo para criar materiais e profundidade.

A iluminação de composição dá suporte a três conceitos principais: Light, Targets e SceneLightingEffect.

Claro

CompositionLight permite criar várias luzes e colocá-las no espaço de coordenadas. Essas luzes têm como alvo os visuais que você deseja identificar como iluminados pela luz.

Tipos de luz

Tipo Descrição
Luz ambiente Uma fonte de luz que emite luz não direcional que aparece refletida por tudo na cena.
Luz Distante Uma fonte de luz distante infinitamente grande que emite luz em uma única direção. Como o sol.
Luz pontual Uma fonte pontual de luz que emite luz em todas as direções. Como uma lâmpada.
Holofote Uma fonte de luz que emite cones internos e externos de luz. Como uma lanterna.

Destinos

Quando as luzes têm como alvo um Visual (adicionar à lista de Destinos ), o Visual e todos os seus descendentes estão cientes e respondem a essa fonte de luz. Isso pode ser algo tão simples quanto definir uma fonte PointLight na raiz de uma árvore e todos os visuais abaixo reagem à animação da direção das luzes pontuais.

ExclusionsFromTargets oferece a capacidade de remover a iluminação de um visual ou de uma subárvore de visuais de maneira semelhante à adição de destinos. Como resultado, as crianças na árvore enraizadas pelo visual excluído não são iluminadas.

Amostra (Alvos)

No exemplo abaixo, usamos um CompositionPointLight para direcionar um 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

Ao adicionar animação ao deslocamento da luz pontual, um efeito cintilante é facilmente alcançado.

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

Confira o exemplo completo do Text Shimmer no GitHub para saber mais.

Restrições

Há vários fatores a serem considerados ao determinar qual conteúdo será iluminado pelo CompositionLight.

Conceito Detalhes
Luz ambiente Adicionar uma luz não ambiente à sua cena desligará toda a luz existente. Os itens não visados por uma luz que não seja ambiente aparecerão em preto. Para iluminar os visuais ao redor não visados pela luz de maneira natural, use uma luz ambiente em conjunto com outras luzes.
Número de luzes Você pode usar quaisquer duas luzes de composição não ambiente em qualquer combinação para direcionar sua interface do usuário. As luzes ambientes não são restritas; luzes pontuais, pontuais e distantes são.
Tempo de vida CompositionLight pode experimentar condições de vida útil (exemplo: o coletor de lixo pode reciclar o objeto de luz antes de ser usado). Recomendamos manter uma referência às suas luzes adicionando luzes como um membro para ajudar o aplicativo a gerenciar o tempo de vida.
Transformações As luzes devem ser colocadas em um nó acima da interface do usuário que usa efeitos como transformações de perspectiva em sua estrutura visual para serem desenhadas corretamente.
Alvos e espaço de coordenadas CoordinateSpace é o espaço visual no qual todas as propriedades de luzes devem ser definidas. CompositionLight.Targets deve estar dentro da árvore CoordinateSpace.

Propriedades de iluminação

Dependendo do tipo de luz usada, uma luz pode ter propriedades de atenuação e espaço. Nem todos os tipos de luzes usam todas as propriedades.

Propriedade Descrição
Cor A cor da luz. Os valores de cor de iluminação são definidos por D3D Difuso, Ambiente e Especular que definem a cor que está sendo emitida. A iluminação usa valores RGBA para luzes; O componente de cor alfa não é usado.
Direção A direção da luz. A direção na qual a luz está apontando é especificada em relação ao seu CoordinateSpace Visual.
Espaço de coordenadas Cada Visual tem um espaço de coordenadas 3D implícito. A direção X é da esquerda para a direita. A direção Y é de cima para baixo. A direção Z é um ponto fora do plano. O ponto original dessa coordenada é o canto superior esquerdo do visual e a unidade é DIP (Pixel Independente do Dispositivo). O deslocamento de uma luz definido nesta coordenada.
Cones internos e externos Os holofotes emitem um cone de luz que tem duas partes: um cone interno brilhante e um cone externo. A composição permite controlar os ângulos e cores do cone interno e externo.
Deslocamento Deslocamento da fonte de luz em relação ao seu espaço de coordenadas Visual.

Observação

Quando várias luzes atingem o mesmo visual, ou sempre que o valor de cor de uma luz fica grande o suficiente para exceder 1,0, a cor da luz pode mudar devido à fixação de um canal de cor de luzes.

Propriedades avançadas de iluminação

Propriedade Descrição
Intensidade Controla o brilho da luz.
Atenuação A atenuação controla como a intensidade de uma luz diminui em direção à distância máxima especificada pela propriedade de intervalo. Propriedades de atenuação constante, quadrática e linear podem ser usadas.

Introdução à iluminação

Siga estas etapas gerais para adicionar luzes:

  • Criar e colocar as luzes: crie luzes e coloque-as em um espaço de coordenadas especificado.
  • Identificar objetos à luz: direcione a luz para visuais relevantes.
  • [Opcional] Defina como objetos individuais reagem às luzes: use SceneLightingEffect com um EffectBrush para personalizar a reflexão da luz para exibir o SpriteVisual. Os padrões de reflexão suportam a iluminação de filhos do CoordinateSpace de uma fonte de luz. Um visual pintado com um SceneLightingEffect substitui a iluminação padrão desse visual.

Efeito de iluminação de cena

SceneLightingEffect é usado para modificar a iluminação padrão aplicada ao conteúdo de um SpriteVisual direcionado por um CompositionLight.

SceneLightingEffect é frequentemente usado para criação de material. Um SceneLightingEffect é um efeito usado quando você deseja obter algo mais complexo, como habilitar propriedades reflexivas em uma imagem e/ou fornecer uma ilusão de profundidade com um mapa normal. Um SceneLightingEffect fornece a capacidade de personalizar sua interface do usuário usando as propriedades de iluminação, como quantidades especulares e difusas. Você pode personalizar ainda mais os efeitos de iluminação com o restante do pipeline de efeitos, permitindo que você misture e componha individualmente diferentes reações de iluminação com seu conteúdo.

Observação

A iluminação da cena não produz sombras; é um efeito focado na renderização 2D. Ele não leva em consideração cenários de iluminação 3D que incluem modelos de iluminação reais, incluindo sombras.

Propriedade Descrição
Mapa Normal NormalMaps cria um efeito de textura em que um normal apontando para a luz será mais brilhante e um normal apontando para longe será mais escuro. Para adicionar um NormalMap ao visual de destino, use um CompositionSurfaceBrush usando LoadedImageSurface para carregar um ativo NormalMap.
Ambiente As propriedades do ambiente são usadas principalmente para controlar o reflexo geral da cor.
Especular A reflexão especular cria destaques nos objetos, fazendo-os parecer brilhantes. Você pode controlar o nível de reflexão especular, bem como o nível de brilho. Essas propriedades são manipuladas para criar efeitos materiais como metais brilhantes ou papel brilhante.
Difusa A reflexão difusa espalha a luz em todas as direções.
Modelo de refletância O Modelo de Refletância permite que você escolha entre Blinn Phong e Blinn Phong baseado em física. Você escolheria Blinn Phong com base física quando quiser ter destaques especulares condensados.

Exemplo (SceneLightingEffect)

O exemplo abaixo mostra como adicionar um mapa normal a um 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;
}