Memulai WebGPU untuk pengembang game

WebGPU adalah penerus WebGL. API ini lebih rendah tingkatnya, lebih eksplisit, dan dirancang untuk GPU modern. Jika Anda memulai proyek 3D baru pada tahun 2026, WebGPU layak dipelajari.

Tutorial WebGPU: 10 proyek yang mencakup penyiapan hingga rendering 3D dengan pencahayaan dan animasi

1) Periksa dukungan browser

if (!navigator.gpu) {
  console.error('WebGPU not supported')
}

Pada tahun 2026, WebGPU tersedia di Chrome, Edge, Firefox, dan Safari.

2) Dapatkan perangkat

const adapter = await navigator.gpu.requestAdapter()
const device = await adapter.requestDevice()

Adapter merepresentasikan GPU fisik. Perangkat adalah antarmuka Anda untuk berinteraksi dengannya.

Kedua pemanggilan dapat gagal. requestAdapter() mengembalikan null ketika sistem tidak memiliki GPU yang dapat digunakan, sedangkan requestDevice() dapat ditolak, jadi tangani kemungkinan tersebut sebelum melanjutkan:

const adapter = await navigator.gpu.requestAdapter()
if (!adapter) throw new Error('No suitable GPU adapter found')
const device = await adapter.requestDevice()

Adapter juga dianggap telah digunakan setelah Anda membuat perangkat darinya, jadi minta adapter baru jika Anda memerlukan perangkat lain.

3) Konfigurasikan kanvas

const canvas = document.getElementById('game')
const context = canvas.getContext('webgpu')
const format = navigator.gpu.getPreferredCanvasFormat()

context.configure({
  device,
  format,
  alphaMode: 'premultiplied',
})

4) Tulis shader dalam WGSL

WebGPU menggunakan WGSL (WebGPU Shading Language), bukan GLSL.

@vertex
fn vs_main(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4f {
  var pos = array<vec2f, 3>(
    vec2f( 0.0,  0.5),
    vec2f(-0.5, -0.5),
    vec2f( 0.5, -0.5),
  );
  return vec4f(pos[idx], 0.0, 1.0);
}

@fragment
fn fs_main() -> @location(0) vec4f {
  return vec4f(1.0, 0.5, 0.2, 1.0); // orange
}

5) Buat modul shader

const shaderModule = device.createShaderModule({
  code: wgslSource,
})

6) Buat pipeline rendering

const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: {
    module: shaderModule,
    entryPoint: 'vs_main',
  },
  fragment: {
    module: shaderModule,
    entryPoint: 'fs_main',
    targets: [{ format }],
  },
})

7) Render sebuah frame

function render() {
  const commandEncoder = device.createCommandEncoder()
  const textureView = context.getCurrentTexture().createView()

  const renderPass = commandEncoder.beginRenderPass({
    colorAttachments: [{
      view: textureView,
      clearValue: { r: 0, g: 0, b: 0, a: 1 },
      loadOp: 'clear',
      storeOp: 'store',
    }],
  })

  renderPass.setPipeline(pipeline)
  renderPass.draw(3)
  renderPass.end()

  device.queue.submit([commandEncoder.finish()])
  requestAnimationFrame(render)
}
render()

8) Buffer di WebGPU

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

const vertexBuffer = device.createBuffer({
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
})

device.queue.writeBuffer(vertexBuffer, 0, vertices)

9) Bind group untuk uniform

const uniformBuffer = device.createBuffer({
  size: 64,
  usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
})

const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [{
    binding: 0,
    resource: { buffer: uniformBuffer },
  }],
})

10) WebGPU vs WebGL

Aspek	WebGL	WebGPU
Gaya API	Seperti OpenGL, berbasis status	Modern, eksplisit
Shader	GLSL	WGSL
Komputasi	Terbatas (ekstensi)	Dukungan kelas utama
Multi-threading	Sulit	Dirancang untuk itu
Dukungan browser	Universal	Semua browser utama (Chrome, Edge, Safari 26, Firefox)

Kapan sebaiknya menggunakan WebGPU

• Proyek baru yang menargetkan browser modern
• Beban kerja komputasi berat (fisika, AI, generasi prosedural)
• Saat Anda memerlukan kontrol mendetail atas sumber daya GPU

Terkait

• Dasar-dasar WebGL
• Web Worker untuk logika game
• Rilis game web yang dimuat dengan cepat
• Stack Teknologi Game Web pada 2026 — kerangka pengambilan keputusan untuk WebGL vs WebGPU vs Wasm
• COOP/COEP dan SharedArrayBuffer — header yang diperlukan untuk threading Wasm dengan komputasi WebGPU

Sumber Daya Eksternal

• Spesifikasi WebGPU — spesifikasi W3C
• Spesifikasi WGSL — spesifikasi WebGPU Shading Language
• Dasar-Dasar WebGPU — seri tutorial mendalam
• Aplikasi WebGPU pertama Anda — panduan langkah demi langkah Google Codelab