Some of my web experiments. Check my blog where I talk about rendering and shaders.
🚧 Disclaimer: Most of these are made using draft APIs.
- blogpost Writing a ray tracer for the web
- code
- demo
While this ray tracer is not physically correct and boring, it's a good example of what you can acheive with compute shaders in web.
This was made possible thanks to WebGL 2.0 Compute, an experimental feature currently available on Google Chrome (Linux or Windows).
Many thanks to 9ballsyndrome for his help and especially for his repository WebGL_Compute_shader where you can find really cool stuff made using WebGL 2.0 Compute.
How to generate random numbers in a compute shader.
Keep a buffer over time and add values onto it. Useful in raytracing to do progressive rendering.
A non-finished attempt at foind a glTF viewer like minimal-gltf-loader with the WebGPU API.
| What | Code link | Web demo link |
|---|---|---|
| Access the GPU | code | demo |
| Create a buffer | code | demo |
| Create a buffer and copy it to the GPU | code | demo |
| Compile and run a compute shader | code | demo |
| Matrix multiplication with compute shader | code | demo |
| Draw a triangle with vertex + fragment shader | code | demo |
| Draw using a vertex buffer | code | demo |
| Draw using a index buffer | code | demo |
| Use uniforms in fragment shader | code | demo |
| Load and sample a texture | code | demo |
| Create a buffer that combines vertices and uvs | code | demo |
Really basic shader setup with threejs.