Pages

Search

Belajar dasar WebGL

10 January 2012

WebGL (Web-based Graphics Library) sama halnya dengan OpenGL. Kita dapat membuat objek 2D maupun 3D dengan teknologi ini, hanya saja WebGL bekerja di lingkungan web tepatnya pada elemen canvas HTML5. WebGL lebih dipergunakan untuk membuat konten 3D dengan salah satu kelebihannya adalah tidak menggunakan plugins seperti halnya Flash, Silverlight, dan Unity. Berikut adalah source code sederhana untuk belajar memulai WebGL, dimana kita hanya akan membuat konteks dari WebGL saja tanpa membuat embel-embel objek atau hal lainnya yang lebih kompleks:

<!DOCTYPE html>
<html>
<head>
<title>WebGL</title>
</head>
<body>
<canvas height="150" id="canvas" width="200"></canvas>
<script type="text/javascript">
window.onload = function(){
  var gl;
  var canvas = document.getElementById('canvas');
  gl = null;
  try {
    gl = canvas.getContext('experimental-webgl');
  }
  catch(e) {
    alert('Exception catched in getContext: '+e.toString());return;
  }
  if(!gl) {
    alert('Unable to create Web GL context');return;
  }
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</body>
</html>

Dari source code di atas dapat dilihat bahwa WebGL dibuat dalam elemen canvas pada HTML5 dengan nama konteks "experimental-webgl". Selain itu source code di atas juga tidak jauh berbeda dengan OpenGL. Gambar kotak berwarna hitam di bawah adalah hasil yang sama dengan source code di atas :


Sedikit informasi tentang WebGL sebelum saya mengakhiri postingan kali ini. WebGL termasuk teknologi yang baru dirilis maret 2011, jadi jangan ketinggalan untuk mengikuti perkembangannya lebih lanjut.

1 comment

 

Link Exchange

Molotuspi Studio