Cara Menggambar Outline dalam Video Game

 (ameye.dev)
2 poin oleh GN⁺ 2025-01-05 | 1 komentar | Bagikan ke WhatsApp

  • Pengantar

    • Rendering outline pada game sering digunakan untuk alasan estetika atau untuk membantu gameplay. Contohnya, game Sable memakai outline untuk menciptakan gaya seperti komik, sementara The Last of Us menggunakannya untuk menyorot musuh.

  • Efek Rim

    • Teknik

      • Dapat merender outline di tepi objek menggunakan efek Fresnel, yang semakin kuat di sisi objek.

    • Implementasi

      • Menggunakan shader kustom yang menerapkan efek Fresnel untuk merender outline pada objek. Cocok untuk objek lembut seperti bola atau kapsul, tetapi tidak cocok untuk objek bersudut tajam seperti kubus.

  • Ekstrusi Vertex

    • Teknik

      • Membentuk outline dengan menyalin objek asli. Vertex pada salinan diperluas untuk membuatnya lebih besar dari objek asli.

    • Arah Ekstrusi

      • Memilih arah untuk memindahkan vertex, yang akan menyesuaikan ukuran objek. Memindahkan vertex di ruang objek akan membentuk outline.

    • Ruang Ekstrusi

      • Ada cara memindahkan vertex di ruang objek dan di ruang clip. Pemindahan di ruang clip menyediakan outline yang seragam.

    • Masking

      • Menghapus bagian depan dari mesh duplikat agar hanya outline yang terlihat.

  • Blur Buffer

    • Teknik

      • Merender siluet objek ke dalam buffer, lalu memburamkannya untuk membentuk outline.

    • Siluet Buffer

      • Membuat buffer siluet dengan merender objek dengan warna tunggal.

    • Pass Blur

      • Menggunakan pass blur untuk memperluas siluet. Menggunakan box blur atau Gaussian blur untuk meningkatkan performa.

    • Pass Outline

      • Menggabungkan siluet yang diburamkan dengan scene asli untuk membentuk outline.

  • Algoritma Jump Flood

    • Merender outline dengan algoritma jump flood. Mampu merender outline lebar dengan biaya performa yang murah.

  • Deteksi Tepi

    • Teknik

      • Menggunakan fullscreen pass untuk mendeteksi discontinuity di scene dan merender outline.

    • Deteksi Discontinuity

      • Menggunakan operator Roberts cross atau Sobel untuk mendeteksi discontinuity.

    • Sumber Discontinuity

      • Mendeteksi discontinuity pada texture depth, normal, dan warna untuk membentuk outline.

    • Penyesuaian Deteksi Tepi

      • Menyesuaikan threshold yang digunakan dalam deteksi discontinuity untuk menghapus artefak.

    • Sumber Discontinuity Kustom

      • Menyediakan sumber discontinuity kustom untuk mengontrol outline.

  • Kesimpulan

    • Terdapat lima metode untuk menggambar outline, yang masing-masing menawarkan trade-off antara performa, fidelitas visual, dan pengaturan manual.

Bacaan terkait

1 komentar

 
GN⁺ 2025-01-05
Komentar Hacker News

  • Saya membaca artikel tentang Jump Flood Algorithm dengan sangat menarik. Menyenangkan memikirkan berbagai pendekatan pada tingkat piksel

    • Cara yang sangat cerdas untuk menghasilkan SDF (Signed Distance Field). Yang mengesankan adalah bisa membuat outline dengan lebar yang diinginkan dalam waktu linear
    • SDF bisa dimanfaatkan dengan berbagai cara, baik berbasis vektor, berbasis fungsi, maupun berbasis texel/voxel. Houdini mendukung SDF raster dengan baik, dan juga punya versi gratis
    • SDF bermanfaat di banyak bidang

  • Diusulkan untuk merender model dengan warna polos lalu mendapatkan outline lewat deteksi tepi. Ini memerlukan satu render pass tambahan

  • Saya tertarik pada proyek R&D untuk grafis 3D bergaya. Ada banyak pertanyaan yang belum terjawab

    • Cara mengurangi detail model 3D bergaya kartun saat kamera melakukan zoom out
    • Cara merender latar belakang 3D seperti lukisan cat air
    • Cara merepresentasikan asap, api, dan pohon dalam game 3D bergaya
    • Cara menyesuaikan model secara otomatis untuk kamera yang bergerak bebas
    • Wujud ideal editor mesh dan latar belakang pada renderer 3D bergaya
    • Kemungkinan merender pixel art retro dari model 3D yang sederhana
    • Cara membuat dunia game 3D lebih akurat secara fisik melalui stilisasi

  • Kami mengembangkan teknik mirip blur buffer di game Astral Divide. Menggunakan anti-aliasing untuk menghasilkan batas. Hasilnya efisien secara performa dan implementasinya sederhana

  • Saya punya semangat untuk technical art, dan berharap pipeline compute shader di Godot bisa lebih baik. Pengaturan plugin compositor saat ini cukup kompleks

  • Saya penasaran apakah setelah kontroversi harga Unity, para developer beralih ke Unreal dan Godot

  • Saya beralih dari pengembangan aplikasi VR ke pengembangan web, tetapi merindukan sensasi ajaib dari kerja grafik 3D, kolisi, dan shader

  • Hasil render deteksi tepi sangat memuaskan. Nampak seperti sebuah adegan dari komik Belanda Franka

  • Menemukan catatan bagus tentang metode deteksi tepi yang diusulkan pengembang Mars First Logistics

  • Usulan teknik sederhana untuk menggambar outline

    • Buat array untuk menyimpan edge unik dari setiap face
    • Ubah edge ke ruang tampilan, lalu gambar edge berdasarkan kondisi tertentu