nanovis / Shader-Editor

An online WGSL shader editor and compiler.

Shader Editor

This project is a WGSL online editor and compiler based on WebGPU/Emscripten and Dawn. 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.

Tested with Chrome Dev (version 106.0.5231.2) with the --enable-unsafe-webgpu flag.

Dependences

• Emscripten: version 3.1.15
• Node.js: version 14.18.2
• MongoDB: version 4.4.13

Inspired by (and derived from) the following examples

• https://github.com/cwoffenden/hello-webgpu

Demo

• Shader Editor - Now it only supports Chorme.

How to run locally

$ git clone https://github.com/nanovis/Shader-Editor.git
$ cd Shader-Editor/out
$ npm install
$ cd ../vs_editor
$ npm install
$ cd .. && make serve

Access http://localhost:8080 on Chorme Dev and access chrome://flags to enable --enable-unsafe-webgpu.

Todo:

• Provide an interface for users to create uniform buffers
• Shaders' distributed version control
• Simultaneous editing by multiple people
• Shader sharing and publishing
• Register email verification
• ...

License

Shader Editor is licensed under the MIT License, see LICENSE for more information.