Skip to content
a performance comparison of a simple raytracer in JavaScript, asm.js, WebAssembly, and GLSL
JavaScript C++ HTML Shell
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE no message Mar 23, 2020
README.md no message Mar 23, 2020
emscripten.bash no message Mar 23, 2020
emscripten.cpp no message Mar 23, 2020
javascript.html no message Mar 23, 2020
javascript.js no message Mar 23, 2020
shader.html no message Mar 23, 2020
shader.js no message Mar 23, 2020

README.md

wasm-raytracer

While teaching a web development class, I wanted to present some benchmarks that show the performance benefits of asm.js as well as WebAssembly. I was unfortunately not able to find a suitable reference. Therefore, I implemented a simplistic raytracer in JavaScript as well as in C++ with a similar code structure while utilizing Emscripten to compile the C++ raytracer to asm.js as well as WebAssembly. For fun, I also translated the code to GLSL and am utilizing WebGL to leverage GPU computing.

Screenshot

For a live demo, please see: https://sniklaus.com/wasmray
For a discussion, see Reddit: https://www.reddit.com/r/programming/comments/7k4v5t/

benchmark

Unsurprisingly, the version using GLSL / Shader is significantly faster than the others, showing that it is always important to use the right technology for the right purpose. However, this was not the point of this experiment. Instead, it shows how WebAssembly can potentially be used for an improved performance. To accelerate WebAssembly further, threads could be leveraged. Of course, one could make the argument that a different task could have shown the performance advantages of WebAssembly better. However, I also simply wanted to implement a raytracer.

Browser JavaScript asm.js WebAssembly GLSL / Shader
Firefox 57 ~407.3 ms ~112.3 ms ~87.4 ms ~1.9 ms
Firefox 58 ~358.9 ms ~103.2 ms ~82.7 ms ~1.9 ms
Chrome 62 ~191.7 ms ~167.2 ms ~115.7 ms ~2.1 ms
Chrome 63 ~181.4 ms ~154.2 ms ~120.7 ms ~2.2 ms

Note that the JavaScript performance of Firefox 57 is significantly affected by a bug that has since been fixed. One might also wonder why asm.js in Chrome is slower than JavaScript, which is due to Chrome not having accelerated support for asm.js in the first place.

license

Please refer to the appropriate file within this repository.

You can’t perform that action at this time.