https://github.com/raza-liv/2024-webgpu-freestyle
WebGPU basic implementation. Shader module writing and passing custom dynamic values into it. Thanks to Google introduction course
https://github.com/raza-liv/2024-webgpu-freestyle
html js webgpu-api webgpu-shaders webgpu-step-by-step
Last synced: about 1 year ago
JSON representation
WebGPU basic implementation. Shader module writing and passing custom dynamic values into it. Thanks to Google introduction course
- Host: GitHub
- URL: https://github.com/raza-liv/2024-webgpu-freestyle
- Owner: Raza-LIV
- Created: 2024-12-09T08:09:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-23T14:27:03.000Z (about 1 year ago)
- Last Synced: 2025-03-23T15:25:15.225Z (about 1 year ago)
- Topics: html, js, webgpu-api, webgpu-shaders, webgpu-step-by-step
- Language: HTML
- Homepage: https://codelabs.developers.google.com/your-first-webgpu-app
- Size: 65.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 2025 WebGPU sandbox
Small test of what this API can do. Shaders using [WGSL](https://gpuweb.github.io/gpuweb/wgsl) are really powerfull.
```wgsl
@group(0) @binding(0) var grid: vec2f;
struct VertexInput {
@location(0) pos: vec2f,
@builtin(instance_index) instance: u32,
};
struct VertexOutput {
@builtin(position) pos: vec4f,
@location(0) cell: vec2f,
};
@vertex
fn vertexMain(input: VertexInput) -> VertexOutput {
let i = f32(input.instance);
let cell = vec2f(i % grid.x, floor(i / grid.x));
let cellOffset = cell / grid * 2;
let gridPos = (input.pos + 1) / grid - 1 + cellOffset;
var output: VertexOutput;
output.pos = vec4f(gridPos, 0, 1);
output.cell = cell;
return output;
}
struct FragInput {
@location(0) cell: vec2f,
};
@fragment
fn fragmentMain(input: FragInput) -> @location(0) vec4f {
let c = input.cell / grid;
return vec4f(c, 1-c.x, 1);
}
```