Membuat Dunia 3D Dengan HTML dan CSS

Demo awal memperlihatkan penggunaan CSS 3D transforms untuk membuat lingkungan 3D sederhana dengan elemen HTML.

Objek 3D dibuat dari elemen div persegi panjang (plane) yang dikelompokkan dalam assembly agar dapat diputar dan dipindahkan sebagai satu kesatuan.

Pencahayaan dasar (flat shading) dihitung dengan menentukan normal permukaan dari sudut elemen yang ditransformasi dan menerapkan linear-gradient secara dinamis.

Untuk pencahayaan yang lebih realistis, digunakan elemen canvas untuk membuat light map berdasarkan sampel intensitas cahaya pada beberapa titik, lalu di-scale sebagai background.

Light map yang dihasilkan dari canvas juga memungkinkan pembuatan bayangan dengan memeriksa apakah sinar cahaya terhalang oleh permukaan sebelumnya.

Deteksi tabrakan menggunakan height map top-down yang merepresentasikan ketinggian level melalui warna untuk menentukan jatuh, menaiki, atau berhenti pemain.

Langkah selanjutnya meliputi pengembangan prototipe renderer CSS3 untuk Three.js dan potensi pembuatan game berbasis teknik ini.