public 3d-motion repository
web-experiments
// oktomus/web-experiments
Rendering, compute, GPU experiments
Some of my web experiments. Check my blog where I talk about rendering and shaders.
š§ Disclaimer: Most of these are made using draft APIs.
WebGL 2.0 Compute: toy ray tracer
- 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.
WebGL 2.0 Compute: Random number generator
How to generate random numbers in a compute shader.
WebGL 2.0 Compute: Framebuffer accumulation
Keep a buffer over time and add values onto it. Useful in raytracing to do progressive rendering.
WebGPU: glTF Viewer
A non-finished attempt at foind a glTF viewer like minimal-gltf-loader with the WebGPU API.
WebGPU: Getting started
| 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 |
Threejs : facing ratio shader
Really basic shader setup with threejs.