CORE
Jonathan Lurie - MCIN - June 2018
Jonathan Lurie - MCIN - June 2018
What is QVC ?
- a toolkit to display brain volumes
- an API, not a web app
- client side
- easy to integrate (only a few lines of JS)
- a Javascript bundle, MIT licensed
- a Github repo
- a npm package
Jonathan Lurie - MCIN - June 2018
What is it made of ?
more code
(~1800 lines)
QVC
+
+
=
Jonathan Lurie - MCIN - June 2018
Features
Jonathan Lurie - MCIN - June 2018
Features world coordinates
Jonathan Lurie - MCIN - June 2018
Features rotation/translation
Jonathan Lurie - MCIN - June 2018
Features colormaps
Jonathan Lurie - MCIN - June 2018
Features dual volume & blending
Jonathan Lurie - MCIN - June 2018
Features time series
Jonathan Lurie - MCIN - June 2018
Features multi-camera
Jonathan Lurie - MCIN - June 2018
Architecture
Jonathan Lurie - MCIN - June 2018
Architecture global
Jonathan Lurie - MCIN - June 2018
Architecture QuickvoxelCore
let canvas = document.getElementById("renderCanvas")
let qvc = new quickvoxelcore.QuickvoxelCore( canvas )- Entry point
- Just needs to know
in what canvas to display
Internally:
- Initializes the other objects
- Creates some events to sync data and view
Jonathan Lurie - MCIN - June 2018
Architecture VolumeCollection
// ...
let qvc = new quickvoxelcore.QuickvoxelCore( canvas )
let volumeCollection = qvc.getVolumeCollection()- Created by the QuickvoxelCore instance
- In charge of loading new volumes
- from URL
- from local files
- Provides events to deal with volume lifecycle
Internally:
- Leverages Pixpipe to decode volume files
- Adds volume to a collection with unique ID
Jonathan Lurie - MCIN - June 2018
Architecture Volume
- Created by the VolumeCollection
- Not supposed to be accessible
Internally:
- Creates a WebGL2 3D texture
- Computes the world-to-shader matrix
Jonathan Lurie - MCIN - June 2018
Architecture CameraCrew
- Created by the QuickvoxelCore instance
- Provides functions to:
- change the camera
- modify the zoom
- tilt (change up vector)
- translate
// ...
let qvc = new quickvoxelcore.QuickvoxelCore( canvas )
let camcrew = qvc.getCameraCrew()Internally:
- sync with the ortho planes rotation
Jonathan Lurie - MCIN - June 2018
Architecture RenderEngine
- Created by the QuickvoxelCore instance
- Provides functions to:
- display a volume from the collection
- modify volume brightness/contrast/colormap
- translate/rotate ortho planes
// ...
let qvc = new quickvoxelcore.QuickvoxelCore( canvas )
let renderEngine = qvc.getRenderEngine()Internally:
- implements the volume slot logic
- dispatches events
Jonathan Lurie - MCIN - June 2018
Volume slots
TECH POINT
Jonathan Lurie - MCIN - June 2018
Volume slots
Implemented by the RenderEngine,
in sync with GPU
←sync
sync→
Jonathan Lurie - MCIN - June 2018
Volume slots
- The volume is never modified by the CPU (would be very slow!)
- The GPU does the rendering job
- With the info given by the CPU (uniforms)
- Only when we need
- Only the part to display (texels laying on the ortho-planes)
- Applies brightness/contrast/color on the fly, 60 times/sec
In addition to perform the voxel lookup for world coordinates
Jonathan Lurie - MCIN - June 2018
Minimal code
TECH POINT
Jonathan Lurie - MCIN - June 2018
Minimal code
Here is the shortest bit of code necessary for Quickvoxel Core integration
let canvas = document.getElementById("renderCanvas")
// the QuickvoxelCore instance is the entry point
let qvc = new quickvoxelcore.QuickvoxelCore( canvas );
// for future access to the volume collection
let volumeCollection = qvc.getVolumeCollection();
// for future access the render engine
let renderEngine = qvc.getRenderEngine();
// we want to load a NIfTI file using its local URL
volumeCollection.addVolumeFromUrl( "../data/structural.nii.gz" );
// mount the volume when it's loaded and ready!
volumeCollection.on("volumeReady", function(volume){
let couldMount = renderEngine.mountVolumeOnFirstEmptySlot( volume )
if( !couldMount ){
console.log("All volume slots are already taken on the render engine.");
}
})Jonathan Lurie - MCIN - June 2018
Minimal code
Jonathan Lurie - MCIN - June 2018
Larger project
DEMO
Jonathan Lurie - MCIN - June 2018
TODO
- Add split view (almost done)
- Add raycasting to get volume values (in progress)
- Add a third volume slot dedicated to masking
- Add mesh display and mesh collection
- Add point clouds display and point cloud collection
Thanks!
Jonathan Lurie - MCIN - June 2018
I usually give feature updates on twitter @jonathanlurie
Quickvoxel Core
By jonathanlurie
Quickvoxel Core
General introduction to Quickvoxel Core
