Wgs

wgs is a binary format that represents pixel shader programs. Inspired by Shadertoy but uses WGSL instead. It can now runs on native platforms and Web as well thanks to wgpu-rs.

File strcuture

A wgs file mainly consists of three parts:

• meta which contains the meta info of the file, including:
  • name project name.
  • texture_count the count of the texture used by the file.
  • version the wgs version used in the file.
• frag the shader program in WGSL format.
• textures the textures used by the file. Each texture consists of it's width and height and color data in 8bit RGBA format.

Version

The latest version of wgs is wgs 1.

Notice The very first version of wgs does not include version field and uses a texture function to render textures which is conflicting with the keyword in GLSL. Thus, this first version is not compatible with any later versions.

How to write wgs

WgShadertoy is a cross-platform program helps you read and write your wgs files.

Maybe Web-based editors in the future.

Uniforms

A wgs program receives six parameters passed from the runtime as a uniform variable:

• cursor: vec2
  • The mouse position in pixels.
• mouse_down: u32
  • Whether the left button of the mouse is down.
  • 0: left button is up.
  • 1: left button is down.
• mouse_press: vec2
  • The mouse position in pixels when the left button is pressed.
• mouse_release: vec2
  • The mouse position in pixels when the left button is released.
• resolution: vec2
  • The resolution of the canvas in pixels (width * height).
• time: f32
  • The elapsed time since the shader first ran, in seconds.

You can use the above uniform like the following:

fn main_image(frag_color: vec4<f32>, frag_coord: vec2<f32>) -> vec4<f32> {
    let uv = frag_coord / u.resolution;
    let color = 0.5 + 0.5 * cos(u.time + uv.xyx + vec3(0.0, 2.0, 4.0));
    return vec4(color, 1.0);
}

Built-in functions

wgs currently provides one built-in function:

• image helps you play with textures:

  fn image(t: texture_2d<f32>, spl: sampler, uv: vec2<f32>) -> vec4<f32>
  

  Check this example for usage.

How to run wgs

Native

wgs_runtime_wgpu is all you need to run wgs file on a native platform.

Here's an example about how to integrate wgs with winit.

You can write your own runtime implementation as long as it implements RuntimeExt.

Web

wgs_runtime_wgpu also compiles for Wasm32 architecture.

You can install it from npm or use a high-level library wgs-player.