Lasgun

A ray tracer that works in the browser.

Prerequisites

Install the latest releases of the following

• Rust
• Node.js
• wasm-pack

Build the lasgun library

cargo build --release

Render a sample scene

cargo run --example simple --release

Renders simple.png. See more examples.

Build lasgun for the browser

wasm-pack build js

Outputs to js/pkg

Use lasgun in the browser

Use this in Node.js/Webpack via NPM by linking the pkg directory

cd js/pkg
npm link
cd -

Run the lasgun web client at localhost:8080

npm install
npm link lasgun-js
npm start

Import in JavaScript with a module loader that supports WebAssembly.

import * as lasgun from 'lasgun-js'

let scene = lasgun.scene({
    eye: [0, 0, 0],
    view: [0, 0, 1],
    up: [0, 1, 0],
    width: 512,
    height: 512,
    fov: 45.0
})

scene.add_point_light({
    position: [100, 200, 400],
    intensity: [0.8, 0.8, 0.8],
    falloff: [1, 0, 0]
})

let mat = scene.add_plastic_material({
    kd: [0.7, 1.0, 0.7],
    ks: [0.5, 0.7, 0.5],
    roughness: 0.25
})

let node = lasgun.group()
node.add_sphere({
    origin: [0, 0, 100],
    radius: 50
},  mat)
scene.set_root(node)

let film = lasgun.film(scene)
lasgun.capture(scene, film)

let pixels = film.pixels()

The resulting pixels is a Uint8Array buffer with image data for display in a browser environment. Each consecutive group of four 8-bit integers represents a pixel with RGBA channels. The pixels are arranged in row-major order.

Example pixel usage with HTML5 Canvas

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

let imageData = ctx.getImageData(0, 0, 512, 512)
imageData.data.set(pixels)
ctx.putImageData(data)

Resources

• Rust and WebAssembly Book
• wasm-bindgen API Reference
• WebAssembly
• Canvas API

License

MIT