Mungkin untuk sebagian orang baru mendengar nama WebGL dan masih terasa asing apa WebGL itu, dengan artikel yang tidak terlalu jelas ini semoga dapat membantu anda untuk memahami WebGL dan dapat membuat WebGL meskipun sederhana.
HTML5 membuat standarisas pada sebuah tag <canvas> dan menggenalkan Canvas API baru yang dapat untuk digunakan memanipulasi gambar 2Dimensi. Selain Canvas API yang 2Dimensi, <canvas> juga dapat digunakan untuk menampilkan grafis 3Dimensi dengan menggunakan WebGL API. Karena script WebGL cukup rumit bahkan untuk pemula seperti saya sangat rumit hehehe dan berbeda jauh dari Canvas API, pada artikel ini saya akan menunjukan script dan cara kerja dari WebGL yang scriptnya saya ambil dari thesolidsnake blog, kalo buat sendiri saya tidak bisa hehehe.
WebGL adalah salah satu penerapan OpenGL untuk dapat berjalan pada browser tanpa driver atau plugin tambahan ( tapi tidak semua Browser dapat menjalankan WebGL ). OpenGL adalah API yang digunakan untuk menghasilkan game 3Dimensi yang bersaing ketat dengan Microsoft DirectX. Hampir semua game 3Dimensi desktop akan memakai salah satu dari teknologi OpenGL atau DirectX (yang hanya jalan di Windows saja). Dan sampai saat ini perkembangan OpenGL dan DirectX sangat pesat, bahkan untuk mejalankan kedua teknologi ini tidak semua hardware mendukung. Untuk membahas tentang OpenGl dan DirectX yang lebih lanjut nanti saya buatkan artikelnya untuk membahasnya.
JavaScript??? WebGL dan JavaScript bisa dibilang adalah satu kesatuan kombinasi yang luar biasa ,Sulit membayangkan untuk membuat sebuah game 3Dimensi hanya dengan JavaScript. Tapi muncul sebuah masalah lain adalah seluruh kode script program JavaScript dapat dilihat dan dimodifikasi oleh pengguna lain. Ini tidak begitu diharapkan oleh developer game.
Terus bagaimana contoh penggunaan dari WebGL? Sebagai latihan, saya akan menunjukan sebuah halaman HTML sederhana yang saya ambil dari blog diatas tadi yang melakukan inisialisasi WebGL sederhana seperti berikut ini:
<html>
<head>
<meta charset='utf-8'/>
<title>Latihan WebGL</title>
</head>
<body>
<canvas id='canvas' width='640' height='480'>
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('webgl');
if (context) {
context.clearColor(0.0, 0.0, 0.0, 1.0);
context.clear(context.COLOR_BUFFER_BIT);
}
</script>
</body>
</html>
Copy kode diatas dan pastekan dinotepad, kemudian save dengan tipe data .HTML, setelah itu jalankan hasilnya di browser anda, maka anda akan mendapatkan sebuah tampilan kotak kosong , ini dilakukan untuk mengetes bahwa browser anda dapat menjalankan WebGL.
Dan untuk contoh yang lebih silahkan copy kode dibawah ini caranya seperti kode yang diatas tadi
<html><head><meta charset='utf-8'/><title>Latihan WebGL</title><script id='latihan-vertex' type='x-shader/x-vertex'>attribute vec3 aVertexPosition;attribute vec4 aVertexColor;varying lowp vec4 vColor;void main() {gl_Position = vec4(aVertexPosition, 1.0);vColor = aVertexColor;}</script><script id='latihan-fragment' type='x-shader/x-fragment'>varying lowp vec4 vColor;void main() {gl_FragColor = vColor;}</script></head><body><canvas id='canvas' width='640' height='480'></canvas><script type="text/javascript">// Inisialisasi WebGLvar canvas = document.getElementById('canvas');var gl = canvas.getContext('webgl', {antialias: true});gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);// Inisialisasi shadervar vertexShaderText = document.getElementById('latihan-vertex').text;var fragmentShaderText = document.getElementById('latihan-fragment').text;var vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, vertexShaderText);gl.compileShader(vertexShader);var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader, fragmentShaderText);gl.compileShader(fragmentShader);// Atur warnavar warna = [1.0, 1.0, 1.0, 1.0,1.0, 1.0, 1.0, 1.0,1.0, 1.0, 1.0, 1.0,1.0, 1.0, 1.0, 1.0,1.0, 1.0, 1.0, 1.0,0.5, 0.0, 0.0, 1.0,0.0, 1.0, 0.0, 1.0,0.0, 1.0, 0.0, 1.0,0.0, 0.5, 0.0, 1.0,0.0, 0.5, 0.0, 1.0,0.0, 0.5, 0.0, 1.0,0.0, 1.0, 0.0, 1.0,];// Inisialisasi programvar program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program);var bufferWarna = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, bufferWarna);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(warna), gl.STATIC_DRAW);var aVertexColor = gl.getAttribLocation(program, "aVertexColor");gl.enableVertexAttribArray(aVertexColor);gl.vertexAttribPointer(aVertexColor, 4, gl.FLOAT, false, 0, 0);// Gambar kubusvar buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([// sisi depan-0.5, -0.5, 1.0,-0.5, 0.5, 1.0,0.0, 0.5, 1.0,0.0, 0.5, 1.0,0.0, -0.5, 1.0,-0.5, -0.5, 1.0,// sisi samping0.0, 0.5, 1.0,0.0, - 0.5, 1.0,0.25, -0.25, -1.0,0.25, -0.25, -1.0,0.25, 0.75, -1.0,0.0, 0.5, 1.0]), gl.STATIC_DRAW);var aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");gl.enableVertexAttribArray(aVertexPosition);gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);gl.drawArrays(gl.TRIANGLES, 0, 12);</script></body></html>
Jika anda menjalankan kode diatas makan akan menampilkan gambar 3Dimensi berbentuk kotak seperti dibawah ini :
 |
| Contoh hasil WebGL dengan kode diatas |
Untuk contoh lain anda bisa mendownloadnya disini
Extrak file yang berbentuk rar, dan jalankan index.HTML di browser anda
