Skip to content

Daftar singkat teknik rendering yang digunakan dalam game AAA modern

Oleh Oleg Sidorkin, CTO dan Co-Founder Cinevva

Adegan komposit yang menampilkan material PBR, geometri tervirtualisasi, dan pencahayaan ray tracing dalam game AAA modern

Jika Anda membedah pipeline rendering sebuah game AAA tahun 2026, sebagian besar yang akan Anda temukan dapat ditelusuri kembali ke sejumlah kecil teknik yang digunakan oleh berbagai studio. Namanya berbeda-beda antar-engine, tetapi gagasannya sama. Berikut daftar singkat teknik yang benar-benar bekerja di layar, lengkap dengan ilustrasi dan beberapa referensi teknis mendalam untuk masing-masing. Saya memperbaruinya pada September 2026 dengan perubahan di Unreal Engine 5.8 dan teknik yang kini dapat berjalan di browser, serta menambahkan sejumlah pertanyaan umum di bagian akhir.

1. Rendering berbasis fisika (PBR)

Material dideskripsikan melalui tekstur albedo, kekasaran, metalik, normal, dan oklusi ambien, lalu diterangi oleh shader yang mempertahankan energi (spekular Cook-Torrance, serta difus Lambertian atau Disney). Ini adalah fondasi yang diasumsikan oleh setiap engine AAA modern. Jika suatu permukaan terlihat konsisten di bawah sinar matahari, lampu, dan senter, PBR-lah alasannya.

Helm besi yang dirender dengan material PBR, disertai contoh tekstur melayang yang menampilkan peta albedo, kekasaran, metalik, dan normal

Pembahasan mendalam:

2. Shading tertunda dan visibility buffer

Geometri terlebih dahulu menulis atribut (normal, ID material, kedalaman) ke G-buffer atau visibility buffer. Pencahayaan dijalankan sebagai pass layar penuh yang membaca buffer tersebut dan melakukan shading pada setiap piksel satu kali. Visibility buffer (yang digunakan oleh Nanite dan sistem serupa) membawa pendekatan ini lebih jauh dengan hanya menyimpan ID segitiga, lalu menghitung parameter material per piksel setelahnya, sehingga overdraw tetap ringan pada geometri padat.

G-buffer shading tertunda yang dibagi menjadi panel warna akhir, normal dunia, kedalaman, dan ID material

Pembahasan mendalam:

3. Geometri tervirtualisasi (gaya Nanite)

Mesh dibangun sebelumnya menjadi hierarki cluster. Saat runtime, GPU melakukan streaming dan memilih cluster dengan resolusi yang sesuai untuk setiap piksel, sehingga Anda mendapatkan detail yang akurat hingga tingkat subpiksel tanpa LOD manual. Nanite dari Unreal adalah contoh yang paling dikenal. Engine lain kini juga menyertakan varian mereka sendiri. Hasil praktisnya adalah aset berkualitas film secara real-time tanpa perlu membuat LOD. Unreal Engine 5.8, yang dirilis pada Juni 2026, meningkatkan performa rasterisasi dan culling Nanite pada platform perangkat genggam serta menambahkan kontrol jarak terprogram per piksel untuk vegetasi, menurut catatan performa 5.8 dari Tom Looman, dan Epic menyatakan bahwa 5.8 merupakan rilis 5.x terakhir sebelum pengembangan beralih ke Unreal Engine 6.

Render halus di sebelah kiri, cluster meshlet subpiksel dalam warna-warna cerah di sebelah kanan

Pembahasan mendalam:

4. Ray tracing real-time untuk bayangan, pantulan, dan AO

Ray tracing perangkat keras (DXR, Vulkan RT) melacak sinar bayangan, sinar pantulan cermin dan mengilap, serta sinar oklusi ambien terhadap BVH yang dibangun pada setiap frame. Bahkan beberapa sinar per piksel dapat mengungguli kemampuan teknik screen-space, terutama untuk pantulan objek di luar layar dan bayangan kontak. Sebagian besar game menggunakannya secara selektif, bukan untuk semuanya.

Mobil sport merah mengilap di ruang pamer mewah dengan pantulan ray tracing dan bayangan kontak yang akurat

Pembahasan mendalam:

5. Ray tracing perangkat lunak (gaya Lumen)

Tidak semua pemain memiliki kartu RTX, sehingga engine juga menyediakan fallback berbasis distance field atau surface cache. Lumen dari Unreal, misalnya, melakukan pelacakan terhadap signed distance field dan surface cache untuk menghasilkan GI difus dengan biaya rendah, dan baru beralih ke sinar perangkat keras ketika diperlukan. Inilah cara game AAA mencapai "tampilan ray tracing" di konsol. UE 5.8 menambahkan mode "Lumen Lite", yang sekitar dua kali lebih cepat daripada jalur berkualitas tinggi Lumen dan ditujukan untuk 60 fps di PlayStation 5, serta meningkatkan MegaLights, sistem banyak cahaya stokastiknya, menjadi siap produksi, menurut ringkasan 5.8 dari CG Channel.

Interior katedral dengan pantulan warna dari kaca patri dan overlay wireframe SDF yang memperlihatkan geometri aproksimasi

Pembahasan mendalam:

6. ReSTIR dan reservoir sampling

Untuk pencahayaan langsung dan tidak langsung dengan ribuan sumber cahaya, ReSTIR (Reservoir Spatio-Temporal Importance Resampling) menggunakan kembali sampel cahaya antarpiksel dan antar-frame. Inilah cara game seperti Cyberpunk 2077 dengan Path Tracing menjaga noise tetap rendah hanya dengan satu atau dua sinar per piksel. Teknik ini diperkirakan akan hadir di lebih banyak engine seiring path tracing menjadi target kelas atas.

Jalanan cyberpunk dengan pantulan ray tracing pada permukaan jalan basah dan jalur pantulan cahaya yang terlihat

Pembahasan mendalam:

7. Awan volumetrik, kabut, dan atmosfer

Langit dihasilkan dengan ray marching melalui noise 3D dan volume kepadatan. Atmosfer menggunakan tabel hamburan yang telah dihitung sebelumnya (gaya Bruneton) untuk transisi matahari dan bulan. Kabut menggunakan grid froxel (bayangkan tekstur 3D yang disejajarkan dengan frustum pandangan) yang menangkap pencahayaan lokal. Bersama-sama, teknik ini menghadirkan "cuaca sebagai sebuah sistem", bukan sekadar skybox.

Lembah pegunungan saat matahari terbenam dengan awan volumetrik dan berkas cahaya yang menembus udara berkabut

Pembahasan mendalam:

8. Cascaded shadow map dan virtual shadow map

Untuk bayangan matahari, cascaded shadow map membagi frustum menjadi beberapa rentang dan merender masing-masing dengan resolusi yang sesuai. Virtual shadow map melangkah lebih jauh: satu shadow map berukuran sangat besar dibagi menjadi halaman-halaman, dan hanya halaman yang terlihat dari kamera yang dirender. Dengan cara inilah game AAA mempertahankan bayangan tajam di dekat pemain tanpa membutuhkan memori yang sangat besar. Dokumentasi VSM dari Epic menetapkan resolusi virtual sebesar 16k × 16k per sumber cahaya, dan UE 5.8 menambahkan jalur objek jauh yang telah diprafilter untuk menggambar objek pembentuk bayangan jauh ke dalam clipmap dengan resolusi jauh lebih rendah, serta pembatasan laju invalidasi halaman, menurut catatan Tom Looman.

Adegan luar ruangan dengan overlay tiga frustum cascade berwarna yang menunjukkan detail bayangan di dekat kamera

Pembahasan mendalam:

9. Efek screen-space (SSAO, SSR, SSGI, SSSSS)

Membaca buffer kedalaman dan normal dengan biaya rendah memungkinkan Anda menghasilkan oklusi ambien (SSAO), pantulan (SSR), iluminasi global satu pantulan (SSGI), dan hamburan bawah permukaan untuk kulit (SSSSS). Teknik-teknik ini tidak dapat menangkap detail di luar layar, sehingga ray tracing mulai menggantikannya, tetapi semuanya masih digunakan secara luas sebagai fondasi yang cepat.

Perbandingan berdampingan adegan dapur dengan pencahayaan datar di sebelah kiri dan SSAO, SSR, serta SSGI di sebelah kanan Pembahasan mendalam: - Mittring, [Menemukan Generasi Berikutnya: CryENGINE 2](https://www.crytek.com/wp-content/uploads/Finding%20Next%20Gen%20-%20CryEngine%202.pdf) (SIGGRAPH 2007, makalah SSAO pertama). - McGuire dkk., [Ambient Obscurance yang Skalabel](https://research.nvidia.com/publication/scalable-ambient-obscurance) (HPG 2012, SSAO modern). - Stachowiak dan Uludag, [Refleksi Stokastik dalam Ruang Layar](https://www.ea.com/frostbite/news/stochastic-screen-space-reflections) (Frostbite, rujukan utama SSR). - Jimenez, [Hamburan Bawah Permukaan yang Dapat Dipisahkan](https://www.iryoku.com/separable-sss/) (teknik yang digunakan untuk kulit di sebagian besar engine AAA). - Mara dkk., [Ruang Layar Mendalam](https://research.activision.com/publications/2016/09/deep-g-buffers-for-stable-global-illumination-approximation) (Activision, bagian dari garis perkembangan SSGI).

10. Anti-aliasing temporal dan peningkatan resolusi berbasis ML (DLSS, FSR, XeSS)

Frame dirender pada resolusi internal yang lebih rendah, lalu direkonstruksi menggunakan vektor gerak, kedalaman, dan riwayat frame. Peningkat resolusi berbasis ML (DLSS 4, FSR 4, XeSS) menambahkan pembuatan frame di atasnya dengan menginterpolasi frame perantara dari aliran optik. FSR "Redstone" dari AMD memperluas FSR 4 dengan pembuatan frame berbasis ML, regenerasi sinar, dan cache radiansi neural pada perangkat keras RDNA 4. Ini merupakan tanda paling jelas bahwa peningkatan resolusi dan penghilangan derau sedang menyatu menjadi satu tahap neural. Sebagian besar judul AAA kini dirilis dengan asumsi bahwa peningkat resolusi akan diaktifkan, sehingga mengubah cara Anda mengalokasikan anggaran untuk bagian frame lainnya.

Perbandingan berdampingan antara input beresolusi rendah dan output tajam hasil rekonstruksi ML dari karakter yang sama

Pembahasan mendalam:

11. Rendering berbasis GPU dan mesh shader

Culling, pemilihan LOD, dan pengiriman draw call semuanya berjalan di GPU. Mesh shader menggantikan pipeline vertex/geometri/teselasi dengan tahap bergaya komputasi yang lebih fleksibel dan menghasilkan meshlet. Jika digabungkan dengan multi-draw indirect, pendekatan ini sepenuhnya membebaskan CPU dari loop kritis per objek.

Adegan pelabuhan antariksa alien dengan overlay klaster meshlet berwarna yang menunjukkan rendering berbasis GPU

Pembahasan mendalam:

12. Rendering rambut, kain, dan kulit

Rambut menggunakan shading anisotropik bergaya Marschner dengan geometri berbasis helai (NVIDIA HairWorks, AMD TressFX, atau sistem bawaan engine). Kain disimulasikan di GPU dengan dinamika berbasis posisi dan dirender dengan spekular anisotropik. Kulit menggunakan hamburan bawah permukaan dalam ruang layar ditambah pencahayaan wrap yang telah dipraintegrasikan. Ketiga hal ini biasanya menjadi tempat paling mudah untuk melihat kesenjangan anggaran antara produksi AAA dan indie.

Tampilan jarak dekat seorang prajurit dengan rambut berbasis helai, jubah kain, dan kulit dengan hamburan bawah permukaan

Pembahasan mendalam:

13. Decal, tekstur virtual, dan pelapisan material

Variasi permukaan berasal dari decal berlapis (lubang peluru, tanah, darah, kotoran) yang diproyeksikan ke depth buffer, ditambah tekstur virtual yang mengalirkan detail beresolusi tinggi tepat saat dibutuhkan. Pelapisan material memadukan beberapa set PBR per piksel menggunakan mask dan proyeksi triplanar. Inilah yang membuat satu batu dapat tampak seperti lima batu berbeda.

Dinding bunker beton yang lapuk dengan decal lubang peluru, grafiti, dan sisipan atlas halaman tekstur virtual

Pembahasan mendalam:

14. Transparansi tanpa bergantung pada urutan

Rambut, dedaunan, partikel, dan kaca tidak dapat diurutkan dengan rapi. Engine AAA menggunakan teknik seperti OIT campuran berbobot, depth peeling, atau linked list per piksel untuk merendernya dengan benar tanpa tahap pengurutan oleh CPU. Diam-diam, ini merupakan salah satu bagian frame yang paling mahal dalam adegan dengan banyak dedaunan.

Adegan hutan dengan dedaunan translusen yang saling bertumpuk, asap, tetesan kaca, dan rambut translusen

Pembahasan mendalam:

15. Cache radiansi neural dan penghilang derau berbasis ML

Lapisan terbaru. Cache radiansi neural NVIDIA mempelajari pencahayaan tidak langsung per adegan dan melakukan kueri terhadapnya alih-alih menelusuri lebih banyak sinar. Penghilang derau berbasis ML (OptiX, Intel Open Image Denoise, atau solusi khusus internal) membersihkan sinyal ray tracing yang jarang dalam hitungan milidetik. Kategori ini diperkirakan akan berkembang pesat dalam dua tahun ke depan.

Katedral hasil ray tracing 1 spp yang berderau di sebelah kiri dan hasil bersih setelah penghilangan derau berbasis ML di sebelah kanan

Pembahasan mendalam:

Artinya bagi browser

Kami telah menghadirkan beberapa teknik ini di WebGPU untuk engine dunia terbuka berbasis browser kami. Cascaded shadow map, instancing berbasis GPU, PBR triplanar, kabut ruang layar, dan medan tervirtualisasi berbasis clipmap semuanya berjalan pada 120 FPS di dalam tab. Per September 2026, WebGPU sendiri telah diaktifkan secara default di Chrome dan Edge sejak versi 113; di Safari 26 pada macOS, iOS, iPadOS, dan visionOS; serta di Firefox pada Windows (141) dan Mac Apple Silicon (145 dan yang lebih baru), sementara Linux masih terbatas pada Nightly, menurut status implementasi gpuweb. Three.js menjadikan renderer WebGPU sebagai jalur default dalam r185, sedangkan Babylon.js 9 (Maret 2026) menambahkan pencahayaan terklaster dan volumetrik berbasis compute shader di atasnya, menurut pengumuman Babylon.js 9.0. Teknik lainnya (ray tracing perangkat keras, mesh shader, peningkatan resolusi berbasis ML) masih belum termasuk dalam spesifikasi WebGPU, sehingga untuk saat ini teknik tersebut tetap harus diemulasikan dengan compute shader di web. Untuk pembahasan lebih mendalam, lihat panduan kami tentang teknologi dunia terbuka berbasis browser, pembuatan lanskap, WebGPU vs WebGL untuk game, dan stack game web untuk 2026. Jika Anda ingin memeriksa fitur yang diekspos oleh browser tertentu, pemeriksa WebGL/WebGPU kami melaporkan fitur dan batas adaptor.

Pertanyaan Umum

Teknik rendering mana yang dapat berjalan di browser dengan WebGPU pada 2026?

Sebagian besar teknik yang tidak memerlukan unit perangkat keras khusus. PBR, shading tertunda dan visibility buffer, cascaded shadow map, ambient occlusion dan refleksi ruang layar, kabut dan awan volumetrik, TAA, culling berbasis GPU melalui compute shader, transparansi tanpa bergantung pada urutan, serta streaming geometri berbasis klaster semuanya dapat digunakan di WebGPU saat ini, dan kami menjalankan beberapa di antaranya dalam engine browser kami. Yang belum tersedia adalah segala sesuatu yang bergantung pada tahap perangkat keras yang tidak diekspos oleh spesifikasi: ray tracing perangkat keras, mesh shader, dan peningkat resolusi ML khusus vendor seperti DLSS dan FSR. Anda dapat mengemulasikan ray tracing dan culling klaster bergaya Nanite melalui komputasi, dan memang sudah ada yang melakukannya, tetapi kesenjangan performanya dibandingkan aplikasi native akan tetap besar. Panduan WebGPU vs WebGL kami membahas dampaknya terhadap anggaran performa game.

Apa itu contact shadow dalam game?

Contact shadow adalah bayangan pendek dan tajam pada titik tempat objek benar-benar bersentuhan dengan permukaan: kaki di tanah, cangkir di atas meja, atau celah tempat dinding bertemu lantai. Shadow map biasa membuatnya kabur atau tidak menangkapnya karena keterbatasan bias dan resolusi. Karena itu, engine menambahkan pass khusus, biasanya berupa ray marching pendek dalam ruang layar terhadap depth buffer, atau beberapa sinar bayangan yang sangat pendek pada renderer berbasis ray tracing. Teknik ini murah dan mencegah objek terlihat seolah-olah melayang. Di web, three.js memiliki contoh contact shadow yang menyimulasikannya dengan merender kedalaman objek ke bidang tanah. Pendekatan ini cocok untuk gambar produk, tetapi rumit untuk adegan penuh.

Apa itu virtual shadow map, dan apakah browser mendukungnya?

Virtual shadow map memperlakukan satu shadow map besar (milik Unreal berukuran 16k × 16k per cahaya, menurut dokumentasi Epic) sebagai sekumpulan halaman, lalu hanya mengalokasikan dan merender halaman yang benar-benar dapat dilihat kamera pada resolusi yang diperlukan masing-masing halaman. Hasilnya adalah bayangan nyaris sempurna hingga tingkat piksel dari jarak dekat tanpa harus membayar biaya seluruh map. Hingga September 2026, belum ada engine browser yang menyediakan VSM. Three.js menawarkan cascaded shadow map dalam renderer WebGPU-nya dan bayangan lembut PCSS, sedangkan Babylon.js memiliki CascadedShadowGenerator. Secara teori, VSM dapat dibuat di WebGPU (menggunakan komputasi dan indirect draw), tetapi belum ada yang merilis implementasi umum. Karena itu, cascaded shadow map tetap menjadi solusi praktis di dalam tab.

Apa teknik rendering rambut terbaik untuk game web?

Lewati simulasi helai dan fokuslah membuat shading kartu rambut dengan baik. Rambut berbasis helai secara real-time (TressFX, sistem groom Unreal) membutuhkan simulasi berat berbasis compute dan transparansi independen urutan dalam skala besar, yang tetap berat bahkan di platform native dan belum memiliki implementasi siap pakai di three.js maupun Babylon.js per September 2026. Stack yang ramah web adalah kartu rambut (beberapa puluh strip bertekstur yang diuji alfa) dengan highlight Kajiya-Kay anisotropik atau Marschner sederhana yang ditulis menggunakan TSL milik three.js atau node material Babylon, rendering dua tahap—uji alfa lalu blending—untuk menjaga tepian tetap lembut, serta komponen ambient occlusion murah yang dipanggang ke dalam tekstur kartu. Jika Anda memerlukan gerakan, kendalikan beberapa rantai tulang alih-alih menyimulasikan helai. Pendekatan ini menghasilkan sebagian besar tampilannya dengan hanya memakai sebagian kecil waktu frame, hal yang penting ketika seluruh adegan Anda memiliki anggaran 16 md pada GPU terintegrasi.

Apakah daftar ini masih akurat pada 2026?

Ya, dan perubahan sejak Mei 2026 lebih berupa penyempurnaan daripada kategori baru. UE 5.8 (Juni 2026) menjadikan MegaLights siap produksi, menambahkan Lumen Lite dan virtual shadow map jarak jauh yang lebih murah, serta menjadi rilis 5.x terakhir sebelum Unreal Engine 6. FSR Redstone dari AMD menggabungkan pembuatan frame, regenerasi ray, dan neural radiance cache ke dalam satu paket ML, yang menegaskan arah dua bagian terakhir. WebGPU juga telah tersedia di semua peramban utama, sehingga bagian "apa artinya ini bagi peramban" di atas kini membahas teknik mana yang perlu di-porting, bukan apakah platformnya sudah siap.

Bacaan lebih lanjut untuk seluruh stack

Jika Anda ingin membaca satu buku saja, Real-Time Rendering, edisi ke-4 adalah referensi standar yang mencakup sebagian besar topik di atas. Untuk riset berkelanjutan, arsip kursus SIGGRAPH "Advances in Real-Time Rendering in Games" (advances.realtimerendering.com) menyediakan PDF gratis berisi pembahasan mendalam tentang engine AAA sejak 2006. Untuk bedah produksi mengenai cara game tertentu merender frame-nya, artikel profiling GPU Adrian Courrèges adalah bacaan wajib.