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

• code
• demo

How to generate random numbers in a compute shader.

WebGL 2.0 Compute: Framebuffer accumulation

• code
• demo

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.

• code
• demo

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

• code
• demo

Really basic shader setup with threejs.