Daniel Haehn PRO
Hi, I am a biomedical imaging and visualization researcher who investigates how computational methods can accelerate biological and medical research.
INTR-D 280
MACHINE
PSYCHOLOGY
DANIELHAEHN.COM
Visualization
Web-based
Coronal
Super-Resolution
Coronal
Super-Resolution
2024
We
Computers
1998
IRC
ICQ
GONZO
MONSTER
VAMPIRE
ZOMBIE
HYDRA
April 26th 2025
...it was good to be back!
I
VIZBI
GPU Access!
More SliceDrop later..
WebGL is everywhere!
There are a ton of frameworks and tutorials and other resources available!
the most popular one!
XTK: the easiest!
brandnew + fast
Hello Cube!
<html>
<head>
<title>Hello Cube!</title>
<style>
html, body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
<script type="text/javascript">
window.onload = function() {
var r = new X.renderer3D();
r.init();
var cube = new X.cube();
r.add(cube);
r.render();
};
</script>
</head>
<body>
</body>
</html>
Image Volumes
Meshes
DTI Fibers
Radiology
0.1 - 1 mm^3 voxel size
< 1 Gigabyte
<html>
<head>
<style>
body {
background: black;
margin: 0;
padding: 0;
overflow: hidden !important;
}
</style>
<script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
<script>
window.onload = function() {
r = new X.renderer3D();
r.init();
tumor = new X.mesh();
tumor.file = 'tumor.vtk';
r.add(tumor);
tracks = new X.fibers();
tracks.file = 'tracks.trk';
r.add(tracks);
volume = new X.volume();
volume.file = 'volume.nii';
r.add(volume);
r.render();
}
</script>
</head>
<body>
</body>
</html>
2D
3D
Slice-based Volume Rendering
Volume Rendering with Ray Casting
support for 3D textures!
the most popular one!
XTK: the easiest!
brandnew + fast
WebGL2!
<html>
<head>
<title>NiiVue!</title>
<style>
body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script type="text/javascript" src="https://niivue.github.io/niivue/features/niivue.umd.js"></script>
<script type="text/javascript">
window.onload = function() {
var nv1 = new niivue.Niivue()
nv1.attachTo('gl1')
nv1.setSliceType(nv1.sliceTypeRender)
};
</script>
</head>
<body>
<canvas id='gl1' style='height:100%;width:100%'></canvas>
</body>
</html>
Connectomics
Brain Connectivity at Synapse Level
nanometer resolution!
tera- or petabytes of data!
Drosophila Hemibrain Connectome
8x8x8nm^3 voxel size
~25,000 neurons
Google + Janelia
<canvas>
ACM Conference on 3D Web Technology, 2024
ISBI 2025
develop processing modules...
...that work with many different visualization frameworks
script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://boostlet.org/dist/boostlet.min.js";
script.onload = run;
document.head.appendChild(script);
eval(script);
function run() {
// detect visualization framework
Boostlet.init();
image = Boostlet.get_image();
kernel = [
-1, 0, 1,
-2, 0, 2,
-1, 0, 1
];
filtered = Boostlet.filter(image.data, image.width, image.height, kernel);
Boostlet.set_image( filtered );
}
+
MeshAR
FibersAR
Brainchop
PowerBoost Editor
X-ray Crystallography
MRI
Electron Microscope
one ten-billionth (10^-10) of a meter
Why is it called "guardian of the genome"?
p53 helps prevent cancer development by inhibiting growth and division of cells with damages DNA.
mutations in p53 are found in approximately half of all cancers!
Tumor Suppressor
Cho Y, Gorina S, Jeffrey PD, Pavletich NP. Crystal structure of a p53 tumor suppressor-DNA complex: understanding tumorigenic mutations. Science. 1994 Jul 15;265(5170):346-55.
t2_mri.nii
tracks.trk
tumor.vtk
INTR-D280
By Daniel Haehn
INTR-D280
Data visualization with WebGL
