El lenguaje de sombreado WebGPU ( WGSL , tipo de medio de Internet :) text/wgsles un lenguaje de sombreado de alto nivel y el lenguaje de sombreado normativo para la API WebGPU en la web. [ 1 ] [ 2 ] La sintaxis de WGSL está influenciada por Rust y está diseñada teniendo en cuenta una fuerte validación estática, una vinculación explícita de recursos y la portabilidad para una ejecución segura en navegadores. [ 1 ] En contextos web, las implementaciones de WebGPU aceptan el código fuente WGSL y realizan la compilación a formas intermedias específicas de la plataforma (por ejemplo, a SPIR-V, DXIL o MSL a través del agente de usuario), pero dichos backends no están expuestos al contenido web. [ 2 ] [ 3 ]
Historia y antecedentes
Históricamente, los gráficos en la web utilizaban WebGL , con sombreadores escritos en GLSL ES . A medida que las aplicaciones exigían características de GPU más modernas y un control más preciso sobre las canalizaciones de computación y gráficos, el Grupo Comunitario y el Grupo de Trabajo de GPU para la Web del W3C crearon WebGPU y su lenguaje de sombreado complementario, WGSL, para proporcionar un modelo seguro y portátil adecuado para la plataforma web. [ 4 ] [ 2 ] WGSL se desarrolló para ser legible para humanos, evitar el comportamiento indefinido común en los lenguajes de sombreado heredados y alinearse estrechamente con el modelo de recursos y validación de WebGPU. [ 1 ]
Objetivos de diseño
El diseño de WGSL hace hincapié en:
- Seguridad y determinismo adecuados para las restricciones de seguridad web (validación estática extensa y semántica bien definida). [ 1 ]
- Portabilidad entre diversos backends de GPU a través de un modelo de recursos abstracto compartido con WebGPU. [ 2 ]
- Legibilidad y explicitud (sin preprocesador, conversiones implícitas mínimas, espacios de direcciones y enlaces explícitos). [ 1 ]
- Alineación con las características modernas de las GPU (cálculo, búferes de almacenamiento, texturas, operaciones atómicas) manteniendo una sintaxis familiar similar a la de C/Rust. [ 1 ]
Descripción general del idioma
Tipos y valores
Los tipos escalares principales incluyen bool, i32, u32, y f32. Los vectores (por ejemplo, vec2, vec3, vec4) y las matrices (hasta 4×4) están disponibles para tipos de elementos de punto flotante. f16La precisión media opcional puede habilitarse mediante una función de WebGPU; la disponibilidad depende de la implementación. [ 1 ] [ 2 ] Los tipos atómicos ( atomic<i32>, atomic<u32>) admiten operaciones atómicas limitadas en espacios de direcciones calificados. [ 1 ]
Variables y espacios de direcciones
Las variables se declaran con let(inmutable), var(mutable) o const(constante en tiempo de compilación). Las clases de almacenamiento (espacios de direcciones) incluyen function, private, workgroup, uniform, y storagecon reado read_writeacceso según corresponda. [ 1 ] WGSL define reglas explícitas de diseño y alineación; atributos como @align, @size, y @stridecontrolan el diseño de datos para la interoperabilidad del búfer. [ 1 ]
Funciones y flujo de control
Las funciones utilizan parámetros y tipos de retorno explícitos. El flujo de control incluye construcciones if, switch, for, while, y , con / . La recursión no está permitida; los grafos de llamadas de punto de entrada deben ser acíclicos. [ 1 ]loopbreakcontinue
Puntos de entrada y atributos
Los sombreadores definen los puntos de entrada de la etapa con @vertex, @fragment, o @compute. Los atributos anotan enlaces e interfaces, incluyendo @group, @binding(enlace de recursos), @location(E/S definida por el usuario), @builtin(funciones integradas de la etapa como positiono global_invocation_id), @interpolate, y @workgroup_size. [ 1 ]
Recursos
WGSL expone búferes ( uniform, storage), texturas (variantes muestreadas, de almacenamiento y multimuestreadas) y muestreadores (filtrado/sin filtrado/comparación). El modelo de enlace es explícito a través de conjuntos de descriptores llamados grupos y enlaces, que coinciden con el modelo de diseño de canalización de WebGPU. [ 2 ] [ 1 ]
Compilación y validación
Los navegadores compilan WGSL a representaciones apropiadas para la plataforma y formatos de controlador nativos; el proceso de compilación específico no es observable por el contenido web. [ 2 ] El código fuente de WGSL se somete a un análisis sintáctico estricto y a una validación estática, y WebGPU aplica reglas de acceso a recursos robustas para evitar riesgos de memoria fuera de límites, lo que contribuye a un comportamiento predecible en todas las implementaciones. [ 2 ] [ 1 ]
Etapas de sombreado
WGSL admite tres etapas de canalización: vértice, fragmento y cómputo. [ 1 ]
sombreadores de vértices
Los sombreadores de vértices transforman las entradas por vértice y producen valores para la rasterización, incluyendo una posición en el espacio de recorte escrita en la positionfunción integrada. [ 1 ]
Ejemplo
/* Transforma las posiciones mediante una matriz MVP y transmite el color. */struct VertexInput { @location ( 0 ) position : vec3f , // vec3f es un alias para vec3<f32> @location ( 1 ) color : vec3f , };struct VertexOutput { @builtin ( position ) clip_position : vec4f , @location ( 0 ) color : vec3f , };@group ( 0 ) @binding ( 0 ) var < uniform > mvp : mat4x4f ;@vertex fn main ( v_in : VertexInput ) -> VertexOutput { var v_out : VertexOutput ; v_out . clip_position = mvp * vec4f ( v_in . position , 1.0 ); v_out . color = v_in . color ; return v_out ; }sombreadores de fragmentos
Los sombreadores de fragmentos se ejecutan por fragmento y calculan las salidas de color (y opcionalmente de profundidad) que se escriben en los adjuntos de color. [ 1 ]
Ejemplo
/* Escribe un color interpolado con transparencia opaca. */@fragment fn main ( @location ( 0 ) color : vec3f ) -> @location ( 0 ) vec4f { return vec4f ( color , 1.0 ); }Si se desea precisión media ( vec4h, abreviatura de ), el código debe ir precedido de una instrucción.vec4<f16>enablef16;
Shaders de cómputo
Los sombreadores de cómputo se ejecutan en grupos de trabajo y se utilizan para cálculos de GPU de propósito general. [ 1 ]
Ejemplo
/* Duplica los elementos de un búfer de entrada en un búfer de salida. */struct Params { element_count : u32 , };@group ( 0 ) @binding ( 0 ) var < storage , read > in_data : array < f32 > ; @group ( 0 ) @binding ( 1 ) var < storage , read_write > out_data : array < f32 > ; @group ( 0 ) @binding ( 2 ) var < uniform > params : Params ;@compute @workgroup_size ( 64 ) fn main ( @builtin ( global_invocation_id ) gid : vec3 < u32 > ) { let idx : u32 = gid . x ; if ( idx >= params . element_count ) { return ; } out_data [ idx ] = in_data [ idx ] * 2.0 ; }Diferencias con GLSL y HLSL
En comparación con los lenguajes de sombreado heredados, WGSL:
- Omite un preprocesador y requiere tipos y conversiones explícitas. [ 1 ]
- Utiliza espacios de direcciones explícitos y anotaciones de enlace alineadas con el modelo de WebGPU. [ 2 ]
- Aplica una validación estricta para evitar comportamientos indefinidos comunes en otros lenguajes de sombreado. [ 1 ]
- Define un conjunto de características portátiles y centradas en la web; los tipos de 16 bits y otras características son opcionales y pueden depender de las capacidades del dispositivo. [ 2 ]
Véase también
Otros lenguajes de sombreado
- GLSL , lenguaje de sombreado para OpenGL
- HLSL , el lenguaje de sombreado de Microsoft para Direct3D
- Metal Shading Language , el lenguaje de sombreado de Apple para Metal.
- Cg , el lenguaje de sombreado basado en C de NVIDIA
- Lenguaje de sombreado abierto , lenguaje de sombreado para renderizado sin conexión
Referencias
- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 "WebGPU Shading Language (WGSL)" . W3C . Consultado el 7 de agosto de 2025 .
- 1 2 3 4 5 6 7 8 9 10 "WebGPU" . W3C . Consultado el 7 de agosto de 2025 .
- ↑ "WGSL (WebGPU Shading Language)" . MDN Web Docs . Consultado el 7 de agosto de 2025 .
- ↑ "WebGPU Explainer" . Grupo comunitario de GPU para la web del W3C . Consultado el 7 de agosto de 2025 .
Enlaces externos
- Especificación del lenguaje de sombreado WebGPU – Especificación oficial del W3C
- Especificación WebGPU – Especificación de la API WebGPU
- WGSL en la GPU para el repositorio web – Directorio de desarrollo de la especificación WGSL
- Lenguajes de sombreado
- Estándares web
- Estándares del Consorcio World Wide Web
- Gráficos por computadora