This is a real killer feature that will dramatically slow adoption of non-Chromium browsers, even with Google defanging ad blockers.
And when it becomes widespread, just like WebGL 2.0, it will be a decade behind of what native APIs are capable of.
And in both cases, good luck debugging, other than replicating the content on native APIs, as means to use proper GPU debuggers, because even Chrome has yet to offer any developer tooling for GPU debugging.
I've recently been shocked trying out the WebGL aquarium demo [0] on Chrome and Firefox after running into some really odd performance issues on a project. You'd expect them to behave about the same with GPU acceleration, but FF barely gets half the framerate at the same load. Like, what?! On Linux FF is also several times slower at canvas rendering.
While this has to be the most fun to watch demonstration I've seen, something like the free tier of Hamina will likely be many times more useful to those wanting to optimize home Wi-Fi layout https://www.hamina.com/planner. The downside being they force you to make an account whereas this one lets you use it locally with the power of your own browser. The upside being Hamina gives multiple distilled views of the simulation as focused on common Wi-Fi statistics + features and less focus on displaying the wave simulation itself.
You absolutely could do this using WebGL2 compute shaders too, but I thought it would be fun to try this newer API.
#1 if you spam the "add a new source" button you eventually get a JavaScript exception logged to the screen due to an array with a fixed max size of 128 elements overflowing.
#2 this could be graphics card or driver specific (I have an AMD card), but scrolling just right can can break the simulation due the the text boxes; for example by quickly paging up and down, or scrolling all the way to the bottom and then wiggling the scroll position up and down. Once this happens the bad data propagates until the entire thing is filled with noise, solid black, or solid white. If you then scroll up to 3D mode the screen will be filled with a mess of polygons.
Here is a very basic shader for what you want:
float freq1 = 2.0;
float freq2 = 3.0;
float amp = 0.5;
pos.z += sin(pos.x * freq1 + uTime) * amp;
pos.z += cos(pos.y * freq2 + uTime) * amp;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
And of course, I can't mention that without shouting out projectM (open-source Milkdrop) that supports WebGL https://github.com/projectM-visualizer/projectm/blob/master/... and one of the OGs, Geisswerks https://www.geisswerks.com/
If you like that, you might also love NestDrop for music visualization tailored for VJs and with special features to support projecting inside domed surfaces https://nestimmersion.ca/nestdrop.php
I will grant that it's a slightly odd distro, but is it any weirder than NixOS or Fedora Silverblue?
https://en.wikipedia.org/wiki/Electromagnetically_induced_ac...
CPU power circuitry can do the same, but given this is using the GPU, it's a safe assumption that it's the latter.
A while ago I was trying to find realistic examples of what WiFi "looks like", to try to get an intuitive sense of how it operated in a house or outside a building -- to what extent it spreads in the same way as a normal lightbulb, or to what extent its vastly larger wavelength complicated the picture.
At the time, literally the only visualization I was able to find was this artistic seemingly nonsense:
https://inspirationist.net/what-wifi-looks-like/
So I'm very happy to see this tool. I'd be even more curious to see a non-animated version that lets you drag your router around and see "illumination" of the overall signal to see how it changes, continuing to take into account how reflections confuse and degrade the usable signal, etc. Instead of the animation of slow wave propagation. Maybe that exists somewhere?
The cool thing about the speed of WebGPU is that you can drag things around and watch changes in real-time, even if you have to average lots of simulation steps per rendered frame.
Is there a way to move the router around to see how the field changes in response?
As far as I can tell you can do that in the paid version, and I totally understand gating that for people modeling their own home/office layout. But it would be pretty cool as a free educational demo if you could move the router in the otherwise fixed example.
"Sorry, there was an error starting the simulation
Sorry, WebGPU is not supported on our device
WiFi Solver may not be compatible with your device."
Barely any Firefox support either.
Looks like I'll skip this one.
A. Why?
B. What a bad error message
It seems like that would apply here as well, at least when looking at the effects of refraction?
let newEz = Ez0[me] + calcEzDiff(vec2u(id.x, id.y), dx, dy, aspect);
let newEzAbove = Ez0[above] + calcEzDiff(vec2u(id.x, id.y + 1), dx, dy, aspect);
let newEzRight = Ez0[right] + calcEzDiff(vec2u(id.x + 1, id.y), dx, dy, aspect);
Hx1[me] = Hx0[me] - (uniforms.dt/mu0)*(newEzAbove - newEz) / dy;
Hy1[me] = Hy0[me] + (uniforms.dt/mu0)*(newEzRight - newEz) / dx;
Ez1[me] = newEz;
let localDelta = delta[me];
let fac = 1 + uniforms.omega * uniforms.dt * (delta[me] / eps[me] / 2);
Ez1[me] = Ez1[me] / fac;
Hx1[me] = Hx1[me] / fac;
Hy1[me] = Hy1[me] / fac;
and then a bunch of other GPU code. You can find this with little effort from the bundle, if you care, by base64-decoding the Pt("xxx") parts.Though I do imagine it indeed could be implementable with WebGL shaders, but I also wouldn't start a new compute-based on it, unless I had a particular need to support older systems. And this I say as a Firefox user..
It's mostly broadband noise that can be simulated by simpler methods, but visualizing possible resonance patterns for the low-frequency emissions from the compressor (which typically runs at 20Hz, 40Hz, ..., 120 Hz) would be good to know.
Although I am not sure how the 2d simulation result carries over to the 3d world...
Unexpected Application Error!
offset is out of bounds
RangeError: offset is out of bounds at Float32Array.set (<anonymous>) at Pi.makeUniformBuffer (https://wifi-solver.com/dist/bundle-UKQ5A5W6.js:32:118833) at Pi.updateUniforms (https://wifi-solver.com/dist/bundle-UKQ5A5W6.js:32:117585) at Pi.setState (https://wifi-solver.com/dist/bundle-UKQ5A5W6.js:32:114537) at https://wifi-solver.com/dist/bundle-UKQ5A5W6.js:70:2373 at Vc (https://wifi-solver.com/dist/bundle-UKQ5A5W6.js:8:24370) at la (https://wifi-solver.com/dist/bundle-UKQ5A5W6.js:8:42602) at aS (https://wifi-solver.com/dist/bundle-UKQ5A5W6.js:8:41415) at ro (https://wifi-solver.com/dist/bundle-UKQ5A5W6.js:8:40441) at im (https://wifi-solver.com/dist/bundle-UKQ5A5W6.js:8:37031)
If the listener can be fixed in space then the problem gets easier but in that case what you have is actually a very large, room sized headphone that you enter and sit down into.
Source: I indirectly consulted a high-end furniture company on this exact project, they decided to pivot after a while.
I hate to mention that this is all currently patented. It's pretty "easy" to build though, but you'll have to wait a bit for all the related patents to expire or pay some licensing fees.