Voxel Displacement Renderer – Memodernisasi Estetika 3D Retro
(blog.danielschroeder.me)- Daniel Schroeder sedang mengembangkan renderer real-time yang memperluas sensasi permukaan berpiksel dari game 3D era 90-an menjadi detail permukaan voxel kecil, dengan aset input berupa mesh segitiga low-poly dan tekstur yang sudah akrab digunakan
- Alih-alih mengubah seluruh adegan menjadi grid voxel, renderer ini memakai displacement map agar hanya permukaan yang tampak seperti voxel, menargetkan gaya visual untuk lingkungan statis ala Doom, Quake, dan Duke Nukem
- CPU mengubah mesh segitiga dan informasi displacement terbatas menjadi data geometri untuk GPU serta melakukan prapemrosesan tekstur, sementara rendering frame ditangani GPU hampir secara mandiri
- Demo menunjukkan frame time 4–9 ms pada 1440p di Radeon RX 5700 XT, dan pada 800p di Steam Deck OLED mencapai lebih dari 60 FPS serta 90 FPS terkunci di banyak bagian
- Karena lingkungan tetap dapat diperlakukan sebagai mesh segitiga, collision, character controller, dan pathfinding diselesaikan dengan library fisika yang ada serta pemrosesan berbasis mesh; hanya sebagian sistem yang diperlukan yang perlu menyadari bentuk detail voxel
Memperluas estetika 3D era 90-an dengan permukaan voxel
- Tujuannya adalah mempertahankan geometri lingkungan yang sederhana dan batas tekstur yang tajam khas game 3D klasik era 90-an, sambil menambahkan detail 3D berbentuk blok pada permukaan
- Game 3D awal hingga pertengahan 90-an seperti Doom, Quake, dan Duke Nukem memberi pengaruh besar baik pada teknologi maupun gameplay, dan belakangan keterbatasan visual masa itu sendiri diterima sebagai daya tarik retro
- Titik awalnya adalah pertanyaan: “Bagaimana jika detail permukaan dibuat dengan voxel, bukan piksel?”
- Misalnya, dinding batu kerikil dapat tetap terasa berpiksel dari jarak dekat sekaligus memiliki kedalaman geometris
- Hasilnya dirancang berada di antara tampilan game era 90-an dan ekspresi yang lebih modern
Keterbatasan pendekatan voxel umum
- Mesh voxel umum adalah grid tiga dimensi yang menunjukkan apakah tiap sel berbentuk kubus terisi atau kosong
- Dapat memakai voxel besar yang diberi tekstur seperti Minecraft
- Bisa juga memakai voxel kecil berwarna solid seperti Teardown
- Untuk membuat lingkungan berbasis voxel, semua geometri harus ditempatkan dalam grid bersama, atau beberapa mesh voxel independen harus ditempatkan di ruang yang sama
- Ada tool untuk membuat geometri voxel secara langsung, tetapi proses pembuatannya sering memakan waktu lama dan kerap terbatas pada pembuatan mesh kecil
- Building block seperti dinding atau lantai berbentuk tile dapat dibuat untuk merakit struktur besar, tetapi cocok untuk bangunan yang sejajar grid dan kurang cocok untuk terrain bebas
- Generasi prosedural berguna untuk lingkungan alami dan kombinasi building block, tetapi punya tantangan tersendiri dan hanya cocok untuk jenis game tertentu
- Mesh segitiga yang ada juga dapat dirasterisasi menjadi grid voxel, tetapi karena geometri hasilnya berada pada satu grid voxel, hasil estetika yang tidak diinginkan dapat muncul
- Permukaan yang sejajar sumbu dapat terlihat seperti lempengan voxel datar, sementara permukaan 45 derajat dapat terlihat seperti tangga
- Jika representasi resmi adegan menjadi voxel, bukan hanya rendering tetapi juga logika game seperti fisika, character controller, dan pathfinding NPC mungkin harus bekerja pada level voxel
- Sebagai gantinya, seperti Minecraft dan Teardown, ada keunggulan berupa kemudahan menambahkan atau menghapus geometri dari mesh voxel
Batasan pendekatan displacement umum
- Displacement mapping menggunakan displacement map bersama tekstur untuk menentukan seberapa jauh setiap piksel tekstur bergeser ke dalam atau ke luar dari permukaan mesh
- Software pemodelan 3D dapat membagi mesh menjadi lebih detail lalu memindahkan vertex baru untuk membuat displacement menjadi geometri nyata
- Pendekatan ini juga memengaruhi siluet objek
- Jumlah poligon mesh hasil meningkat tajam
- Mesh input dengan tepi atau sudut keras perlu dimodifikasi agar hasilnya bagus
- Dalam grafis real-time, efek shading permukaan seperti parallax occlusion mapping dapat membuat permukaan tampak seperti memiliki geometri detail tanpa mengubah bentuk sebenarnya
- Ini dapat terlihat bagus pada lantai dan dinding besar
- Di tepi objek, ilusi ini pecah karena geometrinya tetap datar
- shell mapping adalah pendekatan perantara yang memungkinkan displacement terlihat pada siluet objek tanpa mesh yang sangat tersubdivisi
- Sulit ditangani pada area mesh input dengan kurvatur tinggi
- Menyesuaikan mesh input dengan tepi atau sudut keras ke teknik ini juga tidak mudah
Cara implementasi: menggabungkan voxel dan displacement mapping
- Renderer ini membuat lingkungan seperti game 3D klasik sebagai mesh segitiga low-poly, mendefinisikan detail permukaan skala voxel dengan displacement map, lalu merendernya agar tampak seperti dirakit dari voxel sungguhan
- Karena targetnya adalah lingkungan dengan banyak edge tajam seperti sudut bangunan, hasil seperti voxel diperlukan bahkan di area yang sulit bagi displacement mapping biasa
- Implementasi saat ini adalah proyek mandiri C++ / Vulkan
- Infrastrukturnya melakukan tiga pekerjaan utama
- Menerima mesh segitiga dan informasi displacement map terbatas, lalu mengubahnya menjadi data geometri yang akan digunakan GPU saat menggambar mesh yang telah berubah
- Proses ini berjalan di CPU sebelum rendering frame
- Dalam game rilis, hasilnya dapat di-bake ke disk
- Konversi seluruh lingkungan demo pada video membutuhkan 0,5 detik pada satu thread
- Melakukan prapemrosesan tekstur untuk menghasilkan informasi seperti normal map yang dibutuhkan saat rendering
- Pekerjaannya sendiri dasar, tetapi lambat sehingga cocok untuk di-bake
- Menggunakan mesh dan status tekstur yang dihasilkan untuk menggambar geometri voxel displacement di GPU
- Keterlibatan CPU per frame hampir tidak ada
- Menerima mesh segitiga dan informasi displacement map terbatas, lalu mengubahnya menjadi data geometri yang akan digunakan GPU saat menggambar mesh yang telah berubah
- Performanya sudah berada pada level yang layak digunakan
- Pada Radeon RX 5700 XT, sekuens demo dirender dengan frame time 4–9 ms pada 1440p
- Ini setara dengan 250–110 FPS
- Pada 800p native di Steam Deck OLED, demo mempertahankan lebih dari 60 FPS, dan banyak bagiannya terkunci di 90 FPS
Cara pembuatan aset seni
- Pembuatan konten memerlukan dua jenis aset: tekstur dan mesh
- Setiap tekstur dibuat sebagai albedo map dan displacement map
- Albedo membantu membuat gaya visual terasa meyakinkan jika meniru palet terbatas game retro
- Displacement map menyediakan nilai tinggi yang detail, dan renderer dapat menyesuaikan skalanya untuk mengubah intensitas
- Setelah penskalaan, satuan tinggi menunjukkan berapa voxel permukaan akan bergeser ke dalam atau ke luar
- Renderer hanya melakukan displacement ke satuan voxel bilangan bulat terdekat, tetapi nilai tinggi yang tepat digunakan untuk perhitungan normal map
- Fitur yang lebih rendah dari satu voxel pun dapat memengaruhi pencahayaan
- Mesh adalah mesh segitiga umum low-poly dengan texture mapping dan shading normal
- Normal menunjukkan bagian mana yang merupakan permukaan melengkung halus dan edge mana yang tajam
- Renderer melakukan pekerjaan tambahan untuk menghasilkan hasil yang bagus pada edge tajam
- Demi gaya visual, ukuran voxel diupayakan tetap konstan saat texture mapping, tetapi ini bukan syarat wajib
- Ada batasan pada struktur mesh dan texture mapping
- Sebagian batasan dapat dihapus di masa depan
- Sebagian batasan tidak dapat dihindari karena cara kerja renderer
- Karena aset berupa mesh segitiga, bukan representasi voxel khusus, aset dapat dibuat dengan berbagai tool
- Lingkungan demo dimodelkan dengan Blender
- Format yang saat ini diekspor dari Blender untuk demo adalah file OBJ
Keunggulan dan cakupan penerapan dalam pembuatan game
- Pendekatan ini memungkinkan pembuatan konten dengan workflow yang sudah akrab, bukan tool pengeditan voxel khusus
- Membuat tekstur yang bagus bisa sulit, tetapi setelah dibuat, tekstur mudah digunakan kembali pada berbagai geometri
- Sebagian besar geometri dalam demo video menggunakan satu tekstur blok batu dengan tiga warna
- Karena lingkungan dibuat sebagai mesh segitiga dan fitur voxel adalah dekorasi permukaan, lingkungan dapat diperlakukan sebagai geometri poligon ketika nyaman
- Aplikasi demo mendukung gerak sudut pandang orang pertama, collision, menaiki tangga, dan tabrakan dinding
- Tidak menulis engine fisika atau character controller sendiri
- Mengintegrasikan Jolt Physics open-source
- Mesh segitiga asli digunakan sebagai geometri collision
- Pergerakan musuh dan pathfinding juga dapat diselesaikan berdasarkan mesh yang sama
- Hanya sebagian sistem gameplay yang perlu menyadari voxel
- Misalnya, dalam first-person shooter, fungsi raycast yang displacement-aware dapat diimplementasikan agar peluru mengikuti bentuk akurat dari geometri yang telah mengalami displacement
- Banyak game berbasis voxel harus memakai engine sendiri karena berbagai sistem game perlu dibuat khusus, tetapi dalam pendekatan ini sebagian besar logika selain rendering tidak perlu mengetahui detail skala voxel
- Jalur paling realistis adalah mengintegrasikan teknik rendering ini ke engine yang sudah ada
Tantangan yang tersisa dan langkah berikutnya
- Implementasi saat ini cocok untuk pembuatan geometri level, tetapi lingkungan game juga membutuhkan elemen dinamis seperti objek kecil, dekorasi, dan musuh
- Ke depannya, direncanakan penambahan cara untuk mengintegrasikan objek kecil atau objek animasi ke gaya seni ini
- Pencahayaan demo sudah terlihat bagus, tetapi implementasi saat ini memiliki keterbatasan
- Hanya mendukung sedikit light
- Tidak ada shadow, ambient occlusion, atau fitur yang lebih canggih
- Renderer ini menargetkan lingkungan yang sebagian besar statis seperti yang dimiliki kebanyakan game, bukan geometri yang sangat dinamis seperti pada game voxel umum
- Bergantung pada kebutuhan aplikasi tertentu, ada berbagai kemungkinan penanganan pencahayaan, termasuk pendekatan baking
- Saat ini belum ada anti-aliasing, dan ini terutama terlihat pada lantai yang jauh
- Rencana proyek berikutnya serta diskusi untuk developer dan studio berlanjut di artikel kedua
1 komentar
Pendapat Hacker News
Mungkin karena saya cukup tua untuk mengingat masa ketika mengunduh game lewat modem 2400 baud, estetika ini terasa sangat menarik
Videonya juga bagus, dan bagi saya pribadi sangat kuat membangkitkan suasana
Di bagian yang atapnya terlalu rendah, saya bahkan merasa klaustrofobia dan sesak; sementara gua berdinding batu dengan lantai pasir, serta gua berbatu, benar-benar indah, sampai membuat saya ingin memainkan game petualangan bergaya Myst atau LucasArts yang dibuat dengan renderer ini
Sepertinya cocok untuk tema seperti penjelajahan gua atau penggalian arkeologi
Untuk memperluas falling sand engine ke 3D, mungkin juga bisa memakai pendekatan seperti dinamika fluida partikel yang mulus
Di bagian langit-langit rendah, balok-balok yang menggantung dari atap tampak seperti melawan hukum fisika
https://web.archive.org/web/20240524065427/https://blog.dani...
https://www.youtube.com/watch?v=1xFEbXWstCM
Ada pendekatan lain bernama Deep Bump. Ia menangani masalah yang sama dengan cara yang sama sekali berbeda
Deep Bump adalah tool machine learning yang menghasilkan normal map yang masuk akal dari gambar tekstur
Ini sangat cocok untuk tekstur batu atau bata yang dipakai renderer voxel displacement ini, dan pada tekstur kain pun ia sampai batas tertentu mengenali lipatan, kantong, dan kerah untuk memberi normal yang menunjukkan kedalaman
Untuk kulit pohon hasilnya lumayan, sedangkan untuk tanaman kurang bagus; kemungkinan karena pengaruh dataset pelatihannya
Jika ingin memodernisasi game sejenis Doom/Wolfenstein, sudah ada tool open-source yang layak dipakai
[1] https://github.com/HugoTini/DeepBump
Artikel ini lebih dekat ke pendekatan yang menangani displacement map sebagai representasi kecil berbasis voxel, dan tool seperti Deep Bump tampaknya bisa dipakai sebagai bantuan untuk membuat aset tekstur bagi sistem yang dibahas di sini
Karena ia tidak mengubah geometri sebenarnya, melainkan hanya mengubah pencahayaan dan ilusi volume, jika dilihat dari tepi mesh, displacement tetap menjadi pilihan yang lebih berkualitas
Namun DeepBump mungkin bisa dipakai untuk mengekstrak height map satu dimensi untuk displacement tradisional, yaitu map yang hanya berisi tinggi, bukan displacement vektor 3D penuh
Keren memang, tetapi saya penasaran seberapa cocok pendekatan ini untuk model 3D beranimasi
Paling-paling, rasanya akan terlihat seperti mod “Voxel Doom” untuk Doom
[1] https://media.moddb.com/cache/images/mods/1/55/54112/thumb_6...
[2] https://media.moddb.com/cache/images/mods/1/55/54112/thumb_6...
“Sekarang setelah saya menjelaskan semua konteks ini, saya ingin memberi penghargaan pada mod Voxel Doom untuk Doom klasik. Pembuat modnya mengganti monster dan sprite lain dalam game dengan mesh voxel untuk menambahkan kedalaman, dan itu benar-benar karya yang mengesankan. Kemudian pada akhir 2022, ia mulai bereksperimen dengan parallax mapping untuk menambahkan detail voxel pada geometri level. Menurut saya bagian ini tidak terlihat begitu bagus, bukan karena artwork pembuatnya, melainkan karena keterbatasan mendasar yang muncul saat dirender dengan parallax mapping. Mod ini bukan inspirasi untuk proyek saya. Saya sudah mengerjakannya. Namun melihat mod itu mendapat respons baik secara online memberi saya dorongan besar untuk terus mengerjakan karya saya. ↩”
Pendekatan ini sendiri katanya juga mendukung hal seperti pintu beranimasi, jadi jika menggabungkan mesh dengan texture flipbook, tampaknya bisa juga dipakai untuk monster yang terlihat seperti Doom asli
Namun area dengan kelengkungan tajam sepertinya akan menjadi tempat artefak shell mapping paling parah, dan artikel itu juga menyebut keterbatasan meshing level, jadi mungkin juga tidak
Ini tampak cukup mirip dengan yang sedang dikerjakan Notch. Kalau melihat feed Twitter-nya, ia sedang mengerjakan jenis voxel rendering lain
Namun yang ini memakai C++/Vulkan dan terlihat benar-benar luar biasa
Saya penasaran bagaimana pendekatan ini dibandingkan dengan Unreal Engine 5 Nanite. Mungkin Unreal Engine juga melakukan hal serupa
Seingat saya, salah satu motivasi penggunaan voxel pada game lama, misalnya Comanche[1], adalah karena pendekatan itu memungkinkan pembuatan medan kompleks yang meyakinkan, yang akan lebih mahal pada hardware serupa jika dimodelkan dengan mesh segitiga
Penulis menyebut 110 FPS pada RX 5700 XT, tetapi saya tidak begitu tahu bagaimana posisinya dibanding pendekatan lain
[1] https://en.wikipedia.org/wiki/Comanche_(video_game_series)
Nanite mengasumsikan pembuatan objek berpoligon tinggi, lalu men-stream chunk yang disederhanakan agar segitiga yang dirender tidak menjadi lebih kecil dari piksel
Karena geometri bisa dibuat sangat detail secara natural, displacement map menjadi agak redundan, dan tidak ada alasan khusus untuk menanganinya sebagai texture map
Tentu ada kasus tersendiri untuk terrain, tetapi itu kasus khusus
Cara dalam artikel ini tampaknya menggunakan displacement dan mesh low-poly untuk menghasilkan geometri yang high-poly tetapi “tervoxelisasi” saat loading
Sepengetahuan saya, Comanche menggunakan pendekatan ray tracing untuk rendering terrain[1]
Bukan voxel sungguhan, melainkan peta ketinggian 2D yang disampling
Namanya disebut “VoxelSpace”, jadi wajar kalau membingungkan
[1] https://github.com/s-macke/VoxelSpace
Berbeda dari kepercayaan umum, game-game itu tidak memakai voxel 3D sungguhan; mereka menggambar height map yang menyimpan nilai warna dan ketinggian pada tekstur terrain dengan ray marching
Jika melakukan ray marching ke arah tekstur di shader, tampilan yang sama bisa direproduksi, dan saya kira akan terlihat sangat mirip dengan hasil yang didapat di tulisan blog itu
Sementara itu, Nanite adalah teknologi rendering berbasis GPU yang menyesuaikan kepadatan segitiga sesuai kualitas target
Nanite juga bisa memakai displacement map dan tessellation, tetapi itu menggunakan jalur terpisah yang belum tentu lebih efisien dibanding langsung memasukkan dan merender aset berpoligon tinggi
Selalu menyenangkan melihat metode baru di bidang voxel
Namun agak disayangkan tulisan itu mencampuradukkan voxel dan teknik rendering tertentu
Voxel pada dasarnya hanya berarti menggunakan grid 3D, dan dari bagian tengahnya tampak penulis menyamakan penggunaan voxel dengan rendering berbasis kubus, yang sering disebut renderer blockxel ala Minecraft
Ia juga mengatakan geometri segitiga bisa diambil dan langsung dipakai di engine, tetapi sepertinya lupa bahwa blockxel, atau pada dasarnya proses rendering apa pun, juga bisa melakukan hal yang sama
Plugin rendering voxel umum yang memakai gaya lain juga mendapat dukungan kelas satu di engine yang sudah ada dengan cara seperti ini
Saya harap ini open source. Sungguh, saya sangat berharap begitu
Saya benar-benar suka. Mengingatkan saya pada Ultima Underworld
Ini seharusnya menjadi masa depan modernisasi game 3D retro. Benar-benar indah