Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including depthkit with all npm packages installed. Try it out:

var depthkit = require("depthkit")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

depthkit v1.0.0

A plugin for rendering DepthKit volumetric videos using Three.js


Build Status PRs Welcome

A plugin for visualising DepthKit volumteric captures using Three.js in WebGL. The plugin requires Three.js and a DepthKit combined-per-pixel video export from Visualise. The plugin was developed for Tzina: A Symphony of Longing. The project's code is available here.

DepthKit.js screencapture

Include depthkit.js or depthkit.min.js after loading three.js in your project.

Alternatively, if you use Node.js you can install the package with npm using npm install depthkit npm package

Creating a character

var character = new DepthKit("mesh", "meta.txt", "take.mp4");


Where the first argument takes a string for the rendering type (i.e "mesh", "wire" or "points"), the second and the third arguments are the path to the metadata file exported by Visualise and the top-bottom video.

Controlling a character

Calling new DepthKit() returns a three.js Object3D which has all the regular properties and methods (e.g character.position.set()). Inside the character there is a depthkit object that has the neccesery methods to control the playback and rendering of the character - Play the video

character.depthkit.pause() - Pause the video

character.depthkit.stop() - Stop and rewind to begining

character.depthkit.setLoop(isLooping) - Set loop to true or false

character.depthkit.setVolume(volume) - Change the volume of the audio

character.depthkit.setPointSize(size) - Only when rendering points

character.depthkit.setOpacity(opacity) - Change opacity

character.depthkit.setLineWidth(width) - Change line width when rendering wireframe


  • Dispose and clean the character instance


Simple DepthKit example

Mouse hover example

Simple webVR example

Raycasting webVR example

How to contribute:

  1. Fork/Clone/Download
  2. Install all dependcies using npm install
  3. Use the following node commands:

npm run start uses concurrently to start an http-server and to run watchify and bundle on every change to build/depthkit.js

npm run build to bundle and minify to build/depthkit.min.js


Originally written by @mrdoob and @obviousjim ported and modified by @juniorxsound and @avnerus. Special thank you to Shirin Anlen and all the Tzina crew, @ZEEEVE, @jhclaura


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free