Freigeben über

Verwenden von Lichtern

Mit den Microsoft.UI.Composition-APIs im Windows App SDK können Sie Echtzeitanimationen und Effekte erstellen. Kompositionsbeleuchtung ermöglicht 3D-Beleuchtung in 2D-Anwendungen. In dieser Übersicht werden wir die Funktionen zum Einrichten von Kompositionslichtern durchlaufen, visuelle Elemente identifizieren, die jedes Licht empfangen, und Effekte verwenden, um Materialien für Ihre Inhalte zu definieren.

Hinweis

Informationen dazu, wie XamlLight-Objekte CompositionLights anwenden, um XAML-UIElements zu beleuchten, finden Sie unter XAML-Beleuchtung.

Mit der Kompositionsbeleuchtung können Sie interessante Ui-Elemente erstellen, indem Sie Folgendes zulassen:

  • Transformation eines Lichts unabhängig von anderen Objekten in der Szene, um immersive Szenarien wie Musikwiedergabeszenen zu ermöglichen.
  • Die Fähigkeit, ein Objekt mit einem Licht zu koppeln, sodass sie sich unabhängig von der restlichen Szene gemeinsam bewegen, um Szenarien wie die Fluent Reveal-Hervorhebung zu ermöglichen.
  • Transformation des Lichts und der gesamten Szene als Gruppe, um Materialien und Tiefe zu schaffen.

Kompositionsbeleuchtung unterstützt drei Schlüsselkonzepte: Licht, Ziele und SceneLightingEffect.

Light

CompositionLight ermöglicht es Ihnen, verschiedene Lichter zu erstellen und sie im Koordinatenbereich zu platzieren. Diese Lichter zielen auf visuelle Elemente ab, die Sie durch das Licht als beleuchtet identifizieren möchten.

Lichttypen

Typ Beschreibung
Ambientlight Eine Lichtquelle, die nicht direktionales Licht ausstrahlt, das von allem in der Szene reflektiert wird.
DistantLight Eine unendlich große entfernte Lichtquelle, die Licht in eine einzelne Richtung ausstrahlt. Wie die Sonne.
Pointlight Eine Punktquelle des Lichts, die Licht in alle Richtungen ausstrahlt. Wie eine Glühbirne.
Spotlight Eine Lichtquelle, die innere und äußere Lichtkegel ausstrahlt. Wie eine Taschenlampe.

Ziele

Wenn Licht auf ein visuelles Element (zur Zielliste hinzufügen) ausgerichtet ist, sind das visuelle Element und alle untergeordneten Elemente dieser Lichtquelle bewusst und reagieren auf diese Lichtquelle. Dies kann etwas so Einfaches sein wie das Festlegen einer PointLight-Quelle an der Wurzel eines Baumes, und alle darunterliegenden visuellen Elemente reagieren auf die Animation der Richtung des Punktlichts.

ExclusionsFromTargets bietet Ihnen die Möglichkeit, die Beleuchtung eines visuellen Elements oder einer Unterstruktur von visuellen Elementen ähnlich wie beim Hinzufügen von Zielen auszuschließen. Kinderknoten im Baum, der durch das ausgeschlossene visuelle Element verwurzelt ist, werden daher nicht beleuchtet.

Beispiel (Ziele)

Im folgenden Beispiel wird ein PointLight verwendet, um auf einen XAML-TextBlock zu abzielen.

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

Durch hinzufügen einer Animation zum Offset des Punktlichts wird leicht ein schimmernder Effekt erreicht.

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

Weitere Informationen finden Sie im vollständigen Text Shimmer-Beispiel auf GitHub.

Einschränkungen

Es gibt mehrere Faktoren, die Sie berücksichtigen sollten, wenn Sie bestimmen, welche Inhalte von CompositionLight beleuchtet werden.

Konzept Einzelheiten
Umgebungslicht Durch das Hinzufügen eines nicht umgebungsfreien Lichts zu Ihrer Szene wird das gesamte vorhandene Licht deaktiviert. Elemente, die nicht auf ein Umgebungslicht ausgerichtet sind, werden schwarz angezeigt. Um die umgebenden visuellen Elemente auf natürliche Weise zu erleuchten, verwenden Sie ein Umgebungslicht in Verbindung mit anderen Lichtern.
Anzahl der Lichter Sie können zwei Nicht-Umgebungskompositionslichter in beliebiger Kombination verwenden, um Ihre Benutzeroberfläche zu beleuchten. Umgebungslichter sind nicht eingeschränkt; Spot-, Punkt- und Fernlichter sind eingeschränkt.
Lebensdauer CompositionLight kann Bedingungen der Lebensdauer erfüllen (Beispiel: Der Garbage Collector kann das Lichtobjekt wiederverwerten, bevor es verwendet wird). Es wird empfohlen, einen Verweis auf Ihre Lichter beizubehalten, indem Sie Leuchten als Mitglied hinzufügen, um die Verwaltung der Lebensdauer der Anwendung zu unterstützen.
Transformationen Lichter müssen in einem Knoten über der Benutzeroberfläche platziert werden, der Effekte wie perspektivische Transformationen in der visuellen Struktur verwendet, um ordnungsgemäß gezeichnet zu werden.
Ziele und Koordinatenbereich CoordinateSpace ist der visuelle Raum, in dem alle Eigenschaften des Lichts festgelegt werden müssen. CompositionLight.Targets müssen sich innerhalb der CoordinateSpace-Baumstruktur befinden.

Beleuchtungseigenschaften

Je nach Art des verwendeten Lichts kann ein Licht Eigenschaften für Dämpfung und Raum aufweisen. Nicht alle Arten von Leuchten verwenden alle Eigenschaften.

Eigentum Beschreibung
Farbe Die Farbe des Lichts. Beleuchtungsfarbwerte werden durch D3D Diffuse, Ambient und Specular definiert, die die ausgegebene Farbe definiert. Beleuchtung verwendet RGBA-Werte für Licht; Die Alphafarbkomponente wird nicht verwendet.
Richtung Die Richtung des Lichts. Die Richtung, in die das Licht zeigt, wird relativ zu seiner CoordinateSpace Visualisierung angegeben.
Koordinatenbereich Jedes Visuelle Element verfügt über einen impliziten 3D-Koordinatenbereich. X-Richtung ist von links nach rechts. Y-Richtung liegt von oben nach unten. Die Z-Richtung ist ein Punkt aus der Ebene. Der ursprüngliche Punkt dieser Koordinate ist die obere linke Ecke des visuellen Elements, und die Einheit ist Device Independent Pixel (DIP). Der Offset eines Lichts wird in dieser Koordinate definiert.
Innerer und äußerer Kegel Spotlights emittieren einen Kegel mit zwei Teilen: einem hellen inneren Kegel und einem äußeren Kegel. Die Komposition ermöglicht ihnen die Kontrolle über innere und äußere Kegelwinkel und -farbe.
Offset- Offset der Lichtquelle relativ zum Koordinatenbereich Visual.

Hinweis

Wenn mehrere Lichter auf dasselbe Visual treffen oder wenn der Farbwert eines Lichts groß genug wird, um einen Wert von 1,0 zu übersteigen, kann sich die Farbe des Lichts aufgrund der Begrenzung des Farbkanals eines Lichts ändern.

Erweiterte Beleuchtungseigenschaften

Eigentum Beschreibung
Intensität Steuert die Helligkeit des Lichts.
Dämpfung Die Dämpfung steuert, wie die Intensität eines Lichts in Richtung des maximalen Abstands verringert wird, der durch die Bereichseigenschaft angegeben wird. Konstanten-, Quadratische und lineare Dämpfungseigenschaften können verwendet werden.

Erste Schritte mit Beleuchtung

Führen Sie die folgenden allgemeinen Schritte aus, um Lichter hinzuzufügen:

  • Erstellen und platzieren Sie die Lichter: Erstellen Sie Lichter, und platzieren Sie sie in einem angegebenen Koordinatenbereich.
  • Identifizierung von Objekten zur Beleuchtung: Licht auf relevante visuelle Elemente richten.
  • [Optional] Definieren Sie, wie einzelne Objekte auf Lichter reagieren: Verwenden Sie SceneLightingEffect mit einem EffectBrush, um die Lichtreflexion für die Anzeige des SpriteVisual anzupassen. Reflection-Standardwerte unterstützen die Beleuchtung untergeordneter Elemente des CoordinateSpace einer Lichtquelle. Ein Visual, das mit einem SceneLightingEffect gezeichnet wird, überschreibt die Standardbeleuchtung für dieses Visual.

SceneLightingEffect

SceneLightingEffect wird verwendet, um die Standardbeleuchtung zu ändern, die auf den Inhalt eines SpriteVisual-Elements angewendet wird, das von einer CompositionLight angesteuert wird.

SceneLightingEffect wird häufig für die Materialerstellung verwendet. Ein SceneLightingEffect-Effekt ist ein Effekt, der verwendet wird, wenn Sie etwas komplexer erreichen möchten, z. B. die Aktivierung reflektierender Eigenschaften für ein Bild und/oder eine Illusion der Tiefe mit einer normalen Karte. Ein SceneLightingEffect bietet die Möglichkeit, die Benutzeroberfläche mithilfe der Beleuchtungseigenschaften wie spekulare und diffuse Komponenten anzupassen. Sie können Beleuchtungseffekte mit dem Rest der Effektpipeline weiter anpassen, sodass Sie verschiedene Lichtreaktionen individuell mit Ihrem Inhalt mischen und verfassen können.

Hinweis

Szenenbeleuchtung erzeugt keine Schatten; es ist ein Effekt, der sich auf das 2D-Rendering konzentriert. Es berücksichtigt nicht 3D-Beleuchtungsszenarien, die echte Beleuchtungsmodelle enthalten, einschließlich Schatten.

Eigentum Beschreibung
Normalkarte NormalMaps erzeugen einen Textur-Effekt, bei dem ein Normalvektor, der zum Licht hin zeigt, heller erscheint und ein Normalvektor, der davon weg zeigt, dunkler wird. Verwenden Sie zum Hinzufügen einer NormalMap zu Ihrem angestrebten visuellem Element einen CompositionSurfaceBrush in Kombination mit LoadedImageSurface, um eine NormalMap-Ressource zu laden.
Umgebend Umgebungseigenschaften werden hauptsächlich verwendet, um die gesamtfarbene Spiegelung zu steuern.
Glänzend Glanzreflektion schafft Hervorhebungen auf Objekten, sodass sie strahlend erscheinen. Sie können die Spiegelungsebene sowie den Glanzgrad steuern. Diese Eigenschaften werden bearbeitet, um Materialeffekte wie glänzende Metalle oder glänzendes Papier zu erzeugen.
Diffus Diffuse Spiegelung streut das Licht in alle Richtungen.
Reflektanzmodell Reflectance Model ermöglicht es Ihnen, zwischen Blinn Phong und physisch basierte Blinn Phong zu wählen. Sie würden Physically Based Blinn Phong wählen, wenn Sie verdichtete Glanzlichter haben möchten.

Beispiel (SceneLightingEffect)

Das folgende Beispiel zeigt, wie Sie einer SceneLightingEffect-Karte eine normale Karte hinzufügen.

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