live_raytracer-bffaca82311af1dd.js:1484 Uncaught Error: Using exceptions for control flow, don't mind me. This isn't actually an error!
at imports.wbg.__wbg_wbindgenthrow_451ec1a8469d7eb6 (
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.
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.
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.
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?
I think you're getting lost in the weeds there. I do not see malice in the claim.
The irony is that it does not actually run on my GPU, nor much of other people's, judging by the comments. I don't know where people get this idea that WASM and WebGPU are the holy grail of portability; they are the opposite and the whole ecosystem is a fucking disaster. No offense to OP, though; I can understand the temptation to target that platform.
Anyway, I left more positive feedback in another comment.
Are you sure you aren't the one "lost in the weeds there"? What you're talking about has nothing to do with anything, it's a matter of software updates.
WASM offers a false sense of portability only because it is basically useless. It's not even POSIX-compliant (WASIX is a WIP). By the time it becomes useful, they will have realized they have re-implemented Java. And even then, it'll only offer a half-assed subset of functionality that you'd get from going native.
WebGPU is a similar story. It's based on a decades-old API, lagging severely behind present-day Vulkan. And it's not even well-supported across browsers. Again, you'll get better portability and more functionality from just going native.
To suggest that all of this is a "sofware update" away seems very naive. The kind of thing somebody without a technical background would suggest.
WASM offers a false sense of portability only because it is basically useless.
That doesn't have much to do with this project or what I talked about. It is a bytecode meant to be JIT compiled. It has nothing to do directly with supporting an API, and none of this has anything to do with running on the GPU.
lagging severely behind present-day Vulkan.
So what? What does this have to do with anything? What point are you trying to make?
And it's not even well-supported across browsers.
It's new and already works in chrome. What is your point?
To suggest that all of this is a "sofware update" away seems very naive. The kind of thing somebody without a technical background would suggest.
There is no substance here, just you saying "nu uh".
My recommendation, as someone with a technical background, is that you try it with chrome. It's easy to install, just search for install chrome then download the executable, then double click.
I think you misunderstood everything that I was saying though, your reply doesn't seem to connect to the idea that using an API then making the benefits of the API the unique aspect of the software is a bad idea.
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.
You could simulate pixels with divs if that's all you had. Or you could create an image in memory and save to file. You could write the text for it and save as SVG.
For a CPU based ray tracer, you don't need any output capability at all(unless you want it to be interactive, which school assignment raytracers usually don't have to).
In Firefox, open about:config and set this to true: `dom.webgpu.enabled`.
In Safari < 26:
Settings... -> Advanced -> tick Show features for web developers
Settings... -> Feature Flags -> tick WebGPU*
Why did you call the project rasterizer when it is not using rasterization but raytracing?
Rasterization is just the process of converting an image to a raster, which you also have to do in raytracing. It does sound strange though.
In Safari 26 on an M1 with WebGPU enabled I get "InvalidStateError: GPUCommandEncoder.beginComputePass: Unable to begin compute pass."
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!
And on M5 Safari 26, jacking the samples/pixel setting up high seems to trigger a system reboot, which is most curious
works for me just fine on 26; i get
```
live_raytracer-bffaca82311af1dd.js:1484 Uncaught Error: Using exceptions for control flow, don't mind me. This isn't actually an error! at imports.wbg.__wbg_wbindgenthrow_451ec1a8469d7eb6 (
```
but everything else is fine
Works fine on M4. M1 didn't have mesh shaders, maybe that's why?
What feedback are you looking for here specifically?
I cannot run the demo on Firefox, but you might get better performance with an 8x4 thread group.
Also, mega-kernels of this sort are generally bad for occupancy. Wavefront path tracing improves this at the expense of additional IO and a more involved implementation. https://research.nvidia.com/publication/2013-07_megakernels-...
Overall your code looks easy to read. Too bad I couldn't run it.
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.
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.
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.
It looks cool, nice project.
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.
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.
performance was 60fps on my phone / worked fine, but as parent said - the sidebar covers 90% of the screen. Worth collapsing by default imo.
It does not run: "unreachable executed"
Maybe your browser do not support webgpu. Try using Chrome.
Dosent work in firefox, because of missing webgpu.
Works on mobile Firefox Nightly
runs on any GPU – even in the browser
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.
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.
wgpu is based on webgpu, what is your point here?
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?
I think you're getting lost in the weeds there. I do not see malice in the claim.
The irony is that it does not actually run on my GPU, nor much of other people's, judging by the comments. I don't know where people get this idea that WASM and WebGPU are the holy grail of portability; they are the opposite and the whole ecosystem is a fucking disaster. No offense to OP, though; I can understand the temptation to target that platform.
Anyway, I left more positive feedback in another comment.
Are you sure you aren't the one "lost in the weeds there"? What you're talking about has nothing to do with anything, it's a matter of software updates.
Do you have a technical background?
WASM offers a false sense of portability only because it is basically useless. It's not even POSIX-compliant (WASIX is a WIP). By the time it becomes useful, they will have realized they have re-implemented Java. And even then, it'll only offer a half-assed subset of functionality that you'd get from going native.
WebGPU is a similar story. It's based on a decades-old API, lagging severely behind present-day Vulkan. And it's not even well-supported across browsers. Again, you'll get better portability and more functionality from just going native.
To suggest that all of this is a "sofware update" away seems very naive. The kind of thing somebody without a technical background would suggest.
Do you have a technical background?
Do you?
WASM offers a false sense of portability only because it is basically useless.
That doesn't have much to do with this project or what I talked about. It is a bytecode meant to be JIT compiled. It has nothing to do directly with supporting an API, and none of this has anything to do with running on the GPU.
lagging severely behind present-day Vulkan.
So what? What does this have to do with anything? What point are you trying to make?
And it's not even well-supported across browsers.
It's new and already works in chrome. What is your point?
To suggest that all of this is a "sofware update" away seems very naive. The kind of thing somebody without a technical background would suggest.
There is no substance here, just you saying "nu uh".
My recommendation, as someone with a technical background, is that you try it with chrome. It's easy to install, just search for install chrome then download the executable, then double click.
I think you misunderstood everything that I was saying though, your reply doesn't seem to connect to the idea that using an API then making the benefits of the API the unique aspect of the software is a bad idea.
https://www.jsweet.org/examples/#Ray_tracer
Written in Java then transpiled to JavaScript, been around for years.
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.
You don't even need a canvas.
You could simulate pixels with divs if that's all you had. Or you could create an image in memory and save to file. You could write the text for it and save as SVG.
For a CPU based ray tracer, you don't need any output capability at all(unless you want it to be interactive, which school assignment raytracers usually don't have to).