4DFlow.js

A 4D Flow MRI data viewer built mostly with WebGL and three.js

Controls

rotation = click and drag
zoom = mouse wheel
pan = mouse3 click and drag
or shift + click and drag
rotate on cam axis = ctrl + click and drag
Note: Control Panel doesnt work right now

About

The isosurface is generated from a 3D volume that is sent to the client using a marching cubes algorithm on a hardcoded threshold.

Streamlines are precomputed from a displacement corrected velocity field.

The mouse control mostly rotates the object instead of the camera, despite what all the other three.js libraries do.

TODO

• Change camera controls to rotating the object instead of camera
• Fix lighting source tracking with camera (though the previous change might fix that)
• Handle window resizing (why so slow?)
• Pan speed needs to be tied to the zoom level
• Add loading progress bar
• Display precomputed streamlines
• Add control panel
• Isosurface slider
• Opacity slider
• Streamline toggle
• Animated streamlines
• Add backend