WASM Sunray

WASM Sunray

This is my Sunray Rust raytracer, compiled to WebAssembly.

To use, select a scene and click on Generate image. This will call the Rust function to generate that scene, and display the output in a canvas when it finishes. It might take a while, so be patient!

There are a few options that can be changed, like the number of samples (rays) per pixel, image width, aspect ratio, and color of the sky. There are two colors, which create a gradient from the top of the sky to the bottom. The colors are RGB float values from 0 to 1.

I'm using threads.js to easily run the WASM rendering function in a worker thread, keeping the main thread free.

You'll be able to see the console output on the page, which will report the remaining scanlines. This is done by replacing the console.log function inside the worker, and using a Subject/Observable from threads.js to call the main thread to add the message, as we can't edit the DOM from a worker.


I encountered a few complicated things while working on this:

Rayon: Sunray uses Rayon to parallelize the computation and reduce render time. At the moment using Rayon with WASM is not completely straight forward 1, so I decided to skip it for now.

Rand: There's no good documentation on how to use Rand with WASM, so I had to go fishing in the issues until I found this one, which explains that you have to add the "wasm-bindgen" feature.

  1. It's been done before in a wasm-bindgen example.

© 2020 Guillem Caballero Coll