Primeros pasos con WebGPU para desarrolladores de juegos

WebGPU es el sucesor de WebGL. Es de más bajo nivel, más explícito y está diseñado para las GPU modernas. Si vas a iniciar un nuevo proyecto 3D en 2026, vale la pena aprender WebGPU.

Tutorial de WebGPU: 10 proyectos que abarcan desde la configuración hasta el renderizado 3D con iluminación y animación

1) Comprueba la compatibilidad del navegador

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

En 2026, WebGPU está disponible en Chrome, Edge, Firefox y Safari.

2) Obtén un dispositivo

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

El adaptador representa la GPU física. El dispositivo es tu interfaz para interactuar con ella.

Ambas llamadas pueden fallar. requestAdapter() devuelve null cuando el sistema no tiene una GPU utilizable y requestDevice() puede rechazar la solicitud, así que compruébalo antes de continuar:

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

Además, el adaptador queda consumido cuando creas un dispositivo a partir de él, así que solicita uno nuevo si necesitas otro dispositivo.

3) Configura el canvas

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

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

4) Escribe shaders en WGSL

WebGPU utiliza WGSL (WebGPU Shading Language), no 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) Crea un módulo de shaders

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

6) Crea un pipeline de renderizado

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

7) Renderiza un fotograma

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) Búferes en 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 enlace 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 frente a WebGL

Aspecto	WebGL	WebGPU
Estilo de API	Similar a OpenGL, con estado	Moderno, explícito
Shaders	GLSL	WGSL
Cómputo	Limitado (extensiones)	Compatibilidad de primer nivel
Multihilo	Difícil	Diseñado para ello
Compatibilidad con navegadores	Universal	Todos los navegadores principales (Chrome, Edge, Safari 26, Firefox)

Cuándo utilizar WebGPU

• Proyectos nuevos dirigidos a navegadores modernos
• Cargas de trabajo con uso intensivo de cómputo (física, IA y generación procedural)
• Cuando necesitas un control preciso de los recursos de la GPU

Contenido relacionado

• Fundamentos de WebGL
• Web Workers para la lógica del juego
• Publica un juego web que cargue rápido
• Stack tecnológico para juegos web en 2026 — marco de decisión para elegir entre WebGL, WebGPU y Wasm
• COOP/COEP y SharedArrayBuffer — cabeceras necesarias para usar multihilo de Wasm con cómputo de WebGPU

Recursos externos

• Especificación de WebGPU — especificación del W3C
• Especificación de WGSL — especificación del lenguaje de shaders de WebGPU
• Fundamentos de WebGPU — serie de tutoriales en profundidad
• Tu primera aplicación WebGPU — guía paso a paso de Google Codelab