ライトの使用

Windows App SDK の Microsoft.UI.Composition API を使用すると、リアルタイムのアニメーションと効果を作成できます。 コンポジション照明は、2D アプリケーションで 3D 照明を可能にします。 この概要では、コンポジション ライトを設定する方法、各ライトを受け取るビジュアルを識別する方法、効果を使用してコンテンツのマテリアルを定義する方法の機能について説明します。

コンポジション照明を使用すると、次の機能を使用して興味深い UI を作成できます。

• 音楽再生シーンなどのイマーシブ なシナリオを可能にする、シーン内の他のオブジェクトに依存しないライトの変換。
• オブジェクトをライトとペアリングして、シーンの残りの部分から独立して移動し、Fluent Reveal の強調表示などのシナリオを有効にする機能。
• ライトとシーン全体を一つのグループとして変換し、マテリアルと深みを生み出す。

コンポジション照明は、 ライト、 ターゲット、 SceneLightingEffect の 3 つの主要な概念をサポートしています。

"ライト"

CompositionLight を使用すると、さまざまなライトを作成し、座標空間に配置できます。 これらのライトは、ライトによって照らされることを目的とするビジュアルを対象としています。

ライトタイプ

Targets

ライトがビジュアルをターゲットとする場合 ( ターゲット リストに追加)、ビジュアルとそのすべての子孫は、この光源を認識し、応答します。 これは、ツリーのルートに 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 の 完全なテキスト シマー サンプルを参照してください。

制約

CompositionLight によってどのコンテンツが点灯するかを決定する際には、いくつかの要因を考慮する必要があります。

照明のプロパティ

使用するライトの種類に応じて、ライトは減衰と空間のプロパティを持つことができます。 すべての種類のライトですべてのプロパティが使用されるわけではありません。

高度な照明プロパティ

照明の基礎から始める

ライトを追加するには、次の一般的な手順に従います。

• ライトを作成して配置する: ライトを作成し、指定した座標空間に配置します。
• 照明するオブジェクトを識別する: 関連するビジュアルでライトをターゲットに設定します。
• [省略可能]個々のオブジェクトがライトにどのように反応するかを定義する: EffectBrush で SceneLightingEffect を使用して、SpriteVisual を表示するための光の反射をカスタマイズします。 リフレクションのデフォルト設定は光源のCoordinateSpace内の子要素の照明をサポートします。 SceneLightingEffect で描画されたビジュアルは、そのビジュアルの既定の照明を上書きします。

シーンの照明エフェクト

SceneLightingEffect は、CompositionLight を対象とする SpriteVisual のコンテンツに適用される既定の照明を変更するために使用されます。

SceneLightingEffect は、マテリアルの作成に頻繁に使用されます。 SceneLightingEffect は、画像の反射プロパティを有効にしたり、法線マップで奥行きの錯覚を与えたりするなど、より複雑な処理を行う場合に使用される効果です。 SceneLightingEffect は、反射や拡散量などの照明プロパティを使用して UI をカスタマイズする機能を提供します。 効果パイプラインの残りの部分で照明効果をさらにカスタマイズし、コンテンツと異なる照明反応を個別にブレンドして構成することができます。

サンプル (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
• 照明の数学
• SceneLightingEffect
• WindowsCompositionSamples GitHub リポジトリ