Alur aplikasi OpenGL (dan WebGL?)

Aplikasi OpenGL (dan sepertinya aplikasi berbasis grafis lainnya) memiliki sebuah alur kerja yang bisa saya bilang cukup standar. Dimulai dengan melakukan persiapan, lalu ada sebuah perulangan utama, dan diakhiri dengan rutin bersih-bersih sebelum aplikasi selesai dieksekusi. Pada perulangan utama ini, operasi yang terjadi secara umum bisa dikelompokkan menjadi tiga: baca input (mouse, keyboard, dll), proses, dan gambar.

Main Loop

Pada tahapan membaca input, seluruh masukan dari keyboard, mouse, dan sumber lainnya akan ditangkap dan digunakan untuk mengubah kondisi yang sedang dipantau. Misalnya jika tombol spasi ditekan, maka si aplikasi harus membuat pesawat dalam game mengeluarkan tembakan.

Setelah ini, semua pemrosesan akan dilakukan. Misalnya peluru yang ditembakkan mesti sampai di pojok kanan atas layar dalam waktu 1 detik. Maka perlu dihitung dimana dan kapan saja gambar peluru harus diletakkan di layar.

Pada tahapan menggambar, gambar peluru yang telah dibaca dari berkas akan disalin ke layar. Gambar akan diletakkan pada posisi yang telah dihitung sebelumnya. Begitu pula untuk objek-objek lain yang perlu digambar di layar.

Seberapa cepat perulangan utama yang menjalankan 3 tahapan di atas ini harus dijalankan? Dengan kata lain, berapa gambar yang harus dibuat setiap detiknya? Semakin banyak gambar yang dibuat setiap detiknya, akan semakin halus pergerakan animasi yang dibuat. Namun dengan demikian, proses yang dikerjakan tidak boleh berlangsung terlalu lama karena tentunya dapat menunda tahapan menggambar yang efeknya akan mengurangi jumlah gambar yang dibuat tiap detiknya.

Monitor yang ada sekarang umumnya dapat menggambar 60 kali setiap detiknya (60 frame per second atau 60 Hz). Bagaimana kalau kita targetkan agar aplikasi dapat mengikuti kecepatan monitor? Mari kita hitung. Jika dalam 1 detik kita harus menggambar 60 gambar, berarti 1 gambar harus dibuat dalam waktu 1/60 detik atau sekitar 16 milidetik (16 ms)! Membaca input, melakukan pemrosesan data, dan menggambar semuanya harus terjadi dalam waktu 16ms saja agar kita bisa meraih kecepatan menggambar 60 gambar per detik!

Apakah 60 fps adalah angka yang harus selalu dicapai? Tergantung.. semakin cepat, animasi akan semakin halus. Namun jika aplikasi yang kita buat tidak sering menampilkan aplikasi, maka batasan kecepatan penggambaran ini bisa kita perlonggar. Tuk perbandingan, film umumnya hanya memiliki 24 gambar setiap detiknya alias 24 fps.

Memulai WebGL

Setelah sebelumnya kita berkenalan sedikit dengan WebGL, mari kita mulai membuat aplikasi WebGL. Pastikan dulu browser yang Anda gunakan mendukung WebGL agar Anda dapat melihat hasil yang diharapkan.

Jika semua sudah siap, mari kita buka teks editor dan masukkan kode berikut ini.

<canvas id="canvas" width="640" height="480">WebGL tidak didukung</canvas>

Kode di atas akan membuat sebuah area gambar yang akan dijadikan tempat menggambar gambar 3 dimensi dengan WebGL.

Persiapan dari sisi HTML sudah cukup, sekarang mari beralih ke dunia Javascript untuk mengendalikan WebGL.

Pertama, dapatkan referensi ke area gambar <canvas> yang kita buat sebelumnya.

<script type="text/javascript">

var canvas = document.getElementById('canvas');

Setelah itu, ambil pengendali WebGL dari area gambar tadi.

var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

Mengapa mencoba mengambil dua hal berbeda (webgl dan experimental-webgl)? Sampai saat ini, WebGL masih bersifat eksperimental sehingga beberapa browser masih belum menjadikannya hal yang “udah pasti ada”. Maka dari itu, browser2 ini menggunakan nama experimental-webgl sebagai identifikasi pengendali WebGL.

Nilai yang dihasilkan dapat kita gunakan untuk mengecek apakah browser yang dipakai mendukung WebGL atau tidak.

if (!gl) {
  alert('WebGL tidak didukung');
}

Jika nilai keluaran tidak dievaluasi menjadi true, maka bisa diambil kesimpulan si browser tidak mendukung WebGL.

Setelah mendapatkan referensi ke pengendali WebGL, kita sudah bisa memanggil fungsi-fungsi WebGL. Sebagai contoh, fungsi untuk menghapus area gambar dengan warna tertentu.

if (gl) {
  // hapus layar
  gl.clearColor(1.0, 0.5, 0.0, 1.0); // warna oranye
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}

</script>

Jika sukses, area gambar yang dibuat seharusnya akan berwarna oranye seperti berikut.

Memulai WebGL

Selamat, aplikasi WebGL super sederhana sudah jadi! 😀

Kode lengkap dari tutorial kali ini dapat dilihat di http://fajran.github.io/webgl-tutorial/01-memulai-webgl/index.html. Seluruh kode sumber tutorial WebGL ini akan tersedia di https://github.com/fajran/webgl-tutorial.

Pengenalan WebGL

Mari kita mulai ngoprek2 WebGL 😀 Mudah2an ini beneran menjadi satu set tutorial xD

Apa itu WebGL? Singkatnya WebGL adalah OpenGL yang hidup di dalam browser. OpenGL sendiri adalah satu set API yang dapat dipakai untuk membuat gambar 3 dimensi (termasuk juga 2 dimensi). Proses penggambaran yang menggunakan OpenGL biasanya akan “dibantu” dengan perangkat keras grafis (GPU) sehingga prosesnya akan jauh lebih cepat.

Kalau OpenGL aslinya adalah satu set API untuk bahasa C, maka WebGL, berhubung dia hidup di dalam browser, adalah API untuk Javascript. WebGL ini merupakan kelanjutan dari Canvas API yang hanya menyediakan fasilitas menggambar gambar 2 dimensi.

Sampai saat ini, belum semua browser mendukung WebGL. Dukungan yang disediakan juga sering bergantung dengan GPU dan driver yang dipakai. Hal ini tidak selalu berarti pengguna GPU tipe lama tidak bisa menikmati WebGL karena implementasi prosedur gambar 3 dimensi bisa saja dilakukan tanpa bantuan perangkat keras, walau efeknya proses akan berjalan lebih lambat. Pendekatan ini diambil oleh Chromium/Google Chrome yang juga menyediakan implementasi WebGL yang hanya menggunakan peranti lunak.

Untuk mencari tahu apakah browser yang Anda pakai saat ini dapat menampilkan WebGL atau tidak, kunjungi saja halaman berikut ini.

http://get.webgl.org/

Jika WebGL didukung, Anda akan menjumpai tampilan seperti berikut. Perhatikan juga ada sebuah animasi kubus berputar di halaman tersebut.

Screen Shot 2013-05-28 at 8.32.57 PM

Apakah browser yang Anda gunakan mendukung WebGL?