Bagikan melalui

Menggunakan lampu

API Microsoft.UI.Composition di Windows App SDK memungkinkan Anda membuat animasi dan efek real-time. Pencahayaan komposisi memungkinkan pencahayaan 3D dalam aplikasi 2D. Dalam gambaran umum ini, kita akan menjelaskan cara menyiapkan lampu komposisi, mengidentifikasi elemen visual yang menerima setiap cahaya, dan menggunakan efek pencahayaan untuk menentukan bahan bagi konten Anda.

Nota

Untuk membaca bagaimana objek XamlLight menerapkan CompositionLights untuk menerangi UIElements XAML, lihat pencahayaan XAML.

Pencahayaan komposisi memungkinkan Anda membuat UI yang menarik dengan memungkinkan:

  • Transformasi cahaya yang independen dari objek lain dalam adegan untuk memungkinkan skenario imersif seperti adegan pemutaran musik.
  • Kemampuan untuk memasangkan objek dengan cahaya sehingga mereka bergerak bersama-sama independen dari sisa adegan untuk mengaktifkan skenario seperti sorotan Fluent Reveal .
  • Transformasi cahaya dan keseluruhan adegan dalam satu kelompok untuk menciptakan material dan kedalaman.

Pencahayaan komposisi mendukung tiga konsep utama: Light, Targets, dan SceneLightingEffect.

Ringan

CompositionLight memungkinkan Anda membuat berbagai lampu dan menempatkannya di ruang koordinat. Lampu ini menargetkan visual yang ingin Anda identifikasi sebagai menyala oleh cahaya.

Jenis Cahaya

Tipe Deskripsi
AmbientLight Sumber cahaya yang memancarkan cahaya tidak terarah yang terlihat dipantulkan oleh segala sesuatu di dalam adegan.
DistantLight Sumber cahaya jauh yang tak terbatas yang memancarkan cahaya dalam satu arah. Seperti matahari.
PointLight Sumber titik cahaya yang memancarkan cahaya ke segala arah. Seperti bola lampu.
SpotLight Sumber cahaya yang memancarkan kerucut cahaya bagian dalam dan luar. Seperti senter.

Target

Saat lampu menargetkan Visual (tambahkan ke daftar Target ), Visual dan semua turunannya menyadari dan merespons sumber cahaya ini. Ini bisa menjadi sesuatu yang sederhana seperti mengatur sumber PointLight di akar pohon dan semua visual di bawah ini bereaksi terhadap animasi arah cahaya titik.

ExclusionsFromTargets memberi Anda kemampuan untuk menghapus pencahayaan dari elemen visual atau subtree dari elemen visual dengan cara yang mirip seperti saat menambahkan target. Anak-anak di pohon yang berakar dari visual yang dikecualikan tidak menyala sebagai akibatnya.

Sampel (Target)

Dalam sampel di bawah ini, kami menggunakan PointLight untuk menargetkan XAML TextBlock.

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

Dengan menambahkan animasi pada offset lampu titik, efek berkilauan mudah dicapai.

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

Lihat sampel Text Shimmer lengkap di GitHub untuk mempelajari lebih lanjut.

Pembatasan

Ada beberapa faktor yang perlu dipertimbangkan ketika menentukan konten mana yang akan dinyalakan oleh CompositionLight.

Konsep Rincian
Cahaya Sekitar Menambahkan cahaya non-ambient pada adegan Anda akan mematikan semua cahaya yang ada. Item yang tidak ditargetkan oleh cahaya non-sekitar akan tampak hitam. Untuk menerangi visual sekitarnya yang tidak ditargetkan oleh cahaya dengan cara alami, gunakan cahaya sekitar bersama dengan lampu lain.
Jumlah Lampu Anda dapat menggunakan dua lampu komposisi non-sekitar dalam kombinasi apa pun untuk menargetkan UI Anda. Lampu sekitar tidak dibatasi; lampu spot, titik, dan jarak jauh dibatasi.
Seumur hidup CompositionLight mungkin mengalami kondisi seumur hidup (misalnya: pengumpul sampah dapat mendaur ulang objek cahaya sebelum digunakan). Sebaiknya simpan referensi ke lampu Anda dengan menambahkan lampu sebagai anggota untuk membantu aplikasi mengelola masa pakai.
Transformasi Lampu harus ditempatkan dalam simpul di atas UI yang menggunakan efek seperti transformasi perspektif dalam struktur visual Anda untuk digambar dengan benar.
Target dan Ruang Koordinat CoordinateSpace adalah ruang visual tempat semua properti cahaya harus diatur. CompositionLight.Targets harus berada di dalam pohon CoordinateSpace.

Karakteristik Pencahayaan

Tergantung pada jenis cahaya yang digunakan, cahaya dapat memiliki karakteristik redaman dan ruang. Tidak semua jenis lampu menggunakan semua properti.

Harta benda Deskripsi
Warna Warna cahaya. Nilai warna pencahayaan didefinisikan oleh D3D Diffuse, Ambient, dan Specular yang menentukan warna yang dipancarkan. Pencahayaan menggunakan nilai RGBA untuk lampu; komponen warna alfa tidak digunakan.
Arah Arah cahaya. Arah di mana cahaya menunjuk ditentukan relatif terhadap Visual CoordinateSpace-nya .
Ruang Koordinat Setiap Visual memiliki ruang koordinat 3D implisit. Arah X dari kiri ke kanan. Arah Y adalah dari atas ke bawah. Arah Z adalah titik keluar dari pesawat. Titik asli koordinat ini adalah sudut kiri atas visual, dan unitnya adalah Device Independent Pixel (DIP). Offset lampu didefinisikan dalam koordinat ini.
Kerucut Dalam dan Luar Lampu sorot memancarkan kerucut cahaya yang memiliki dua bagian: kerucut bagian dalam yang cerah dan kerucut luar. Komposisi memungkinkan Anda mengontrol sudut dalam dan luar dari kerucut serta warnanya.
Offset Offset sumber cahaya relatif terhadap ruang koordinatnya Visual.

Nota

Ketika beberapa lampu mengenai Visual yang sama, atau setiap kali nilai warna cahaya cukup besar hingga melebihi 1,0, warna cahaya dapat berubah karena penjepitan saluran warna cahaya.

Properti Pencahayaan Tingkat Lanjut

Harta benda Deskripsi
Intensitas Mengontrol kecerahan cahaya.
Redaman Atenuasi mengontrol bagaimana intensitas cahaya menurun menuju jarak maksimum yang ditentukan oleh properti rentang. Properti perenahan Konstanta, Kuadrat, dan Linear dapat digunakan.

Memulai Pencahayaan

Ikuti langkah-langkah umum ini untuk menambahkan lampu:

  • Membuat dan menempatkan lampu: Buat lampu dan letakkan di ruang koordinat tertentu.
  • Identifikasi objek untuk diterangi: Arahkan lampu ke visual yang relevan.
  • [Opsional] Tentukan bagaimana masing-masing objek bereaksi terhadap lampu: Gunakan SceneLightingEffect dengan EffectBrush untuk menyesuaikan pantulan cahaya untuk menampilkan SpriteVisual. Pantulan default menyediakan pencahayaan untuk elemen-elemen di dalam CoordinateSpace dari sumber cahaya. Visual yang dilukis dengan SceneLightingEffect menimpa pencahayaan default untuk visual tersebut.

Efek Pencahayaan Adegan

SceneLightingEffect digunakan untuk memodifikasi pencahayaan default yang diterapkan pada konten SpriteVisual yang ditargetkan oleh CompositionLight.

SceneLightingEffect sering digunakan untuk penciptaan materi. SceneLightingEffect adalah efek yang digunakan ketika Anda ingin mencapai sesuatu yang lebih kompleks, seperti mengaktifkan properti reflektif pada gambar dan/atau memberikan ilusi kedalaman dengan peta normal. SceneLightingEffect menyediakan kemampuan untuk menyesuaikan UI Anda dengan menggunakan properti pencahayaan seperti jumlah spekular dan difus. Anda dapat menyesuaikan efek pencahayaan lebih lanjut dengan sisa alur efek yang memungkinkan Anda untuk memadukan dan menyusun reaksi pencahayaan yang berbeda dengan konten Anda.

Nota

Pencahayaan adegan tidak menghasilkan bayangan; ini adalah efek yang berfokus pada penyajian 2D. Ini tidak mempertimbangkan skenario pencahayaan 3D yang mencakup model pencahayaan nyata, termasuk bayangan.

Harta benda Deskripsi
Normal Map NormalMaps menciptakan efek tekstur di mana vektor normal yang mengarah ke cahaya akan lebih terang dan vektor normal yang menjauhi cahaya akan lebih redup. Untuk menambahkan NormalMap ke visual yang ditargetkan, gunakan CompositionSurfaceBrush menggunakan LoadedImageSurface untuk memuat aset NormalMap.
sekitar Sifat ambien sebagian besar digunakan untuk mengontrol pantulan warna secara keseluruhan.
Spekular Pantulan spekular menciptakan sorotan pada objek, membuatnya tampak mengkilap. Anda dapat mengontrol tingkat pantulan spekular serta tingkat kilau. Properti ini dimanipulasi untuk menciptakan efek bahan seperti logam mengkilap atau kertas glossy.
Difus Pantulan yang tersebar menyebarkan cahaya ke segala arah.
Model Refleksi Model Refleksi memungkinkan Anda memilih antara Blinn Phong dan Blinn Phong berbasis fisik. Anda akan memilih Blinn Phong Berbasis Fisik ketika Anda ingin memiliki sorotan spekular yang ringkas.

Sampel (SceneLightingEffect)

Sampel di bawah ini menunjukkan cara menambahkan peta normal ke 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