Saltar al contenido
wandres.dev
Iniciar sesión

WebGPU

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.

47 unidades · 235 temasEmpezar la ruta
  1. 00

    Nivel 0

    5 temas
    1. 01Qué es WebGPU: una API de GPU, no una biblioteca de gráficoshechoen curso
    2. 02Vulkan, Metal y D3D12: de qué es WebGPU el denominador comúnhechoen curso
    3. 03El modelo de objetos completo: quién crea a quién y cuánto vivehechoen curso
    4. 04El mapa del territorio: las cuatro regiones de WebGPUhechoen curso
    5. 05Dónde encaja WebGPU en la plataforma webhechoen curso
  2. 01

    Nivel 1

    5 temas
    1. 01La máquina de estados global de WebGL y por qué produce bugshechoen curso
    2. 02La validación en cada llamada: qué comprueba WebGL antes de dibujarhechoen curso
    3. 03El coste de CPU: por qué el cuello de botella casi nunca es la GPUhechoen curso
    4. 04La ausencia de compute: cómo se hacía GPGPU en WebGL y qué costabahechoen curso
    5. 05Qué gana WebGPU: las cuatro decisiones de diseño y su preciohechoen curso
  3. 02

    Nivel 2

    5 temas
    1. 01Anatomía de una GPU: por qué no es una CPU con muchos núcleoshechoen curso
    2. 02SIMT: por qué tus invocaciones no son hilos independienteshechoen curso
    3. 03Divergencia: por qué un if puede costar el doblehechoen curso
    4. 04La jerarquía de memoria y la latencia que no se vehechoen curso
    5. 05Ocupación: por qué a veces más hilos van más rápidohechoen curso
  4. 03

    Nivel 3

    5 temas
    1. 01navigator.gpu y una detección de soporte que no se rompehechoen curso
    2. 02requestAdapter: elegir GPU sin poder verlahechoen curso
    3. 03requestDevice y las features: pedir capacidades sin rompersehechoen curso
    4. 04Los límites: lo que la especificación garantiza y lo que hay de verdadhechoen curso
    5. 05device.lost: sobrevivir a que la GPU desaparezcahechoen curso
  5. 04

    Nivel 4

    5 temas
    1. 01getContext webgpu: qué es el contexto y qué no eshechoen curso
    2. 02configure: los siete campos del descriptor del canvashechoen curso
    3. 03getPreferredCanvasFormat: por qué existe esta funciónhechoen curso
    4. 04alphaMode: componer el canvas con el resto de la páginahechoen curso
    5. 05getCurrentTexture cada frame y el redimensionado que no rompe nadahechoen curso
  6. 05

    Nivel 5

    5 temas
    1. 01createBuffer: reservar memoria en la GPUhechoen curso
    2. 02Los flags de usage y las combinaciones que la validación rechazahechoen curso
    3. 03mappedAtCreation: llenar un búfer sin copias intermediashechoen curso
    4. 04queue.writeBuffer: la escritura de cada fotogramahechoen curso
    5. 05El modelo de memoria: qué es visible desde dóndehechoen curso
  7. 06

    Nivel 6

    5 temas
    1. 01El módulo de shader: de una cadena de WGSL a código de GPUhechoen curso
    2. 02El render pipeline: todo el estado gráfico en un objetohechoen curso
    3. 03El render pass: adjuntos, loadOp y storeOphechoen curso
    4. 04draw y submit: qué pasa cuando por fin dibujashechoen curso
    5. 05El triángulo completo: un archivo que puedes copiar y ejecutarhechoen curso
  8. 07

    Nivel 7

    5 temas
    1. 01Grabar en vez de ejecutar: el modelo de comandoshechoen curso
    2. 02El command encoder y las operaciones fuera de los paseshechoen curso
    3. 03Los pases como ámbitos: estado que no sale de sus llaveshechoen curso
    4. 04finish y el GPUCommandBuffer inmutablehechoen curso
    5. 05La cola: orden total, un solo destino y el coste de cada submithechoen curso
  9. 08

    Nivel 8

    5 temas
    1. 01Por qué leer de la GPU es carohechoen curso
    2. 02El búfer de staging: por qué hacen falta dos búferes y una copiahechoen curso
    3. 03mapAsync, getMappedRange y unmap: el ciclo completohechoen curso
    4. 04onSubmittedWorkDone: qué garantiza y para qué sirve de verdadhechoen curso
    5. 05Leer sin provocar un parón: el anillo de staging completohechoen curso
  10. 09

    Nivel 9

    5 temas
    1. 01Por qué WebGPU inventó un lenguaje en vez de adoptar SPIR-Vhechoen curso
    2. 02La estructura de un módulo: directivas, declaraciones y el orden que no importahechoen curso
    3. 03Puntos de entrada: las tres etapas y las reglas de su firmahechoen curso
    4. 04El módulo de shader en la API: por qué createShaderModule nunca fallahechoen curso
    5. 05De GLSL a WGSL: el diccionario y las cinco trampashechoen curso
  11. 10

    Nivel 10

    5 temas
    1. 01Escalares, literales abstractos y el tipo f16hechoen curso
    2. 02Vectores y matrices: constructores, swizzles y la columna que mandahechoen curso
    3. 03Arrays y structs: tamaño fijo, tamaño variable y valor cerohechoen curso
    4. 04Las reglas de disposición del lenguaje: alineación, tamaño y desplazamientohechoen curso
    5. 05Los seis espacios de dirección y qué se puede hacer en cada unohechoen curso
  12. 11

    Nivel 11

    5 temas
    1. 01El catálogo de atributos de WGSLhechoen curso
    2. 02@location: un número con tres significados distintoshechoen curso
    3. 03@group y @binding: las dos coordenadas de un recursohechoen curso
    4. 04Los builtins de vértice y de fragmentohechoen curso
    5. 05Los builtins de compute y la aritmética que los relacionahechoen curso
  13. 12

    Nivel 12

    5 temas
    1. 01Funciones: firma, paso por valor y la recursión que no existehechoen curso
    2. 02let, var, const y override: cuatro palabras, cuatro momentoshechoen curso
    3. 03Punteros: para qué sirven y las cuatro cosas que no puedes hacer con elloshechoen curso
    4. 04El control de flujo: loop, continuing y el switch sin fallthroughhechoen curso
    5. 05El control de flujo uniforme y el análisis que rechaza tu shaderhechoen curso
  14. 13

    Nivel 13

    5 temas
    1. 01Matemáticas y trigonometría: el catálogo y lo que no garantizahechoen curso
    2. 02Las funciones geométricas: dot, cross, reflect, refract y faceForwardhechoen curso
    3. 03select, mix, step y smoothstep: escribir sin ramashechoen curso
    4. 04Bits y empaquetado: meter cuatro canales en un u32hechoen curso
    5. 05Derivadas y funciones de texturahechoen curso
  15. 14

    Nivel 14

    5 temas
    1. 01El vertex buffer layout: de bytes a @locationhechoen curso
    2. 02La tabla de formatos de vértice con sus tamañoshechoen curso
    3. 03stepMode y varios buffers: el instancing por atributoshechoen curso
    4. 04El index buffer: dos formatos, cinco argumentos y un buffer para todohechoen curso
    5. 05De clip space al viewport: lo que hace el hardware después de tihechoen curso
  16. 15

    Nivel 15

    5 temas
    1. 01Los tres modos de interpolación: perspective, linear y flathechoen curso
    2. 02center, centroid y sample: dónde se evalúa la interpolaciónhechoen curso
    3. 03Múltiples render targets: escribir a varios attachments a la vezhechoen curso
    4. 04frag_depth y discard: las dos formas de romper el early-zhechoen curso
    5. 05El coste real del fragment shaderhechoen curso
  17. 16

    Nivel 16

    5 temas
    1. 01Las override constants: una constante que se decide al crear el pipelinehechoen curso
    2. 02El diccionario constants: dar valores al crear el pipelinehechoen curso
    3. 03Compilar variantes sin duplicar el shaderhechoen curso
    4. 04override frente a const: qué puede hacer cada unohechoen curso
    5. 05Configuración por pipeline o por uniform: cómo decidirhechoen curso
  18. 17

    Nivel 17

    5 temas
    1. 01Por qué WebGPU agrupa recursos en vez de bindearlos uno a unohechoen curso
    2. 02GPUBindGroupLayout: el contrato entre el shader y la APIhechoen curso
    3. 03GPUBindGroup: rellenar el contrato con recursos concretoshechoen curso
    4. 04GPUPipelineLayout y la correspondencia con @grouphechoen curso
    5. 05El modo auto: qué hace, qué ahorra y por qué acaba estorbandohechoen curso
  19. 18

    Nivel 18

    5 temas
    1. 01Organizar los bind groups por frecuencia de cambiohechoen curso
    2. 02Los cuatro grupos de un renderer que escalahechoen curso
    3. 03Compartir el pipeline layout para reutilizar bind groupshechoen curso
    4. 04El coste real de setBindGroup y cómo medirlohechoen curso
    5. 05Ordenar el bucle de dibujado por estadohechoen curso
  20. 19

    Nivel 19

    5 temas
    1. 01El uniform buffer: qué es, qué límites tiene y cuándo no sirvehechoen curso
    2. 02Las reglas de alineación de WGSL, con la tabla completahechoen curso
    3. 03El padding implícito, el explícito y las reglas extra del espacio uniformhechoen curso
    4. 04Dynamic offsets: un buffer para miles de objetoshechoen curso
    5. 05Dejar de calcular offsets a manohechoen curso
  21. 20

    Nivel 20

    5 temas
    1. 01Storage frente a uniform: límites, layout y modos de accesohechoen curso
    2. 02read y read_write: los modos de acceso de un storage bufferhechoen curso
    3. 03Arrays de tamaño en tiempo de ejecución y arrayLength()hechoen curso
    4. 04El patrón de doble buffer para simulacioneshechoen curso
    5. 05Cuándo un storage buffer gana al uniformhechoen curso
  22. 21

    Nivel 21

    5 temas
    1. 01createTexture: el descriptor completo, campo a campohechoen curso
    2. 02Subir datos: writeTexture y copyExternalImageToTexturehechoen curso
    3. 03createView: por qué el shader nunca ve una texturahechoen curso
    4. 04La tabla de formatos: renderizable, filtrable, storagehechoen curso
    5. 05El sampler: filtros, modos de dirección y comparaciónhechoen curso
  23. 22

    Nivel 22

    5 temas
    1. 01Generar mipmaps a mano: WebGPU no los genera soloshechoen curso
    2. 02Texture arrays: muchas texturas en un solo bindinghechoen curso
    3. 03Cubemaps: seis caras, un vector de direcciónhechoen curso
    4. 04Texturas 3D: volúmenes, LUTs y nieblahechoen curso
    5. 05Formatos comprimidos: BC, ETC2, ASTC y cuál pedirhechoen curso
  24. 23

    Nivel 23

    5 temas
    1. 01Qué es una storage texture y en qué se diferencia de una normalhechoen curso
    2. 02textureStore y las funciones de acceso directohechoen curso
    3. 03Los formatos permitidos: la lista corta que hay que sabersehechoen curso
    4. 04write, read y read_write: los tres modos de accesohechoen curso
    5. 05Storage texture o storage buffer: el criterio realhechoen curso
  25. 24

    Nivel 24

    5 temas
    1. 01El descriptor del render pipeline: el mapa de los seis bloqueshechoen curso
    2. 02Los bloques vertex y fragment: buffers, targets y blendinghechoen curso
    3. 03El bloque primitive: topología, orientación y descartehechoen curso
    4. 04Los bloques depthStencil y multisamplehechoen curso
    5. 05El coste de crear un pipeline y cómo no pagarlo en mitad del framehechoen curso
  26. 25

    Nivel 25

    5 temas
    1. 01El depth buffer: qué guarda, en qué formato y quién lo declarahechoen curso
    2. 02Las ocho funciones de comparación y qué escena pide cada unahechoen curso
    3. 03Early-Z: la optimización invisible y las tres cosas que la desactivanhechoen curso
    4. 04Reversed-Z: por qué invertir el rango resuelve el z-fighting de raízhechoen curso
    5. 05Depth bias y el búfer de estarcidohechoen curso
  27. 26

    Nivel 26

    5 temas
    1. 01La ecuación de mezcla: cinco operaciones y diecisiete factoreshechoen curso
    2. 02Alfa premultiplicado y el halo oscuro que no debería estar ahíhechoen curso
    3. 03Por qué ordenar no resuelve la transparenciahechoen curso
    4. 04OIT: weighted blended, depth peeling y listas por píxelhechoen curso
    5. 05Dithering estocástico y el árbol de decisión de la transparenciahechoen curso
  28. 27

    Nivel 27

    5 temas
    1. 01Renderizar a textura: la misma máquina apuntando a otro sitiohechoen curso
    2. 02Varios attachments de color y su correspondencia con los @locationhechoen curso
    3. 03loadOp y storeOp: por qué clear es más barato que loadhechoen curso
    4. 04Elegir formato y tamaño de un render targethechoen curso
    5. 05Encadenar passes: la salida de uno como entrada del siguientehechoen curso
  29. 28

    Nivel 28

    5 temas
    1. 01MSAA frente a supersampling: dónde está exactamente el ahorrohechoen curso
    2. 02La textura multimuestreada, el resolveTarget y las cuatro coherenciashechoen curso
    3. 03El coste real del multimuestreo: memoria, ancho de banda y densidad de triánguloshechoen curso
    4. 04Lo que el multimuestreo no arregla: textura, especular y siluetashechoen curso
    5. 05FXAA, SMAA y TAA: las tres alternativas de post-procesohechoen curso
  30. 29

    Nivel 29

    5 temas
    1. 01El parámetro de instancias de draw y drawIndexedhechoen curso
    2. 02La disposición exacta del buffer de argumentos indirectoshechoen curso
    3. 03Generar los comandos de dibujo desde un compute shaderhechoen curso
    4. 04Depurar un dibujo indirecto que no dibuja nadahechoen curso
    5. 05multiDrawIndirect: qué es, qué resolvería y en qué estado estáhechoen curso
  31. 30

    Nivel 30

    5 temas
    1. 01Qué es un render bundle y qué problema resuelvehechoen curso
    2. 02Qué se puede grabar en un bundle y qué nohechoen curso
    3. 03Cuándo un bundle ayuda de verdad y cuándo no cambia nadahechoen curso
    4. 04Bundles inmutables en escenas que cambianhechoen curso
    5. 05Medir si un bundle merece la pena en lugar de suponerlohechoen curso
  32. 31

    Nivel 31

    5 temas
    1. 01El compute pass: del pipeline al dispatchhechoen curso
    2. 02La jerarquía de identificadores de una invocaciónhechoen curso
    3. 03@workgroup_size y los límites de la especificaciónhechoen curso
    4. 04Elegir el tamaño de workgroup con criteriohechoen curso
    5. 05Mapear el dominio: el guardia, el techo y el dispatch indirectohechoen curso
  33. 32

    Nivel 32

    5 temas
    1. 01La memoria compartida del workgrouphechoen curso
    2. 02workgroupBarrier y storageBarrier: qué garantiza cada unahechoen curso
    3. 03Condiciones de carrera dentro de un workgrouphechoen curso
    4. 04La frontera entre workgroups: la restricción que lo condiciona todohechoen curso
    5. 05Operaciones atómicas en WGSLhechoen curso
  34. 33

    Nivel 33

    5 temas
    1. 01La reducción en árbol dentro de un workgrouphechoen curso
    2. 02Reducción entre workgroups: el segundo dispatchhechoen curso
    3. 03El scan de Hillis-Steelehechoen curso
    4. 04El scan de Blelloch: óptimo en trabajohechoen curso
    5. 05Scan de varios bloques y compactación de arrayshechoen curso
  35. 34

    Nivel 34

    5 temas
    1. 01Por qué ordenar en GPU es otro problemahechoen curso
    2. 02La red bitónica: estructura y costehechoen curso
    3. 03Bitonic sort en WebGPU: dos kernels y 78 dispatcheshechoen curso
    4. 04Radix sort paralelo sobre el scanhechoen curso
    5. 05Elegir el algoritmo de ordenaciónhechoen curso
  36. 35

    Nivel 35

    5 temas
    1. 01El estado de las partículas en storage buffershechoen curso
    2. 02Integración y el paso de tiempohechoen curso
    3. 03Fuerzas y campos de velocidadhechoen curso
    4. 04Renderizar desde el mismo buffer que simulahechoen curso
    5. 05Emisión y reciclado con contadores atómicoshechoen curso
  37. 36

    Nivel 36

    5 temas
    1. 01La rejilla uniforme y el hash espacialhechoen curso
    2. 02Contar partículas por celdahechoen curso
    3. 03Construir el índice de la rejilla con un prefix sumhechoen curso
    4. 04Reordenar por celda y la coalescencia de memoriahechoen curso
    5. 05Búsqueda de vecinos, colisiones y SPHhechoen curso
  38. 37

    Nivel 37

    5 temas
    1. 01GEMM ingenuo y la intensidad aritméticahechoen curso
    2. 02Tiling en memoria compartida: el factor 16hechoen curso
    3. 03Convoluciones en compute: halo, separabilidad e im2colhechoen curso
    4. 04Cuantización y precisión reducidahechoen curso
    5. 05WebNN y la inferencia sobre WebGPU en 2026hechoen curso
  39. 38

    Nivel 38

    5 temas
    1. 01Generar rayos: del píxel a la direcciónhechoen curso
    2. 02Intersecciones: esfera, plano y Möller-Trumborehechoen curso
    3. 03Construir la BVH: partición, SAH y aplanadohechoen curso
    4. 04Recorrer la BVH sin pilahechoen curso
    5. 05Path tracing progresivo: de un rayo a la integralhechoen curso
  40. 39

    Nivel 39

    5 temas
    1. 01Forward y el coste O(objetos · luces)hechoen curso
    2. 02El G-buffer: qué guardar y, sobre todo, qué nohechoen curso
    3. 03Los tres precios del deferredhechoen curso
    4. 04Forward+ y clustered: culling de luces por regiónhechoen curso
    5. 05Elegir arquitectura de render: el árbol de decisiónhechoen curso
  41. 40

    Nivel 40

    5 temas
    1. 01El coste de la CPU por objetohechoen curso
    2. 02Frustum culling en un compute shaderhechoen curso
    3. 03Oclusión con la jerarquía de profundidadhechoen curso
    4. 04Compactar los visibles: contador atómico o scanhechoen curso
    5. 05Generar el draw indirect desde la GPUhechoen curso
  42. 41

    Nivel 41

    5 temas
    1. 01Cómo se distribuyen los floats: el escalón crece con la magnitudhechoen curso
    2. 02Precisión en GPU frente a CPU: por qué el mismo cálculo da otro resultadohechoen curso
    3. 03El problema de las escalas grandes: cuando el mundo tiemblahechoen curso
    4. 04Coordenadas relativas a cámara: que ningún número grande llegue al shaderhechoen curso
    5. 05Depurar un NaN que se propagahechoen curso
  43. 42

    Nivel 42

    5 temas
    1. 01Timestamp queries: la única medida real de la GPUhechoen curso
    2. 02El perfil por pass: un perfilador que puedes dejar encendidohechoen curso
    3. 03Occlusion queries: preguntar si algo se ve, y llegar tardehechoen curso
    4. 04El reloj de CPU y el de GPU: dos dominios que no se restanhechoen curso
    5. 05Cómputo o memoria: los tres experimentos que lo decidenhechoen curso
  44. 43

    Nivel 43

    5 temas
    1. 01El coste real de la memoriahechoen curso
    2. 02Coalescencia y patrón de accesohechoen curso
    3. 03Reutilización de datos y tilinghechoen curso
    4. 04Ocupación y sus límiteshechoen curso
    5. 05El ratio aritmético/memoriahechoen curso
  45. 44

    Nivel 44

    5 temas
    1. 01Error scopes: acotar el fallo en un API que casi nunca lanzahechoen curso
    2. 02Dispositivo perdido y uncapturederror: las dos redes globaleshechoen curso
    3. 03label: la propiedad que convierte un mensaje inútil en un diagnósticohechoen curso
    4. 04Qué comprueba la validación y qué sigue siendo tu problemahechoen curso
    5. 05El utillaje real: consola, volcados y capturadores nativoshechoen curso
  46. 45

    Nivel 45

    5 temas
    1. 01Los límites que la especificación te garantiza y los que nohechoen curso
    2. 02Comprobar las features antes de pedirlashechoen curso
    3. 03Degradar a WebGL2 sin engañartehechoen curso
    4. 04El soporte real de WebGPU en 2026hechoen curso
    5. 05Qué puedes asumir y qué nohechoen curso
  47. 46

    Nivel 46

    5 temas
    1. 01La arquitectura de un motor de render propio, de principio a finhechoen curso
    2. 02El mapa de decisiones técnicashechoen curso
    3. 03Los cuarenta y seis niveles en un mapahechoen curso
    4. 04Los errores que ya no deberías cometerhechoen curso
    5. 05Hacia dónde va la computación gráfica en la webhechoen curso