使用燈光

Windows App SDK 中的 Microsoft.UI.Composition API 讓你能即時製作動畫與特效。 構圖燈光在二維應用中實現了三維照明。 在這篇概述中，我們將介紹如何設定構圖燈、辨識接收每個燈光的視覺元素，以及使用效果來定義內容材質的功能。

構圖光照讓你能透過以下方式創造有趣的使用者介面：

• 燈光的轉換，獨立於場景中其他物件，以實現沉浸式場景，如音樂播放場景。
• 能夠將物件與燈光配對，使其獨立於場景其他部分一起移動，從而實現像流暢 揭示 高亮這類情境。
• 光線和場景整體作為一個整體進行轉換，以創造材料和深度。

構圖照明支援三個關鍵概念： 光線、 目標與 場景光影效果。

光

CompositionLight 允許你創造各種燈光並將它們放置在對座標空間中。 這些燈光會針對你想辨識出被光照亮的視覺效果。

燈光類型

目標

當光源目標視覺元素（加入 目標 清單）時，視覺元素及其所有子元素都會感知並對此光源作出反應。 這可以是簡單的設定，比如把 PointLight 來源放在樹根，然後下方所有視覺效果都會對點光的方向動畫做出反應。

ExclusionsFromTargets 讓你能以類似新增目標的方式，移除視覺或視覺子樹上的光源。 被排除的視覺樹根的子節點不會被點亮。

樣本（目標）

在下方範例中，我們使用 PointLight 來鎖定 XAML TextBlock。

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

透過在點光偏移處加入動畫，可以輕易達成閃爍效果。

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

想了解更多，請參考 GitHub 上的完整 Text Shimmer 範例。

限制

在決定哪些內容將由 CompositionLight 照明時，有幾個因素需要考慮。

光照特性

根據所使用的光類型，光可能具有衰減和空間特性。 並非所有類型的燈都能利用所有特性。

進階光照特性

燈光入門

請依照以下一般步驟加裝燈光：

• 建立並放置燈光：建立燈光並將其放置在指定的座標空間中。
• 識別光源物體：將光線鎖定在相關視覺上。
• [可選]定義個別物件對光源的反應：使用 SceneLightingEffect 搭配 EffectBrush 來自訂顯示 SpriteVisual 的光線反射。 反射的預設功能支援光源座標空間內子節點的照明。 用 SceneLightingEffect 繪製的視覺化會覆蓋該視覺的預設光照。

場景光影效果

SceneLightingEffect 用於修改 CompositionLight 鎖定的 SpriteVisual 內容所套用的預設光照。

SceneLightingEffect 經常用於材質製作。 SceneLightingEffect 是一種效果，當你想要實現更為複雜的效果時，例如啟用影像的反射屬性和/或利用法線貼圖創造出深度的錯覺。 SceneLightingEffect 提供透過使用光照屬性，如鏡面反射量和漫射量，來自訂您的用戶介面的功能。 你可以進一步透過其他效果管線中的元素來自訂光影效果，使您能獨立混合與組合不同的光影反應與您的內容。

樣本（SceneLightingEffect）

以下範例展示了如何為 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;
}

相關文章

• 在視覺層中創造材質與光源
• CompositionCapabilities API
• 照明數學
• 場景光影效果
• WindowsCompositionSamples GitHub Repo