Lichten gebruiken

Met de API's Microsoft.UI.Composition in de Windows App SDK kunt u realtime animaties en effecten maken. Samenstellingsverlichting maakt 3D-verlichting mogelijk in 2D-toepassingen. In dit overzicht doorlopen we de functionaliteit van het instellen van compositielichten, het identificeren van visuals om elk licht te ontvangen en effecten te gebruiken om materialen voor uw inhoud te definiëren.

Opmerking

Als u wilt lezen hoe XamlLight-objectenCompositionLights toepassen om XAML UIElements te verlichten, raadpleegt u XAML-verlichting.

Met compositieverlichting kunt u interessante gebruikersinterface maken door het volgende toe te staan:

  • Transformatie van een licht onafhankelijk van andere objecten in de scène om meeslepende scenario's mogelijk te maken, zoals scènes voor het afspelen van muziek.
  • De mogelijkheid om een object aan een licht te koppelen zodat ze samen bewegen, onafhankelijk van de rest van de scène, om scenario's zoals Fluent Reveal mogelijk te maken.
  • Transformatie van het licht en de hele scène als groep om materialen en diepte te creëren.

Compositieverlichting ondersteunt drie belangrijke concepten: Licht, Doelen en SceneLightingEffect.

Light

Met CompositionLight kunt u verschillende lichten maken en deze in coördinaatruimte plaatsen. Deze lichten richten zich op visuele elementen die u wilt identificeren als verlicht door het licht.

Lichttypen

Typ Beschrijving
AmbientLight Een lichtbron die niet-richtingslicht uitstraalt dat wordt weergegeven door alles in de scène.
DistantLight Een oneindig grote verre lichtbron die licht in één richting uitstraalt. Net als de zon.
PointLight Een puntbron van licht dat licht in alle richtingen uitzendt. Net als een gloeilamp.
Spotlight Een lichtbron die binnenste en buitenste kegels van licht uitstraalt. Zoals een zaklantaarn.

Doelstellingen

Wanneer lichten gericht zijn op een Visual (toevoegen aan de Doelen lijst), zijn de Visual en al zijn afstammelingen zich bewust van deze lichtbron en reageren erop. Dit kan zo eenvoudig zijn als het instellen van een PointLight-bron bij de wortel van een boom, waarbij alle visuals daaronder reageren op de animatie van de richting van het puntlicht.

ExclusionsFromTargets biedt u de mogelijkheid om de belichting van een visual of van een substructuur van visuals op een vergelijkbare manier te verwijderen als het toevoegen van doelen. Kinderen in de boom, gebaseerd op de visual die is uitgesloten, worden als gevolg daarvan niet verlicht.

Voorbeeld (doelen)

In het onderstaande voorbeeld gebruiken we een PointLight om een XAML TextBlock te targeten.

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

Door animatie toe te voegen aan de verschuiving van het puntlicht, wordt eenvoudig een knipperend effect bereikt.

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

Zie het volledige Text Shimmer-voorbeeld op GitHub voor meer informatie.

Beperkingen

Er zijn verschillende factoren waarmee u rekening moet houden bij het bepalen welke inhoud wordt verlicht door CompositionLight.

Concept Details
Omgevingslicht Als u een niet-omgevingslicht aan uw scène toevoegt, wordt al het bestaande licht uitgeschakeld. Items waarop geen niet-omgevingslicht is gericht, worden zwart weergegeven. Gebruik een omgevingslicht in combinatie met andere lichten om de omringende visuals, die niet door het licht worden gericht, op een natuurlijke manier te verlichten.
Aantal lichten U kunt twee niet-omgevingslichtbronnen in willekeurige combinatie gebruiken voor uw gebruikersinterface. Omgevingslichten zijn niet beperkt; spot-, punt- en verre verlichtingen zijn dat wel.
Levensduur CompositionLight kan levensomstandigheden ervaren (bijvoorbeeld: de vuilnisverzamelaar kan het lichtobject recyclen voordat het wordt gebruikt). We raden u aan een verwijzing naar uw lampen te bewaren door lampen toe te voegen als onderdeel om de levensduur van de toepassing te beheren.
transformaties Lichten moeten worden geplaatst in een knooppunt boven de gebruikersinterface dat gebruikmaakt van effecten zoals perspectieftransformaties in uw visuele structuur om correct te worden getekend.
Doelen en ruimte coördineren CoordinateSpace is de visuele ruimte waarin alle eigenschappen van het licht moeten worden ingesteld. CompositionLight.Targets moet zich in de coördinaatruimtestructuur bevinden.

Eigenschappen van verlichting

Afhankelijk van het type licht dat wordt gebruikt, kan een licht eigenschappen hebben voor vertenuatie en ruimte. Niet alle soorten lichten gebruiken alle eigenschappen.

Vastgoed Beschrijving
Kleur De kleur van het licht. Lichtkleurwaarden worden gedefinieerd door D3D Diffuus, Omgevend en Speculair, die de kleur beschrijven die wordt uitgezonden. Verlichting maakt gebruik van RGBA-waarden voor lichten; het alfakleuronderdeel wordt niet gebruikt.
Richting De richting van het licht. De richting waarin het licht verwijst, wordt opgegeven ten opzichte van de bijbehorende CoordinateSpace Visual.
Coördinatenruimte Elke visual heeft een impliciete 3D-coördinaatruimte. X richting is van links naar rechts. De richting van Y is van boven naar beneden. Z richting is een punt uit het vliegtuig. Het oorspronkelijke punt van deze coördinaat is de linkerbovenhoek van de visual en de eenheid is Device Independent Pixel (DIP). De verschuiving van een licht wordt gedefinieerd in deze coördinaat.
Binnenste en buitenste kegels Spotlights geven een kegel van licht uit die twee delen heeft: een helder binnenste kegel en een buitenste kegel. Met samenstelling kunt u controle houden over binnen- en buitenste kegelhoeken en kleur.
Afstand Verschuiving van de lichtbron ten opzichte van de coördinaatruimte Visual.

Opmerking

Wanneer meerdere lichten op hetzelfde visuele element raken of wanneer de kleurwaarde van een licht groot genoeg wordt om meer dan 1,0 te overschrijden, kan de kleur van het licht veranderen vanwege het vastklemmen van het kleurkanaal van een licht.

Geavanceerde belichtingseigenschappen

Vastgoed Beschrijving
Intensiteit Bepaalt de helderheid van het licht.
Demping Bij intenuatie wordt bepaald hoe de intensiteit van een licht afneemt tot de maximale afstand die is opgegeven door de bereikeigenschap. Eigenschappen voor constante, kwadratische en lineaire attenuatie kunnen worden gebruikt.

Aan de slag met verlichting

Volg deze algemene stappen om lichten toe te voegen:

  • Maak en plaats de lichten: Maak lichten en plaats ze in een opgegeven coördinaatruimte.
  • Identificeer objecten om te verlichten: Richt het licht op relevante beelden.
  • [Optioneel] Definieer hoe afzonderlijke objecten reageren op lichten: Gebruik SceneLightingEffect met een EffectBrush om lichtspiegeling aan te passen voor het weergeven van de SpriteVisual. Weerspiegelingsstandaarden ondersteunen de verlichting van kinderen van de Coördinaatruimte van een lichtbron. Een visual die is geschilderd met een SceneLightingEffect overschrijft de standaardverlichting voor die visual.

Scèneverlichtingseffect

SceneLightingEffect wordt gebruikt om de standaardverlichting te wijzigen die is toegepast op de inhoud van een SpriteVisual waarop een CompositionLight is gericht.

SceneLightingEffect wordt vaak gebruikt voor het maken van materiaal. Een SceneLightingEffect is een effect dat wordt gebruikt wanneer u iets complexer wilt bereiken, zoals het inschakelen van reflecterende eigenschappen op een afbeelding en/of het bieden van een illusie van diepte met een normale kaart. Een SceneLightingEffect biedt de mogelijkheid om uw gebruikersinterface aan te passen met behulp van de lichteigenschappen zoals speculaire en diffuse hoeveelheden. U kunt verlichtingseffecten verder aanpassen met de rest van de effectenpijplijn, zodat u afzonderlijk verschillende belichtingsreacties kunt combineren en opstellen met uw inhoud.

Opmerking

Scèneverlichting produceert geen schaduwen; het is een effect gericht op 2D-rendering. Er wordt geen rekening gehouden met 3D-verlichtingsscenario's met echte verlichtingsmodellen, waaronder schaduwen.

Vastgoed Beschrijving
Normale kaart NormalMaps creëren een effect van een textuur waarbij een normaalvector die naar het licht wijst helderder is en een normaalvector die van het licht afwijst dimmer. Als u een NormalMap wilt toevoegen aan uw beoogde visual, gebruikt u een CompositionSurfaceBrush met behulp van LoadedImageSurface om een NormalMap-asset te laden.
Omgevingsgeluid Omgevingseigenschappen worden meestal gebruikt om de algehele kleurspiegeling te beheren.
speculaire Met een speculaire weerspiegeling worden hoogtepunten op objecten gemaakt, waardoor ze glanzend lijken. U kunt het niveau van speculatieve weerspiegeling en het glansniveau bepalen. Deze eigenschappen worden gemanipuleerd om materiaaleffecten te creëren zoals glanzende metalen of glanzend papier.
diffuse Diffuse reflectie verspreidt het licht in alle richtingen.
Reflectantiemodel Reflectance Model stelt u in staat om te kiezen tussen Blinn Phong en Physically Based Blinn Phong. U kiest fysiek gebaseerde Blinn Phong als u gecondenseerde speculaire hoogtepunten wilt hebben.

Voorbeeld (Scèneverlichtingseffect)

In het onderstaande voorbeeld ziet u hoe u een normale kaart toevoegt aan een 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