Partager via

Utilisation de lumières

Les API Microsoft.UI.Composition dans le Kit de développement logiciel (SDK) d’application Windows vous permettent de créer des animations et des effets en temps réel. L’éclairage de composition permet l’éclairage 3D dans les applications 2D. Dans cette vue d’ensemble, nous allons examiner la fonctionnalité de configuration des éclairages de composition, identifier les visuels qui recevront chaque lumière, et utiliser des effets pour déterminer les matériaux de votre contenu.

Note

Pour lire comment les objets XamlLight appliquent CompositionLights pour éclairer les UIElements XAML, consultez l’éclairage XAML.

L’éclairage de composition vous permet de créer une interface utilisateur intéressante en autorisant :

  • Transformation d’une lumière indépendante d’autres objets de la scène pour permettre des scénarios immersifs tels que des scènes de lecture de musique.
  • Possibilité de coupler un objet avec une lumière afin qu’ils se déplacent ensemble indépendamment du reste de la scène pour permettre des scénarios tels que Fluent Reveal surbrillance.
  • Transformation de la lumière et de toute la scène en tant que groupe afin de créer des matériaux et de la profondeur.

L’éclairage de composition prend en charge trois concepts clés : Light, Targets et SceneLightingEffect.

Lumière

CompositionLight vous permet de créer différentes lumières et de les placer dans l’espace de coordonnées. Ces lumières ciblent les éléments visuels que vous souhaitez identifier comme éclairés.

Types de lumière

Type Description
AmbientLight Source de lumière qui émet une lumière non directionnelle qui apparaît réfléchie par tout ce qui se trouve dans la scène.
DistantLight Source de lumière infiniment distante qui émet la lumière dans une direction unique. Comme le soleil.
PointLight Source de point de lumière qui émet la lumière dans toutes les directions. Comme un ampoule.
Projecteur Source de lumière qui émet des cônes internes et externes de la lumière. Comme une lampe de poche.

Les cibles

Lorsque les lumières ciblent un visuel (ajouter à la liste Cibles ), le visuel et tous ses descendants sont conscients et répondent à cette source de lumière. Cela peut être aussi simple que de définir une source PointLight à la racine d’une arborescence et tous les visuels ci-dessous réagissent à l’animation de la direction de la lumière de point.

ExclusionsFromTargets vous donne la possibilité de supprimer l’éclairage d’un visuel ou d’une sous-arborescence de visuels de manière similaire à l’ajout de cibles. Les enfants de l’arborescence enracinées par le visuel exclu ne sont donc pas allumés.

Échantillon (Cibles)

Dans l’exemple ci-dessous, nous utilisons un PointLight pour cibler un 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

En ajoutant une animation au décalage de la lumière ponctuelle, un effet scintillant est facilement atteint.

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

Pour en savoir plus, consultez l’exemple Text Shimmer complet sur GitHub.

Restrictions

Il existe plusieurs facteurs à prendre en compte lors de la détermination du contenu qui sera allumé par CompositionLight.

Concept Détails
Lumière ambiante L’ajout d’une lumière non ambiante à votre scène désactive toute lumière existante. Les éléments non ciblés par une lumière non ambiante apparaissent noirs. Pour illuminer les visuels environnants non ciblés par la lumière de manière naturelle, utilisez une lumière ambiante conjointement avec d’autres lumières.
Nombre de lumières Vous pouvez utiliser deux lumières de composition non ambiantes dans n’importe quelle combinaison pour cibler votre interface utilisateur. Les lumières ambiantes ne sont pas limitées ; les lumières spot, point et distantes le sont.
Durée de vie CompositionLight peut rencontrer des conditions liées à sa durée de vie (par exemple : le ramasse-miettes peut recycler l'objet lumineux avant qu'il ne soit utilisé). Nous vous recommandons de conserver une référence à vos lumières en ajoutant des lumières en tant que membre pour aider l’application à gérer la durée de vie.
Transformations Les lumières doivent être placées dans un nœud au-dessus de l’interface utilisateur qui utilise des effets tels que des transformations de perspective dans votre structure visuelle pour être dessinées correctement.
Cibles et espace de coordonnées CoordinateSpace est l’espace visuel dans lequel toutes les propriétés de la lumière doivent être définies. CompositionLight.Targets doit se trouver dans l’arborescence CoordinateSpace.

Propriétés de l’éclairage

Selon le type de lumière utilisé, une lumière peut avoir des propriétés pour l’atténuation et l’espace. Tous les types de lumières n’utilisent pas toutes les propriétés.

Propriété Description
Couleur Couleur de la lumière. Les valeurs de couleur d’éclairage sont définies par D3D Diffuse, Ambient et Specular qui définit la couleur émise. L’éclairage utilise des valeurs RVBA pour les lumières ; le composant de couleur alpha n’est pas utilisé.
Direction Direction de la lumière. La direction vers laquelle la lumière est orientée est spécifiée par rapport au visuel CoordinateSpace.
Espace de coordonnées Chaque visuel a un espace de coordonnées 3D implicite. La direction X est de gauche à droite. Le sens Y est de haut en bas. La direction Z est un point hors de l’avion. Le point d’origine de cette coordonnée est le coin supérieur gauche du visuel, et l’unité est Device Independent Pixel (DIP). Le décalage d’une lumière est défini dans cette coordonnée.
Cônes internes et externes Les projecteurs émettent un cône de lumière qui a deux parties : un cône intérieur lumineux et un cône externe. La composition vous permet de contrôler les angles et la couleur des cônes internes et externes.
offset Décalage de la source de lumière par rapport à son espace de coordonnées Visuel.

Note

Lorsque plusieurs lumières atteignent le même élément visuel, ou lorsque la valeur de couleur d’une lumière devient suffisamment élevée pour dépasser 1,0, la couleur de la lumière peut changer en raison de la limitation du canal de couleur d’une lumière.

Propriétés avancées de l’éclairage

Propriété Description
Intensité Contrôle la luminosité de la lumière.
Atténuation L'atténuation contrôle comment l’intensité d’une lumière diminue en fonction de la distance maximale spécifiée par la propriété de portée. Les propriétés d’atténuation constante, quadratique et linéaire peuvent être utilisées.

Prise en main de l’éclairage

Suivez ces étapes générales pour ajouter des lumières :

  • Créez et placez les lumières : créez des lumières et placez-les dans un espace de coordonnées spécifié.
  • Identifier les objets à éclairer : ciblez la lumière sur les visuels pertinents.
  • [Facultatif] Définissez la façon dont les objets individuels réagissent aux lumières : utilisez SceneLightingEffect avec un EffectBrush pour personnaliser la réflexion de lumière pour afficher le SpriteVisual. Les valeurs par défaut de réflexion prennent en charge l’éclairage des enfants de l’espace de coordonnées d’une source de lumière. Un visuel peint avec un SceneLightingEffect remplace l’éclairage par défaut pour ce visuel.

Effet Éclairage de Scène

SceneLightingEffect est utilisé pour modifier l’éclairage par défaut appliqué au contenu d’un SpriteVisual ciblé par un Objet CompositionLight.

SceneLightingEffect est fréquemment utilisé pour la création de matériaux. Un SceneLightingEffect est un effet utilisé lorsque vous souhaitez obtenir quelque chose de plus complexe, comme activer les propriétés réfléchissantes sur une image et/ou fournir une illusion de profondeur avec une carte normale. Un SceneLightingEffect permet de personnaliser votre interface utilisateur à l’aide des propriétés d’éclairage telles que les quantités spéculaires et diffuses. Vous pouvez personnaliser davantage les effets d’éclairage avec le reste du pipeline d’effets, ce qui vous permet individuellement de mélanger et de composer différentes réactions d’éclairage avec votre contenu.

Note

L’éclairage de scène ne produit pas d’ombres ; il s’agit d’un effet axé sur le rendu 2D. Il ne prend pas en compte les scénarios d’éclairage 3D qui incluent des modèles d’éclairage réels, y compris les ombres.

Propriété Description
Carte normale NormalMaps créent un effet de texture où un normal pointant vers la lumière sera plus lumineux et un normal pointant à l'opposé sera plus sombre. Pour ajouter un NormalMap à votre visuel ciblé, utilisez un CompositionSurfaceBrush en utilisant LoadedImageSurface pour charger une ressource NormalMap.
Ambiante Les propriétés ambiantes sont principalement utilisées pour contrôler la réflexion de couleur globale.
Spéculaire La réflexion spéculaire crée des surbrillances sur les objets, ce qui les rend brillants. Vous pouvez contrôler le niveau de réflexion spéculaire ainsi que le niveau de brillance. Ces propriétés sont manipulées pour créer des effets matériels tels que des métaux brillants ou du papier brillant.
Diffuse La réflexion diffuse éparpille la lumière dans toutes les directions.
Modèle de réflectance Le modèle de réflexion vous permet de choisir entre Blinn Phong et Blinn Phong physiquement basé. Vous choisiriez Physically Based Blinn Phong lorsque vous souhaitez avoir des points de lumière spéculaires condensés.

Sample (SceneLightingEffect)

L’exemple ci-dessous montre comment ajouter une carte normale à un 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