गेम डेवलपर्स के लिए WebGPU की शुरुआत

WebGPU, WebGL का उत्तराधिकारी है. यह ज़्यादा low-level है, ज़्यादा explicit है और आधुनिक GPUs के लिए बनाया गया है. अगर आप 2026 में कोई नया 3D प्रोजेक्ट शुरू कर रहे हैं, तो WebGPU सीखना फायदेमंद है.

WebGPU Tutorial: 10 प्रोजेक्ट, जो सेटअप से लेकर lighting और animation के साथ 3D rendering तक को कवर करते हैं

1) browser सपोर्ट जांचें

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

2026 तक, WebGPU, Chrome, Edge, Firefox और Safari में उपलब्ध है.

2) एक device लें

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

adapter फिज़िकल GPU को दर्शाता है. device उससे जुड़ने का आपका इंटरफ़ेस है.

दोनों calls fail हो सकती हैं. जब सिस्टम में कोई इस्तेमाल लायक GPU न हो तो requestAdapter(), null लौटाता है, और requestDevice() reject हो सकता है, इसलिए आगे बढ़ने से पहले इनसे बचाव रखें:

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

जब आप किसी adapter से device बना लेते हैं तो वह adapter खर्च हो जाता है, इसलिए अगर आपको दूसरा device चाहिए तो नया adapter request करें.

3) canvas को कॉन्फ़िगर करें

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

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

4) WGSL में shaders लिखें

WebGPU, GLSL नहीं बल्कि WGSL (WebGPU Shading Language) का इस्तेमाल करता है.

@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) एक shader module बनाएं

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

6) एक render pipeline बनाएं

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

7) एक frame render करें

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) WebGPU में buffers

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) uniforms के लिए bind groups

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 बनाम WebGL

पहलू	WebGL	WebGPU
API शैली	OpenGL जैसा, stateful	आधुनिक, explicit
Shaders	GLSL	WGSL
Compute	सीमित (extensions)	पहली श्रेणी का सपोर्ट
Multi-threading	मुश्किल	इसी के लिए बनाया गया
Browser सपोर्ट	सार्वभौमिक	सभी बड़े browsers (Chrome, Edge, Safari 26, Firefox)

WebGPU कब इस्तेमाल करें

• आधुनिक browsers को टार्गेट करने वाले नए प्रोजेक्ट
• compute-heavy काम (physics, AI, procedural gen)
• जब आपको GPU संसाधनों पर बारीक नियंत्रण चाहिए

संबंधित

• WebGL fundamentals
• गेम लॉजिक के लिए Web Workers
• तेज़ी से लोड होने वाला वेब गेम भेजें
• 2026 में Web Games Tech Stack — WebGL बनाम WebGPU बनाम Wasm के लिए निर्णय ढांचा
• COOP/COEP और SharedArrayBuffer — WebGPU compute के साथ Wasm threading के लिए ज़रूरी headers

बाहरी संसाधन

• WebGPU specification — W3C spec
• WGSL specification — WebGPU Shading Language spec
• WebGPU Fundamentals — गहराई से समझाने वाली tutorial सीरीज़
• Your first WebGPU app — Google Codelab walkthrough