DepthKit.js

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.

Install

Install via NPM

npm i dephtkit and then import { DepthKit } from 'depthkit'
See npm package.

Install from CDN - es module (es6)

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.147.0/build/three.module.js",
            "three/": "https://unpkg.com/three@0.147.0/"
        }
    }
</script>
<script type="module">
    import * as THREE from 'three'

    //TODO be checked once published on npm
    import { DepthKit } from 'https://cdn.jsdelivr.net/npm/depthkit@latest/src/depthkit.js'
    // or
    // TODO replace remmel by juniorxsound in PR - not recommended when published on npm
    import { DepthKit } from 'https://cdn.jsdelivr.net/gh/remmel/Depthkit.js/src/depthkit.js'
    //...
</script>

Creating a character

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.

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

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

Examples:

Simple DepthKit example

Mouse hover example

Raycasting webVR example

How to contribute:

Fork/Clone/Download
Install all dependencies using npm install
Start http server : npm run start
Open http://localhost:8080/examples/simple.html

Thanks

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

remmel / Depthkit.js