Condividi tramite

Uso delle luci nell'interfaccia utente di Windows

Le API Windows.UI.Composition consentono di creare animazioni ed effetti in tempo reale. L'illuminazione della composizione abilita l'illuminazione 3D nelle applicazioni 2D. In questa panoramica verrà illustrata la funzionalità di configurazione delle luci di composizione, l'identificazione degli oggetti visivi per ricevere ogni luce e l'uso degli effetti per definire i materiali per il contenuto.

Nota

Per informazioni su come gli oggetti XamlLight applicano CompositionLights per illuminare gli UIElement XAML, vedere Illuminazione XAML.

L'illuminazione della composizione consente di creare un'interfaccia utente interessante consentendo:

  • Trasformazione di una luce indipendente da altri oggetti nella scena per abilitare scenari immersivi come scene di riproduzione musicale.
  • La possibilità di associare un oggetto a una luce in modo da farli spostare insieme indipendentemente dal resto della scena per abilitare scenari come l'evidenziazione Fluent Reveal.
  • Trasformazione della luce e dell'intera scena come gruppo per creare materiali e profondità.

L'illuminazione della composizione supporta tre concetti chiave: Luce, Destinazioni e SceneLightingEffect.

Leggero

CompositionLight consente di creare varie luci e posizionarle nello spazio delle coordinate. Queste luci hanno come destinazione gli oggetti visivi che si desidera identificare come illuminati dalla luce.

Tipi di luce

Tipo Descrizione
AmbientLight Sorgente luminosa che emette luce non direzionale che appare riflessa da tutto ciò che si trova nella scena.
DistantLight Sorgente luminosa infinitamente grande che emette luce in un'unica direzione. Come il sole.
PointLight Fonte di luce che emette luce in tutte le direzioni. Come una lampadina.
Riflettore Sorgente luminosa che emette coni interni ed esterni di luce. Come una torcia.

Target

Quando le luci puntano a un oggetto visivo (aggiungere all'elenco Destinazioni), l'oggetto visivo e tutti i relativi discendenti sono consapevoli e rispondono a questa sorgente luminosa. Può trattarsi di qualcosa di semplice come un'impostazione di un'origine PointLight alla radice di un albero e tutti gli oggetti visivi seguenti reagiscono all'animazione della direzione dei punti di luce.

ExclusionsFromTargets consente di rimuovere l'illuminazione di un oggetto visivo o di un sottoalbero di oggetti visivi in modo analogo all'aggiunta di destinazioni. Gli elementi figlio nella struttura ad albero radicati dall'oggetto visivo escluso non vengono quindi illuminati.

Esempio (Destinazioni)

Nell'esempio seguente viene usato CompositionPointLight per definire come destinazione un controllo 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

Aggiungendo animazione all'offset del punto di luce, si ottiene facilmente un effetto scintillante.

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

Per altre informazioni, vedere l'esempio completo di Text Shimmer su GitHub.

Restrizioni

Esistono diversi fattori da considerare quando si determina quale contenuto verrà illuminato da CompositionLight.

Concetto Dettagli
Luce Ambientale L'aggiunta di una luce non ambientale alla scena spegnerà tutta la luce esistente. Gli elementi non destinati a una luce non ambientale appariranno in nero. Per illuminare gli oggetti visivi circostanti non interessati dalla luce in modo naturale, utilizzare una luce ambientale in combinazione con altre luci.
Numero di luci È possibile usare due luci di composizione non ambientale in qualsiasi combinazione per indirizzare l'interfaccia utente. Le luci ambientali non sono limitate; lo sono invece le luci spot, punti di luce e luci distanti.
Durata CompositionLight può riscontrare condizioni di durata(ad esempio, il Garbage Collector può riciclare l'oggetto luce prima che venga usato). È consigliabile mantenere un riferimento alle luci aggiungendo luci come membro per aiutare l'applicazione a gestirne la durata.
Trasformazioni Le luci devono essere posizionate in un nodo sopra l'interfaccia utente che usa effetti come le trasformazioni prospettiche nella struttura visiva per poter essere disegnate correttamente.
Destinazioni e spazio di coordinate CoordinateSpace è lo spazio visivo in cui devono essere impostate tutte le proprietà delle luci. CompositionLight.Targets deve trovarsi all'interno dell'albero CoordinateSpace.

Proprietà di illuminazione

A seconda del tipo di luce utilizzata, una luce può avere proprietà per l'attenuazione e lo spazio. Non tutti i tipi di luci utilizzano tutte le proprietà.

Proprietà Descrizione
Colore Il colore della luce. I valori dei colori di illuminazione sono definiti da D3D Diffuse, Ambient e Specular che definisce il colore generato. L'illuminazione usa valori RGBA per le luci; il componente colore alfa non viene utilizzato.
Direzione Direzione della luce. La direzione in cui la luce punta viene specificata rispetto al relativo oggetto visivo CoordinateSpace.
Spazio delle Coordinate Ogni oggetto visivo ha uno spazio di coordinate 3D implicito. La direzione X è da sinistra a destra. La direzione Y è dall'alto verso il basso. La direzione Z è un punto fuori dal piano. Il punto originale di questa coordinata è l'angolo superiore sinistro dell'oggetto visivo e l'unità è Device Independent Pixel (DIP). Offset della luce definito in questa coordinata.
Coni interni ed esterni Le luci Spotlight generano un cono di luce che consta di due parti: un cono interno luminoso e un cono esterno. La composizione consente di controllare gli angoli interni ed esterni del cono e il colore.
offset Offset della sorgente luminosa rispetto all'oggetto visivo dello spazio delle coordinate.

Nota

Quando più luci colpiscono lo stesso oggetto visivo o ogni volta che il valore di colore di una luce diventa sufficientemente grande da superare 1.0, il colore della luce può cambiare a causa del blocco di un canale di colore delle luci.

Proprietà di illuminazione avanzate

Proprietà Descrizione
Intensità Controlla la luminosità della luce.
Attenuazione L'attenuazione controlla il modo in cui l'intensità di una luce diminuisce verso la distanza massima specificata dalla proprietà range. È possibile utilizzare le proprietà di attenuazione costante, quadratica e lineare.

Introduzione all'illuminazione

Seguire questi passaggi generali per aggiungere luci:

  • Creare e posizionare le luci: creare luci e posizionarle in uno spazio di coordinate specificato.
  • Identificare gli oggetti alla luce: indirizzare la luce agli oggetti visivi pertinenti.
  • [Facoltativo] Definire il modo in cui i singoli oggetti reagiscono alle luci: usare SceneLightingEffect con EffectBrush per personalizzare la riflessione della luce per la visualizzazione di SpriteVisual. Le impostazioni predefinite di riflessione supportano l'illuminazione degli elementi figlio dello spazio coordinate di una sorgente luminosa. Un oggetto visivo disegnato con SceneLightingEffect sovrascrive l'illuminazione predefinita per tale oggetto visivo.

Effetto di Illuminazione della Scena

SceneLightingEffect viene usato per modificare l'illuminazione predefinita applicata al contenuto di un oggetto SpriteVisual di destinazione di CompositionLight.

SceneLightingEffect viene spesso usato per la creazione di materiali. SceneLightingEffect è un effetto usato quando si desidera ottenere qualcosa di più complesso, ad esempio abilitare proprietà riflettenti su un'immagine e/o fornire un'illusione di profondità con una mappa normale. SceneLightingEffect consente di personalizzare l'interfaccia utente usando le proprietà di illuminazione come quantità speculari e diffuse. È possibile personalizzare ulteriormente gli effetti di illuminazione con il resto della pipeline degli effetti che consente singolarmente di fondere e comporre diverse reazioni di illuminazione con il contenuto.

Nota

L'illuminazione della scena non produce ombre; è un effetto incentrato sul rendering 2D. Non prende in considerazione scenari di illuminazione 3D che includono modelli di illuminazione reali, incluse le ombre.

Proprietà Descrizione
Mappa normale NormalMaps crea l'effetto di una trama in cui un normale puntamento verso la luce sarà più luminoso e un normale puntamento lontano sarà meno luminoso. Per aggiungere un oggetto visivo NormalMap all'oggetto visivo di destinazione, usare CompositionSurfaceBrush usando LoadedImageSurface per caricare un asset NormalMap.
Di ambiente Le proprietà di ambiente vengono usate principalmente per controllare il riflesso generale del colore.
Speculare Il riflesso speculare crea bagliori sugli oggetti, rendendoli lucidi. È possibile controllare il livello di riflessione speculare e il livello di luminosità. Queste proprietà vengono manipolate per creare effetti materiali come metalli luccicanti o carta lucida.
Diffusa Il riflesso diffuso disperde la luce in tutte le direzioni.
Modello di riflessione Il modello di riflessione consente di scegliere tra Blinn Phong e Physically Based Blinn Phong. Scegliere Physically Based Blinn Phong quando si desidera avere evidenziazioni speculari condensate.

Esempio (SceneLightingEffect)

L'esempio seguente mostra come aggiungere una mappa normale a 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