All Projects → sniklaus → Webassembly Raytracer

sniklaus / Webassembly Raytracer

Licence: gpl-3.0
a performance comparison of a simple raytracer in JavaScript, asm.js, WebAssembly, and GLSL

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Webassembly Raytracer

Glchaos.p
3D GPUs Strange Attractors and Hypercomplex Fractals explorer - up to 256 Million particles in RealTime
Stars: ✭ 590 (+478.43%)
Mutual labels:  emscripten, glsl, webassembly
Cargo Web
A Cargo subcommand for the client-side Web
Stars: ✭ 1,026 (+905.88%)
Mutual labels:  emscripten, webassembly
Assortedwidgets
OpenGL GUI library
Stars: ✭ 92 (-9.8%)
Mutual labels:  emscripten, webassembly
Cobol Js Emscripten
Stars: ✭ 101 (-0.98%)
Mutual labels:  emscripten, webassembly
Nau
Nau - OpenGL + Optix 3D Engine
Stars: ✭ 18 (-82.35%)
Mutual labels:  glsl, raytracing
Cppwasm Book
📚 WebAssembly friendly programming with C/C++ -- Emscripten practice
Stars: ✭ 956 (+837.25%)
Mutual labels:  emscripten, webassembly
Emscripten Docker
Docker image with Emscripten to compile ASM.js and WebAssembly
Stars: ✭ 92 (-9.8%)
Mutual labels:  emscripten, webassembly
Binaryen
Compiler infrastructure and toolchain library for WebAssembly
Stars: ✭ 5,294 (+5090.2%)
Mutual labels:  emscripten, webassembly
Rayray
A tiny GPU raytracer, using Zig and WebGPU
Stars: ✭ 59 (-42.16%)
Mutual labels:  glsl, raytracing
Magnum Plugins
Plugins for the Magnum C++11/C++14 graphics engine
Stars: ✭ 66 (-35.29%)
Mutual labels:  emscripten, webassembly
Magnum Bootstrap
Bootstrap projects for Magnum C++11/C++14 graphics engine
Stars: ✭ 69 (-32.35%)
Mutual labels:  emscripten, webassembly
Securityworker
The best javascript code protection solution ever.
Stars: ✭ 626 (+513.73%)
Mutual labels:  emscripten, webassembly
Ouzel
C++ game engine for Windows, macOS, Linux, iOS, tvOS, Android, and web browsers
Stars: ✭ 607 (+495.1%)
Mutual labels:  emscripten, glsl
Dcmjs
dcmjs is a javascript cross-compile of dcmtk (dcmtk.org).
Stars: ✭ 92 (-9.8%)
Mutual labels:  emscripten, webassembly
Shady
CLI tool to render GLSL shaders
Stars: ✭ 79 (-22.55%)
Mutual labels:  glsl, raytracing
Waflash
A WebAssembly ActionScript 3.0 Flash player built with Emscripten
Stars: ✭ 46 (-54.9%)
Mutual labels:  emscripten, webassembly
Rustynes
👾 An NES emulator by Rust and WebAssembly
Stars: ✭ 399 (+291.18%)
Mutual labels:  emscripten, webassembly
Camaro
camaro is an utility to transform XML to JSON, using Node.js binding to native XML parser pugixml, one of the fastest XML parser around.
Stars: ✭ 438 (+329.41%)
Mutual labels:  emscripten, webassembly
Wasmjit
Small Embeddable WebAssembly Runtime
Stars: ✭ 1,063 (+942.16%)
Mutual labels:  emscripten, webassembly
Opus Stream Decoder
Instantly decode Ogg Opus audio streams in chunks with JavaScript & WebAssembly (Wasm)
Stars: ✭ 80 (-21.57%)
Mutual labels:  emscripten, webassembly

webassembly-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 though. Therefore, I implemented a simplistic raytracer in JavaScript as well as in C++ with a similar code structure while utilizing Emscripten accordingly. 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/blog/raytracer
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 should soon be 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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].