Membuat Shader dengan Shader Designer di Visual Studio

Dalam artikel ini, Anda mempelajari cara menggunakan Shader Designer untuk membuat berbagai jenis shader.

Membuat shader warna datar dasar

Anda dapat menggunakan Shader Designer dan Directed Graph Shader Language (DGSL) untuk membuat shader warna datar. Efek gambar ini mengatur warna akhir ke nilai warna RGB konstanta. Anda dapat mengimplementasikan efek gambar warna datar dengan menulis nilai warna konstanta warna RGB ke warna output akhir.

Sebelum memulai, pastikan bahwa jendela Properti dan Kotak Alat ditampilkan.

  1. Buat efek gambar DGSL untuk dikerjakan. Untuk informasi tentang cara menambahkan efek gambar DGSL ke proyek Anda, lihat bagian Memulai di Shader Designer.

  2. Hapus node Warna Titik. Gunakan alat Pilih untuk memilih node Warna Titik, lalu pada bilah menu, pilih Edit>Hapus.

  3. Tambahkan node Konstanta Warna ke grafik. Di Kotak Alat, di bawah Konstanta, pilih Konstanta Warna dan pindahkan ke permukaan desain.

  4. Tentukan nilai warna untuk node Konstanta Warna. Gunakan alat Pilih untuk memilih node Konstanta Warna, lalu, di jendela Properti, di properti Output, tentukan nilai warna. Untuk oranye, tentukan nilai (1,0, 0,5, 0,2, 1,0).

  5. Menyambungkani konstanta warna ke warna akhir. Untuk membuat koneksi, pindahkan terminal RGB dari node Konstanta Warna ke terminal RGB dari node Warna Akhir, lalu pindahkan terminal Alfa dari node Konstanta Warna ke terminal Alfa dari node Warna Akhir. Koneksi ini mengatur warna akhir ke konstanta warna yang ditentukan pada langkah sebelumnya.

Ilustrasi berikut menunjukkan grafik efek gambar yang telah selesai dan pratinjau efek gambar yang diterapkan ke kubus.

Catatan

Dalam ilustrasi, warna oranye ditentukan untuk menunjukkan efek dari efek gambar dengan lebih baik.

Shader graph and its result on a 3-D model

Bentuk tertentu mungkin memberikan pratinjau yang lebih baik untuk beberapa efek gambar. Untuk informasi selengkapnya tentang cara mempratinjau efek gambar di Shader Designer, lihat Shader Designer.

Membuat shader Lambert dasar

Anda juga dapat menggunakan Shader Designer dan Directed Graph Shader Language (DGSL) untuk membuat shader pencahayaan yang mengimplementasikan model pencahayaan Lambert klasik.

Model pencahayaan Lambert menggabungkan pencahayaan sekitar dan terarah untuk menaungi objek dalam adegan 3D. Komponen sekitar memberikan tingkat iluminasi dasar dalam adegan 3D. Komponen terarah memberikan iluminasi tambahan dari sumber cahaya terarah (jauh). Pencahayaan sekitar memengaruhi semua permukaan dalam adegan secara merata, terlepas dari orientasinya. Untuk permukaan tertentu, ini adalah produk dari warna sekitar permukaan dan warna dan intensitas pencahayaan sekitar dalam adegan. Pencahayaan terarah mempengaruhi setiap permukaan di adegan secara berbeda, berdasarkan orientasi permukaan sehubungan dengan arah sumber cahaya. Ini adalah produk dari warna difus dan orientasi permukaan, dan warna, intensitas, dan arah sumber cahaya. Permukaan yang menghadap langsung ke sumber cahaya menerima kontribusi maksimum dan permukaan yang tidak menghadap langsung tidak menerima kontribusi. Di bawah model pencahayaan Lambert, komponen sekitar dan satu atau beberapa komponen arah digabungkan untuk menentukan total kontribusi warna difus untuk setiap titik pada objek.

Sebelum memulai, pastikan bahwa jendela Properti dan Kotak Alat ditampilkan.

  1. Buat efek gambar DGSL untuk digunakan. Untuk informasi tentang cara menambahkan efek gambar DGSL ke proyek Anda, lihat bagian Memulai di Shader Designer.

  2. Putuskan sambungan node Warna Titik dari node Warna Akhir. Pilih terminal RGB dari simpul Warna Titik, lalu pilih Putuskan Tautan. Biarkan terminal Alpha tersambung.

  3. Tambahkan simpul Lambert ke grafik. Di Kotak Alat, di bawah Utilitas, pilih Lambert dan pindahkan ke permukaan desain. Simpul lambert menghitung total kontribusi warna difus piksel, berdasarkan parameter pencahayaan sekitar dan difus.

  4. Hubungkan simpul Warna Titik ke simpul Lambert. Dalam mode Pilih, pindahkan terminal RGB dari simpul Warna Titik ke terminal Warna Difus dari simpul Lambert. Koneksi ini menyediakan simpul lambert dengan warna difus terinterpolasi piksel.

  5. Koneksi nilai warna komputasi ke warna akhir. Pindahkan terminal Output dari simpul Lambert ke terminal RGB dari simpul Warna Akhir.

    Ilustrasi berikut menunjukkan grafik efek gambar yang telah selesai dan pratinjau efek gambar yang diterapkan ke model teko.

Catatan

Untuk menunjukkan efek dari efek gambar dengan lebih baik dalam ilustrasi ini, warna oranye telah ditentukan dengan menggunakan parameter MaterialDiffuse dari efek gambar. Game atau aplikasi dapat menggunakan parameter ini untuk menyediakan nilai warna unik untuk setiap objek. Untuk informasi tentang parameter material, lihat Shader Designer.

The Lambert shader graph and a preview of its effect.

Ilustrasi berikut menunjukkan efek gambar yang dijelaskan dalam dokumen ini diterapkan ke model 3D.

Lambert lighting applied to a model.

Membuat shader Phong dasar

Anda juga dapat menggunakan Shader Designer dan Directed Graph Shader Language (DGSL) untuk membuat shader pencahayaan yang mengimplementasikan model pencahayaan Phong klasik.

Model pencahayaan Phong memperluas model pencahayaan Lambert untuk menyertakan penyorotan spekular, yang mensimulasikan sifat reflektif permukaan. Komponen spekular memberikan iluminasi tambahan dari sumber cahaya arah yang sama yang digunakan dalam model pencahayaan Lambert, tetapi kontribusinya terhadap warna akhir diproses secara berbeda. Penyorotan spekular mempengaruhi setiap permukaan dalam adegan secara berbeda, berdasarkan hubungan antara arah tampilan, arah sumber cahaya, dan orientasi permukaan. Ini adalah produk dari warna spekular, kekuatan spekular, dan orientasi permukaan, dan warna, intensitas, dan arah sumber cahaya. Permukaan yang mencerminkan sumber cahaya langsung di penampil menerima kontribusi spekular maksimum dan permukaan yang mencerminkan sumber cahaya jauh dari pemirsa tidak menerima kontribusi. Di bawah model pencahayaan Phong, satu atau beberapa komponen spekular digabungkan untuk menentukan warna dan intensitas penyorotan spekular untuk setiap titik pada objek, dan kemudian ditambahkan ke hasil model pencahayaan Lambert untuk menghasilkan warna akhir piksel.

Untuk informasi selengkapnya tentang model pencahayaan Lambert, lihat Cara: Membuat efek gambar Lambert dasar.

Sebelum memulai, pastikan bahwa jendela Properti dan Kotak Alat ditampilkan.

  1. Buat efek gambar Lambert, seperti yang dijelaskan dalam Cara: Membuat efek gambar Lambert dasar.

  2. Putuskan sambungan node Lambert dari node Warna Akhir. Pilih terminal RGB node Lambert, lalu pilih Putuskan Tautan. Ini membuat ruang untuk node yang ditambahkan di langkah berikutnya.

  3. Tambahkan node Tambahkan ke grafik. Di Toolbox, di bawah Matematika, pilih Tambahkan dan pindahkan ke permukaan desain.

  4. Tambahkan node Specular ke grafik. Di Toolbox, di bawah Utilitas, pilih Spekular dan pindahkan ke permukaan desain.

  5. Tambahkan kontribusi spekular. Pindahkan terminal Outputnode Spekular ke terminal X dari node Tambahkan, lalu pindahkan terminal Output node Lambert ke terminal Y dari node Tambahkan. Koneksi ini menggabungkan total difus dan kontribusi warna spekular untuk piksel.

  6. Koneksi nilai warna komputasi ke warna akhir. Pindahkan terminal Output dari tambahkan node ke terminal RGB dari node Warna Akhir .

    Ilustrasi berikut menunjukkan grafik efek gambar yang telah selesai dan pratinjau efek gambar yang diterapkan ke model teko.

Catatan

Untuk lebih menunjukkan efek gambar dalam ilustrasi ini, warna oranye telah ditentukan dengan menggunakan parameter MaterialDiffuse dari efek gambar, dan finishing yang tampak metalik telah ditentukan dengan menggunakan parameter MaterialSpecular dan MaterialSpecularPower. Untuk informasi tentang parameter material, lihat Shader Designer.

Phong Shader graph and a preview of its effect.

Bentuk tertentu mungkin memberikan pratinjau yang lebih baik untuk beberapa efek gambar. Untuk mempelajari selengkapnya tentang mempratinjau shader, lihat Shader Designer.

Ilustrasi berikut menunjukkan efek gambar yang dijelaskan dalam dokumen ini diterapkan ke model 3D. Properti MaterialSpecular diatur ke (1.00, 0.50, 0.20, 0.00), dan properti MaterialSpecularPower-nya diatur ke 16.

Catatan

Properti MaterialSpecular menentukan akhir material permukaan yang jelas. Permukaan kilau tinggi seperti kaca atau plastik cenderung memiliki warna spekular yang merupakan bayangan putih yang cerah. Permukaan logam cenderung memiliki warna spekular yang dekat dengan warna difusnya. Permukaan satin-finish cenderung memiliki warna spekular yang merupakan warna gelap abu-abu.

Properti MaterialSpecularPower menentukan seberapa intens sorotan spekular. Kekuatan spekular tinggi mensimulasikan sorotan yang lebih kusam dan lebih lokal. Daya spekular yang sangat rendah mensimulasikan sorotan intens dan menyapu yang dapat mengabaikan dan menyembunyikan warna seluruh permukaan.

Phong lighting applied to a model

Membuat shader tekstur dasar

Gunakan Shader Designer dan Directed Graph Shader Language (DGSL) untuk membuat shader tekstur tunggal. Efek gambar ini mengatur warna akhir langsung ke nilai RGB dan alfa yang diambil sampelnya dari tekstur.

Anda dapat mengimplementasikan efek gambar tekstur tunggal dasar dengan menulis nilai warna dan alfa sampel tekstur langsung ke warna output akhir.

Sebelum memulai, pastikan bahwa jendela Properti dan Kotak Alat ditampilkan.

  1. Buat efek gambar DGSL untuk dikerjakan. Untuk informasi tentang cara menambahkan efek gambar DGSL ke proyek Anda, lihat bagian Memulai di Shader Designer.

  2. Hapus node Warna Titik. Dalam mode Pilih, pilih node Warna Titik, lalu pada bilah menu, pilih Edit>Hapus. Ini membuat ruang untuk node yang ditambahkan di langkah berikutnya.

  3. Tambahkan node Sampel Tekstur ke grafik. Di Kotak Alat, di bawah Tekstur, pilih Sampel Tekstur dan pindahkan ke permukaan desain.

  4. Tambahkan node Koordinasi Tekstur ke grafik. Di Kotak Alat, di bawah Tekstur, pilih Koordinat Tekstur dan pindahkan ke permukaan desain.

  5. Pilih tekstur yang akan diterapkan. Dalam mode Pilih, pilih node Sampel Tekstur, lalu di jendela Properti, tentukan tekstur yang ingin Anda gunakan dengan menggunakan properti Nama File.

  6. Membuat tekstur dapat diakses secara publik. Pilih node Sampel Tekstur, lalu di jendela Properti, atur properti Access ke Publik. Sekarang Anda dapat mengatur tekstur dari alat lain, seperti Editor Model.

  7. Menyambungkan koordinat tekstur ke sampel tekstur. Dalam mode Pilih, pindahkan terminal Output node Koordinat Tekstur ke terminal UV node Sampel Tekstur. Koneksi ini mengambil sampel tekstur pada koordinat yang ditentukan.

  8. Menyambungkan sampel tekstur ke warna akhir. Pindahkan terminal RGB dari node Sampel Tekstur ke terminal RGB node Warna Akhir, lalu pindahkan terminal Alfa dari node Sampel Tekstur ke terminal Alfa dari node Warna Akhir.

Ilustrasi berikut menunjukkan grafik efek gambar yang telah selesai dan pratinjau efek gambar yang diterapkan ke kubus.

Catatan

Dalam ilustrasi ini, bidang digunakan sebagai bentuk pratinjau, dan tekstur telah ditentukan untuk menunjukkan efek gambar dengan lebih baik.

Texture shader graph and a preview of its effect

Bentuk tertentu mungkin memberikan pratinjau yang lebih baik untuk beberapa efek gambar. Untuk informasi selengkapnya tentang cara mempratinjau efek gambar di Shader Designer, lihat Shader Designer

Membuat shader tekstur skala abu-abu

Gunakan Shader Designer dan Directed Graph Shader Language (DGSL) untuk membuat shader tekstur skala abu-abu. Efek gambar ini memodifikasi nilai warna RGB dari sampel tekstur, lalu menggunakannya bersama dengan nilai alfa yang tidak dimodifikasi untuk mengatur warna akhir.

Anda dapat mengimplementasikan efek gambar tekstur skala abu-abu dengan memodifikasi nilai warna sampel tekstur sebelum Anda menulisnya ke warna output akhir.

Sebelum memulai, pastikan bahwa jendela Properti dan Kotak Alat ditampilkan.

  1. Buat efek gambar tekstur dasar, seperti yang dijelaskan dalam Cara: Membuat efek gambar tekstur dasar.

  2. Putuskan sambungan terminal RGB dari node Sampel Tekstur dari terminal RGB node Warna Akhir. Dalam mode Pilih , pilih terminal RGB dari node Sampel Tekstur, lalu pilih Putuskan Link. Ini membuat ruang untuk node yang ditambahkan di langkah berikutnya.

  3. Tambahkan node Desaturate ke grafik. Di Kotak Alat, di bawah Filter, pilih Desaturasi dan pindahkan ke permukaan desain.

  4. Hitung nilai skala abu-abu dengan menggunakan node Desaturate. Dalam mode Pilih , pindahkan terminal RGB dari node Sampel Tekstur ke terminal RGB node Desaturate.

    Catatan

    Secara default, node Desaturate sepenuhnya men-desaturasi warna input, dan menggunakan bobot luminansi standar untuk konversi skala abu-abu. Anda dapat mengubah bagaimana node Desaturate berperilaku dengan mengubah nilai properti Luminance, atau hanya dengan men-desaturasi sebagian warna input. Untuk men-desaturasi sebagian warna input, berikan nilai skalar dalam rentang [0,1) ke terminal Persen dari node Desaturate.

  5. Koneksi nilai warna skala abu-abu ke warna akhir. Pindahkan terminal Output node Desaturate ke terminal RGB dari node Warna Akhir.

Ilustrasi berikut menunjukkan grafik efek gambar yang telah selesai dan pratinjau efek gambar yang diterapkan ke kubus.

Dalam ilustrasi ini, bidang digunakan sebagai bentuk pratinjau, dan tekstur telah ditentukan untuk menunjukkan efek gambar dengan lebih baik. Bentuk tertentu mungkin memberikan pratinjau yang lebih baik untuk beberapa efek gambar. Untuk mempelajari selengkapnya tentang mempratinjau shader, lihat Shader Designer.

Grayscale texture shader graph and a preview of its effect

Membuat shader gradien berbasis geometri

Gunakan Shader Designer dan Directed Graph Shader Language untuk membuat shader gradien berbasis geometri. Efek gambar ini menskalakan nilai warna RGB konstan dengan tinggi setiap titik objek di ruang dunia.

Anda dapat menerapkan efek gambar berbasis geometri dengan menggabungkan posisi piksel ke dalam efek gambar Anda. Dalam bahasa bayangan, piksel berisi lebih banyak informasi daripada hanya warna dan lokasinya pada layar 2D. Piksel—yang dikenal sebagai fragmen di beberapa sistem—adalah kumpulan nilai yang menjelaskan permukaan yang sesuai dengan piksel. Efek gambar yang dijelaskan dalam dokumen ini menggunakan tinggi setiap piksel objek 3D di ruang dunia untuk memengaruhi warna output akhir fragmen.

Sebelum memulai, pastikan bahwa jendela Properti dan Kotak Alat ditampilkan.

  1. Buat efek gambar DGSL untuk digunakan. Untuk informasi tentang cara menambahkan shader DGSL ke proyek Anda, lihat bagian Memulai di Tentang Shader Designer.

  2. Putuskan sambungan node Warna Titik dari node Warna Akhir. Pilih terminal RGB dari simpul Warna Titik, lalu pilih Putuskan Tautan. Ini membuat ruang untuk node yang ditambahkan di langkah berikutnya.

  3. Tambahkan node Kalikan ke grafik. Di Kotak Alat, di bawah Matematika, pilih Kalikan dan pindahkan ke permukaan desain.

  4. Tambahkan node Vektor Mask ke grafik. Di Kotak Alat, di bawah Utilitas, pilih Vektor Mask dan pindahkan ke permukaan desain.

  5. Tentukan nilai mask untuk node Vektor Mask. Dalam mode Pilih, pilih node Vektor Mask, lalu di jendela Properti, atur properti Hijau/Y ke True, lalu atur properti Merah/X, Biru/Z, dan Alfa/W ke False. Dalam contoh ini, properti Merah/X, Hijau/Y, dan Biru/Z sesuai dengan komponen x, y, dan z dari node Posisi Dunia, dan Alfa/W tidak digunakan. Karena hanya Hijau/Y yang diatur ke True, hanya komponen y dari vektor input yang tersisa setelah ditutupi.

  6. Tambahkan node Posisi Dunia ke grafik. Di Kotak Alat, di bawah Konstanta, pilih Posisi Dunia dan pindahkan ke permukaan desain.

  7. Tutupi posisi ruang dunia dari fragmen. Dalam mode Pilih, pindahkan terminal Output node Posisi Dunia ke terminal Vektor node Vektor Mask. Koneksi ini menutupi posisi fragmen untuk mengabaikan komponen x dan z.

  8. Kalikan konstanta warna RGB dengan posisi ruang dunia yang ditutupi. Pindahkan terminal RGB dari node Warna Titik ke terminal Y node Kalikan, lalu pindahkan terminal Output node Vektor Mask ke terminal X node Kalikan. Koneksi ini menskalakan nilai warna berdasarkan tinggi piksel di ruang dunia.

  9. Sambungkan nilai warna yang diskalakan ke warna akhir. Pindahkan terminal Output node Kalikan ke terminal RGB dari node Warna Akhir.

Ilustrasi berikut menunjukkan grafik efek gambar yang telah selesai dan pratinjau efek gambar yang diterapkan ke bola.

Catatan

Dalam ilustrasi ini, warna oranye ditentukan untuk menunjukkan efek gambar dengan lebih baik, tetapi karena bentuk pratinjau tidak memiliki posisi di ruang dunia, efek gambar tidak dapat sepenuhnya dipratinjau di Shader Designer. Efek gambar harus dipratinjau dalam adegan nyata untuk menunjukkan efek penuh.

Gradient Shader graph and a preview of its effect

Bentuk tertentu mungkin memberikan pratinjau yang lebih baik untuk beberapa efek gambar. Untuk mempelajari selengkapnya tentang mempratinjau shader, lihat Shader Designer.

Ilustrasi berikut menunjukkan efek gambar yang dijelaskan dalam dokumen ini diterapkan ke adegan 3D yang ditunjukkan dalam Cara: Medan Model 3D. Intensitas warna meningkat dengan tinggi titik di dunia.

Gradient effect applied to a 3-D terrain model

Untuk mengetahui informasi selengkapnya tentang cara menerapkan efek gambar ke model 3D, lihat Cara: Menerapkan efek gambar ke model 3D.