Shader Editor is a WebGPU project, created by NanoVis. It is an online WebGPU Shading Language (WGSL) editor and compiler. Users could write shaders to do the pixel-level operations. During each frame, different input uniforms are fed into shaders to utilise mouse, time and texture information.After logging in, users could save shaders and upload textures.
This is a brief introduction about how to create one new shader. WGSL is a shader language for WebGPU. That is, an application using the WebGPU API uses WGSL to express the programs, known as shaders, that run on the GPU.
Entry point function:
Implement the main function in order to generate the images in the pixel level:
fn main(@builtin(position) position: vec4<f32>) -> @location(0) vec4<f32>
where position is a four component vector in the format of (x, y, 0.0, 1.0) containing the pixel coordinates that shader uses to compute the color. The range of coordinates is form 0.5 to resolution-0.5. The resulting color is return by the function in the format of RGBA.
Input Uniform:
uniform Time : f32; //shader playback time (in seconds)
uniform Resolution : vec3<f32>; // viewport resolution
uniform Mouse : vec4<f32>; // mouse pixel coords. xy: current, zw: click
uniform Date1 : vec3<i32>; // year, month, day
uniform Date2 : vec3<i32>; // hour, minute, second
uniform Key : i32; // The ASCII character code of the pressed key
uniform Position : vec2<f32>;
uniform Random : f32; //random number
var texture1..4: texture_2d<f32>; // input textures
var sampler_: sampler; // input sampler