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.

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 depthkit = new DepthKit();
depthkit.load(
	"myClip.txt",
	"myClip.mp4",
	character => {
		scene.add(character);
	}
);

Where the first and second arguments are the path to the metadata file and the combined-per-pixel video exported by Depthkit. The third argument is a callback that is passed a THREE.Object3D object representing the Depthkit character.

Calling new DepthKit() returns an object that has the neccesery methods to control the playback and rendering of the character

depthkit.play() - Play the video

depthkit.pause() - Pause the video

depthkit.stop() - Stop and rewind to begining

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

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

depthkit.setOpacity(opacity) - Change opacity

depthkit.dispose()

• Dispose and clean the character instance

Simple Depthkit 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

The Depthkit.js plugin was developed for Tzina: A Symphony of Longing and ported with permission from Scatter's Unity Depthkit Plugin.

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