Very cool. Enjoyed playing with the "bounces" slider - it's fascinating how little improvement each additional bounce contributes after about 3 bounces. Severely diminishing returns in terms of the final image quality.
That's why virtually every renderer stochastically discards indirect paths with low contribution. Looking at the source code, this one computes every subsequent bounce, even those hitting the perfectly blue sphere after hitting the perfectly green one.
Demonstrates how important it is to match the scenes with the rendering techniques. You can easily create a corridor with a light at one end that requires lots of bounces for the light to get to the end. But in a game you can just decide to not create that kind of scene. Cyberpunk 2077 basically has no rooms without direct light in them, which makes the game look good even without ray tracing.
Thanks! It should work on mobile, you can hide the right panel using the button at the bottom of the screen. That said, performance on mobile is pretty limited because of hardware limitations.
If you click into the code you can see that it depends on `wgpu`, which is a wrapper that uses whichever native API would be appropriate for the platform you're working with. If you run the native compiled version you won't be using WebGPU.
The title implies that the reason this exists is because it "runs on any gpu, even in the browser". People have been making raytracers using gpu apis in the browser over and over for the last decade.
That would be like someone claiming their program "multiplies huge matrices using SIMD" and then wrapping eigen. Why make a claim that is just happening because you call the same library as everyone else?
The OP is real time ray tracing which is running between 30-60FPS on my macbook air while moving the camera and objects around.
Your link appears to be a basic ray tracer which anyone who has taken an intro to computer graphics course in college is likely required to implement and would only need a javascript canvas. To be honest I have no idea how much OPs real-time ray tracing differs in complexity from traditional ray tracing.
In Chrome I get "Failed to start: Failed to create State. Caused by: failed to find GPU adapter."
So I guess it runs on "some" GPUs, in "some" browsers!
Recommend taking a few minutes to make the web page work on mobile.
For example on iPhone the actual webgpu/ray tracing seems to work fine but html formatting is shoving things over to be barely visible.
Seems pretty clickbaity and dishonest when that's just what webgl and webgpu means. Just say webgpu.
Also the roughness doesn't apply to the environment map.
The title implies that the reason this exists is because it "runs on any gpu, even in the browser". People have been making raytracers using gpu apis in the browser over and over for the last decade.
That would be like someone claiming their program "multiplies huge matrices using SIMD" and then wrapping eigen. Why make a claim that is just happening because you call the same library as everyone else?
Written in Java then transpiled to JavaScript, been around for years.
Your link appears to be a basic ray tracer which anyone who has taken an intro to computer graphics course in college is likely required to implement and would only need a javascript canvas. To be honest I have no idea how much OPs real-time ray tracing differs in complexity from traditional ray tracing.