Utilização de luzes

As APIs Microsoft.UI.Composition no Windows App SDK permitem-lhe criar animações e efeitos em tempo real. A iluminação por composição permite iluminação 3D em aplicações 2D. Nesta visão geral, vamos abordar a funcionalidade de configuração de luzes de composição, identificar elementos visuais para receber cada luz e usar efeitos para definir materiais para o seu conteúdo.

Observação

Para compreender como os objetos XamlLight aplicam CompositionLights para iluminar os elementos de interface do utilizador XAML, consulte iluminação XAML.

A iluminação de composição permite-lhe criar uma interface interessante ao permitir:

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

A iluminação de composição suporta três conceitos-chave: Luz, Alvos e SceneLightingEffect.

Luz

CompositionLight permite-lhe criar várias luzes e colocá-las no espaço de coordenadas. Estas luzes direcionam-se para elementos visuais que pretende identificar como iluminados pela luz.

Tipos de Luz

Tipo Descrição
AmbientLight Uma fonte de luz que emite luz não direcional que parece refletida por tudo na cena.
DistantLight Uma fonte de luz infinitamente grande e distante que emite luz numa única direção. Como o sol.
PointLight Uma fonte pontual de luz que emite luz em todas as direções. Como uma lâmpada.
SpotLight Uma fonte de luz que emite cones internos e externos de luz. Como uma lanterna.

Objetivos

Quando as luzes são direcionadas para um Visual (adicionar à lista de Alvos), o Visual e todos os seus descendentes recebem e respondem a essa fonte de luz. Isto pode ser algo tão simples como colocar uma fonte PointLight na raiz de uma árvore e todos os visuais abaixo reagirem à animação da direção da luz pontual.

ExclusionsFromTargets dá-te a capacidade de remover a iluminação de um visual ou de uma subárvore de visuais de forma semelhante à adição de alvos. As crianças na árvore, afetadas pela exclusão da imagem, não estão iluminadas como consequência.

Amostra (Alvos)

No exemplo abaixo, usamos um PointLight 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, é facilmente conseguido um efeito cintilante.

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

Consulte o exemplo completo de Text Shimmer no GitHub para saber mais.

Restrições

Existem vários fatores a considerar ao determinar que conteúdo será iluminado pelo CompositionLight.

Conceito Detalhes
Luz Ambiente Adicionar uma luz não ambiente à tua cena vai desligar toda a luz existente. Os itens que não são alvo de luz não ambiente aparecerão pretos. Para iluminar de forma natural elementos circundantes que não são direcionados pela luz, utilize uma luz ambiente em conjunto com outras luzes.
Número de Luzes Pode usar quaisquer duas luzes de composição não ambientais em qualquer combinação para direcionar a sua interface de utilizador. As luzes ambientes não são restritas; as luzes de foco, ponto e distante são.
Tempo de vida ComposiçãoA luz pode experienciar condições de vida útil (exemplo: o coletor de lixo pode reciclar o objeto de luz antes de ser utilizado). Recomendamos manter uma referência às suas luzes adicionando luzes como membro para ajudar a aplicação a gerir a vida útil.
transformações As luzes devem ser colocadas num nó acima da UI que utilize efeitos como transformações de perspetiva na sua estrutura visual para serem desenhadas corretamente.
Alvos e Espaço de Coordenadas O Espaço de Coordenadas é o espaço visual onde todas as propriedades da luz devem ser definidas. Luz de Composição. Os alvos devem estar dentro da árvore de Espaço de Coordenadas.

Propriedades de Iluminação

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

Propriedade Descrição
Color A cor da luz. Os valores de cor da iluminação são definidos por D3D Difuso, Ambiente e Especular, que definem a cor emitida. A iluminação utiliza valores RGBA para as luzes; o componente de cor alfa não é utilizado.
Direção A direção da luz. A direção na qual a luz aponta é especificada em relação ao seu Espaço de Coordenadas Visual.
Espaço de coordenadas Todo o 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 desta coordenada é o canto superior esquerdo do visual, e a unidade é o Píxel Independente do Dispositivo (DIP). O deslocamento de uma luz é definido nesta coordenada.
Cones Interior e Exterior Os holofotes emitem um cone de luz que tem duas partes: um cone interior brilhante e um cone exterior. A composição permite-te controlar os ângulos e a cor dos cones interiores e exteriores.
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 é suficientemente elevado para ultrapassar 1,0, a cor da luz pode mudar devido à limitação do canal de cor da luz.

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 alcance. Podem ser usadas propriedades de atenuação constante, quadrática e linear.

Começar com a Iluminação

Siga estes passos gerais para adicionar luzes:

  • Crie e coloque as luzes: Crie luzes e coloque-as num espaço coordenado especificado.
  • Identificar objetos para a luz: Direcionar a luz para visuais relevantes.
  • [Opcional] Defina como os objetos individuais reagem à luz: Use o SceneLightingEffect com um EffectBrush para personalizar a reflexão da luz para mostrar o SpriteVisual. Os padrões de reflexão suportam a iluminação das crianças do Espaço de Coordenadas de uma fonte de luz. Um visual pintado com um SceneLightingEffect substitui a iluminação padrão desse visual.

CenaEfeito de Iluminação

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

SceneLightingEffect é frequentemente usado para a criação de materiais. Um Efeito de Iluminação de Cena é um efeito usado quando se pretende alcançar algo mais complexo, como ativar propriedades refletoras numa imagem e/ou fornecer uma ilusão de profundidade com um mapa normal. Um SceneLightingEffect oferece a capacidade de personalizar a sua interface através das propriedades de iluminação, como quantidades especulares e difusas. Pode personalizar ainda mais efeitos de iluminação com o resto do pipeline de efeitos, permitindo-lhe misturar e compor diferentes reações de iluminação individualmente com o seu conteúdo.

Observação

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

Propriedade Descrição
Mapa Normal Os NormalMaps criam um efeito de textura onde uma normal direcionada para a luz será mais brilhante, enquanto uma normal voltada para o lado oposto será mais ténue. Para adicionar um NormalMap ao seu visual alvo, utilize um CompositionSurfaceBrush e LoadedImageSurface para carregar um recurso NormalMap.
Ambiente As propriedades ambientais são principalmente usadas para controlar a reflexão global da cor.
Specular A reflexão especular cria realces nos objetos, fazendo-os parecer brilhantes. Pode controlar tanto o nível de reflexão especular como o nível de brilho. Estas propriedades são manipuladas para criar efeitos materiais como metais brilhantes ou papel brilhante.
difusa A reflexão difusa dispersa a luz em todas as direções.
Modelo de Reflectância O Modelo de Reflectância permite que você escolha entre Blinn Phong e Blinn Phong Baseado em Física. Deve-se escolher o Blinn Phong Fisicamente Baseado quando se deseja ter reflexos 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;
}
  • Last updated on