yum-mirror/slang

Making it easier to work with shaders

git clone https://git.yummers.dev/yum-mirror/slang

Anders LeinoAdd a basic WebGPU example (#5923)89dd2b127

master
1.1 KiB25 linesraw

Simple WebGPU example

Description

This is a simple example showing how WebGPU and Slang can be used together. The resulting application shows a green triangle rendered on a black background.

More serious applications are adviced to make use of Slang's reflection API.

Instructions

Get slangc from https://github.com/shader-slang/slang/releases/latest, or build it using the instructions under docs/building.md, and make sure that slangc is in the PATH of your shell.

Compile the Slang shaders shader.slang into WGSL shaders named shader.vertex.wgsl and shader.fragment.wgsl:

$ slangc -target wgsl -stage vertex -entry vertexMain -o shader.vertex.wgsl shader.slang
$ slangc -target wgsl -stage fragment -entry fragmentMain -o shader.fragment.wgsl shader.slang

Alternatively, you can run build.py which does the same thing.

Start a web server, for example by running the following command in this directory:

$ python -m http.server

Finally, visit http://localhost:8000/ to see the application running in your browser.

1# Simple WebGPU example
2
3## Description
4
5This is a simple example showing how WebGPU and Slang can be used together.
6The resulting application shows a green triangle rendered on a black background.
7
8More serious applications are adviced to make use of Slang's reflection API.
9
10## Instructions
11
12Get `slangc` from https://github.com/shader-slang/slang/releases/latest, or build it using the instructions under `docs/building.md`, and make sure that `slangc` is in [the `PATH` of your shell](https://en.wikipedia.org/wiki/PATH_(variable)).
13
14Compile the Slang shaders `shader.slang` into WGSL shaders named `shader.vertex.wgsl` and `shader.fragment.wgsl`:
15
16    $ slangc -target wgsl -stage vertex -entry vertexMain -o shader.vertex.wgsl shader.slang
17    $ slangc -target wgsl -stage fragment -entry fragmentMain -o shader.fragment.wgsl shader.slang
18
19Alternatively, you can run `build.py` which does the same thing.
20
21Start a web server, for example by running the following command in this directory:
22
23    $ python -m http.server
24
25Finally, visit `http://localhost:8000/` to see the application running in your browser.