Primeiros passos com WebGPU para desenvolvedores de jogos

WebGPU é o sucessor do WebGL. É uma API de nível mais baixo, mais explícita e projetada para GPUs modernas. Se você está começando um novo projeto 3D em 2026, vale a pena aprender WebGPU.

Tutorial de WebGPU: 10 projetos que abrangem desde a configuração até a renderização 3D com iluminação e animação

1) Verifique a compatibilidade do navegador

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

Em 2026, o WebGPU está disponível no Chrome, Edge, Firefox e Safari.

2) Obtenha um dispositivo

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

O adaptador representa a GPU física. O dispositivo é sua interface com ela.

Ambas as chamadas podem falhar. requestAdapter() retorna null quando o sistema não tem uma GPU utilizável, e requestDevice() pode ser rejeitada, portanto, trate essas possibilidades antes de continuar:

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

O adaptador também é consumido quando você cria um dispositivo a partir dele. Portanto, solicite um novo adaptador se precisar de outro dispositivo.

3) Configure o canvas

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

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

4) Escreva shaders em WGSL

O WebGPU usa WGSL (WebGPU Shading Language), e não 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) Crie um módulo de shader

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

6) Crie um pipeline de renderização

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

7) Renderize um quadro

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) Buffers no 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) Grupos de vinculação para uniforms

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

Aspecto	WebGL	WebGPU
Estilo da API	Semelhante ao OpenGL, baseada em estado	Moderna, explícita
Shaders	GLSL	WGSL
Computação	Limitada (extensões)	Suporte de primeira classe
Multithreading	Difícil	Projetada para isso
Compatibilidade dos navegadores	Universal	Todos os principais navegadores (Chrome, Edge, Safari 26, Firefox)

Quando usar WebGPU

• Novos projetos voltados para navegadores modernos
• Cargas de trabalho com uso intensivo de computação (física, IA, geração procedural)
• Quando você precisa de controle granular sobre os recursos da GPU

Conteúdo relacionado

• Fundamentos do WebGL
• Web Workers para lógica de jogos
• Publique um jogo web que carregue rapidamente
• Stack tecnológico para jogos web em 2026 — critérios de decisão entre WebGL, WebGPU e Wasm
• COOP/COEP e SharedArrayBuffer — cabeçalhos necessários para multithreading em Wasm com computação WebGPU

Recursos externos

• Especificação do WebGPU — especificação do W3C
• Especificação da WGSL — especificação da WebGPU Shading Language
• Fundamentos do WebGPU — série de tutoriais aprofundados
• Seu primeiro aplicativo WebGPU — tutorial passo a passo do Google Codelab