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.

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

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

scene.add(character);

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.

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

character.depthkit.play() - 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

character.depthkit.dispose()

• Dispose and clean the character instance

Simple DepthKit example

Mouse hover example

Simple webVR example

Raycasting webVR example

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