Skip to content

Latest commit

 

History

History
190 lines (129 loc) · 8.57 KB

README.md

File metadata and controls

190 lines (129 loc) · 8.57 KB
Raw

Vixel

A WebGL path tracing voxel renderer built with regl.

vixel screenshot

vixel screenshot

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.

Parameter Type Description
canvas Canvas object The canvas to render to.
width integer The width of the voxel grid (x-coordinate).
height integer The height of the voxel grid (y-coordinate).
depth integer The depth of the voxel grid (z-coordinate).

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.

Parameter Type Description
x integer The x-coordinate of the voxel.
y integer The y-coordinate of the voxel.
z integer The z-coordinate of the voxel.
options Object Configuration of the voxel. See options below.
options
Option Type Default Description
red float 1.0 The red component of the voxel color.
green float 1.0 The green component of the voxel color.
blue float 1.0 The blue component of the voxel color.
rough float 1.0 The roughness of the voxel surface. Zero is perfectly smooth, one is completely rough.
metal float 0.0 The metalness of the voxel surface. Zero is completely nonmetallic, one is fully metallic.
transparent float 0.0 The transparency of the voxel. Zero is completely opaque, one is completely clear.
refract float 1.0 The refraction index of the voxel. Air has a value of 1.0, glass is around 1.333.
emit float 0.0 The amount of light the voxel emits. If this is nonzero, rough, metal, transparent, and refract will be ignored.

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.

Parameter Type Description
x integer The x-coordinate of the voxel.
y integer The y-coordinate of the voxel.
z integer The z-coordinate of the voxel.

vixel.clear()**

Clears the voxel grid.

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

Configures the camera.

Parameter Type Description
eye float array [x, y, z] The position of the camera.
center float array [x, y, z] The point the camera is facing.
up float array [x, y, z] The up direction. Typically [0, 1, 0].
fov float The field of view in radians. Typically around PI/3.

vixel.ground(color, rough, metal)*

Configures the ground. Cannot currently be disabled.

Parameter Type Description
color float array [red, green, blue] The red, green, and blue color components of the ground.
rough float The roughness of the ground. Zero is perfectly smooth, one is completely rough.
metal float The metalness of the ground. Zero is completely nonmetallic, one is fully metallic.

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

Configures the sky and sun.

Parameter Type Description
time float Time of day in hours, 0 to 24. 6.0 is sunrise, 18.0 is sunset.
azimuth float The angle of the sun on the horizon in radians. 0.0 places the sun in the positive-x direction.
radius float The radius of the sun. 1.0 represents a physically-accurate sun radius.
intensity float The intensity of sunlight.

vixel.dof(distance, magnitude)*

Configures depth of field.

Parameter Type Description
distance float The distance at which the focus plane exists, in terms of the size of the voxel grid. Zero is the nearest point, 0.5 is halfway through the grid, one is at the far side of the grid.
magnitude float The magnitude of the depth of field effect. Zero disables the effect.

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.