https://github.com/magnusthor/demolishedwebgpu
demolishedWebGPU is a shader rendering engine based on WebGPU
https://github.com/magnusthor/demolishedwebgpu
demoscene glsl javascript shaders spir-v typescript webgl webgpu webgpu-api
Last synced: 3 months ago
JSON representation
demolishedWebGPU is a shader rendering engine based on WebGPU
- Host: GitHub
- URL: https://github.com/magnusthor/demolishedwebgpu
- Owner: MagnusThor
- Created: 2021-10-06T07:53:38.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-26T09:48:51.000Z (over 1 year ago)
- Last Synced: 2025-02-21T15:55:08.753Z (8 months ago)
- Topics: demoscene, glsl, javascript, shaders, spir-v, typescript, webgl, webgpu, webgpu-api
- Language: JavaScript
- Homepage: https://MagnusThor.github.io/demolishedWebGPU/example
- Size: 21.2 MB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# demolishedWebGPU
demolishedWebGPU is a shader rendering engine based on WebGPU. WebGPU is a new web API that exposes modern computer graphics capabilities, specifically Direct3D 12, Metal, and Vulkan, for performing rendering and computation operations on a GPU.
This project; demolishedWebGPU is an WebGPU implementation of the existing demolishedRenderer engine (https://github.com/MagnusThor/demolishedRenderer).
This an early version, but the following features is available now
1. Multi-pass/1-n shader programs/buffers
2. 1-n textures & samplers
3. Custom uniforms
4. Custom geometrys
5. Multipass rendering using WebGPU compute shaders
## Using WebGPU Fragment shader only
```
const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const renderer = new Renderer(canvas);
const device = await renderer.getDevice();
const scene = new Scene("myScene", device, canvas);
const material = new Material(device, raymarchShader);
const geometry = new Geometry(device, rectGeometry);
const textures: Array = [
{
key: "iChannel0",
source: "assets/channel0.jpg",
type: TextureType.IMAGE,
},
{
key: "iChannel1",
source: "assets/channel1.jpg",
type: TextureType.IMAGE
},
];
const mesh = new Mesh(device, geometry, material,[textures[0],textures[1]]);
await scene.addAssets(textures);
scene.addMesh("myMesh", mesh);
await renderer.addScene(scene)
renderer.start(0,200,(frameNo) => {
// noop
});
```
## Using WebGPU ComputeShaders + Fragmentshaders
```
const renderer = new ComputeRenderer(document.querySelector("canvas"));
await renderer.init();
renderer.addComputeRenderPass("iChannel0", computeRaymarchShader);
const material = new Material(renderer.device, mainShader);
renderer.addRenderPass(material);
renderer.start(0, 200, (frame) => {
fps.frame();
});
```