wandres.dev
La GPU sin intermediarios

Domina WebGPU
hasta nivel dios

La API gráfica moderna de la web: adaptador y dispositivo, buffers y bind groups, WGSL a fondo, compute shaders, GPGPU y arquitecturas de render.

La ruta

47 niveles, de novato a dios

Cada nivel construye sobre el anterior. Sin saltos, sin huecos.

Ontología Nivel 0 · El mapa de WebGPU

Qué es, qué reemplaza, cómo se relaciona con Vulkan, Metal y D3D12, y el mapa completo de la API.

Mapa mentalOntologíaVulkan

Por qué WebGPU Nivel 1 · Los límites de WebGL

El modelo de máquina de estados de WebGL, sus problemas, y qué gana WebGPU: compute, validación previa y multihilo.

WebGLEstadoCompute

La GPU por dentro Nivel 2 · SIMD, warps y ocupación

Arquitectura de una GPU moderna: unidades de ejecución, la ejecución en grupos, la divergencia y la latencia de memoria.

SIMDWarpOcupación

Adaptador y dispositivo Nivel 3 · Iniciar WebGPU

requestAdapter, requestDevice, las features y los límites, el manejo de la pérdida de dispositivo y la detección de soporte.

AdapterDeviceLimits

El canvas Nivel 4 · Contexto, formato y configuración

getContext webgpu, configure, el formato preferido, alphaMode y el ciclo de obtener la textura del frame.

ContextFormatFrame

Buffers Nivel 5 · Memoria en la GPU

createBuffer, los flags de uso, mappedAtCreation, writeBuffer, y el modelo de memoria de la GPU.

BufferusagewriteBuffer

El primer triángulo Nivel 6 · Pipeline completo mínimo

De cero a un triángulo en pantalla: módulo de shader, pipeline, encoder, render pass y submit.

TriánguloEncodersubmit

Command encoding Nivel 7 · El modelo de comandos

CommandEncoder, los passes, el command buffer, la cola, y por qué WebGPU graba en vez de ejecutar.

EncoderQueueGrabar

Sincronización Nivel 8 · Asincronía y el mapeo

mapAsync, el ciclo de lectura desde GPU, onSubmittedWorkDone, y por qué leer de la GPU es caro.

mapAsyncLecturaLatencia

WGSL I Nivel 9 · El lenguaje de shading

La sintaxis inspirada en Rust, la estructura de un módulo, las entry points y las etapas.

WGSLSintaxisEntry point

WGSL II Nivel 10 · Tipos y espacios de dirección

Escalares, vectores, matrices, arrays y structs, y los address spaces: function, private, workgroup, uniform, storage.

TiposAddress spacestruct

WGSL III Nivel 11 · Atributos y builtins

location, builtin, group y binding, y el catálogo de builtins de cada etapa: position, vertex_index, global_invocation_id.

@location@builtin@group

WGSL IV Nivel 12 · Funciones y control de flujo

Declarar funciones, punteros, el control de flujo uniforme, y las restricciones que impone el hardware.

FuncionesPunterosUniformidad

WGSL V Nivel 13 · La librería estándar

El catálogo de funciones integradas: matemáticas, empaquetado, derivadas, y las de sincronización.

BuiltinsDerivadaspack

Vertex shaders Nivel 14 · De atributos a clip space

El vertex buffer layout, los formatos de atributo, el step mode para instancing, y la salida a clip space.

LayoutInstancingClip space

Fragment shaders Nivel 15 · Interpolación y salida

Las interpolaciones, flat y perspective, múltiples render targets, discard y el coste real del fragment.

InterpolaciónMRTdiscard

Overrides y constantes Nivel 16 · Especialización de pipelines

Las override constants, compilar variantes sin duplicar shaders, y el patrón de configuración por pipeline.

overrideVariantesConstantes

Bind groups I Nivel 17 · El modelo de recursos

BindGroupLayout, BindGroup, y por qué WebGPU agrupa recursos en vez de bindear uno a uno.

BindGroupLayoutModelo

Bind groups II Nivel 18 · Frecuencia de cambio y organización

Organizar los grupos por frecuencia, el pipeline layout compartido, y el impacto real en rendimiento.

FrecuenciaCompartirCoste

Uniform buffers Nivel 19 · Datos constantes y alineación

Las reglas de alineación de WGSL, el padding que muerde, los dynamic offsets y los tamaños mínimos.

UniformAlineaciónOffsets

Storage buffers Nivel 20 · Lectura y escritura arbitraria

Read-only frente a read-write, los arrays de tamaño variable, arrayLength, y el patrón de doble buffer.

StoragearrayLengthDoble buffer

Texturas I Nivel 21 · Crear, subir y muestrear

createTexture, copyExternalImageToTexture, las vistas, los formatos y el sampler con sus filtros.

TextureSamplerView

Texturas II Nivel 22 · Mipmaps, arrays y cubemaps

Generar mipmaps a mano, texture arrays, cubemaps, texturas 3D y los formatos comprimidos.

MipmapsArrayCubemap

Storage textures Nivel 23 · Escribir desde un shader

textureStore, los formatos permitidos, y los casos donde una storage texture supera a un buffer.

textureStoreFormatosCasos

Render pipeline Nivel 24 · El estado gráfico completo

Primitive, depth-stencil, multisample y blending: cada bloque del descriptor y qué controla.

PipelineBlendDepth

Depth y stencil Nivel 25 · Profundidad y máscaras

El depth buffer, la comparación, el reversed-z, el stencil como máscara y sus operaciones.

DepthReversed-ZStencil

Blending y transparencia Nivel 26 · El orden que siempre duele

Los factores de mezcla, premultiplied alpha, el orden de dibujado y las técnicas independientes del orden.

BlendPremultipliedOIT

Render targets Nivel 27 · Dibujar a textura

Off-screen rendering, múltiples attachments, load y store ops, y encadenar passes.

Off-screenloadOpMRT

Multisampling Nivel 28 · Antialiasing en hardware

MSAA en WebGPU, el resolve target, el coste en memoria, y las alternativas post-proceso.

MSAAResolveFXAA

Instancing e indirect Nivel 29 · Menos llamadas, más objetos

draw con instancias, drawIndirect y drawIndexedIndirect, y el patrón de generar comandos desde la GPU.

InstancingIndirectGPU-driven

Bundles Nivel 30 · RenderBundle y el coste de CPU

Pregrabar secuencias de comandos, cuándo ayudan de verdad, y sus restricciones.

BundleCPUPregrabado

Compute I Nivel 31 · El modelo de ejecución

Workgroups, invocaciones, la jerarquía de IDs, dispatchWorkgroups y elegir el tamaño de workgroup.

WorkgroupDispatchIDs

Compute II Nivel 32 · Memoria compartida y barreras

La var workgroup, workgroupBarrier, storageBarrier, y las condiciones de carrera dentro de un grupo.

workgroupBarrierCarreras

Compute III Nivel 33 · Reducciones y prefix sum

Los patrones fundamentales del cómputo paralelo: reducción en árbol, scan, y la reducción entre workgroups.

ReducciónScanParalelo

Compute IV Nivel 34 · Ordenación y búsqueda

Bitonic sort en GPU, el radix sort paralelo, y por qué ordenar en GPU es un problema distinto.

BitonicRadixSort

Simulación de partículas Nivel 35 · El caso canónico

Un sistema de partículas íntegramente en GPU: estado en storage, integración, y el render desde el mismo buffer.

PartículasIntegraciónGPU

Estructuras espaciales Nivel 36 · Grids y vecinos en GPU

Hash grid uniforme, contar y ordenar por celda, y la búsqueda de vecinos para colisiones y fluidos.

Hash gridVecinosColisiones

GPGPU y ML Nivel 37 · Matrices, convoluciones y tiling

Multiplicación de matrices con tiling en memoria compartida, convoluciones, y el estado de WebNN.

GEMMTilingWebNN

Ray tracing por software Nivel 38 · Trazado en compute shaders

Intersecciones, la BVH y su recorrido en GPU, y el path tracing progresivo con acumulación.

Ray tracingBVHPath tracing

Deferred y clustered Nivel 39 · Arquitecturas de render

Forward, deferred y forward+, el G-buffer, el clustered lighting y el árbol de decisión entre ellas.

DeferredG-bufferClustered

Renderizado GPU-driven Nivel 40 · La CPU fuera del camino

Culling en compute, generar draw indirect desde GPU, y la arquitectura de los motores modernos.

GPU-drivenCullingIndirect

Precisión y estabilidad Nivel 41 · Floats, NaN y el z-fighting

La precisión en GPU, los problemas de escala grande, las coordenadas relativas a cámara y depurar NaN.

PrecisiónNaNEscala

Rendimiento I Nivel 42 · Medir en GPU

Timestamp queries, occlusion queries, el perfil por pass, y determinar si el cuello está en cómputo o memoria.

TimestampPerfilarBottleneck

Rendimiento II Nivel 43 · Ancho de banda y ocupación

El coste de la memoria frente al de la ALU, coalescencia de accesos, y maximizar la ocupación.

BandwidthCoalescenciaOcupación

Depurar WebGPU Nivel 44 · Errores, scopes y validación

Los error scopes, la validación de la API, las etiquetas para mensajes legibles, y las herramientas externas.

Error scopelabelValidación

Portabilidad Nivel 45 · Límites, features y fallback

Los límites garantizados frente a los reales, comprobar features, la degradación a WebGL2 y el estado de soporte en 2026.

LimitsFeaturesFallback

Nivel Dios Nivel 46 · Síntesis de WebGPU

La arquitectura de un motor propio, el mapa de decisiones, y hacia dónde va la computación gráfica en la web.

SíntesisMotorFuturo
235lecciones
47niveles
0→∞de cero a dios

¿Listo para dominar WebGPU?

Empieza por los fundamentos y sube nivel a nivel hasta el dominio total.

Comenzar el camino →