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.

Leave a Reply