Freigeben über

Verwenden von Lichtern in der Windows-Benutzeroberfläche

Mit den Windows.UI.Composition-APIs 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, um jedes Licht zu 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 Möglichkeit, ein Objekt mit einem Licht zu koppeln, sodass sie unabhängig von der restlichen Szene zusammenkommen, um Szenarien wie 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.

Hell

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.
Fernlicht Eine unendlich große entfernte Lichtquelle, die Licht in eine einzelne Richtung ausstrahlt. Wie die Sonne.
PointLight- Eine Punktquelle des Lichts, das Licht in alle Richtungen ausstrahlt. Wie eine Glühbirne.
Scheinwerfer Eine Lichtquelle, die innere und äußere Kegel des Lichts 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 so einfach sein wie das Festlegen einer PointLight-Quelle am Stamm einer Struktur, und alle unten stehenden visuellen Elemente reagieren auf die Animation der Punktlichtrichtung.

ExclusionsFromTargets bietet Ihnen die Möglichkeit, die Beleuchtung einer visuellen oder einer Unterstruktur visueller Elemente auf ähnliche Weise wie das Hinzufügen von Zielen zu entfernen. Untergeordnete Elemente in der struktur, die durch das ausgeschlossene visuelle Element verwurzelt sind, werden daher nicht beleuchtet.

Beispiel (Ziele)

Im folgenden Beispiel verwenden wir ein CompositionPointLight-Element, 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.

Beschrä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. Verwenden Sie ein Umgebungslicht in Verbindung mit anderen Lichten, um die umgebenden Visuellen nicht auf natürliche Weise zu erleuchten.
Anzahl der Lichter Sie können zwei Nicht-Umgebungskompositionslichter in einer beliebigen Kombination verwenden, um ihre Benutzeroberfläche als Ziel zu verwenden. Umgebungslichter sind nicht eingeschränkt; Spot-, Punkt- und Fernlichter sind.
Lebensdauer CompositionLight kann Lebensbedingungen aufweisen (Beispiel: Der Garbage Collector kann das Lichtobjekt wiederverwenden, bevor es verwendet wird). Es wird empfohlen, einen Verweis auf Ihre Lichter zu behalten, indem Sie Leuchten als Mitglied hinzufügen, um die Lebensdauer der Anwendung zu verwalten.
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 Lichteigenschaften festgelegt werden müssen. CompositionLight.Targets muss sich innerhalb der CoordinateSpace-Struktur befindet.

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.

Eigenschaft 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 der das Licht zeigt, wird relativ zum Visuellen Koordinatenbereich angegeben.
Koordinatenraum 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 in dieser Koordinate definierte Offset eines Lichts.
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 denselben visuellen Wert treffen oder wenn der Farbwert eines Lichts groß genug ist, um 1,0 zu überschreiten, kann sich die Farbe des Lichts aufgrund der Klammerung eines Lichtfarbkanals ändern.

Erweiterte Beleuchtungseigenschaften

Eigenschaft 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.
  • Identifizieren von Objekten zu Licht: Ziellicht an relevanten visuellen Elementen.
  • [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 visuelles Element, das mit einer SceneLightingEffect gezeichnet wird, überschreibt die Standardbeleuchtung für dieses visuelle Element.

Beleuchtungseffekt der Szene

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

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 Glanz- und Diffusebeträge 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.

Eigenschaft Beschreibung
Normalkarte NormalMaps erzeugen einen Effekt einer Textur, bei der ein normaler Zeige auf das Licht heller ist und ein normaler Punkt weg ist dimmer. Verwenden Sie zum Hinzufügen einer NormalMap zu Ihrem zielbezogenen visuellen Element einen CompositionSurfaceBrush 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.
Reflectance-Modell Reflectance Model ermöglicht Es Ihnen, zwischen Blinn Phong und physisch basierend Blinn Phong zu wählen. Sie würden physically Based Blinn Phong wählen, wenn Sie komprimierte 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;
}