https://github.com/ngynkvn/wasm-raytracer
Simple ray tracer based off an online guide. Built with WebAssembly. [Demo inside]
https://github.com/ngynkvn/wasm-raytracer
beginner cpp emscripten graphics raytracer rendering wasm webassembly
Last synced: about 2 months ago
JSON representation
Simple ray tracer based off an online guide. Built with WebAssembly. [Demo inside]
- Host: GitHub
- URL: https://github.com/ngynkvn/wasm-raytracer
- Owner: ngynkvn
- License: mit
- Created: 2019-11-04T02:28:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-07-15T18:55:23.000Z (almost 5 years ago)
- Last Synced: 2025-10-13T12:48:35.524Z (8 months ago)
- Topics: beginner, cpp, emscripten, graphics, raytracer, rendering, wasm, webassembly
- Language: C++
- Homepage:
- Size: 45.9 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Raytracer 🔴
Based off https://www.gabrielgambetta.com/computer-graphics-from-scratch/introduction.html
Play with at https://unhealthy-vacation.surge.sh
Requires LibPNG and png++ to run.
Used _Emscripten / WASM_ and _Vue.js_ for web rendering
Used _C++_ and _LibPNG / png++_ for image rendering
Raytracing is implemented C++ and compiled with the Emscripten toolchain to permit running on web.
## To run
```
mkdir -p build
cd build
cmake ../
make
```
Outputs a binary named raytracer.
Run with `./raytracer < test.scene`
## Web assembly
Have the Emscripten SDK tools available to use from your terminal and simply run the two commands below:
```
make
make run
```
Should be viewable at [localhost:8080](localhost:8080)
### Technical details
This is kind of a hodgepodge of a lot of things that I was interested in playing with including but not limited to:
- Raytracing and computer graphics
- Javascript Canvas API's
- VueJS
- Communication and messaging between different programming environments / processes.
- Parsing data into usable data structures.
## Todo
- 🚧 Add parameterization (both from command line and JS environment).
- ✔️ Make a DSL for specifying the scene to render.
- 🤔 Encoding + Decoding schemes
- 🤔 Comparing different ways of wasm - native communications and performance benchmarking.
- Compare speeds between native + wasm as rendering complexity increases (will need to enable flags for rendering techniques to use)