Wednesday January 15, 2025

Home | Contact | Support | Shaders.. Programming the GPU... | WebGPU Shader Language... Even web-pages can use the power of the GPU...

WebGPU Shader Language...

Even web-pages can use the power of the GPU...

WGSL (WebGPU Shader Language)

WGSL, or WebGPU Shading Language, is a programming language specifically tailored for writing shaders within the WebGPU API framework. As a shading language designed for the web, WGSL plays a crucial role in enabling high-performance graphics rendering directly within web applications. Its development is closely tied to the emergence of WebGPU, a modern graphics and compute API that aims to provide a more efficient and unified approach to web graphics programming.

The WGSL langauge syntax - it — The WGSL langauge syntax - it's like if RUST and Javascript had a baby (mix of features). If you're fmiliar with C/GLSL, it may look alien (scary), however, once you get past the shock - you'll see it has lots of new powers! (Background image from 'V' tv-series 1984-1985

One of WGSL's key features is its focus on portability and compatibility across various platforms, allowing developers to create web-based graphics experiences that seamlessly run on different devices and browsers. The language itself adopts a syntax that is a mix of Javascript and Rust. So if you've used GLSL shaders before, the transition to WGSL might need a bit of work. This design choice enhances readability and ease of adoption, important considerations for web development where a diverse range of developers may be involved.

Given its integration with WebGPU, WGSL aligns with the principles of modern graphics programming, emphasizing parallel execution and performance optimization. It enables developers to express complex shading algorithms and rendering techniques within the confines of a web environment. However, as with any emerging technology, WGSL's critical reception may hinge on its adoption rate and the extent to which it fulfills its promises of cross-platform compatibility and efficient web-based graphics rendering.

WGSL represents a significant step forward in bringing advanced graphics capabilities to web applications. Its design considerations for portability, compatibility, and a familiar syntax make it an attractive choice for developers looking to create immersive graphics experiences on the web. Nevertheles, the ultimate success and critical reception of WGSL will depend on its widespread adoption and its ability to deliver on the promises of performance and cross-platform consistency within the evolving landscape of web graphics.

GLSL was the only shader language, until now! WGSL is specifically designed for the web - a web shader language. While GLSL is ... — GLSL was the only shader language, until now! WGSL is specifically designed for the web - a web shader language. While GLSL is powerful, and still used by WebGL, it now has some competition.

Minimal Working Example (WGSL)

What do WGSL shaders look like? A couple of sample WGSL shaders (vertex and fragment)

Vertex WGSL Shader:

Fragment Shader:

// [[block]] 
struct Uniforms {
  mytimer                  : f32,
};

@group(0) @binding(0) var  mySampler: sampler;
@group(0) @binding(1) var  myTexture: texture_2d<f32>;
@group(0) @binding(2) var <uniform> uniforms : Uniforms;

fn mysmoothstep(edge0: f32, edge1: f32, x: f32) -> f32
{
  var t = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
  return t * t * (3.0 - 2.0 * t);
}

fn hash3( p: vec2<f32> ) -> vec3<f32>
{
  var q = vec3<f32>( dot(p,vec2<f32>(127.1,311.7)), 
                     dot(p,vec2<f32>(269.5,183.3)), 
                     dot(p,vec2<f32>(419.2,371.9)) );
  return fract(sin(q)*43758.5453);
}

fn voronoise( p: vec2<f32>, u: f32, v: f32 ) -> f32
{
  var k = 1.0+63.0*pow(1.0-v,6.0);

var i = floor(p);
  var f = fract(p);
    
  var a = vec2<f32>(0.0,0.0);
  for( var y=-2.0; y<=2.0; y=y+1.0 )
  {
    for( var x=-2.0; x<=2.0; x=x+1.0 )
    {
      var  g = vec2<f32>( x, y );
      var  o = hash3( i + g )*vec3<f32>(u,u,1.0);
      var  d = g - f + o.xy;
      var w = pow( 1.0-smoothstep(0.0,1.414,length(d)), k );
      a = a + vec2<f32>(o.z*w,w);
    }
  }
  return a.x/a.y;
}

@fragment
fn main(@location(0) uvs    : vec2<f32>) -> @location(0) vec4<f32> 
{
    var iTime = sin(uniforms.mytimer)*3.0;
    var p = 0.5 - 0.5*cos( iTime*vec2<f32>(1.0,0.5) );

p = p*p*(3.0-(2.0*p));
    p = p*p*(3.0-(2.0*p));
    p = p*p*(3.0-(2.0*p));
  
    var f = voronoise( 24.0*uvs, p.x, p.y );
  
    var fragColor = vec4<f32>( f, f, f, 1.0 );
    return fragColor;

}

The vertex and fragment shader examples are taken from the cell noise example here (LINK)

Articles

• WGSL Noise Functions - From Random Numbers to Textures

• Basic WGSL Shader Programming

Resources

Hundres of example projects that use the WebGPU API and the WGSL shader language on the webgpulab (run in the browser).

• WebGPU Tutorials and Examples [LINK]
• WebGPU Lab (Sandbox) [LINK]
• Tutorials on WebGPU API [LINK]
• Official specification - WGSL language [LINK]

Advert (Support Website)

Visitor:

Copyright (c) 2002-2024 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.