As promised, more insights on the webgl raytracer. It is based on this article/paper by Tero Karras: It uses Morton code to build a BVH binary radix tree on the GPU in realtime. #webgl #bvh #raytracing

The test scene is 3,1 million triangles and apart from the ordered Morton code atlas, it builds a single BVH in few milliseconds on a M1 mac.

Amazing! I thought Morton code requires bit operation that is not supported in webgl/glsl 3.0.

thanks ! I though it too but ES 3.0 shaders support at least some bit operations. Here's the code I use (adapted from:

Very nice work!

Thanks ! :)

Interesting, how do you build data in the GPU? Do you use FBOs or Transform Feedback? AFAIK WebGL2 doesnt support Compute Shaders.

Hey! Yes I use FBO. basically I use vertex shader, instead of compute shader, to draw a large atlas where 1pixel corresponds to 1 vertex and I store position,normal and uvs as packed data in a frame buffer.then use that for Morton code atlas

Awesome! Maybe you could help me with the morton BVH construction, i‘m stuck at the morton code determination: it only uses decimal bits within the unit cube, but how are coordinates above 1.0 handled? Wouldn‘t coord morton codes repeat for each „unit cube“ block of geometry? 😅

For Morton code you need to use ints instead 0-1 range floats. With 30 bits Morton code you can get up to 1024^3 precision. So you take your scene max size and split it in 1024 units and round to the closest int on x, y and z axis :)

@Thebadlament That is so impressive!