Dasar-dasar WebGL untuk pengembang game

WebGL memberi Anda akses langsung ke GPU di browser. Teknologi ini menjadi fondasi untuk game web 3D (dan 2D berperforma tinggi). Tutorial ini membahas hal-hal pentingnya.

1) Mendapatkan konteks WebGL

const canvas = document.getElementById('game')
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl')

if (!gl) {
  // Fallback or error message
  console.error('WebGL not supported')
}

Utamakan webgl2 jika tersedia—dukungannya luas dan menawarkan fitur yang lebih baik.

2) Pipeline render (disederhanakan)

1. Shader vertex dijalankan sekali untuk setiap vertex. Shader ini menentukan posisi geometri Anda.
2. Shader fragmen dijalankan sekali untuk setiap piksel. Shader ini memberi warna pada hasil render.
3. Buffer menyimpan data (posisi, UV, warna).
4. Tekstur adalah gambar yang diambil sampelnya oleh shader.

3) Pasangan shader minimal

Shader vertex:

#version 300 es
in vec2 a_position;
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
}

Shader fragmen:

#version 300 es
precision mediump float;
out vec4 fragColor;
void main() {
  fragColor = vec4(1.0, 0.5, 0.2, 1.0); // orange
}

4) Mengompilasi dan menautkan shader

function createShader(gl, type, source) {
  const shader = gl.createShader(type)
  gl.shaderSource(shader, source)
  gl.compileShader(shader)
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error(gl.getShaderInfoLog(shader))
    gl.deleteShader(shader)
    return null
  }
  return shader
}

function createProgram(gl, vs, fs) {
  const program = gl.createProgram()
  gl.attachShader(program, vs)
  gl.attachShader(program, fs)
  gl.linkProgram(program)
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error(gl.getProgramInfoLog(program))
    return null
  }
  return program
}

5) Membuat buffer

const positions = new Float32Array([
  -0.5, -0.5,
   0.5, -0.5,
   0.0,  0.5,
])

const buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)

6) Menghubungkan buffer ke shader

const positionLoc = gl.getAttribLocation(program, 'a_position')
gl.enableVertexAttribArray(positionLoc)
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)

7) Loop game

function render() {
  gl.viewport(0, 0, canvas.width, canvas.height)
  gl.clearColor(0, 0, 0, 1)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.useProgram(program)
  gl.drawArrays(gl.TRIANGLES, 0, 3)

  requestAnimationFrame(render)
}
render()

8) Memuat tekstur

function loadTexture(gl, url) {
  const texture = gl.createTexture()
  gl.bindTexture(gl.TEXTURE_2D, texture)

  // Placeholder pixel until image loads
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
    new Uint8Array([255, 0, 255, 255]))

  const img = new Image()
  img.onload = () => {
    gl.bindTexture(gl.TEXTURE_2D, texture)
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img)
    gl.generateMipmap(gl.TEXTURE_2D)
  }
  img.src = url
  return texture
}

9) Kendala umum

• Tekstur berpangkat dua tidak mutlak diperlukan di WebGL 2, tetapi mipmap bekerja lebih baik dengannya.
• Konteks hilang: tangani peristiwa webglcontextlost—browser seluler akan mengeluarkan konteks saat memori terbatas.
• Tekstur float memerlukan pemeriksaan ekstensi (EXT_color_buffer_float).

10) Kapan harus menggunakan pustaka

WebGL mentah memerlukan banyak kode. Untuk sebagian besar game, pertimbangkan:

• Three.js — 3D dengan fitur lengkap
• PixiJS — rendering 2D cepat
• PlayCanvas — mesin game dengan editor

Gunakan WebGL mentah saat Anda membutuhkan:

• kendali maksimum
• renderer khusus
• pemahaman tentang cara kerja sebenarnya

Satu catatan untuk 2026: WebGPU kini tersedia secara default di semua browser utama (Chrome dan Edge sejak versi 113, Firefox 141 di Windows dan 145 di macOS, serta Safari di iOS 26, iPadOS 26, dan macOS Tahoe 26). Dasar-dasar di sini tetap berlaku karena pustaka seperti Three.js menjalankan renderer WebGPU dengan fallback otomatis ke WebGL 2, sehingga WebGL 2 tetap menjadi standar dasar yang dapat diandalkan. Jika Anda membuat renderer baru dari nol saat ini, baca tutorial WebGPU bersama tutorial ini sebelum menetapkan pilihan API.

Terkait

• WebGPU untuk game
• Loop game Canvas 2D
• Rilis game web yang dimuat dengan cepat
• Stack Teknologi Game Web pada 2026 — kapan memilih WebGL, WebGPU, atau Wasm
• Pustaka fisika game — mesin fisika yang melakukan rendering melalui WebGL
• Perbandingan Mesin Game Web — Three.js, PixiJS, PlayCanvas, dan lainnya

Sumber Daya Eksternal

• MDN: API WebGL — referensi API lengkap
• Dasar-Dasar WebGL2 — seri tutorial WebGL2 mendalam
• The Book of Shaders — panduan interaktif untuk shader fragmen GLSL
• Dokumentasi Three.js — framework WebGL paling populer