The JS version is slow in Firefox because of a silly perf cliff, I filed a bug [0]. A quick fix for that improves the JS version from ~400 ms to ~180 ms for me locally. ~140 ms if I disable the Nightly-only GC poisoning.<p>edit: the JS code is a bit buggy: it does |if (Math.abs(dblDiscriminant) < 0.01)| in the |intersection| function, but dblDiscriminant is a var set in the next loop! Math.abs(undefined) is something we can easily optimize in the JIT, but really the JS code is broken. Folding this in our JIT [1] improves this to < 130 ms for me.<p>Please let us know if you run into JS perf problems, these bugs are usually easy to fix.<p>[0] <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1425687" rel="nofollow">https://bugzilla.mozilla.org/show_bug.cgi?id=1425687</a><p>[1] <a href="https://pastebin.com/CzfP5vQj" rel="nofollow">https://pastebin.com/CzfP5vQj</a>
I made a Path-tracer (photorealistic algorithm) in pure JS four years ago: <a href="http://renderer.ivank.net/" rel="nofollow">http://renderer.ivank.net/</a><p>It rendered this image: <a href="http://renderer.ivank.net/balls.jpg" rel="nofollow">http://renderer.ivank.net/balls.jpg</a> :)<p>I also made the "full" 3D game: <a href="http://powerstones.ivank.net/" rel="nofollow">http://powerstones.ivank.net/</a> (uses a GLSL shader).
Firefox really benefits from WebASM: the time per frame is ~90ms on my machine whereas the JS version is close to 400ms or so.<p>On the other hand, on Chrome the WebASM performance is ~100ms and JS is just a tiny bit slower at around 120ms!
Shader is broken on both android chrome and ff.<p>These work fine:<p><a href="https://www.shadertoy.com/view/4tyXDR" rel="nofollow">https://www.shadertoy.com/view/4tyXDR</a><p><a href="https://www.shadertoy.com/view/4sXGDs" rel="nofollow">https://www.shadertoy.com/view/4sXGDs</a><p><a href="https://www.shadertoy.com/view/4dsGRn" rel="nofollow">https://www.shadertoy.com/view/4dsGRn</a><p><a href="https://www.shadertoy.com/view/4lB3D1" rel="nofollow">https://www.shadertoy.com/view/4lB3D1</a>
Interesting that there is a 1000x speed difference (0.1 vs 100 ms, in Chrome) between the shader and the JS/WebASM versions even with just Intel integrated graphics.
Is there a resource to learn WebAssembly?<p>I don't mean how to use a tool chain to compile higher level languages to WASM. I mean how to write the linear assembly bytecode as seen here on Wikipedia:<p><a href="https://en.wikipedia.org/wiki/WebAssembly#Representation" rel="nofollow">https://en.wikipedia.org/wiki/WebAssembly#Representation</a>
the shader version is the fastest, but looks like modern art on my smartphone.<p>Like someone scribbled the colors over the circles instead of filling them.
When WASM only give's a 10% increase in performance, is it really worth it ? While at the same time using "hardware" shaders gives 1000% increase in performance. If the goal of WASM is not performance, what is the reasoning behind it ? That you would be able to compile any!? program to be run in the browser !?
Wow, Chrome is able to run the Shader on my Intel integrated graphics on Wayland in Ubuntu 17.10<p>Colo(u)r me impressed.<p>I'm getting 0.1 versus 125 for WebAsm versus ASM.js/JS of ~210 – kind of crazy that Chrome can run plain JS as fast as ASM.js (or is it?)<p>Firefox (57) can't run Shader unless there's some under the hood option I have to turn on …
a raytracer in JS: ~407.3 ms and in WASM: ~87.4 ms and in GLSL: ~0.17 ms<p><a href="https://www.reddit.com/r/programming/comments/7k4v5t/a_raytracer_in_js_4073_ms_and_in_wasm_874_ms_and/" rel="nofollow">https://www.reddit.com/r/programming/comments/7k4v5t/a_raytr...</a>
I had no idea ray tracers can be written with such concise and clean code. the results are amazing too. lesson learnt: JavaScript is extremely fast on chrome, 6 times slower than WASM in Firefox and GPU shaders are still faster by a factor of 1000!!