A javascript & webgl voxel path tracer.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
media add DOF and update docs Jan 12, 2019
src Indexed voxels Jan 13, 2019
static update build Jan 13, 2019
.gitignore initial Jan 6, 2019
LICENSE.md initial Jan 6, 2019
README.md add DOF and update docs Jan 12, 2019
index.html improve perf on low end boxes Jan 10, 2019
package-lock.json initial Jan 6, 2019
package.json initial Jan 6, 2019



A javascript & webgl voxel path tracer. See it live here.

vixel screenshot

vixel screenshot


  • Color is the material's base color.

  • Roughness describes how randomly specular light is reflected from the surface.

  • Metalness describes how much of the light it reflects is diffusive. A purely metallic surface reflects zero light diffusively.

  • Emission is how much light the material emits. If this value is greater than zero, only the color component of the material is used.

Roughness Metalness Real world analogue Rendered example
0.0 0.0 Smooth plastic thing
1.0 0.0 Chalk thing
0.0 1.0 Mirror thing
1.0 0.05 Unpolished metal thing


The color, roughness, and metalness properties can also be set for the ground plane, and are identical in meaning.


  • Time is simply the time of day on a 24-hour clock. The sun rises at 6:00 and sets at 18:00.

  • Azimuth is the direction of the sun around the up/down axis.


  • Width and Height define the resolution of your rendered image.

  • DOF Distance is how far into your scene the focus plane lies.

  • DOF Magnitude is how strong the DOF effect is.

  • Samples/Frame describes how many samples are taken per frame. 1 is one sample per pixel, per frame. If the interactivity of the editor is slow or choppy, you can reduce this to improve your framerate. Similarly, if you want to converge the scene faster, you can increase it (though increasing it is only effective until you're GPU bound).

  • Take Screenshot will download a screenshot.


  • Copy URL copies the current scene to the clipboard and updates the URL. For now, this is the only way to save and share your scene. Feel free to paste it into a text file to save it longer term. Yes, there are absolutely plans to improve this.

  • Clear Scene clears the scene of all voxels save one.