Memulai OpenGL ES dengan SDL

Saya ingin membuat tulisan berseri mengenai OpenGL dan inilah tulisan pertamanya 😀 mudah2an bener2 lanjut terus xD

Untuk masuk ke “dunia” OpenGL, hal pertama yang harus dibuat adalah sebuah tempat dimana kode OpenGL kita dapat bekerja. Salah satu caranya adalah dengan menggunakan SDL yang sudah sangat membantu untuk urusan membuat window, menangkap event (mouse, keyboard), dan juga membuat dunia OpenGL kosong yang siap diisi.

Berhubung sekarang dunia mobile sedang sangat meriah, saya juga akan menggunakan standar OpenGL ES yang untungnya juga dapat dijalankan di atas komputer desktop. Untuk bahasa pemrograman, saya akan menggunakan C++ dengan harapan kode akan dapat dengan mudah dipindahkan ke platform lain seperti Android maupun iOS.

Pastikan pustaka pengembangan SDL dan OpenGL ES sudah terpasang. Bagi pengguna keluarga Debian, pasang paket libsdl1.2-dev dan libgles2-mesa-dev.

$ sudo apt-get install libsdl1.2-dev libgles2-mesa-dev

Mari kita mulai..

Pertama-tama, inilah kode pembuka kita 😀

#include <SDL/SDL.h>

int main(int argc, char** argv) {
  const int width = 1024;
  const int height = 768;
  const int depth = 32;

  // Prepare SDL
  SDL_Init(SDL_INIT_EVERYTHING);
  SDL_SetVideoMode(width, height, depth,
                   SDL_HWSURFACE | SDL_GL_DOUBLEBUFFER | SDL_OPENGL);

  SDL_Event event;

  bool running = true;
  while (running) {
    // Check for incoming event
    while (SDL_PollEvent(&event)) {
      if (event.type == SDL_KEYUP &&
          event.key.keysym.sym == SDLK_ESCAPE) {
        running = false;
      }
    }

    // Swap buffer
    SDL_GL_SwapBuffers();
  }

  SDL_Quit();

  return 0;
}

Simpan ke dalam berkas, katakanlah dengan nama 01-begin.cc, lalu kompilasi dengan perintah berikut:

$ g++ -o 01-begin 01-begin.cc `sdl-config --libs --cflags`

Jika aplikasi ini dijalankan, akan muncul sebuah window dengan isi “acak”. Kita belum memerintahkan penggambaran apa2 sehingga isi window dapat berisi apa saja :D. Berikut ini yang saya dapatkan sekarang.

$ ./01-begin

Untuk mengakhiri, tekan tombol escape.

Kode di atas dapat didapat juga di https://github.com/fajran/opengles-tutorial/tree/master/01-begin

Setelah kerangka dasar siap, mari kita mulai menyentuh OpenGL ES. Agar fungsi-fungsi OpenGL ES dapat kita gunakan, maka pastikan kita sudah mengimpor header dari OpenGL ES

#include <GLES2/gl2.h>

Setelah itu kita siapkan 3 buah fungsi “utama” yang digunakan untuk menyiapkan OpenGL ES, untuk memperbarui “kondisi” OpenGL ES, dan terakhir untuk menggambar ke layar.

void init_opengl() {
  glClearColor(0xCD / 255.0, 0xD7 / 255.0, 0xB6 / 255.0, 1.0);
}

void update_opengl() {

}

void draw_opengl() {
  glClear(GL_COLOR_BUFFER_BIT);
}

Lalu kita selipkan pemanggilan 3 fungsi di atas dalam kode yang pertama kita buat. Fungsi pertama dipanggil setelah SDL siap dipakai. Lalu fungsi kedua dan ketiga dipanggil di dalam “main loop” yang akan menggambar setiap frame yang akan kita buat. Kode akhir dapat dilihat di GitHub.

Mari kita bahas sedikit apa yang baru saja ditambahkan.

Pertama, pemanggilan fungsi glClearColor digunakan untuk mengatur warna yang akan digunakan saat layar kita “hapus”. Pada contoh di atas, saya menggunakan warna hijau muda. Berhubung saya cuma tahu kode heksadesimalnya (rentang 0-255) dan fungsi tersebut meminta kode warna dalam tipe float dengan rentang 0.0 sampai 1.0, maka saya konversi dulu nilai warnanya.

Lalu untuk setiap frame yang digambar, saya perintahkan OpenGL untuk menghapus layar dengan memanggil fungsi glClear dengan memberikan paramter GL_COLOR_BUFFER_BIT agar buffer warna yang menampung gambar dihapus dan diisi dengan warna yang saya set sebelumnya.

Mari kita lihat hasilnya sekarang!

$ g++ -o 02-background 02-background.cc `sdl-config --libs --cflags` -lGLESv2
$ ./02-background

Sekian dulu tulisan pembuka ini. Untuk selanjutnya kita akan mencoba sesuatu yang bernama shader!

Semua kode yang akan saya buat dalam seri tulisan ini tersedia juga di https://github.com/fajran/opengles-tutorial dan silakan dipakai sebebas-bebasnya karena semua kode yang terlibat saya rilis dalam domain publik alias public domain.

Simulasi air

Bosen ngerjain tesis, trus nemuin contoh kodingan menarik ttg simulasi air. Jadi kepikiran tuk porting kodingan tsb supaya bisa menerima multiple input via TUIO. Voila! jadilah aplikasinya =P

Ini screencastnya..

Kodingan bisa dilihat di http://github.com/fajran/multitouch-water-simulation/.

Kalau mau nyobain..

$ git clone git://github.com/fajran/multitouch-water-simulation.git water
$ cd water
$ make
$ ./water

Pastikan udah nginstall g++, libsdl1.2-dev, libsdl-image1.2-dev, dan bbrp library lain kalo ada (saya gak merhatiin =P). Tuk simulator multitouch table, bisa make buatan reacTIVision.

$ wget http://prdownloads.sourceforge.net/reactivision/TUIO_Simulator-1.4rc1.zip
$ unzip TUIO_Simulator-1.4rc1.zip
$ cd TUIO_Simulator
$ java -jar TuioSimulator.jar

matikan antialiasing (Option => Antialiasing) kalo putus2..

Cuma 4.8 fps

Iseng2 nyoba bikin puluhan ribu kubus pake OpenGL. Eh taunya cuma dapet 4 fps pas bikin 30ribu kubus 🙁

Dijalanin di atas Ubuntu 8.10 di mesin MacBook generasi paling awal: Core Duo 1.83 GHz, 2GB RAM, Intel 945GM. Compiz dimatikan.

Cobain dong..

$ sudo apt-get install mesa-common-dev libglu1-mesa-dev libsdl1.2-dev
$ wget -O kubus.c http://gist.github.com/raw/31070/7d9fa6f768d1e17a5b5c3a4fac0513c968aed191
$ wget -O Makefile http://gist.github.com/raw/31070/b33b6de85207141642433b26b294c2ce9885d5b2
$ make
$ ./kubus 30000

Pindahin pointer mouse ke tengah2 window dan tunggu sekitar 10 detik sampe keterangan fps-nya muncul.