Vixel

A WebGL path tracing voxel renderer built with regl.

Live demo

There's a voxel scene editor you can view here that shows Vixel in action.

Example

const Vixel = require("vixel");

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);

// Create a vixel object with a canvas and a width (x), height (y), and depth (z).
const vixel = new Vixel(canvas, 1, 1, 1);

vixel.camera(
  [2, 2, 2], // Camera position
  [0.5, 0.5, 0.5], // Camera target
  [0, 1, 0], // Up
  Math.PI / 4 // Field of view
);

vixel.set(
  0, // x
  0, // y
  0, // z
  {
    red: 1, // Red component
    green: 0.5, // Green component
    blue: 0.25 // Blue component
  }
);

// Take 1024 path traced samples per pixel
vixel.sample(1024);

// Show the result on the canvas
vixel.display();

The code in the example above will result in the following image:

Installation

npm i --save vixel

API

const Vixel = require('vixel')

Constructor

const vixel = new Vixel(canvas, width, height, depth)

Returns a new Vixel object.

Methods

Methods marked with an asterisk (*) will reset the renderer. This will clear the collected samples and require new samples to converge the scene.

Methods marked with a double asterisk (**) will reset both the renderer and require the voxel grid to be reuploaded to the GPU on the next call to vixel.sample. Reuploading can be slow depending on the size of the voxel grid.

vixel.set(x, y, z, options)**

Sets a voxel at coordinates x, y, z with configuration options.

options

vixel.unset(x, y, z)**

Unsets the voxel at coordinates x, y, z.

vixel.get(x, y, z)

Returns the configuration of the voxel at coordinates x, y, z. See the options definition of vixel.set for information about the returned configuration object. Returns undefined if the voxel at the given coordinates is not set.

vixel.clear()**

Clears the voxel grid.

vixel.camera(eye, center, up, fov)*

Configures the camera.

vixel.ground(color, rough, metal)*

Configures the ground. Cannot currently be disabled.

vixel.sun(time, azimuth, radius, intensity)*

Configures the sky and sun.

vixel.dof(distance, magnitude)*

Configures depth of field.

vixel.sample(count)

Takes count path traced samples of the scene.

vixel.display()

Displays the scene sampled with vixel.sample on the Canvas provided to the constructor.

vixel.serialize()

Returns an object representing the populated voxel grid that can be deserialized with the vixel.deserialize function.

vixel.deserialize(data)

Populates the voxel grid with data from the vixel.serialize function.

Members

vixel.sampleCount

The number of samples that have been collected since the last time the renderer was reset.