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.
npm i dephtkit
and then import { DepthKit } from 'depthkit'
See npm package.
<!-- 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>
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
- Fork/Clone/Download
- Install all dependencies using
npm install
- Start http server :
npm run start
- Open http://localhost:8080/examples/simple.html
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