Delen via

Lichten gebruiken in de Gebruikersinterface van Windows

Met de API's voor Windows.UI.Composition kunt u realtime animaties en effecten maken. Samenstellingsverlichting maakt 3D-verlichting in 2D-toepassingen mogelijk. 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 objecten CompositionLights toepast 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 te koppelen aan een licht, zodat ze zich onafhankelijk van de rest van de scène bewegen om scenario's zoals Fluent Reveal markeer 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: Light, Targetsen SceneLightingEffect.

Licht

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

Lichttypen

Typologie 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 worden gericht op een visueel element (toevoegen aan de Doelen lijst), zijn het visuele element en al zijn onderdelen zich bewust van en reageren op deze lichtbron. Dit kan iets eenvoudigs zijn als het instellen van een PointLight-bron bij de wortel van een boom, en alle visuals daaronder reageren op de animatie van de richting van het puntlicht.

ExclusionsFromTargets biedt u de mogelijkheid om de verlichting van een visual of een substructuur van visuals op een vergelijkbare manier te verwijderen als dat u doelen toevoegt. Kinderen in de boom, die niet zichtbaar zijn door de geweigerde visualisatie, worden daardoor niet verlicht.

Voorbeeld (doelen)

In het onderstaande voorbeeld gebruiken we een CompositionPointLight 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 voorbeeld van Text Shimmer op GitHub voor meer informatie.

Beperkingen

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

Begrip Bijzonderheden
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 omliggende beelden op natuurlijke wijze te verlichten die niet door het directe licht worden aangestraald.
Aantal lichten U kunt twee niet-omgevingscompositielichten in elke combinatie gebruiken om uw gebruikersinterface te richten. Omgevingslichten zijn niet beperkt; spot, point en verre lichten zijn.
levensduur CompositionLight kan levensomstandigheden ervaren (bijvoorbeeld: de vuilnisverzamelaar kan het lichtobject recyclen voordat het wordt gebruikt). We raden u aan een verwijzing naar uw lichten te bewaren door lichten als onderdeel toe te voegen om de toepassing te helpen de gebruiksduur te beheren.
transformeert Lichten moeten worden geplaatst in een knooppunt boven de gebruikersinterface dat gebruikmaakt van effecten zoals perspectieftransformaties in uw visuele structuur, zodat ze correct worden getekend.
doelen en coördinaatruimte 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- Diffuse, Omgevings- en Speculaire kleuren, die de uitgestraalde kleur bepalen. Verlichting maakt gebruik van RGBA-waarden voor lichten; het alfakleuronderdeel wordt niet gebruikt.
richting De richting van het licht. De richting waarin het licht wijst, wordt opgegeven ten opzichte van de CoordinateSpace Visual.
Coördinaatruimte 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). Een offset van een licht dat in deze coördinaat is gedefinieerd.
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 een lichtkleurkanaal.

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.
  • Objecten identificeren om te verlichten: richt het licht op relevante visuals.
  • [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 die is toegepast op de inhoud van een SpriteVisual, waarop een CompositionLightis gericht, te wijzigen.

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 Normaalkaarten creëren een effect van een textuur waarbij een normaal die naar het licht wijst helderder zal zijn en een normaal die van het licht af wijst donkerder zal worden. Als u een NormalMap wilt toevoegen aan uw doelvisual, 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 Fysiek-gebaseerde Blinn Phong. U kiest op fysica gebaseerde Blinn Phong als u gecondenseerde speculaire glinsteringen wilt hebben.

Voorbeeld (ScèneLightingEffect)

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;
}