@niivue/niivue 0.26.3 → 0.28.1

package/dist/niivue.es.js

@@ -364,6 +364,26 @@ function translate(out, a, v) {
   }
   return out;
 }
+function scale$1(out, a, v) {
+  var x2 = v[0], y = v[1], z = v[2];
+  out[0] = a[0] * x2;
+  out[1] = a[1] * x2;
+  out[2] = a[2] * x2;
+  out[3] = a[3] * x2;
+  out[4] = a[4] * y;
+  out[5] = a[5] * y;
+  out[6] = a[6] * y;
+  out[7] = a[7] * y;
+  out[8] = a[8] * z;
+  out[9] = a[9] * z;
+  out[10] = a[10] * z;
+  out[11] = a[11] * z;
+  out[12] = a[12];
+  out[13] = a[13];
+  out[14] = a[14];
+  out[15] = a[15];
+  return out;
+}
 function rotateX(out, a, rad) {
   var s = Math.sin(rad);
   var c2 = Math.cos(rad);
@@ -747,6 +767,31 @@ vec4 applyClip (vec3 dir, inout vec4 samplePos, inout float len, inout bool isCl
 		samplePos = vec4(samplePos.xyz+dir * disBackFace, disBackFace);
 	}
 	return samplePos;
+}
+float frac2ndc(vec3 frac) {
+//https://stackoverflow.com/questions/7777913/how-to-render-depth-linearly-in-modern-opengl-with-gl-fragcoord-z-in-fragment-sh
+	vec4 pos = vec4(frac.xyz, 1.0); //fraction
+	vec4 dim = vec4(vec3(textureSize(volume, 0)), 1.0);
+	pos = pos * dim;
+	vec4 shim = vec4(-0.5, -0.5, -0.5, 0.0);
+	pos += shim;
+	vec4 mm = transpose(matRAS) * pos;
+	float z_ndc = (mvpMtx * vec4(mm.xyz, 1.0)).z;
+	return (z_ndc + 1.0) / 2.0;
+}
+vec4 drawColor(float scalar) {
+	vec4 dcolor = vec4(0.0, 0.0, 0.0, 0.0);
+	if (scalar <= 0.0) return dcolor;
+	dcolor.a = drawOpacity;
+	if (scalar >= (4.0/255.0))
+		dcolor.rgb = vec3(scalar,0.0,scalar);
+	else if (scalar >= (3.0/255.0))
+		dcolor.b = 1.0;
+	else if (scalar >= (2.0/255.0))
+		dcolor.g = 1.0;
+	else
+		dcolor.r = 1.0;
+	return dcolor;
 }`;
 var fragRenderShader = `#version 300 es
 #line 14
@@ -763,26 +808,15 @@ uniform float backOpacity;
 uniform mat4 mvpMtx;
 uniform mat4 matRAS;
 uniform vec4 clipPlaneColor;
+uniform float drawOpacity;
+uniform highp sampler3D drawing;
 in vec3 vColor;
 out vec4 fColor;
-` + kRenderFunc + `
-float frac2ndc(vec3 frac) {
-//https://stackoverflow.com/questions/7777913/how-to-render-depth-linearly-in-modern-opengl-with-gl-fragcoord-z-in-fragment-sh
-	vec4 pos = vec4(frac.xyz, 1.0); //fraction
-	vec4 dim = vec4(vec3(textureSize(volume, 0)), 1.0);
-	pos = pos * dim;
-	vec4 shim = vec4(-0.5, -0.5, -0.5, 0.0);
-	pos += shim;
-	vec4 mm = transpose(matRAS) * pos;
-	float z_ndc = (mvpMtx * vec4(mm.xyz, 1.0)).z;
-	return (z_ndc + 1.0) / 2.0;
-	
-}
-void main() {
-  if (fColor.x > 2.0) {
-    fColor = vec4(1.0, 0.0, 0.0, 0.5);
-    return;
-  }
+` + kRenderFunc + `void main() {
+	if (fColor.x > 2.0) {
+		fColor = vec4(1.0, 0.0, 0.0, 0.5);
+		return;
+	}
 	fColor = vec4(0.0,0.0,0.0,0.0);
 	vec4 clipPlaneColorX = clipPlaneColor;
 	//if (clipPlaneColor.a < 0.0)
@@ -818,23 +852,20 @@ void main() {
 	vec4 deltaDirFast = vec4(dir.xyz * stepSizeFast, stepSizeFast);
 	while (samplePos.a <= len) {
 		float val = texture(volume, samplePos.xyz).a;
-    if (val > 0.01) {
-      break;
-    }
+		if (val > 0.01)
+			break;
 		samplePos += deltaDirFast; //advance ray position
 	}
-	if ((samplePos.a >= len) && ((overlays < 1.0) || (backgroundMasksOverlays > 0))) {
-    if (isClip){
+	if ((samplePos.a >= len) && (((overlays < 1.0) && (drawOpacity <= 0.0) ) || (backgroundMasksOverlays > 0)))  {
+		if (isClip)
 			fColor += clipPlaneColorX;
-    }
 		return;
 	}
 	fColor = vec4(1.0, 1.0, 1.0, 1.0);
 	//gl_FragDepth = frac2ndc(samplePos.xyz); //crude due to fast pass resolution
 	samplePos -= deltaDirFast;
-  if (samplePos.a < 0.0){
+	if (samplePos.a < 0.0)
 		vec4 samplePos = vec4(start.xyz, 0.0); //ray position
-  }
 	//end: fast pass
 	vec4 colAcc = vec4(0.0,0.0,0.0,0.0);
 	vec4 firstHit = vec4(0.0,0.0,0.0,2.0 * lenNoClip);
@@ -856,51 +887,52 @@ void main() {
 				break;
 		}
 	}
-  if (firstHit.a < len){
+	if (firstHit.a < len)
 		gl_FragDepth = frac2ndc(firstHit.xyz);
-  }
 	colAcc.a = (colAcc.a / earlyTermination) * backOpacity;
 	fColor = colAcc;
 	//if (isClip) //CR
 	if ((isColorPlaneInVolume) && (clipPos.a != samplePos.a) && (abs(firstHit.a - clipPos.a) < deltaDir.a))
 		fColor.rgb = mix(fColor.rgb, clipPlaneColorX.rgb, abs(clipPlaneColor.a));
 		//fColor.rgb = mix(fColor.rgb, clipPlaneColorX.rgb, clipPlaneColorX.a * 0.65);
-  if (overlays < 1.0) {
-    return;
-  }
+	if ((overlays < 1.0) && (drawOpacity <= 0.0))
+		return;
 	//overlay pass
 	len = lenNoClip;
 	samplePos = vec4(start.xyz, 0.0); //ray position
 	//start: OPTIONAL fast pass: rapid traversal until first hit
-	stepSizeFast = sliceSize * 1.9;
+	stepSizeFast = sliceSize * 1.0;
 	deltaDirFast = vec4(dir.xyz * stepSizeFast, stepSizeFast);
 	while (samplePos.a <= len) {
 		float val = texture(overlay, samplePos.xyz).a;
-    if (val > 0.01) {
-      break;
-    }
+		if (drawOpacity > 0.0)
+			val = max(val, texture(drawing, samplePos.xyz).r);
+		if (val > 0.001)
+			break;
 		samplePos += deltaDirFast; //advance ray position
 	}
 	if (samplePos.a >= len) {
-    if (isClip && (fColor.a == 0.0)) {
-			fColor += clipPlaneColorX;
-    }
-		return;
+		if (isClip && (fColor.a == 0.0))
+				fColor += clipPlaneColorX;
+			return;
 	}
 	samplePos -= deltaDirFast;
-  if (samplePos.a < 0.0){
+	if (samplePos.a < 0.0)
 		vec4 samplePos = vec4(start.xyz, 0.0); //ray position
-  }
 	//end: fast pass
 	float overFarthest = len;
 	colAcc = vec4(0.0, 0.0, 0.0, 0.0);
+
 	samplePos += deltaDir * ran; //jitter ray
 	vec4 overFirstHit = vec4(0.0,0.0,0.0,2.0 * len);
-  if (backgroundMasksOverlays > 0){
+	if (backgroundMasksOverlays > 0)
 		samplePos = firstHit;
-  }
 	while (samplePos.a <= len) {
 		vec4 colorSample = texture(overlay, samplePos.xyz);
+		if ((colorSample.a < 0.01) && (drawOpacity > 0.0)) {
+			float val = texture(drawing, samplePos.xyz).r;
+			colorSample = drawColor(val);
+		}
 		samplePos += deltaDir; //advance ray position
 		if (colorSample.a >= 0.01) {
 			if (overFirstHit.a > len)
@@ -913,19 +945,19 @@ void main() {
 				break;
 		}
 	}
-	if (samplePos.a >= len) {
-    if (isClip && (fColor.a == 0.0)){
+	//if (samplePos.a >= len) {
+	if (colAcc.a <= 0.0) {
+		if (isClip && (fColor.a == 0.0))
 			fColor += clipPlaneColorX;
-    }
 		return;
 	}
+
 	//if (overFirstHit.a < len)
 	gl_FragDepth = frac2ndc(overFirstHit.xyz);
 	float overMix = colAcc.a;
 	float overlayDepth = 0.3;
-  if (fColor.a <= 0.0){
-			overMix = 1.0;
-  }
+	if (fColor.a <= 0.0)
+		overMix = 1.0;
 	else if (((overFarthest) > backNearest)) {
 		float dx = (overFarthest - backNearest)/1.73;
 		dx = fColor.a * pow(dx, overlayDepth);
@@ -1016,10 +1048,10 @@ void main(void) {
 	texPos = vec3(pos.x, pos.y, slice);
 	if (axCorSag > 1)
 		texPos = vec3(slice, pos.x, pos.y);
-  else if (axCorSag > 0)
+	else if (axCorSag > 0)
 		texPos = vec3(pos.x, slice, pos.y);
 	vec4 mm = frac2mm * vec4(texPos, 1.0);
-	//vec4 mm =  vec4(texPos, 1.0) * frac2mm;
+	//vec4 mm = vec4(texPos, 1.0) * frac2mm;
 	gl_Position = mvpMtx * mm;
 	//gl_Position = mm;
 }`;
@@ -1102,45 +1134,6 @@ void main() {
 	float fmap = (0.5 + layer) / nlayer;
 	color = vec4(texture(colormap, vec2(vColor.x, fmap)).rgb, 1.0);
 }`;
-var vertGraphShader = `#version 300 es
-#line 229
-layout(location=0) in vec3 pos;
-uniform float thickness;
-uniform vec2 canvasWidthHeight;
-uniform vec4 leftTopRightBottom;
-void main(void) {
-	//convert pixel x,y space 1..canvasWidth,1..canvasHeight to WebGL 1..-1,-1..1
-	float ny =  (leftTopRightBottom.x-leftTopRightBottom.z);
-	float nx =  (leftTopRightBottom.y-leftTopRightBottom.w);
-	float len = sqrt((nx*nx)+(ny*ny));
-	if (len > 0.0) {
-		nx = 0.5*thickness*nx/len;
-		ny = 0.5*thickness*ny/len;
-	}
-	vec2 frac;
-	if (pos.y < 0.5)
-		frac.y = leftTopRightBottom.y;
-	else
-		frac.y = leftTopRightBottom.w;
-	if (pos.x < 0.5) {
-		frac.x = leftTopRightBottom.x;
-		frac.y = leftTopRightBottom.y;
-	} else {
-		frac.x = leftTopRightBottom.z;
-		frac.y = leftTopRightBottom.w;
-	}
-	if (pos.y < 0.5) {
-		frac.x += nx;
-		frac.y -= ny;
-	} else {
-		frac.x -= nx;
-		frac.y += ny;
-	}
-	frac.x /= canvasWidthHeight.x;
-	frac.y = 1.0 - (frac.y / canvasWidthHeight.y);
-	frac = (frac * 2.0) - 1.0;
-	gl_Position = vec4(frac, 0.0, 1.0);
-}`;
 var vertRectShader = `#version 300 es
 #line 229
 layout(location=0) in vec3 pos;
@@ -1219,13 +1212,13 @@ uniform float screenPxRange;
 in vec2 vUV;
 out vec4 color;
 float median(float r, float g, float b) {
-    return max(min(r, g), min(max(r, g), b));
+	return max(min(r, g), min(max(r, g), b));
 }
 void main() {
 	vec3 msd = texture(fontTexture, vUV).rgb;
 	float sd = median(msd.r, msd.g, msd.b);
-    float screenPxDistance = screenPxRange*(sd - 0.5);
-    float opacity = clamp(screenPxDistance + 0.5, 0.0, 1.0);
+	float screenPxDistance = screenPxRange*(sd - 0.5);
+	float opacity = clamp(screenPxDistance + 0.5, 0.0, 1.0);
 	color = vec4(fontColor.rgb , fontColor.a * opacity);
 }`;
 var vertOrientShader = `#version 300 es
@@ -1235,8 +1228,8 @@ precision highp float;
 in vec3 vPos;
 out vec2 TexCoord;
 void main() {
-    TexCoord = vPos.xy;
-    gl_Position = vec4( (vPos.xy-vec2(0.5,0.5)) * 2.0, 0.0, 1.0);
+	TexCoord = vPos.xy;
+	gl_Position = vec4( (vPos.xy-vec2(0.5,0.5)) * 2.0, 0.0, 1.0);
 }`;
 var fragOrientShaderU = `#version 300 es
 uniform highp usampler3D intensityVol;
@@ -1261,42 +1254,45 @@ uniform float opacity;
 uniform vec3 xyzFrac;
 uniform mat4 mtx;
 void main(void) {
- vec4 vx = vec4(TexCoord.x, TexCoord.y, coordZ, 1.0) * mtx;
- uint idx = texture(intensityVol, vx.xyz).r;
- FragColor = vec4(0.0, 0.0, 0.0, 0.0);
- if (idx == uint(0))
-   return;
- if (xyzFrac.x > 0.0) { //outline
-   vx = vec4(TexCoord.x+xyzFrac.x, TexCoord.y, coordZ, 1.0) * mtx;
-   uint R = texture(intensityVol, vx.xyz).r;
-   vx = vec4(TexCoord.x-xyzFrac.x, TexCoord.y, coordZ, 1.0) * mtx;
-   uint L = texture(intensityVol, vx.xyz).r;
-   vx = vec4(TexCoord.x, TexCoord.y+xyzFrac.y, coordZ, 1.0) * mtx;
-   uint A = texture(intensityVol, vx.xyz).r;
-   vx = vec4(TexCoord.x, TexCoord.y-xyzFrac.y, coordZ, 1.0) * mtx;
-   uint P = texture(intensityVol, vx.xyz).r;
-   vx = vec4(TexCoord.x, TexCoord.y, coordZ+xyzFrac.z, 1.0) * mtx;
-   uint S = texture(intensityVol, vx.xyz).r;
-   vx = vec4(TexCoord.x, TexCoord.y, coordZ-xyzFrac.z, 1.0) * mtx;
-   uint I = texture(intensityVol, vx.xyz).r;
-   if ((idx == R) && (idx == L) && (idx == A) && (idx == P) && (idx == S) && (idx == I))
-     return;
- }
- idx = ((idx - uint(1)) % uint(100))+uint(1);
- float fx = (float(idx)+0.5) / 256.0;
- float nlayer = float(textureSize(colormap, 0).y) * 0.5; //0.5 as both each layer has positive and negative color slot
- float y = (2.0 * layer + 1.0)/(4.0 * nlayer);
- //float y = (2.0 * layer + 1.0)/(4.0 * numLayers);
- FragColor = texture(colormap, vec2(fx, y)).rgba;
- FragColor.a *= opacity;
- if (layer < 2.0) return;
- vec2 texXY = TexCoord.xy*0.5 +vec2(0.5,0.5);
- vec4 prevColor = texture(blend3D, vec3(texXY, coordZ));
- // https://en.wikipedia.org/wiki/Alpha_compositing
- float aout = FragColor.a + (1.0 - FragColor.a) * prevColor.a;
- if (aout <= 0.0) return;
- FragColor.rgb = ((FragColor.rgb * FragColor.a) + (prevColor.rgb * prevColor.a * (1.0 - FragColor.a))) / aout;
- FragColor.a = aout;
+	vec4 vx = vec4(TexCoord.x, TexCoord.y, coordZ, 1.0) * mtx;
+	uint idx = texture(intensityVol, vx.xyz).r;
+	FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+	if (idx == uint(0))
+		return;
+	if (xyzFrac.x > 0.0) { //outline
+		vx = vec4(TexCoord.x+xyzFrac.x, TexCoord.y, coordZ, 1.0) * mtx;
+		uint R = texture(intensityVol, vx.xyz).r;
+		vx = vec4(TexCoord.x-xyzFrac.x, TexCoord.y, coordZ, 1.0) * mtx;
+		uint L = texture(intensityVol, vx.xyz).r;
+		vx = vec4(TexCoord.x, TexCoord.y+xyzFrac.y, coordZ, 1.0) * mtx;
+		uint A = texture(intensityVol, vx.xyz).r;
+		vx = vec4(TexCoord.x, TexCoord.y-xyzFrac.y, coordZ, 1.0) * mtx;
+		uint P = texture(intensityVol, vx.xyz).r;
+		vx = vec4(TexCoord.x, TexCoord.y, coordZ+xyzFrac.z, 1.0) * mtx;
+		uint S = texture(intensityVol, vx.xyz).r;
+		vx = vec4(TexCoord.x, TexCoord.y, coordZ-xyzFrac.z, 1.0) * mtx;
+		uint I = texture(intensityVol, vx.xyz).r;
+		if ((idx == R) && (idx == L) && (idx == A) && (idx == P) && (idx == S) && (idx == I))
+			return;
+	}
+	idx = ((idx - uint(1)) % uint(100))+uint(1);
+	float fx = (float(idx)+0.5) / 256.0;
+	float nlayer = float(textureSize(colormap, 0).y) * 0.5; //0.5 as both each layer has positive and negative color slot
+	float y = (2.0 * layer + 1.0)/(4.0 * nlayer);
+	//float y = (2.0 * layer + 1.0)/(4.0 * numLayers);
+	FragColor = texture(colormap, vec2(fx, y)).rgba;
+	//FragColor.a *= opacity;
+	FragColor.a = opacity;
+	return;
+
+	if (layer < 2.0) return;
+	vec2 texXY = TexCoord.xy*0.5 +vec2(0.5,0.5);
+	vec4 prevColor = texture(blend3D, vec3(texXY, coordZ));
+	// https://en.wikipedia.org/wiki/Alpha_compositing
+	float aout = FragColor.a + (1.0 - FragColor.a) * prevColor.a;
+	if (aout <= 0.0) return;
+	FragColor.rgb = ((FragColor.rgb * FragColor.a) + (prevColor.rgb * prevColor.a * (1.0 - FragColor.a))) / aout;
+	FragColor.a = aout;
 }`;
 var fragOrientShader = `#line 309
 precision highp int;
@@ -1317,40 +1313,40 @@ uniform highp sampler3D modulationVol;
 uniform float opacity;
 uniform mat4 mtx;
 void main(void) {
- vec4 vx = vec4(TexCoord.xy, coordZ, 1.0) * mtx;
- float f = (scl_slope * float(texture(intensityVol, vx.xyz).r)) + scl_inter;
- bool isNegative = (f < 0.0);
- float r = max(0.00001, abs(cal_max - cal_min));
- float mn = min(cal_min, cal_max);
- float txl = mix(0.0, 1.0, (f - mn) / r);
- //https://stackoverflow.com/questions/5879403/opengl-texture-coordinates-in-pixel-space
- float nlayer = float(textureSize(colormap, 0).y) * 0.5; //0.5 as both each layer has positive and negative color slot
- float y = (2.0 * layer + 1.0)/(4.0 * nlayer);
- FragColor = texture(colormap, vec2(txl, y)).rgba;
- if (isNegative) {
-   y = (2.0 * layer + nlayer + nlayer + 1.0)/(4.0 * nlayer);
-   //select texels at positions 0 and 1 of lookup table: 
-   vec4 v0 = texture(colormap, vec2(0.5/256.0, y));
-   vec4 v1 = texture(colormap, vec2(1.5/256.0, y));
-   txl = mix(0.0, 1.0, (- f - mn) / r);
-   //detect bogus color: negative color slot not used than
-   // v0 = 1,1,1,0 and v1 = 0,0,0,1
-   if ((v0.r != 1.0) || (v0.a != 0.0) || (v1.r != 0.0) || (v1.a != 1.0))
-     FragColor = texture(colormap, vec2(txl, y));
- }
- if (layer > 0.7)
-   FragColor.a = step(0.00001, FragColor.a);
- if (modulation > 0)
-   FragColor.rgb *= texture(modulationVol, vx.xyz).r;
- FragColor.a *= opacity;
- if (layer < 1.0) return;
- vec2 texXY = TexCoord.xy*0.5 +vec2(0.5,0.5);
- vec4 prevColor = texture(blend3D, vec3(texXY, coordZ));
- // https://en.wikipedia.org/wiki/Alpha_compositing
- float aout = FragColor.a + (1.0 - FragColor.a) * prevColor.a;
- if (aout <= 0.0) return;
- FragColor.rgb = ((FragColor.rgb * FragColor.a) + (prevColor.rgb * prevColor.a * (1.0 - FragColor.a))) / aout;
- FragColor.a = aout;
+	vec4 vx = vec4(TexCoord.xy, coordZ, 1.0) * mtx;
+	float f = (scl_slope * float(texture(intensityVol, vx.xyz).r)) + scl_inter;
+	bool isNegative = (f < 0.0);
+	float r = max(0.00001, abs(cal_max - cal_min));
+	float mn = min(cal_min, cal_max);
+	float txl = mix(0.0, 1.0, (f - mn) / r);
+	//https://stackoverflow.com/questions/5879403/opengl-texture-coordinates-in-pixel-space
+	float nlayer = float(textureSize(colormap, 0).y) * 0.5; //0.5 as both each layer has positive and negative color slot
+	float y = (2.0 * layer + 1.0)/(4.0 * nlayer);
+	FragColor = texture(colormap, vec2(txl, y)).rgba;
+	if (isNegative) {
+		y = (2.0 * layer + nlayer + nlayer + 1.0)/(4.0 * nlayer);
+		//select texels at positions 0 and 1 of lookup table: 
+		vec4 v0 = texture(colormap, vec2(0.5/256.0, y));
+		vec4 v1 = texture(colormap, vec2(1.5/256.0, y));
+		txl = mix(0.0, 1.0, (- f - mn) / r);
+		//detect bogus color: negative color slot not used than
+		// v0 = 1,1,1,0 and v1 = 0,0,0,1
+		if ((v0.r != 1.0) || (v0.a != 0.0) || (v1.r != 0.0) || (v1.a != 1.0))
+			FragColor = texture(colormap, vec2(txl, y));
+	}
+	if (layer > 0.7)
+		FragColor.a = step(0.00001, FragColor.a);
+	if (modulation > 0)
+		FragColor.rgb *= texture(modulationVol, vx.xyz).r;
+	FragColor.a *= opacity;
+	if (layer < 1.0) return;
+	vec2 texXY = TexCoord.xy*0.5 +vec2(0.5,0.5);
+	vec4 prevColor = texture(blend3D, vec3(texXY, coordZ));
+	// https://en.wikipedia.org/wiki/Alpha_compositing
+	float aout = FragColor.a + (1.0 - FragColor.a) * prevColor.a;
+	if (aout <= 0.0) return;
+	FragColor.rgb = ((FragColor.rgb * FragColor.a) + (prevColor.rgb * prevColor.a * (1.0 - FragColor.a))) / aout;
+	FragColor.a = aout;
 }`;
 var fragRGBOrientShader = `#line 309
 precision highp int;
@@ -1372,14 +1368,14 @@ uniform bool hasAlpha;
 uniform int modulation;
 uniform highp sampler3D modulationVol;
 void main(void) {
- vec4 vx = vec4(TexCoord.xy, coordZ, 1.0) * mtx;
- uvec4 aColor = texture(intensityVol, vx.xyz);
- FragColor = vec4(float(aColor.r) / 255.0, float(aColor.g) / 255.0, float(aColor.b) / 255.0, float(aColor.a) / 255.0);
- if (modulation > 0)
-   FragColor.rgb *= texture(modulationVol, vx.xyz).r;
- if (!hasAlpha)
-   FragColor.a = (FragColor.r * 0.21 + FragColor.g * 0.72 + FragColor.b * 0.07);
- FragColor.a *= opacity;
+	vec4 vx = vec4(TexCoord.xy, coordZ, 1.0) * mtx;
+	uvec4 aColor = texture(intensityVol, vx.xyz);
+	FragColor = vec4(float(aColor.r) / 255.0, float(aColor.g) / 255.0, float(aColor.b) / 255.0, float(aColor.a) / 255.0);
+	if (modulation > 0)
+		FragColor.rgb *= texture(modulationVol, vx.xyz).r;
+	if (!hasAlpha)
+		FragColor.a = (FragColor.r * 0.21 + FragColor.g * 0.72 + FragColor.b * 0.07);
+	FragColor.a *= opacity;
 }`;
 var vertPassThroughShader = `#version 300 es
 #line 283
@@ -1388,8 +1384,8 @@ precision highp float;
 in vec3 vPos;
 out vec2 TexCoord;
 void main() {
-    TexCoord = vPos.xy;
-    gl_Position = vec4(vPos.x, vPos.y, 0.0, 1.0);
+	TexCoord = vPos.xy;
+	gl_Position = vec4(vPos.x, vPos.y, 0.0, 1.0);
 }`;
 var fragPassThroughShader = `#version 300 es
 precision highp int;
@@ -1408,70 +1404,70 @@ precision highp float;
 in vec3 vPos;
 out vec2 TexCoord;
 void main() {
-    TexCoord = vPos.xy;
-    gl_Position = vec4((vPos.x - 0.5) * 2.0, (vPos.y - 0.5) * 2.0, 0.0, 1.0);
+	TexCoord = vPos.xy;
+	gl_Position = vec4((vPos.x - 0.5) * 2.0, (vPos.y - 0.5) * 2.0, 0.0, 1.0);
 }`;
 var fragGrowCutShader = `#version 300 es
 #line 742
-  precision highp float;
-  precision highp int;
-  precision highp isampler3D;
-  layout(location = 0) out int label;
-  layout(location = 1) out int strength;
-  in vec2 TexCoord;
-  uniform int finalPass;
-  uniform float coordZ;
-  uniform lowp sampler3D in3D;
-  uniform highp isampler3D inputTexture0; // background
-  uniform highp isampler3D inputTexture1; // label
-  uniform highp isampler3D inputTexture2; // strength
+	precision highp float;
+	precision highp int;
+	precision highp isampler3D;
+	layout(location = 0) out int label;
+	layout(location = 1) out int strength;
+	in vec2 TexCoord;
+	uniform int finalPass;
+	uniform float coordZ;
+	uniform lowp sampler3D in3D;
+	uniform highp isampler3D inputTexture0; // background
+	uniform highp isampler3D inputTexture1; // label
+	uniform highp isampler3D inputTexture2; // strength
 void main(void) {
-  vec3 interpolatedTextureCoordinate = vec3(TexCoord.xy, coordZ);
-  ivec3 size = textureSize(inputTexture0, 0);
-  ivec3 texelIndex = ivec3(floor(interpolatedTextureCoordinate * vec3(size)));
-  int background = texelFetch(inputTexture0, texelIndex, 0).r;
-  label = texelFetch(inputTexture1, texelIndex, 0).r;
-  strength = texelFetch(inputTexture2, texelIndex, 0).r;
-  for (int k = -1; k <= 1; k++) {
-    for (int j = -1; j <= 1; j++) {
-      for (int i = -1; i <= 1; i++) {
-        if (i != 0 && j != 0 && k != 0) {
-          ivec3 neighborIndex = texelIndex + ivec3(i,j,k);
-          int neighborBackground = texelFetch(inputTexture0, neighborIndex, 0).r;
-          int neighborStrength = texelFetch(inputTexture2, neighborIndex, 0).r;
-          int strengthCost = abs(neighborBackground - background);
-          int takeoverStrength = neighborStrength - strengthCost;
-          if (takeoverStrength > strength) {
-            strength = takeoverStrength;
-            label = texelFetch(inputTexture1, neighborIndex, 0).r;
-          }
-        }
-      }
-    }
-  }
-  if (finalPass < 1)
-    return;
-  int ok = 1;
-  ivec4 labelCount = ivec4(0,0,0,0);
-  for (int k = -1; k <= 1; k++)
-    for (int j = -1; j <= 1; j++)
-      for (int i = -1; i <= 1; i++) {
-        ivec3 neighborIndex = texelIndex + ivec3(i,j,k);
-        int ilabel = texelFetch(inputTexture1, neighborIndex, 0).r;
-        if ((ilabel < 0) || (ilabel > 3))
-          ok = 0;
-        else
-          labelCount[ilabel]++;
-      }
-  if (ok != 1) {
-    return;
-  }
-  int maxIdx = 0;
-  for (int i = 1; i < 4; i++) {
-    if (labelCount[i] > labelCount[maxIdx])
-      maxIdx = i;
-  }
-  label = maxIdx;
+	vec3 interpolatedTextureCoordinate = vec3(TexCoord.xy, coordZ);
+	ivec3 size = textureSize(inputTexture0, 0);
+	ivec3 texelIndex = ivec3(floor(interpolatedTextureCoordinate * vec3(size)));
+	int background = texelFetch(inputTexture0, texelIndex, 0).r;
+	label = texelFetch(inputTexture1, texelIndex, 0).r;
+	strength = texelFetch(inputTexture2, texelIndex, 0).r;
+	for (int k = -1; k <= 1; k++) {
+		for (int j = -1; j <= 1; j++) {
+			for (int i = -1; i <= 1; i++) {
+				if (i != 0 && j != 0 && k != 0) {
+					ivec3 neighborIndex = texelIndex + ivec3(i,j,k);
+					int neighborBackground = texelFetch(inputTexture0, neighborIndex, 0).r;
+					int neighborStrength = texelFetch(inputTexture2, neighborIndex, 0).r;
+					int strengthCost = abs(neighborBackground - background);
+					int takeoverStrength = neighborStrength - strengthCost;
+					if (takeoverStrength > strength) {
+						strength = takeoverStrength;
+						label = texelFetch(inputTexture1, neighborIndex, 0).r;
+					}
+				}
+			}
+		}
+	}
+	if (finalPass < 1)
+		return;
+	int ok = 1;
+	ivec4 labelCount = ivec4(0,0,0,0);
+	for (int k = -1; k <= 1; k++)
+		for (int j = -1; j <= 1; j++)
+			for (int i = -1; i <= 1; i++) {
+				ivec3 neighborIndex = texelIndex + ivec3(i,j,k);
+				int ilabel = texelFetch(inputTexture1, neighborIndex, 0).r;
+				if ((ilabel < 0) || (ilabel > 3))
+					ok = 0;
+				else
+					labelCount[ilabel]++;
+			}
+	if (ok != 1) {
+		return;
+	}
+	int maxIdx = 0;
+	for (int i = 1; i < 4; i++) {
+		if (labelCount[i] > labelCount[maxIdx])
+			maxIdx = i;
+	}
+	label = maxIdx;
 }`;
 var vertSurfaceShader = `#version 300 es
 layout(location=0) in vec3 pos;
@@ -1529,7 +1525,6 @@ precision highp float;
 uniform float opacity;
 out vec4 color;
 vec4 packFloatToVec4i(const float value) {
-	//this Papaya function uses BSD 3-clause license Copyright (c) 2012-2015, RII-UTHSCSA
 	const vec4 bitSh = vec4(256.0*256.0*256.0, 256.0*256.0, 256.0, 1.0);
 	const vec4 bitMsk = vec4(0.0, 1.0/256.0, 1.0/256.0, 1.0/256.0);
 	vec4 res = fract(value * bitSh);
@@ -1560,7 +1555,7 @@ void main() {
 	vec3 lightPosition = vec3(0.0, 10.0, -5.0);
 	vec3 l = normalize(lightPosition);
 	float df = max(0.0, dot(n, l));
-	float sf =  pow(max(dot(reflect(l, n), r), 0.0), shininess);
+	float sf = pow(max(dot(reflect(l, n), r), 0.0), shininess);
 	const float A = 0.1;
 	const float B = 0.3;
 	const float C = 0.6;
@@ -1602,11 +1597,10 @@ void main() {
 	vec3 l = normalize(lightPosition);
 	float lightNormDot = dot(n, l);
 	float view = abs(dot(n,r)); //with respect to viewer
-
 	if (PenWidth < view) discard;
 	vec3 a = vClr.rgb * ambient;
 	vec3 d = max(lightNormDot, 0.0) * vClr.rgb * diffuse;
-	float s =   specular * pow(max(dot(reflect(l, n), r), 0.0), shininess);
+	float s = specular * pow(max(dot(reflect(l, n), r), 0.0), shininess);
 	color.rgb = a + d + s;
 	color.a = opacity;
 }`;
@@ -1629,7 +1623,7 @@ void main() {
 	float lightNormDot = dot(n, l);
 	vec3 a = vClr.rgb * ambient;
 	vec3 d = max(lightNormDot, 0.0) * vClr.rgb * diffuse;
-	float s =   specular * pow(max(dot(reflect(l, n), r), 0.0), shininess);
+	float s = specular * pow(max(dot(reflect(l, n), r), 0.0), shininess);
 	color = vec4(a + d + s, opacity);
 }`;
 var fragMeshMatteShader = `#version 300 es
@@ -1640,7 +1634,6 @@ in vec4 vClr;
 in vec3 vN, vL, vV;
 out vec4 color;
 void main() {
-	vec3 r = vec3(0.0, 0.0, 1.0); //rayDir: for orthographic projections moving in Z direction (no need for normal matrix)
 	float ambient = 0.35;
 	float diffuse = 0.6;
 	vec3 n = normalize(vN);
@@ -1675,7 +1668,7 @@ void main() {
 	vec3 a = vClr.rgb * ambient;
 	a *= mix(downClr, upClr, ax);
 	vec3 d = max(lightNormDot, 0.0) * vClr.rgb * diffuse;
-	float s =   specular * pow(max(dot(reflect(l, n), r), 0.0), shininess);
+	float s = specular * pow(max(dot(reflect(l, n), r), 0.0), shininess);
 	color = vec4(a + d + s, opacity);
 }`;
 var fragMeshShaderSHBlue = `#version 300 es
@@ -1707,8 +1700,7 @@ const vec3 L21  = vec3(-0.0572703, -0.0502192, -0.0363410);
 const vec3 L22  = vec3( 0.0203348, -0.0044201, -0.0452180);
 vec3 SH(vec3 vNormal) {
 	vNormal = vec3(vNormal.x,vNormal.z,vNormal.y);
-	//vNormal = vec3(vNormal.x,vNormal.z,vNormal.y);
-	vec3 diffuseColor =  C1 * L22 * (vNormal.x * vNormal.x - vNormal.y * vNormal.y) +
+	vec3 diffuseColor = C1 * L22 * (vNormal.x * vNormal.x - vNormal.y * vNormal.y) +
 	C3 * L20 * vNormal.z * vNormal.z +
 	C4 * L00 -
 	C5 * L20 +
@@ -1729,20 +1721,11 @@ void main() {
 	vec3 n = normalize(vN);
 	vec3 lightPosition = vec3(0.0, 10.0, -5.0);
 	vec3 l = normalize(lightPosition);
-	float s =   specular * pow(max(dot(reflect(l, n), r), 0.0), shininess);
+	float s = specular * pow(max(dot(reflect(l, n), r), 0.0), shininess);
 	vec3 a = vClr.rgb * ambient;
 	vec3 d = vClr.rgb * diffuse * SH(-reflect(n, vec3(l.x, l.y, -l.z)) );
 	color = vec4(a + d + s, opacity);
 }`;
-var fragDepthPickingShader = `#version 300 es
-precision highp int;
-precision highp float;
-uniform int id;
-in vec3 vColor;
-out vec4 color;
-void main() {
-	color = vec4(vColor, float(id & 255) / 255.0);
-}`;
 var fragVolumePickingShader = `#version 300 es
 #line 506
 //precision highp int;
@@ -1753,12 +1736,17 @@ uniform vec3 texVox;
 uniform vec4 clipPlane;
 uniform highp sampler3D volume, overlay;
 uniform float overlays;
-uniform int id;
+uniform mat4 matRAS;
+uniform mat4 mvpMtx;
+uniform float drawOpacity;
+uniform highp sampler3D drawing;
 in vec3 vColor;
 out vec4 fColor;
 ` + kRenderFunc + `
 void main() {
+	int id = 254;
 	vec3 start = vColor;
+	gl_FragDepth = 0.0;
 	fColor = vec4(0.0, 0.0, 0.0, 0.0); //assume no hit: ID = 0
 	float fid = float(id & 255)/ 255.0;
 	vec3 backPosition = GetBackPosition(start);
@@ -1782,6 +1770,7 @@ void main() {
 		float val = texture(volume, samplePos.xyz).a;
 		if (val > 0.01) {
 			fColor = vec4(samplePos.rgb, fid);
+			gl_FragDepth = frac2ndc(samplePos.xyz);
 			break;
 		}
 		samplePos += deltaDirFast; //advance ray position
@@ -1798,6 +1787,7 @@ void main() {
 		float val = texture(overlay, samplePos.xyz).a;
 		if (val > 0.01) {
 			fColor = vec4(samplePos.rgb, fid);
+			gl_FragDepth = frac2ndc(samplePos.xyz);
 			return;
 		}
 		samplePos += deltaDirFast; //advance ray position
@@ -1805,6 +1795,31 @@ void main() {
 	//if (fColor.a == 0.0) discard; //no hit in either background or overlays
 	//you only get here if there is a hit with the background that is closer than any overlay
 }`;
+var vertOrientCubeShader = `#version 300 es
+// an attribute is an input (in) to a vertex shader.
+// It will receive data from a buffer
+layout(location=0)  in vec3 a_position;
+layout(location=1)  in vec3 a_color;
+// A matrix to transform the positions by
+uniform mat4 u_matrix;
+out vec3 vColor;
+// all shaders have a main function
+void main() {
+	// Multiply the position by the matrix.
+	vec4 pos = vec4(a_position, 1.0);
+	gl_Position = u_matrix * vec4(pos);
+	vColor = a_color;
+}
+`;
+var fragOrientCubeShader = `#version 300 es
+precision highp float;
+uniform vec4 u_color;
+in vec3 vColor;
+// we need to declare an output for the fragment shader
+out vec4 outColor;
+void main() {
+	outColor = vec4(vColor, 1.0);
+}`;
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -2844,6 +2859,1016 @@ function interval(period, scheduler) {
   }
   return timer(period, period, scheduler);
 }
+const orientCube = new Float32Array([
+  -1,
+  -1,
+  -1,
+  0.28,
+  0.28,
+  0.28,
+  -1,
+  -1,
+  -1,
+  0.28,
+  0.28,
+  0.28,
+  -1,
+  1,
+  -1,
+  0.28,
+  0.28,
+  0.28,
+  1,
+  -1,
+  -1,
+  0.28,
+  0.28,
+  0.28,
+  1,
+  1,
+  -1,
+  0.28,
+  0.28,
+  0.28,
+  1,
+  1,
+  -1,
+  0.28,
+  0.28,
+  0.28,
+  -1,
+  -1,
+  1,
+  0.8,
+  0.8,
+  0.8,
+  -1,
+  -1,
+  1,
+  0.8,
+  0.8,
+  0.8,
+  1,
+  -1,
+  1,
+  0.8,
+  0.8,
+  0.8,
+  -1,
+  1,
+  1,
+  0.8,
+  0.8,
+  0.8,
+  1,
+  1,
+  1,
+  0.8,
+  0.8,
+  0.8,
+  1,
+  1,
+  1,
+  0.8,
+  0.8,
+  0.8,
+  -1,
+  1,
+  -1,
+  0,
+  0,
+  0.74,
+  -1,
+  1,
+  -1,
+  0,
+  0,
+  0.74,
+  -1,
+  1,
+  1,
+  0,
+  0,
+  0.74,
+  1,
+  1,
+  -1,
+  0,
+  0,
+  0.74,
+  1,
+  1,
+  1,
+  0,
+  0,
+  0.74,
+  1,
+  1,
+  1,
+  0,
+  0,
+  0.74,
+  -1,
+  -1,
+  -1,
+  0.42,
+  0,
+  0.42,
+  -1,
+  -1,
+  -1,
+  0.42,
+  0,
+  0.42,
+  1,
+  -1,
+  -1,
+  0.42,
+  0,
+  0.42,
+  -1,
+  -1,
+  1,
+  0.42,
+  0,
+  0.42,
+  1,
+  -1,
+  1,
+  0.42,
+  0,
+  0.42,
+  1,
+  -1,
+  1,
+  0.42,
+  0,
+  0.42,
+  -1,
+  -1,
+  -1,
+  0.64,
+  0,
+  0,
+  -1,
+  -1,
+  -1,
+  0.64,
+  0,
+  0,
+  -1,
+  -1,
+  1,
+  0.64,
+  0,
+  0,
+  -1,
+  1,
+  -1,
+  0.64,
+  0,
+  0,
+  -1,
+  1,
+  1,
+  0.64,
+  0,
+  0,
+  -1,
+  1,
+  1,
+  0.64,
+  0,
+  0,
+  1,
+  -1,
+  -1,
+  0,
+  0.5,
+  0,
+  1,
+  -1,
+  -1,
+  0,
+  0.5,
+  0,
+  1,
+  1,
+  -1,
+  0,
+  0.5,
+  0,
+  1,
+  -1,
+  1,
+  0,
+  0.5,
+  0,
+  1,
+  1,
+  1,
+  0,
+  0.5,
+  0,
+  1,
+  1,
+  1,
+  0,
+  0.5,
+  0,
+  -0.45,
+  1,
+  -0.8,
+  0,
+  0,
+  0,
+  -0.45,
+  1,
+  -0.8,
+  0,
+  0,
+  0,
+  -0.45,
+  1,
+  0.8,
+  0,
+  0,
+  0,
+  -0.25,
+  1,
+  -0.8,
+  0,
+  0,
+  0,
+  -0.25,
+  1,
+  0.8,
+  0,
+  0,
+  0,
+  -0.25,
+  1,
+  0.8,
+  0,
+  0,
+  0,
+  -0.25,
+  1,
+  0.6,
+  0,
+  0,
+  0,
+  -0.25,
+  1,
+  0.6,
+  0,
+  0,
+  0,
+  -0.25,
+  1,
+  0.8,
+  0,
+  0,
+  0,
+  0.45,
+  1,
+  0.6,
+  0,
+  0,
+  0,
+  0.25,
+  1,
+  0.8,
+  0,
+  0,
+  0,
+  0.25,
+  1,
+  0.8,
+  0,
+  0,
+  0,
+  0.25,
+  1,
+  0.1,
+  0,
+  0,
+  0,
+  0.25,
+  1,
+  0.1,
+  0,
+  0,
+  0,
+  0.25,
+  1,
+  0.6,
+  0,
+  0,
+  0,
+  0.45,
+  1,
+  0.1,
+  0,
+  0,
+  0,
+  0.45,
+  1,
+  0.6,
+  0,
+  0,
+  0,
+  0.45,
+  1,
+  0.6,
+  0,
+  0,
+  0,
+  -0.25,
+  1,
+  -0.1,
+  0,
+  0,
+  0,
+  -0.25,
+  1,
+  -0.1,
+  0,
+  0,
+  0,
+  -0.25,
+  1,
+  0.1,
+  0,
+  0,
+  0,
+  0.25,
+  1,
+  -0.1,
+  0,
+  0,
+  0,
+  0.45,
+  1,
+  0.1,
+  0,
+  0,
+  0,
+  0.45,
+  1,
+  0.1,
+  0,
+  0,
+  0,
+  0.45,
+  -1,
+  -0.8,
+  0,
+  0,
+  0,
+  0.45,
+  -1,
+  -0.8,
+  0,
+  0,
+  0,
+  0.05,
+  -1,
+  0.8,
+  0,
+  0,
+  0,
+  0.25,
+  -1,
+  -0.8,
+  0,
+  0,
+  0,
+  -0.15,
+  -1,
+  0.8,
+  0,
+  0,
+  0,
+  -0.15,
+  -1,
+  0.8,
+  0,
+  0,
+  0,
+  -0.25,
+  -1,
+  -0.8,
+  0,
+  0,
+  0,
+  -0.25,
+  -1,
+  -0.8,
+  0,
+  0,
+  0,
+  0.05,
+  -1,
+  0.8,
+  0,
+  0,
+  0,
+  -0.45,
+  -1,
+  -0.8,
+  0,
+  0,
+  0,
+  -0.15,
+  -1,
+  0.8,
+  0,
+  0,
+  0,
+  -0.15,
+  -1,
+  0.8,
+  0,
+  0,
+  0,
+  0.13,
+  -1,
+  -0.3,
+  0,
+  0,
+  0,
+  0.13,
+  -1,
+  -0.3,
+  0,
+  0,
+  0,
+  0.07,
+  -1,
+  -0.1,
+  0,
+  0,
+  0,
+  -0.33,
+  -1,
+  -0.3,
+  0,
+  0,
+  0,
+  -0.27,
+  -1,
+  -0.1,
+  0,
+  0,
+  0,
+  -0.27,
+  -1,
+  -0.1,
+  0,
+  0,
+  0,
+  -0.45,
+  0.6,
+  1,
+  0,
+  0,
+  0,
+  -0.45,
+  0.6,
+  1,
+  0,
+  0,
+  0,
+  -0.45,
+  0.4,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  0.8,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  0.4,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  0.4,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  0.8,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  0.8,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  0.6,
+  1,
+  0,
+  0,
+  0,
+  0.25,
+  0.8,
+  1,
+  0,
+  0,
+  0,
+  0.45,
+  0.6,
+  1,
+  0,
+  0,
+  0,
+  0.45,
+  0.6,
+  1,
+  0,
+  0,
+  0,
+  0.25,
+  0.8,
+  1,
+  0,
+  0,
+  0,
+  0.25,
+  0.8,
+  1,
+  0,
+  0,
+  0,
+  0.25,
+  -0.1,
+  1,
+  0,
+  0,
+  0,
+  0.45,
+  0.6,
+  1,
+  0,
+  0,
+  0,
+  0.45,
+  0.1,
+  1,
+  0,
+  0,
+  0,
+  0.45,
+  0.1,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  0.1,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  0.1,
+  1,
+  0,
+  0,
+  0,
+  -0.45,
+  -0.1,
+  1,
+  0,
+  0,
+  0,
+  0.25,
+  0.1,
+  1,
+  0,
+  0,
+  0,
+  0.25,
+  -0.1,
+  1,
+  0,
+  0,
+  0,
+  0.25,
+  -0.1,
+  1,
+  0,
+  0,
+  0,
+  -0.45,
+  -0.1,
+  1,
+  0,
+  0,
+  0,
+  -0.45,
+  -0.1,
+  1,
+  0,
+  0,
+  0,
+  -0.45,
+  -0.6,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  -0.1,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  -0.8,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  -0.8,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  -0.6,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  -0.6,
+  1,
+  0,
+  0,
+  0,
+  -0.25,
+  -0.8,
+  1,
+  0,
+  0,
+  0,
+  0.45,
+  -0.6,
+  1,
+  0,
+  0,
+  0,
+  0.25,
+  -0.8,
+  1,
+  0,
+  0,
+  0,
+  0.25,
+  -0.8,
+  1,
+  0,
+  0,
+  0,
+  0.25,
+  -0.4,
+  1,
+  0,
+  0,
+  0,
+  0.25,
+  -0.4,
+  1,
+  0,
+  0,
+  0,
+  0.25,
+  -0.6,
+  1,
+  0,
+  0,
+  0,
+  0.45,
+  -0.4,
+  1,
+  0,
+  0,
+  0,
+  0.45,
+  -0.6,
+  1,
+  0,
+  0,
+  0,
+  0.45,
+  -0.6,
+  1,
+  0,
+  0,
+  0,
+  -0.1,
+  -0.8,
+  -1,
+  0,
+  0,
+  0,
+  -0.1,
+  -0.8,
+  -1,
+  0,
+  0,
+  0,
+  -0.1,
+  0.8,
+  -1,
+  0,
+  0,
+  0,
+  0.1,
+  -0.8,
+  -1,
+  0,
+  0,
+  0,
+  0.1,
+  0.8,
+  -1,
+  0,
+  0,
+  0,
+  0.1,
+  0.8,
+  -1,
+  0,
+  0,
+  0,
+  -1,
+  -0.45,
+  -0.8,
+  0,
+  0,
+  0,
+  -1,
+  -0.45,
+  -0.8,
+  0,
+  0,
+  0,
+  -1,
+  -0.45,
+  0.8,
+  0,
+  0,
+  0,
+  -1,
+  -0.25,
+  -0.8,
+  0,
+  0,
+  0,
+  -1,
+  -0.25,
+  0.8,
+  0,
+  0,
+  0,
+  -1,
+  -0.25,
+  0.8,
+  0,
+  0,
+  0,
+  -1,
+  -0.25,
+  -0.8,
+  0,
+  0,
+  0,
+  -1,
+  -0.25,
+  -0.8,
+  0,
+  0,
+  0,
+  -1,
+  -0.25,
+  -0.6,
+  0,
+  0,
+  0,
+  -1,
+  0.45,
+  -0.8,
+  0,
+  0,
+  0,
+  -1,
+  0.45,
+  -0.6,
+  0,
+  0,
+  0,
+  -1,
+  0.45,
+  -0.6,
+  0,
+  0,
+  0,
+  1,
+  0.45,
+  -0.8,
+  0,
+  0,
+  0,
+  1,
+  0.45,
+  -0.8,
+  0,
+  0,
+  0,
+  1,
+  0.45,
+  0.8,
+  0,
+  0,
+  0,
+  1,
+  0.25,
+  -0.8,
+  0,
+  0,
+  0,
+  1,
+  0.25,
+  0.8,
+  0,
+  0,
+  0,
+  1,
+  0.25,
+  0.8,
+  0,
+  0,
+  0,
+  1,
+  0.25,
+  0.6,
+  0,
+  0,
+  0,
+  1,
+  0.25,
+  0.6,
+  0,
+  0,
+  0,
+  1,
+  0.25,
+  0.8,
+  0,
+  0,
+  0,
+  1,
+  -0.45,
+  0.6,
+  0,
+  0,
+  0,
+  1,
+  -0.25,
+  0.8,
+  0,
+  0,
+  0,
+  1,
+  -0.25,
+  0.8,
+  0,
+  0,
+  0,
+  1,
+  -0.25,
+  0.1,
+  0,
+  0,
+  0,
+  1,
+  -0.25,
+  0.1,
+  0,
+  0,
+  0,
+  1,
+  -0.25,
+  0.6,
+  0,
+  0,
+  0,
+  1,
+  -0.45,
+  0.1,
+  0,
+  0,
+  0,
+  1,
+  -0.45,
+  0.6,
+  0,
+  0,
+  0,
+  1,
+  -0.45,
+  0.6,
+  0,
+  0,
+  0,
+  1,
+  0.25,
+  -0.1,
+  0,
+  0,
+  0,
+  1,
+  0.25,
+  -0.1,
+  0,
+  0,
+  0,
+  1,
+  0.25,
+  0.1,
+  0,
+  0,
+  0,
+  1,
+  -0.25,
+  -0.1,
+  0,
+  0,
+  0,
+  1,
+  -0.45,
+  0.1,
+  0,
+  0,
+  0,
+  1,
+  -0.45,
+  0.1,
+  0,
+  0,
+  0,
+  1,
+  -0.25,
+  -0.8,
+  0,
+  0,
+  0,
+  1,
+  -0.25,
+  -0.8,
+  0,
+  0,
+  0,
+  1,
+  -0.05,
+  -0.1,
+  0,
+  0,
+  0,
+  1,
+  -0.45,
+  -0.8,
+  0,
+  0,
+  0,
+  1,
+  -0.25,
+  -0.1,
+  0,
+  0,
+  0,
+  1,
+  -0.25,
+  -0.1,
+  0,
+  0,
+  0
+]);
 var NiivueObject3D = function(id, vertexBuffer, mode, indexCount, indexBuffer = null, vao = null) {
   this.BLEND = 1;
   this.CULL_FACE = 2;
@@ -103542,6 +104567,22 @@ function isPlatformLittleEndian() {
   new DataView(buffer2).setInt16(0, 256, true);
   return new Int16Array(buffer2)[0] === 256;
 }
+function NVImageFromUrlOptions(url, urlImageData = "", name = "", colorMap = "gray", opacity = 1, cal_min = NaN, cal_max = NaN, trustCalMinMax = true, percentileFrac = 0.02, ignoreZeroVoxels = false, visible = true, colorMapNegative = "") {
+  return {
+    url,
+    urlImageData,
+    name,
+    colorMap,
+    opacity,
+    cal_min,
+    cal_max,
+    trustCalMinMax,
+    percentileFrac,
+    ignoreZeroVoxels,
+    visible,
+    colorMapNegative
+  };
+}
 function NVImage(dataBuffer, name = "", colorMap = "gray", opacity = 1, pairedImgData = null, cal_min = NaN, cal_max = NaN, trustCalMinMax = true, percentileFrac = 0.02, ignoreZeroVoxels = false, visible = true, isDICOMDIR = false, useQFormNotSForm = false, colorMapNegative = "") {
   this.DT_NONE = 0;
   this.DT_UNKNOWN = 0;
@@ -103868,9 +104909,9 @@ NVImage.prototype.calculateOblique = function() {
   let XY = Math.abs(90 - angle(X1mm, Y1mm) * (180 / Math.PI));
   let XZ = Math.abs(90 - angle(X1mm, Z1mm) * (180 / Math.PI));
   let YZ = Math.abs(90 - angle(Y1mm, Z1mm) * (180 / Math.PI));
-  let maxShear = Math.max(Math.max(XY, XZ), YZ);
-  if (maxShear > 0.1)
-    log$2.debug("Warning: shear detected (gantry tilt) of %f degrees", maxShear);
+  this.maxShearDeg = Math.max(Math.max(XY, XZ), YZ);
+  if (this.maxShearDeg > 0.1)
+    console.log("Warning: voxels are rhomboidal, maximum shear is %f degrees.", this.maxShearDeg);
   let dim = fromValues(this.dimsRAS[1], this.dimsRAS[2], this.dimsRAS[3], 1);
   let sform = clone$1(this.matRAS);
   transpose(sform, sform);
@@ -103986,7 +105027,8 @@ NVImage.prototype.readDICOM = function(buf) {
   this.series = new daikon.Series();
   if (Array.isArray(buf)) {
     for (let i2 = 0; i2 < buf.length; i2++) {
-      let image3 = daikon.Series.parseImage(new DataView(buf[i2]));
+      const dataview = new DataView(buf[i2]);
+      let image3 = daikon.Series.parseImage(dataview);
       if (image3 === null) {
         console.error(daikon.Series.parserError);
       } else if (image3.hasPixelData()) {
@@ -104064,8 +105106,6 @@ NVImage.prototype.readDICOM = function(buf) {
       [0, 0, 0, 1]
     ];
   }
-  console.log("DICOM", this.series.images[0]);
-  console.log("NIfTI", hdr);
   let imgRaw = [];
   let data;
   let length2 = this.series.validatePixelDataLength(this.series.images[0]);
@@ -104215,30 +105255,6 @@ NVImage.prototype.readVMR = function(buffer2) {
   let nBytes = hdr.dims[1] * hdr.dims[2] * hdr.dims[3];
   if (version >= 4) {
     let pos = 8 + nBytes;
-    reader.getUint16(pos, true);
-    reader.getUint16(pos + 2, true);
-    reader.getUint16(pos + 4, true);
-    reader.getUint16(pos + 6, true);
-    reader.getUint32(pos + 8, true);
-    reader.getUint32(pos + 12, true);
-    reader.getFloat32(pos + 16, true);
-    reader.getFloat32(pos + 20, true);
-    reader.getFloat32(pos + 24, true);
-    reader.getFloat32(pos + 28, true);
-    reader.getFloat32(pos + 32, true);
-    reader.getFloat32(pos + 36, true);
-    reader.getFloat32(pos + 40, true);
-    reader.getFloat32(pos + 44, true);
-    reader.getFloat32(pos + 48, true);
-    reader.getFloat32(pos + 52, true);
-    reader.getFloat32(pos + 56, true);
-    reader.getFloat32(pos + 60, true);
-    reader.getUint32(pos + 64, true);
-    reader.getUint32(pos + 68, true);
-    reader.getFloat32(pos + 72, true);
-    reader.getFloat32(pos + 76, true);
-    reader.getFloat32(pos + 80, true);
-    reader.getFloat32(pos + 84, true);
     let nSpatialTransforms = reader.getUint32(pos + 88, true);
     pos = pos + 92;
     if (nSpatialTransforms > 0) {
@@ -104247,7 +105263,6 @@ NVImage.prototype.readVMR = function(buffer2) {
         while (pos < len2 && reader.getUint8(pos) !== 0)
           pos++;
         pos++;
-        reader.getUint32(pos, true);
         pos += 4;
         while (pos < len2 && reader.getUint8(pos) !== 0)
           pos++;
@@ -104258,16 +105273,9 @@ NVImage.prototype.readVMR = function(buffer2) {
           pos += 4;
       }
     }
-    reader.getUint8(pos);
-    reader.getUint8(pos + 1);
     hdr.pixDims[1] = reader.getFloat32(pos + 2, true);
     hdr.pixDims[2] = reader.getFloat32(pos + 6, true);
     hdr.pixDims[3] = reader.getFloat32(pos + 10, true);
-    reader.getUint8(pos + 14);
-    reader.getUint8(pos + 15);
-    reader.getInt32(pos + 16, true);
-    reader.getInt32(pos + 20, true);
-    reader.getInt32(pos + 24, true);
   }
   console.log("Warning: VMR spatial transform not implemented");
   hdr.affine = [
@@ -104299,8 +105307,6 @@ NVImage.prototype.readMGH = function(buffer2) {
   let depth = reader.getInt32(12, false);
   let nframes = reader.getInt32(16, false);
   let mtype = reader.getInt32(20, false);
-  reader.getInt32(24, false);
-  reader.getInt16(28, false);
   let spacingX = reader.getFloat32(30, false);
   let spacingY = reader.getFloat32(34, false);
   let spacingZ = reader.getFloat32(38, false);
@@ -104313,9 +105319,6 @@ NVImage.prototype.readMGH = function(buffer2) {
   let zr = reader.getFloat32(66, false);
   let za = reader.getFloat32(70, false);
   let zs = reader.getFloat32(74, false);
-  reader.getFloat32(78, false);
-  reader.getFloat32(82, false);
-  reader.getFloat32(86, false);
   if (version !== 1 || mtype < 0 || mtype > 4)
     console.log("Not a valid MGH file");
   if (mtype === 0) {
@@ -105001,7 +106004,6 @@ NVImage.prototype.readNRRD = function(dataBuffer, pairedImgData) {
       [0, 0, 0, 1]
     ];
   }
-  hdr.dims[1] * hdr.dims[2] * hdr.dims[3];
   if (isDetached && pairedImgData) {
     return pairedImgData.slice();
   }
@@ -105477,14 +106479,15 @@ NVImage.loadFromFile = async function({
       }
     } else {
       dataBuffer = await this.readFileAsync(file);
+      name = file.name;
     }
     let pairedImgData = null;
     if (urlImgData) {
       pairedImgData = await this.readFileAsync(urlImgData);
     }
-    name = file.name;
     nvimage = new NVImage(dataBuffer, name, colorMap, opacity, pairedImgData, cal_min, cal_max, trustCalMinMax, percentileFrac, ignoreZeroVoxels, visible, isDICOMDIR);
   } catch (err2) {
+    console.log(err2);
     log$2.debug(err2);
   }
   return nvimage;
@@ -105742,6 +106745,24 @@ NVImage.prototype.toNiivueObject3D = function(id, gl) {
   ];
   return obj3D;
 };
+NVImage.prototype.applyOptionsUpdate = function(options) {
+  this.hdr.cal_min = options.cal_min;
+  this.hdr.cal_max = options.cal_max;
+  delete options["url"];
+  delete options["urlImageData"];
+  delete options["cal_min"];
+  delete options["cal_max"];
+  Object.assign(this, options);
+};
+NVImage.prototype.getImageOptions = function() {
+  let options = null;
+  try {
+    options = new NVImageFromUrlOptions("", "", this.name, this.colorMap, this.opacity, this.hdr.cal_min, this.hdr.cal_max, this.trustCalMinMax, this.percentileFrac, this.ignoreZeroVoxels, this.visible, this.colorMapNegative);
+  } catch (e) {
+    console.log(e);
+  }
+  return options;
+};
 const colortables = function() {
   this.version = 0.1;
   this.gamma = 1;
@@ -105765,7 +106786,7 @@ colortables.prototype.colormap = function(lutName = "") {
   return this.makeLut(cmaps[defaultLutName].R, cmaps[defaultLutName].G, cmaps[defaultLutName].B, cmaps[defaultLutName].A, cmaps[defaultLutName].I);
 };
 colortables.prototype.colormapFromKey = function(name) {
-  let availMaps = luts.colorMaps();
+  let availMaps = this.colorMaps();
   for (let i2 = 0; i2 < availMaps.length; i2++) {
     let key2 = availMaps[i2];
     if (name.toLowerCase() === key2.toLowerCase()) {
@@ -105799,7 +106820,18 @@ colortables.prototype.makeLut = function(Rs, Gs, Bs, As, Is) {
 };
 const cmapper$1 = new colortables();
 const log$1 = new Log();
-function NVMesh(pts, tris, name = "", rgba255 = [1, 0, 0, 0], opacity = 1, visible = true, gl, connectome = null, dpg = null, dps = null, dpv = null) {
+function NVMeshFromUrlOptions(url = "", gl = null, name = "", opacity = 1, rgba255 = [255, 255, 255, 255], visible = true, layers = []) {
+  return {
+    url,
+    gl,
+    name,
+    opacity,
+    rgba255,
+    visible,
+    layers
+  };
+}
+function NVMesh(pts, tris, name = "", rgba255 = [255, 255, 255, 255], opacity = 1, visible = true, gl, connectome = null, dpg = null, dps = null, dpv = null) {
   this.name = name;
   this.id = v4();
   let obj = getExtents(pts);
@@ -105808,6 +106840,7 @@ function NVMesh(pts, tris, name = "", rgba255 = [1, 0, 0, 0], opacity = 1, visib
   this.extentsMax = obj.extentsMax;
   this.opacity = opacity > 1 ? 1 : opacity;
   this.visible = visible;
+  this.meshShaderIndex = 0;
   this.indexBuffer = gl.createBuffer();
   this.vertexBuffer = gl.createBuffer();
   this.vao = gl.createVertexArray();
@@ -106085,6 +107118,45 @@ NVMesh.prototype.updateConnectome = function(gl) {
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(posNormClr), gl.STATIC_DRAW);
   this.indexCount = tris.length;
 };
+function getClusterBoundaryU8(u82, faces) {
+  const border = new Array(u82.length).fill(false);
+  const binary = new Array(u82.length).fill(false);
+  for (let i2 = 0; i2 < u82.length; i2++)
+    if (u82[i2] > 0)
+      binary[i2] = true;
+  let nTri = faces.length / 3;
+  let j = 0;
+  for (let i2 = 0; i2 < nTri; i2++) {
+    let v0 = faces[j];
+    let v1 = faces[j + 1];
+    let v2 = faces[j + 2];
+    j += 3;
+    if (binary[v0] === binary[v1] && binary[v0] === binary[v2] && binary[v1] === binary[v2])
+      continue;
+    border[v0] = true;
+    border[v1] = true;
+    border[v2] = true;
+  }
+  return border;
+}
+function getClusterBoundary(rgba8, faces) {
+  var rgba32 = new Uint32Array(rgba8.buffer);
+  const border = new Array(rgba32.length).fill(false);
+  let nTri = faces.length / 3;
+  let j = 0;
+  for (let i2 = 0; i2 < nTri; i2++) {
+    let v0 = faces[j];
+    let v1 = faces[j + 1];
+    let v2 = faces[j + 2];
+    j += 3;
+    if (rgba32[v0] === rgba32[v1] && rgba32[v0] === rgba32[v2] && rgba32[v1] === rgba32[v2])
+      continue;
+    border[v0] = true;
+    border[v1] = true;
+    border[v2] = true;
+  }
+  return border;
+}
 NVMesh.prototype.updateMesh = function(gl) {
   if (this.offsetPt0) {
     this.updateFibers(gl);
@@ -106104,16 +107176,25 @@ NVMesh.prototype.updateMesh = function(gl) {
       let lerp2 = function(x2, y, a) {
         return x2 * (1 - a) + y * a;
       };
+      let nvtx = this.pts.length / 3;
       let layer = this.layers[i2];
-      if (layer.opacity <= 0 || layer.cal_min >= layer.cal_max)
+      if (layer.opacity <= 0 || layer.cal_min > layer.cal_max)
         continue;
       let opacity = layer.opacity;
       var u82 = new Uint8Array(posNormClr.buffer);
       if (layer.values.constructor === Uint32Array) {
         let rgba8 = new Uint8Array(layer.values.buffer);
+        let opaque = new Array(nvtx).fill(true);
+        if (layer.isOutlineBorder)
+          opaque = getClusterBoundary(rgba8, this.tris);
         let k = 0;
         for (let j = 0; j < layer.values.length; j++) {
           let vtx = j * 28 + 24;
+          if (!opaque[j]) {
+            u82[vtx + 3] = 0;
+            k += 4;
+            continue;
+          }
           u82[vtx + 0] = lerp2(u82[vtx + 0], rgba8[k + 0], opacity);
           u82[vtx + 1] = lerp2(u82[vtx + 1], rgba8[k + 1], opacity);
           u82[vtx + 2] = lerp2(u82[vtx + 2], rgba8[k + 2], opacity);
@@ -106123,34 +107204,76 @@ NVMesh.prototype.updateMesh = function(gl) {
       }
       let lut = cmapper$1.colormap(layer.colorMap);
       let frame = Math.min(Math.max(layer.frame4D, 0), layer.nFrame4D - 1);
-      let nvtx = this.pts.length / 3;
       let frameOffset = nvtx * frame;
       if (layer.useNegativeCmap) {
         layer.cal_min = Math.max(0, layer.cal_min);
         layer.cal_max = Math.max(layer.cal_min + 1e-6, layer.cal_max);
       }
       let scale255 = 255 / (layer.cal_max - layer.cal_min);
-      for (let j = 0; j < nvtx; j++) {
-        let v255 = Math.round((layer.values[j + frameOffset] - layer.cal_min) * scale255);
-        if (v255 < 0)
-          continue;
-        v255 = Math.min(255, v255) * 4;
-        let vtx = j * 28 + 24;
-        u82[vtx + 0] = lerp2(u82[vtx + 0], lut[v255 + 0], opacity);
-        u82[vtx + 1] = lerp2(u82[vtx + 1], lut[v255 + 1], opacity);
-        u82[vtx + 2] = lerp2(u82[vtx + 2], lut[v255 + 2], opacity);
-      }
-      if (layer.useNegativeCmap) {
-        let lut2 = cmapper$1.colormap(layer.colorMapNegative);
+      if (!layer.isOutlineBorder) {
         for (let j = 0; j < nvtx; j++) {
-          let v255 = Math.round((-layer.values[j + frameOffset] - layer.cal_min) * scale255);
+          let v255 = Math.round((layer.values[j + frameOffset] - layer.cal_min) * scale255);
           if (v255 < 0)
             continue;
           v255 = Math.min(255, v255) * 4;
           let vtx = j * 28 + 24;
-          u82[vtx + 0] = lerp2(u82[vtx + 0], lut2[v255 + 0], opacity);
-          u82[vtx + 1] = lerp2(u82[vtx + 1], lut2[v255 + 1], opacity);
-          u82[vtx + 2] = lerp2(u82[vtx + 2], lut2[v255 + 2], opacity);
+          u82[vtx + 0] = lerp2(u82[vtx + 0], lut[v255 + 0], opacity);
+          u82[vtx + 1] = lerp2(u82[vtx + 1], lut[v255 + 1], opacity);
+          u82[vtx + 2] = lerp2(u82[vtx + 2], lut[v255 + 2], opacity);
+        }
+      } else {
+        let v255s = new Uint8Array(nvtx);
+        for (let j = 0; j < nvtx; j++) {
+          let v255 = Math.round((layer.values[j + frameOffset] - layer.cal_min) * scale255);
+          if (v255 < 0)
+            continue;
+          v255 = Math.min(255, v255);
+          v255s[j] = v255;
+        }
+        let opaque = getClusterBoundaryU8(v255s, this.tris);
+        for (let j = 0; j < nvtx; j++) {
+          let v255 = 255;
+          if (!opaque[j])
+            continue;
+          v255 = Math.min(255, v255) * 4;
+          let vtx = j * 28 + 24;
+          u82[vtx + 0] = lerp2(u82[vtx + 0], lut[v255 + 0], opacity);
+          u82[vtx + 1] = lerp2(u82[vtx + 1], lut[v255 + 1], opacity);
+          u82[vtx + 2] = lerp2(u82[vtx + 2], lut[v255 + 2], opacity);
+        }
+      }
+      if (layer.useNegativeCmap) {
+        let lut2 = cmapper$1.colormap(layer.colorMapNegative);
+        if (!layer.isOutlineBorder) {
+          for (let j = 0; j < nvtx; j++) {
+            let v255 = Math.round((-layer.values[j + frameOffset] - layer.cal_min) * scale255);
+            if (v255 < 0)
+              continue;
+            v255 = Math.min(255, v255) * 4;
+            let vtx = j * 28 + 24;
+            u82[vtx + 0] = lerp2(u82[vtx + 0], lut2[v255 + 0], opacity);
+            u82[vtx + 1] = lerp2(u82[vtx + 1], lut2[v255 + 1], opacity);
+            u82[vtx + 2] = lerp2(u82[vtx + 2], lut2[v255 + 2], opacity);
+          }
+        } else {
+          let v255s = new Uint8Array(nvtx);
+          for (let j = 0; j < nvtx; j++) {
+            let v255 = Math.round((-layer.values[j + frameOffset] - layer.cal_min) * scale255);
+            if (v255 < 0)
+              continue;
+            v255s[j] = Math.min(255, v255);
+          }
+          let opaque = getClusterBoundaryU8(v255s, this.tris);
+          for (let j = 0; j < nvtx; j++) {
+            let v255 = 255;
+            if (!opaque[j])
+              continue;
+            v255 = Math.min(255, v255) * 4;
+            let vtx = j * 28 + 24;
+            u82[vtx + 0] = lerp2(u82[vtx + 0], lut2[v255 + 0], opacity);
+            u82[vtx + 1] = lerp2(u82[vtx + 1], lut2[v255 + 1], opacity);
+            u82[vtx + 2] = lerp2(u82[vtx + 2], lut2[v255 + 2], opacity);
+          }
         }
       }
     }
@@ -106336,7 +107459,6 @@ NVMesh.readTRACT = function(buffer2) {
     let bundleTag = readNumericTag("Bundle_Tag=");
     let isLittleEndian2 = line.includes("binary.lsbfirst");
     for (let i2 = 0; i2 < new_tracts; i2++) {
-      reader.getUint32(pos, isLittleEndian2);
       pos += 4;
       let new_pts = reader.getUint32(pos, isLittleEndian2) / 3;
       pos += 4;
@@ -106768,10 +107890,7 @@ NVMesh.readSMP = function(buffer2, n_vert) {
   return scalars;
 };
 NVMesh.readSTC = function(buffer2, n_vert) {
-  buffer2.byteLength;
   var reader = new DataView(buffer2);
-  reader.getFloat32(0, false);
-  reader.getFloat32(4, false);
   let n_vertex = reader.getInt32(8, false);
   if (n_vertex !== n_vert) {
     console.log("Overlay has " + n_vertex + " vertices, expected " + n_vert);
@@ -106793,7 +107912,6 @@ NVMesh.readCURV = function(buffer2, n_vert) {
   let sig1 = view.getUint8(1);
   let sig2 = view.getUint8(2);
   let n_vertex = view.getUint32(3, false);
-  view.getUint32(7, false);
   let n_time = view.getUint32(11, false);
   if (sig0 !== 255 || sig1 !== 255 || sig2 !== 255)
     log$1.debug("Unable to recognize file type: does not appear to be FreeSurfer format.");
@@ -107385,7 +108503,7 @@ NVMesh.readPLY = function(buffer2) {
     indices
   };
 };
-NVMesh.readLayer = function(name, buffer2, nvmesh, opacity = 0.5, colorMap = "warm", colorMapNegative = "winter", useNegativeCmap = false, cal_min = null, cal_max = null) {
+NVMesh.readLayer = function(name, buffer2, nvmesh, opacity = 0.5, colorMap = "warm", colorMapNegative = "winter", useNegativeCmap = false, cal_min = null, cal_max = null, isOutlineBorder = false) {
   let layer = [];
   let n_vert = nvmesh.vertexCount / 3;
   if (n_vert < 3)
@@ -107421,6 +108539,7 @@ NVMesh.readLayer = function(name, buffer2, nvmesh, opacity = 0.5, colorMap = "wa
     return;
   layer.nFrame4D = layer.values.length / n_vert;
   layer.frame4D = 0;
+  layer.isOutlineBorder = isOutlineBorder;
   let mn = layer.values[0];
   let mx = layer.values[0];
   for (var i2 = 0; i2 < layer.values.length; i2++) {
@@ -107445,7 +108564,6 @@ NVMesh.readOFF = function(buffer2) {
   var enc = new TextDecoder("utf-8");
   var txt = enc.decode(buffer2);
   var lines = txt.split("\n");
-  lines.length;
   let pts = [];
   let t = [];
   let i2 = 0;
@@ -107688,8 +108806,10 @@ NVMesh.readNII2 = function(buffer2, n_vert = 0) {
     return scalars;
   }
   let voxoffset2 = Number(reader.getBigInt64(168, isLittleEndian2));
-  reader.getFloat64(176, isLittleEndian2);
-  reader.getFloat64(184, isLittleEndian2);
+  let scl_slope = reader.getFloat64(176, isLittleEndian2);
+  let scl_inter = reader.getFloat64(184, isLittleEndian2);
+  if (scl_slope !== 1 || scl_inter !== 0)
+    console.log("ignoring scale slope and intercept");
   let intent_code = reader.getUint32(504, isLittleEndian2);
   let datatype = reader.getUint16(12, isLittleEndian2);
   if (datatype !== 2 && datatype !== 4 && datatype !== 8 && datatype !== 16) {
@@ -107839,7 +108959,6 @@ NVMesh.readNII2 = function(buffer2, n_vert = 0) {
 };
 NVMesh.readNII = function(buffer2, n_vert = 0) {
   let scalars = [];
-  buffer2.byteLength;
   let isLittleEndian2 = true;
   var reader = new DataView(buffer2);
   var magic = reader.getUint16(0, isLittleEndian2);
@@ -107864,8 +108983,10 @@ NVMesh.readNII = function(buffer2, n_vert = 0) {
   if (magic !== 348)
     console.log("Not a valid NIfTI image.");
   let voxoffset2 = reader.getFloat32(108, isLittleEndian2);
-  reader.getFloat32(112, isLittleEndian2);
-  reader.getFloat32(116, isLittleEndian2);
+  let scl_slope = reader.getFloat32(112, isLittleEndian2);
+  let scl_inter = reader.getFloat32(116, isLittleEndian2);
+  if (scl_slope !== 1 || scl_inter !== 0)
+    console.log("ignoring scale slope and intercept");
   let datatype = reader.getUint16(70, isLittleEndian2);
   if (datatype !== 2 && datatype !== 4 && datatype !== 8 && datatype !== 16) {
     console.log("Unsupported NIfTI datatype " + datatype);
@@ -108149,7 +109270,6 @@ NVMesh.readX3D = function(buffer2, n_vert = 0) {
           rotation[1],
           rotation[2]
         ]);
-        fromValues(translation[0], translation[1], translation[2], 1);
         let pti = fromValues(0, -height * 0.5, 0, 1);
         let ptj = fromValues(0, +height * 0.5, 0, 1);
         transformMat4(pti, pti, r);
@@ -110409,8 +111529,82 @@ var WebSocketSubject = function(_super) {
 function webSocket(urlConfigOrSource) {
   return new WebSocketSubject(urlConfigOrSource);
 }
+const UPDATE = "update";
+const CREATE = "create";
+const JOIN = "join";
+const ADD_VOLUME_URL = "add volume url";
+const REMOVE_VOLUME_URL = "remove volume media";
+const ADD_MESH_URL = "add mesh url";
+const REMOVE_MESH_URL = "remove mesh media";
+const SET_4D_VOL_INDEX = "set 4d vol index";
+const UPDATE_IMAGE_OPTIONS = "update image options";
+function NVMesssageUpdateData(azimuth, elevation, clipPlane, zoom) {
+  return {
+    azimuth,
+    elevation,
+    clipPlane,
+    zoom
+  };
+}
+function NVMessageSet4DVolumeIndexData(url, index) {
+  return {
+    url,
+    index
+  };
+}
+function NVMessage(messageType, messageData = "", sessionKey = "") {
+  let message = {};
+  message.key = sessionKey;
+  message.op = messageType;
+  switch (messageType) {
+    case UPDATE:
+      Object.assign(message, messageData);
+      break;
+    case UPDATE_IMAGE_OPTIONS:
+    case ADD_VOLUME_URL:
+      message.urlImageOptions = messageData;
+      break;
+    case ADD_MESH_URL:
+      message.urlMeshOptions = messageData;
+      break;
+    case REMOVE_VOLUME_URL:
+    case REMOVE_MESH_URL:
+      message.url = messageData;
+      break;
+    case SET_4D_VOL_INDEX:
+      message.url = messageData.url;
+      message.index = messageData.index;
+      break;
+  }
+  return message;
+}
 const log = new Log();
 const cmapper = new colortables();
+const MESH_EXTENSIONS = [
+  "ASC",
+  "DFS",
+  "FSM",
+  "PIAL",
+  "ORIG",
+  "INFLATED",
+  "SMOOTHWM",
+  "SPHERE",
+  "WHITE",
+  "GII",
+  "MZ3",
+  "NV",
+  "OBJ",
+  "OFF",
+  "PLY",
+  "SRF",
+  "STL",
+  "TCK",
+  "TRACT",
+  "TRK",
+  "TRX",
+  "VTK",
+  "X3D"
+];
 function Niivue(options = {}) {
   this.opts = {};
   this.defaults = {
@@ -110428,17 +111622,24 @@ function Niivue(options = {}) {
     trustCalMinMax: true,
     clipPlaneHotKey: "KeyC",
     viewModeHotKey: "KeyV",
+    doubleTouchTimeout: 500,
+    longTouchTimeout: 1e3,
     keyDebounceTime: 50,
     isNearestInterpolation: false,
     isAtlasOutline: false,
     isRuler: false,
     isColorbar: false,
+    isOrientCube: false,
+    multiplanarPadPixels: 0,
     isRadiologicalConvention: false,
     meshThicknessOn2D: Infinity,
     isDragShowsMeasurementTool: false,
+    isDragForPanZoom: false,
+    isDepthPickMesh: false,
     isCornerOrientationText: false,
     sagittalNoseLeft: false,
     isSliceMM: false,
+    isHighResolutionCapable: true,
     logging: false,
     loadingText: "waiting for images...",
     dragAndDropEnabled: true,
@@ -110446,11 +111647,20 @@ function Niivue(options = {}) {
     penValue: 1,
     isFilledPen: false,
     thumbnail: "",
+    maxDrawUndoBitmaps: 8,
     onLocationChange: () => {
     },
     onIntensityChange: () => {
     },
     onImageLoaded: () => {
+    },
+    onError: () => {
+    },
+    onInfo: () => {
+    },
+    onWarn: () => {
+    },
+    onDebug: () => {
     }
   };
   this.canvas = null;
@@ -110459,8 +111669,6 @@ function Niivue(options = {}) {
   this.volumeTexture = null;
   this.drawTexture = null;
   this.drawBitmap = null;
-  this.maxDrawUndoBitmaps = 8;
-  this.currentDrawUndoBitmap = this.maxDrawUndoBitmaps;
   this.drawUndoBitmaps = [];
   this.drawOpacity = 0.8;
   this.colorbarHeight = 0;
@@ -110472,10 +111680,12 @@ function Niivue(options = {}) {
   this.overlayTextureID = [];
   this.sliceShader = null;
   this.sliceMMShader = null;
+  this.orientCubeShader = null;
+  this.orientCubeShaderVAO = null;
   this.rectShader = null;
-  this.graphShader = null;
   this.renderShader = null;
-  this.pickingShader = null;
+  this.pickingMeshShader = null;
+  this.pickingImageShader = null;
   this.colorbarShader = null;
   this.fontShader = null;
   this.fontTexture = null;
@@ -110491,11 +111701,9 @@ function Niivue(options = {}) {
   this.orientShaderF = null;
   this.orientShaderRGBU = null;
   this.surfaceShader = null;
-  this.meshShader = null;
   this.genericVAO = null;
   this.unusedVAO = null;
   this.crosshairs3D = null;
-  this.pickingSurfaceShader = null;
   this.DEFAULT_FONT_GLYPH_SHEET = defaultFontPNG;
   this.DEFAULT_FONT_METRICS = defaultFontMetrics;
   this.fontMets = null;
@@ -110523,11 +111731,15 @@ function Niivue(options = {}) {
   this.scene.mouseButtonRightDown = false;
   this.scene.mouseDepthPicker = false;
   this.scene.pan2Dxyzmm = [0, 0, 0, 1];
-  this.scene.scale2D = 1;
+  this.scene.pan2DxyzmmAtMouseDown = [0, 0, 0, 1];
   this.scene.prevX = 0;
   this.scene.prevY = 0;
   this.scene.currX = 0;
   this.scene.currY = 0;
+  this.currentTouchTime = 0;
+  this.lastTouchTime = 0;
+  this.touchTimer = null;
+  this.doubleTouch = false;
   this.back = {};
   this.overlays = [];
   this.volumes = [];
@@ -110588,10 +111800,6 @@ function Niivue(options = {}) {
     {
       Name: "Toon",
       Frag: fragMeshToonShader
-    },
-    {
-      Name: "Depth",
-      Frag: fragMeshDepthShader
     }
   ];
   this.isController = false;
@@ -110600,10 +111808,12 @@ function Niivue(options = {}) {
   this.sessionUrl = "";
   this.serverConnection$ = null;
   this.interval$ = null;
+  this.mediaUrlMap = /* @__PURE__ */ new Map();
   this.initialized = false;
   for (let prop in this.defaults) {
     this.opts[prop] = options[prop] === void 0 ? this.defaults[prop] : options[prop];
   }
+  this.currentDrawUndoBitmap = this.opts.maxDrawUndoBitmaps;
   if (this.opts.drawingEnabled) {
     this.createEmptyDrawing();
   }
@@ -110616,6 +111826,11 @@ function Niivue(options = {}) {
     loading: this.scene.loading$
   };
   this.subscriptions = [];
+  if (this.opts.isHighResolutionCapable) {
+    this.scene.dpr = window.devicePixelRatio || 1;
+  } else {
+    this.scene.dpr = 1;
+  }
 }
 Niivue.prototype.saveScene = function(filename = "") {
   function saveBlob(blob, name) {
@@ -110719,49 +111934,80 @@ Niivue.prototype.connectToServer = function(wsServerUrl, sessionName) {
 Niivue.prototype.setUpdateInterval = function() {
   this.interval$ = interval(300);
   this.interval$.subscribe(() => {
-    this.serverConnection$.next({
-      op: "update",
-      azimuth: this.scene.renderAzimuth,
-      elevation: this.scene.renderElevation,
-      clipPlane: this.scene.clipPlane,
-      zoom: this.volScaleMultiplier,
-      key: this.sessionKey
-    });
+    this.serverConnection$.next(new NVMessage(UPDATE, new NVMesssageUpdateData(this.scene.renderAzimuth, this.scene.renderElevation, this.scene.clipPlane, this.volScaleMultiplier), this.sessionKey));
   });
 };
+Niivue.prototype.handleMessage = function(msg2, sessionCreatedCallback, sessionJoinedCallback) {
+  switch (msg2["op"]) {
+    case UPDATE:
+      this.scene.renderAzimuth = msg2["azimuth"];
+      this.scene.renderElevation = msg2["elevation"];
+      this.volScaleMultiplier = msg2["zoom"];
+      this.scene.clipPlane = msg2["clipPlane"];
+      this.drawScene();
+      break;
+    case CREATE:
+      console.log(msg2);
+      if (!msg2["isError"]) {
+        this.isInSession = true;
+        this.sessionKey = msg2["key"];
+        this.setUpdateInterval();
+      }
+      if (sessionCreatedCallback) {
+        sessionCreatedCallback(msg2["message"], msg2["url"], msg2["key"], msg2["isError"], msg2["userKey"]);
+      }
+      break;
+    case JOIN:
+      this.isInSession = true;
+      this.isController = msg2["isController"];
+      if (this.isController) {
+        this.setUpdateInterval();
+      }
+      if (sessionJoinedCallback) {
+        sessionJoinedCallback(msg2["message"], msg2["url"], msg2["isController"], msg2["userKey"]);
+      }
+      break;
+    case ADD_MESH_URL:
+      this.addMeshFromUrl(msg2["urlMeshOptions"], false);
+      break;
+    case ADD_VOLUME_URL:
+      this.addVolumeFromUrl(msg2["urlImageOptions"], false);
+      break;
+    case REMOVE_VOLUME_URL:
+      {
+        let volume = this.getMediaByUrl(msg2["url"]);
+        if (volume) {
+          this.removeVolume(volume, false);
+        }
+      }
+      break;
+    case REMOVE_MESH_URL: {
+      let mesh = this.getMediaByUrl(msg2["url"]);
+      if (mesh) {
+        this.removeMesh(mesh, false);
+      }
+    }
+    case SET_4D_VOL_INDEX:
+      {
+        let volume = this.getMediaByUrl(msg2["url"]);
+        if (volume) {
+          this.setFrame4D(volume.id, msg2["index"]);
+        }
+      }
+      break;
+    case UPDATE_IMAGE_OPTIONS: {
+      let volume = this.getMediaByUrl(msg2["urlImageOptions"].url);
+      if (volume) {
+        volume.applyOptionsUpdate(msg2["urlImageOptions"]);
+        this.updateGLVolume();
+      }
+    }
+  }
+};
 Niivue.prototype.subscribeToServer = function(sessionCreatedCallback, sessionJoinedCallback) {
   this.serverConnection$.subscribe({
     next: (msg2) => {
-      switch (msg2["op"]) {
-        case "update":
-          this.scene.renderAzimuth = msg2["azimuth"];
-          this.scene.renderElevation = msg2["elevation"];
-          this.volScaleMultiplier = msg2["zoom"];
-          this.scene.clipPlane = msg2["clipPlane"];
-          this.drawScene();
-          break;
-        case "create":
-          console.log(msg2);
-          if (!msg2["isError"]) {
-            this.isInSession = true;
-            this.sessionKey = msg2["key"];
-            this.setUpdateInterval();
-          }
-          if (sessionCreatedCallback) {
-            sessionCreatedCallback(msg2["message"], msg2["url"], msg2["key"], msg2["isError"]);
-          }
-          break;
-        case "join":
-          this.isInSession = true;
-          this.isController = msg2["isController"];
-          if (this.isController) {
-            this.setUpdateInterval();
-          }
-          if (sessionJoinedCallback) {
-            sessionJoinedCallback(msg2["message"], msg2["url"], msg2["isController"]);
-          }
-          break;
-      }
+      this.handleMessage(msg2, sessionCreatedCallback, sessionJoinedCallback);
     },
     error: (err2) => console.log(err2),
     complete: () => console.log("complete")
@@ -110770,17 +112016,12 @@ Niivue.prototype.subscribeToServer = function(sessionCreatedCallback, sessionJoi
 Niivue.prototype.createSession = function(wsServerUrl, sessionName, sessionCreatedCallback) {
   this.connectToServer(wsServerUrl, sessionName);
   this.subscribeToServer(sessionCreatedCallback);
-  this.serverConnection$.next({
-    op: "create"
-  });
+  this.serverConnection$.next(new NVMessage(CREATE));
 };
 Niivue.prototype.joinSession = function(wsServerUrl, sessionName, key2, sessionJoinedCallback) {
   this.connectToServer(wsServerUrl, sessionName);
   this.subscribeToServer(null, sessionJoinedCallback);
-  this.serverConnection$.next({
-    op: "join",
-    key: key2
-  });
+  this.serverConnection$.next(new NVMessage(JOIN, key2));
 };
 Niivue.prototype.closeSession = function() {
   this.interval$.complete();
@@ -110794,8 +112035,19 @@ Niivue.prototype.arrayEquals = function(a, b) {
 Niivue.prototype.resizeListener = function() {
   this.canvas.style.width = "100%";
   this.canvas.style.height = "100%";
-  this.canvas.width = this.canvas.offsetWidth;
-  this.canvas.height = this.canvas.offsetHeight;
+  if (this.opts.isHighResolutionCapable) {
+    this.scene.dpr = window.devicePixelRatio || 1;
+    console.log("devicePixelRatio: " + this.scene.dpr);
+  } else {
+    this.scene.dpr = 1;
+  }
+  if (this.canvas.parentElement.hasOwnProperty("width")) {
+    this.canvas.width = this.canvas.parentElement.width * this.scene.dpr;
+    this.canvas.height = this.canvas.parentElement.height * this.scene.dpr;
+  } else {
+    this.canvas.width = this.canvas.offsetWidth * this.scene.dpr;
+    this.canvas.height = this.canvas.offsetHeight * this.scene.dpr;
+  }
   this.drawScene();
 };
 Niivue.prototype.getRelativeMousePosition = function(event, target) {
@@ -110809,8 +112061,6 @@ Niivue.prototype.getRelativeMousePosition = function(event, target) {
 Niivue.prototype.getNoPaddingNoBorderCanvasRelativeMousePosition = function(event, target) {
   target = target || event.target;
   var pos = this.getRelativeMousePosition(event, target);
-  pos.x = pos.x * target.width / target.clientWidth;
-  pos.y = pos.y * target.height / target.clientHeight;
   return pos;
 };
 Niivue.prototype.mouseContextMenuListener = function(e) {
@@ -110835,10 +112085,11 @@ Niivue.prototype.mouseLeftButtonHandler = function(e) {
   this.mouseDown(pos.x, pos.y);
 };
 Niivue.prototype.mouseRightButtonHandler = function(e) {
-  this.isDragging = true;
   let pos = this.getNoPaddingNoBorderCanvasRelativeMousePosition(e, this.gl.canvas);
-  this.dragStart[0] = pos.x;
-  this.dragStart[1] = pos.y;
+  this.setDragStart(pos.x, pos.y);
+  if (!this.isDragging)
+    this.scene.pan2DxyzmmAtMouseDown = this.scene.pan2Dxyzmm.slice();
+  this.isDragging = true;
   this.dragClipPlaneStartDepthAziElev = this.scene.clipPlaneDepthAziElev;
   return;
 };
@@ -110870,13 +112121,11 @@ Niivue.prototype.calculateNewRange = function(volIdx = 0) {
   if (frac[0] < 0)
     return;
   let endVox = this.frac2vox(frac, volIdx);
-  let hi = -Number.MAX_VALUE, lo = Number.MAX_VALUE;
-  let xrange;
-  let yrange;
-  let zrange;
-  xrange = this.calculateMinMaxVoxIdx([startVox[0], endVox[0]]);
-  yrange = this.calculateMinMaxVoxIdx([startVox[1], endVox[1]]);
-  zrange = this.calculateMinMaxVoxIdx([startVox[2], endVox[2]]);
+  let hi = -Number.MAX_VALUE;
+  let lo = Number.MAX_VALUE;
+  let xrange = this.calculateMinMaxVoxIdx([startVox[0], endVox[0]]);
+  let yrange = this.calculateMinMaxVoxIdx([startVox[1], endVox[1]]);
+  let zrange = this.calculateMinMaxVoxIdx([startVox[2], endVox[2]]);
   if (startVox[0] - endVox[0] === 0) {
     xrange[1] = startVox[0] + 1;
   } else if (startVox[1] - endVox[1] === 0) {
@@ -110923,6 +112172,8 @@ Niivue.prototype.mouseUpListener = function() {
   this.drawPenAxCorSag = -1;
   if (this.isDragging) {
     this.isDragging = false;
+    if (this.opts.isDragForPanZoom)
+      return;
     if (this.opts.isDragShowsMeasurementTool)
       return;
     this.calculateNewRange();
@@ -110939,7 +112190,26 @@ Niivue.prototype.checkMultitouch = function(e) {
 };
 Niivue.prototype.touchStartListener = function(e) {
   e.preventDefault();
+  if (!this.touchTimer) {
+    this.touchTimer = setTimeout(() => {
+      this.resetBriCon(e);
+    }, this.opts.longTouchTimeout);
+  }
   this.scene.touchdown = true;
+  this.currentTouchTime = new Date().getTime();
+  let timeSinceTouch = this.currentTouchTime - this.lastTouchTime;
+  if (timeSinceTouch < this.opts.doubleTouchTimeout && timeSinceTouch > 0) {
+    this.doubleTouch = true;
+    this.setDragStart(e.targetTouches[0].clientX - e.target.getBoundingClientRect().left, e.targetTouches[0].clientY - e.target.getBoundingClientRect().top);
+    this.resetBriCon(e);
+    this.lastTouchTime = this.currentTouchTime;
+    return;
+  } else {
+    this.doubleTouch = false;
+    this.setDragStart(0, 0);
+    this.setDragEnd(0, 0);
+    this.lastTouchTime = this.currentTouchTime;
+  }
   if (this.scene.touchdown && e.touches.length < 2) {
     this.multiTouchGesture = false;
   } else {
@@ -110947,10 +112217,23 @@ Niivue.prototype.touchStartListener = function(e) {
   }
   setTimeout(this.checkMultitouch.bind(this), 1, e);
 };
-Niivue.prototype.touchEndListener = function() {
+Niivue.prototype.touchEndListener = function(e) {
+  e.preventDefault();
   this.scene.touchdown = false;
   this.lastTwoTouchDistance = 0;
   this.multiTouchGesture = false;
+  if (this.touchTimer) {
+    clearTimeout(this.touchTimer);
+    this.touchTimer = null;
+  }
+  if (this.isDragging) {
+    this.isDragging = false;
+    if (this.opts.isDragShowsMeasurementTool)
+      return;
+    this.calculateNewRange();
+    this.refreshLayers(this.volumes[0], 0, this.volumes.length);
+  }
+  this.drawScene();
 };
 Niivue.prototype.mouseMoveListener = function(e) {
   if (this.scene.mousedown) {
@@ -110959,8 +112242,7 @@ Niivue.prototype.mouseMoveListener = function(e) {
       this.mouseClick(pos.x, pos.y);
       this.mouseMove(pos.x, pos.y);
     } else if (this.scene.mouseButtonRightDown) {
-      this.dragEnd[0] = pos.x;
-      this.dragEnd[1] = pos.y;
+      this.setDragEnd(pos.x, pos.y);
     }
     this.drawScene();
     this.scene.prevX = this.scene.currX;
@@ -110968,12 +112250,24 @@ Niivue.prototype.mouseMoveListener = function(e) {
   }
 };
 Niivue.prototype.resetBriCon = function(msg2 = null) {
+  if (this.isDragging)
+    return;
   let isRender = false;
-  if (this.sliceType === this.sliceTypeRender) {
+  if (this.sliceType === this.sliceTypeRender)
     isRender = true;
-  }
+  let x2 = 0;
+  let y = 0;
   if (msg2 !== null) {
-    if (this.inRenderTile(msg2.offsetX, msg2.offsetY) >= 0)
+    if (msg2.targetTouches !== void 0) {
+      x2 = msg2.targetTouches[0].clientX - msg2.target.getBoundingClientRect().left;
+      y = msg2.targetTouches[0].clientY - msg2.target.getBoundingClientRect().top;
+    } else {
+      x2 = msg2.offsetX;
+      y = msg2.offsetY;
+    }
+    x2 *= this.scene.dpr;
+    y *= this.scene.dpr;
+    if (this.inRenderTile(x2, y) >= 0)
       isRender = true;
   }
   if (isRender) {
@@ -110982,15 +112276,37 @@ Niivue.prototype.resetBriCon = function(msg2 = null) {
     this.drawScene();
     return;
   }
+  if (this.doubleTouch)
+    return;
   this.volumes[0].cal_min = this.volumes[0].robust_min;
   this.volumes[0].cal_max = this.volumes[0].robust_max;
   this.opts.onIntensityChange(this.volumes[0]);
   this.refreshLayers(this.volumes[0], 0, this.volumes.length);
   this.drawScene();
 };
+Niivue.prototype.setDragStart = function(x2, y) {
+  x2 *= this.scene.dpr;
+  y *= this.scene.dpr;
+  this.dragStart[0] = x2;
+  this.dragStart[1] = y;
+};
+Niivue.prototype.setDragEnd = function(x2, y) {
+  x2 *= this.scene.dpr;
+  y *= this.scene.dpr;
+  this.dragEnd[0] = x2;
+  this.dragEnd[1] = y;
+};
 Niivue.prototype.touchMoveListener = function(e) {
   if (this.scene.touchdown && e.touches.length < 2) {
     var rect = this.canvas.getBoundingClientRect();
+    if (!this.isDragging)
+      this.scene.pan2DxyzmmAtMouseDown = this.scene.pan2Dxyzmm.slice();
+    this.isDragging = true;
+    if (this.doubleTouch && this.isDragging) {
+      this.setDragEnd(e.targetTouches[0].clientX - e.target.getBoundingClientRect().left, e.targetTouches[0].clientY - e.target.getBoundingClientRect().top);
+      this.drawScene();
+      return;
+    }
     this.mouseClick(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top);
     this.mouseMove(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top);
   } else {
@@ -111090,6 +112406,9 @@ Niivue.prototype.keyDownListener = function(e) {
 Niivue.prototype.wheelListener = function(e) {
   e.preventDefault();
   e.stopPropagation();
+  if (this.thumbnailVisible) {
+    return;
+  }
   var rect = this.canvas.getBoundingClientRect();
   if (e.deltaY < 0) {
     this.sliceScroll2D(-0.01, e.clientX - rect.left, e.clientY - rect.top);
@@ -111133,6 +112452,77 @@ Niivue.prototype.getFileExt = function(fullname, upperCase = true) {
   }
   return upperCase ? ext : ext.toLowerCase();
 };
+Niivue.prototype.loadVolumeFromUrl = async function(imageOptions) {
+  let volume = await NVImage.loadFromUrl(imageOptions);
+  return volume;
+};
+Niivue.prototype.notifySubscribersOfOptionChange = function(volume) {
+  if (this.isInSession) {
+    if (this.mediaUrlMap.has(volume)) {
+      let imageOptions = volume.getImageOptions();
+      imageOptions.url = this.mediaUrlMap.get(volume);
+      this.serverConnection$.next(new NVMessage(UPDATE_IMAGE_OPTIONS, imageOptions, this.sessionKey));
+      console.log("update called");
+    }
+  }
+};
+Niivue.prototype.addVolumeFromUrl = async function(imageOptions, notifySubscribers = true) {
+  let volume = await this.loadVolumeFromUrl(imageOptions);
+  this.addVolume(volume);
+  if (!this.mediaUrlMap.has(volume) && imageOptions.url) {
+    this.mediaUrlMap.set(volume, imageOptions.url);
+    if (this.isInSession && notifySubscribers) {
+      this.serverConnection$.next(new NVMessage(ADD_VOLUME_URL, imageOptions, this.sessionKey));
+    }
+  }
+  return volume;
+};
+Niivue.prototype.getMediaByUrl = function(url) {
+  return [...this.mediaUrlMap.entries()].filter((v) => v[1] == url).map((v) => v[0]).pop();
+};
+Niivue.prototype.removeVolumeByUrl = function(url) {
+  let volume = this.getMediaByUrl(url);
+  if (volume) {
+    this.removeVolume(volume);
+  }
+};
+Niivue.prototype.readDirectory = function(directory) {
+  let reader = directory.createReader();
+  let allEntiresInDir = [];
+  let getFileObjects = async (fileSystemEntries) => {
+    let allFileObects = [];
+    async function getFile(fileEntry) {
+      try {
+        return await new Promise((resolve, reject) => fileEntry.file(resolve, reject));
+      } catch (err2) {
+        console.log(err2);
+      }
+    }
+    for (let i2 = 0; i2 < fileSystemEntries.length; i2++) {
+      allFileObects.push(await getFile(fileSystemEntries[i2]));
+    }
+    return allFileObects;
+  };
+  let readEntries = () => {
+    reader.readEntries(async (entries) => {
+      if (entries.length) {
+        allEntiresInDir = allEntiresInDir.concat(entries);
+        readEntries();
+      } else {
+        let allFileObects = await getFileObjects(allEntiresInDir);
+        let volume = await NVImage.loadFromFile({
+          file: allFileObects,
+          name: directory.name,
+          urlImgData: null,
+          isDICOMDIR: true
+        });
+        this.addVolume(volume);
+      }
+    });
+  };
+  readEntries();
+  return allEntiresInDir;
+};
 Niivue.prototype.dropListener = async function(e) {
   e.stopPropagation();
   e.preventDefault();
@@ -111142,8 +112532,15 @@ Niivue.prototype.dropListener = async function(e) {
   const dt = e.dataTransfer;
   const url = dt.getData("text/uri-list");
   if (url) {
-    let volume = await NVImage.loadFromUrl({ url });
-    this.setVolume(volume);
+    let imageOptions = new NVImageFromUrlOptions(url);
+    let ext = this.getFileExt(url);
+    console.log("dropped ext");
+    console.log(ext);
+    if (MESH_EXTENSIONS.includes(ext)) {
+      this.addMeshFromUrl({ url });
+    } else {
+      this.addVolumeFromUrl(imageOptions);
+    }
   } else {
     const items = dt.items;
     if (items.length > 0) {
@@ -111154,6 +112551,7 @@ Niivue.prototype.dropListener = async function(e) {
       }
       for (const item of items) {
         const entry = item.getAsEntry || item.webkitGetAsEntry();
+        console.log(entry);
         if (entry.isFile) {
           let ext = this.getFileExt(entry.name);
           if (ext === "PNG") {
@@ -111176,7 +112574,7 @@ Niivue.prototype.dropListener = async function(e) {
           if (entry.name.lastIndexOf("BRIK") !== -1) {
             continue;
           }
-          if (ext === "ASC" || ext === "DFS" || ext === "FSM" || ext === "PIAL" || ext === "ORIG" || ext === "INFLATED" || ext === "SMOOTHWM" || ext === "SPHERE" || ext === "WHITE" || ext === "GII" || ext === "MZ3" || ext === "NV" || ext === "OBJ" || ext === "OFF" || ext === "PLY" || ext === "SRF" || ext === "STL" || ext === "TCK" || ext === "TRACT" || ext === "TRK" || ext === "TRX" || ext === "VTK" || ext === "X3D") {
+          if (MESH_EXTENSIONS.includes(ext)) {
             entry.file(async (file) => {
               let mesh = await NVMesh.loadFromFile({
                 file,
@@ -111205,8 +112603,9 @@ Niivue.prototype.dropListener = async function(e) {
               this.addVolume(volume);
             }
           });
-        } else if (entry.isDirectory)
-          ;
+        } else if (entry.isDirectory) {
+          this.readDirectory(entry);
+        }
       }
     }
   }
@@ -111236,6 +112635,15 @@ Niivue.prototype.setSliceMM = function(isSliceMM) {
 Niivue.prototype.getRadiologicalConvention = function() {
   return this.opts.isRadiologicalConvention;
 };
+Niivue.prototype.setHighResolutionCapable = function(isHighResolutionCapable) {
+  this.opts.isHighResolutionCapable = isHighResolutionCapable;
+  if (!this.opts.isHighResolutionCapable) {
+    this.scene.dpr = 1;
+  }
+  console.log("HighDPI feature is experimental");
+  this.resizeListener();
+  this.drawScene();
+};
 Niivue.prototype.addVolume = function(volume) {
   this.volumes.push(volume);
   let idx = this.volumes.length === 1 ? 0 : this.volumes.length - 1;
@@ -111332,12 +112740,12 @@ Niivue.prototype.drawAddUndoBitmap = async function(fnm) {
     return false;
   }
   this.currentDrawUndoBitmap++;
-  if (this.currentDrawUndoBitmap >= this.maxDrawUndoBitmaps)
+  if (this.currentDrawUndoBitmap >= this.opts.maxDrawUndoBitmaps)
     this.currentDrawUndoBitmap = 0;
   this.drawUndoBitmaps[this.currentDrawUndoBitmap] = encodeRLE(this.drawBitmap);
 };
 Niivue.prototype.drawClearAllUndoBitmaps = async function() {
-  this.currentDrawUndoBitmap = this.maxDrawUndoBitmaps;
+  this.currentDrawUndoBitmap = this.opts.maxDrawUndoBitmaps;
   if (this.drawUndoBitmaps.length < 1)
     return;
   for (let i2 = this.drawUndoBitmaps.length - 1; i2 >= 0; i2--)
@@ -111364,7 +112772,7 @@ Niivue.prototype.loadDrawing = async function(fnm) {
   if (this.drawBitmap)
     console.log("Overwriting open drawing!");
   this.drawClearAllUndoBitmaps();
-  let volume = await NVImage.loadFromUrl({ url: fnm });
+  let volume = await this.addVolumeFromUrl(new NVImageFromUrlOptions(fnm));
   let dims = volume.hdr.dims;
   if (dims[1] !== this.back.hdr.dims[1] || dims[2] !== this.back.hdr.dims[2] || dims[3] !== this.back.hdr.dims[3]) {
     console.log("drawing dimensions do not match background image");
@@ -111502,6 +112910,8 @@ Niivue.prototype.saveImage = async function(fnm, isSaveDrawing = false) {
   return true;
 };
 Niivue.prototype.getMeshIndexByID = function(id) {
+  if (typeof id === "number")
+    return id;
   let n = this.meshes.length;
   for (let i2 = 0; i2 < n; i2++) {
     let id_i = this.meshes[i2].id;
@@ -111542,10 +112952,6 @@ Niivue.prototype.setPan2Dxyzmm = function(xyzmmZoom) {
   this.scene.pan2Dxyzmm = xyzmmZoom;
   this.drawScene();
 };
-Niivue.prototype.setScale2D = function(zoomFactor) {
-  this.scene.scale2D = zoomFactor;
-  this.drawScene();
-};
 Niivue.prototype.setRenderAzimuthElevation = function(a, e) {
   this.scene.renderAzimuth = a;
   this.scene.renderElevation = e;
@@ -111617,11 +113023,43 @@ Niivue.prototype.setMesh = function(mesh, toIndex = 0) {
     log.debug(m.name);
   });
 };
-Niivue.prototype.removeVolume = function(volume) {
+Niivue.prototype.removeVolume = function(volume, notifySubscribers = true) {
   this.setVolume(volume, -1);
+  if (this.mediaUrlMap.has(volume)) {
+    let url = this.mediaUrlMap.get(volume);
+    if (notifySubscribers && this.isInSession) {
+      this.serverConnection$.next(new NVMessage(REMOVE_VOLUME_URL, url, this.sessionKey));
+    }
+    this.mediaUrlMap.delete(volume);
+  }
+};
+Niivue.prototype.removeVolumeByIndex = function(index) {
+  if (index >= this.volumes.length) {
+    throw "Index of volume out of bounds";
+  }
+  this.removeVolume(this.volumes[index]);
+};
+Niivue.prototype.removeVolumeByIndex = function(index) {
+  if (index >= this.volumes.length) {
+    throw "Index of volume out of bounds";
+  }
+  this.removeVolume(this.volumes[index]);
+};
+Niivue.prototype.removeVolumeByIndex = function(index) {
+  if (index >= this.volumes.length) {
+    throw "Index of volume out of bounds";
+  }
+  this.removeVolume(this.volumes[index]);
 };
-Niivue.prototype.removeMesh = function(mesh) {
+Niivue.prototype.removeMesh = function(mesh, notifySubscribers = true) {
   this.setMesh(mesh, -1);
+  let url = this.mediaUrlMap.get(mesh);
+  if (url) {
+    this.mediaUrlMap.delete(mesh);
+    if (notifySubscribers && this.isInSession) {
+      this.serverConnection$.next(new NVMessage(REMOVE_MESH_URL, url, this.sessionKey));
+    }
+  }
 };
 Niivue.prototype.moveVolumeToBottom = function(volume) {
   this.setVolume(volume, 0);
@@ -111638,11 +113076,15 @@ Niivue.prototype.moveVolumeToTop = function(volume) {
   this.setVolume(volume, this.volumes.length - 1);
 };
 Niivue.prototype.mouseDown = function mouseDown(x2, y) {
+  x2 *= this.scene.dpr;
+  y *= this.scene.dpr;
   if (this.inRenderTile(x2, y) < 0)
     return;
   this.mousePos = [x2, y];
 };
 Niivue.prototype.mouseMove = function mouseMove(x2, y) {
+  x2 *= this.scene.dpr;
+  y *= this.scene.dpr;
   if (this.inRenderTile(x2, y) < 0)
     return;
   this.scene.renderAzimuth += x2 - this.mousePos[0];
@@ -111676,6 +113118,11 @@ Niivue.prototype.setCrosshairColor = function(color) {
   this.opts.crosshairColor = color;
   this.drawScene();
 };
+Niivue.prototype.setCrosshairWidth = function(crosshairWidth) {
+  this.opts.crosshairWidth = crosshairWidth;
+  this.crosshairs3D.mm[0] = NaN;
+  this.drawScene();
+};
 Niivue.prototype.setDrawingEnabled = function(trueOrFalse) {
   this.opts.drawingEnabled = trueOrFalse;
   if (this.opts.drawingEnabled) {
@@ -111691,14 +113138,19 @@ Niivue.prototype.setPenValue = function(penValue, isFilledPen = false) {
 };
 Niivue.prototype.setDrawOpacity = function(opacity) {
   this.drawOpacity = opacity;
-  this.sliceShader.use(this.gl);
-  this.gl.uniform1f(this.sliceShader.uniforms["drawOpacity"], this.drawOpacity);
   this.drawScene();
 };
 Niivue.prototype.setSelectionBoxColor = function(color) {
   this.opts.selectionBoxColor = color;
 };
 Niivue.prototype.sliceScroll2D = function(posChange, x2, y, isDelta = true) {
+  if (posChange !== 0 && this.opts.isDragForPanZoom) {
+    let zoom = this.scene.pan2Dxyzmm[3] * (1 + 10 * posChange);
+    zoom = Math.round(zoom * 10) / 10;
+    this.scene.pan2Dxyzmm[3] = zoom;
+    this.drawScene();
+    return;
+  }
   this.mouseClick(x2, y, posChange, isDelta);
 };
 Niivue.prototype.setSliceType = function(st) {
@@ -111721,7 +113173,7 @@ Niivue.prototype.setScale = function(scale2) {
 Niivue.prototype.setClipPlaneColor = function(color) {
   this.opts.clipPlaneColor = color;
   this.renderShader.use(this.gl);
-  this.gl.uniform4fv(this.renderShader.uniforms["clipPlaneColor"], this.opts.clipPlaneColor);
+  this.gl.uniform4fv(this.renderShader.clipPlaneClrLoc, this.opts.clipPlaneColor);
   this.drawScene();
 };
 Niivue.prototype.overlayRGBA = function(volume) {
@@ -111782,7 +113234,7 @@ Niivue.prototype.loadVolumes = async function(volumeList) {
   this.scene.loading$.next(false);
   for (let i2 = 0; i2 < volumeList.length; i2++) {
     this.scene.loading$.next(true);
-    let volume = await NVImage.loadFromUrl({
+    let imageOptions = {
       url: volumeList[i2].url,
       name: volumeList[i2].name,
       colorMap: volumeList[i2].colorMap,
@@ -111792,12 +113244,30 @@ Niivue.prototype.loadVolumes = async function(volumeList) {
       cal_min: volumeList[i2].cal_min,
       cal_max: volumeList[i2].cal_max,
       trustCalMinMax: this.opts.trustCalMinMax
-    });
+    };
+    await this.addVolumeFromUrl(imageOptions);
     this.scene.loading$.next(false);
-    this.addVolume(volume);
   }
   return this;
 };
+Niivue.prototype.addMeshFromUrl = async function(meshOptions, notifySubscribers = true) {
+  let mesh = await this.loadMeshFromUrl(meshOptions);
+  this.addMesh(mesh);
+  if (!this.mediaUrlMap.has(mesh) && meshOptions.url) {
+    this.mediaUrlMap.set(mesh, meshOptions.url);
+    if (this.isInSession && notifySubscribers) {
+      this.serverConnection$.next(new NVMessage(ADD_MESH_URL, meshOptions, this.sessionKey));
+    }
+  }
+  return mesh;
+};
+Niivue.prototype.loadMeshFromUrl = async function(meshOptions) {
+  let options = new NVMeshFromUrlOptions();
+  options.gl = this.gl;
+  Object.assign(options, meshOptions);
+  let mesh = await NVMesh.loadFromUrl(options);
+  return mesh;
+};
 Niivue.prototype.loadMeshes = async function(meshList) {
   this.on("loading", (isLoading) => {
     if (isLoading) {
@@ -111819,17 +113289,8 @@ Niivue.prototype.loadMeshes = async function(meshList) {
   this.scene.loading$.next(false);
   for (let i2 = 0; i2 < meshList.length; i2++) {
     this.scene.loading$.next(true);
-    let mesh = await NVMesh.loadFromUrl({
-      url: meshList[i2].url,
-      gl: this.gl,
-      name: meshList[i2].name,
-      opacity: meshList[i2].opacity,
-      rgba255: meshList[i2].rgba255,
-      visible: meshList[i2].visible,
-      layers: meshList[i2].layers
-    });
+    await this.addMeshFromUrl(meshList[i2]);
     this.scene.loading$.next(false);
-    this.addMesh(mesh);
   }
   this.drawScene();
   return this;
@@ -111843,8 +113304,6 @@ Niivue.prototype.loadConnectome = async function(json) {
       this.loadingText = this.opts.loadingText;
     }
   });
-  if (!this.initialized)
-    ;
   this.meshes = [];
   this.gl.clearColor(0, 0, 0, 1);
   this.gl.clear(this.gl.COLOR_BUFFER_BIT);
@@ -112480,33 +113939,53 @@ Niivue.prototype.loadDefaultFont = async function() {
 Niivue.prototype.initText = async function() {
   this.fontShader = new Shader(this.gl, vertFontShader, fragFontShader);
   this.fontShader.use(this.gl);
+  this.fontShader.screenPxRangeLoc = this.fontShader.uniforms["screenPxRange"];
+  this.fontShader.fontColorLoc = this.fontShader.uniforms["fontColor"];
+  this.fontShader.canvasWidthHeightLoc = this.fontShader.uniforms["canvasWidthHeight"];
+  this.fontShader.leftTopWidthHeightLoc = this.fontShader.uniforms["leftTopWidthHeight"];
+  this.fontShader.uvLeftTopWidthHeightLoc = this.fontShader.uniforms["uvLeftTopWidthHeight"];
   await this.loadDefaultFont();
   this.drawLoadingText(this.loadingText);
 };
-Niivue.prototype.setMeshShader = function(meshShaderNameOrNumber = 2) {
-  this.gl.deleteProgram(this.meshShader.program);
+Niivue.prototype.meshShaderNameToNumber = function(meshShaderName = "Phong") {
+  let name = meshShaderName.toLowerCase();
+  for (var i2 = 0; i2 < this.meshShaders.length; i2++) {
+    if (this.meshShaders[i2].Name.toLowerCase() === name)
+      return i2;
+  }
+  i2 = -1;
+};
+Niivue.prototype.setMeshShader = function(id, meshShaderNameOrNumber = 2) {
   let num = 0;
   if (typeof meshShaderNameOrNumber === "number")
     num = meshShaderNameOrNumber;
   else {
-    let name = meshShaderNameOrNumber.toLowerCase();
-    for (var i2 = 0; i2 < this.meshShaders.length; i2++) {
-      if (this.meshShaders[i2].Name.toLowerCase() === name) {
-        num = i2;
-        break;
-      }
-    }
+    num = this.meshShaderNameToNumber(meshShaderNameOrNumber);
   }
   num = Math.min(num, this.meshShaders.length - 1);
   num = Math.max(num, 0);
-  this.meshShader = new Shader(this.gl, vertMeshShader, this.meshShaders[num].Frag);
+  let idx = this.getMeshIndexByID(id);
+  if (idx >= this.meshes.length) {
+    console.log("Unable to change shader until mesh is loaded (maybe you need async)");
+    return;
+  }
+  this.meshes[idx].meshShaderIndex = num;
   this.updateGLVolume();
 };
-Niivue.prototype.setCustomMeshShader = function(fragmentShaderText = "") {
-  if (fragmentShaderText.length < 1)
-    fragmentShaderText = this.meshShaders[0].Frag;
-  this.meshShader = new Shader(this.gl, vertMeshShader, fragmentShaderText);
-  this.updateGLVolume();
+Niivue.prototype.setCustomMeshShader = function(fragmentShaderText = "", name = "Custom") {
+  let num = this.meshShaderNameToNumber(name);
+  if (num >= 0) {
+    this.gl.deleteProgram(this.meshShaders[num].shader.program);
+    this.meshShaders.splice(num, 1);
+  }
+  let m = [];
+  m.Name = name;
+  m.Frag = fragmentShaderText;
+  m.shader = new Shader(this.gl, vertMeshShader, m.Frag);
+  m.shader.use(this.gl);
+  m.shader.mvpLoc = m.shader.uniforms["mvpMtx"];
+  this.meshShaders.push(m);
+  return this.meshShaders.length - 1;
 };
 Niivue.prototype.meshShaderNames = function(sort = true) {
   let cm = [];
@@ -112551,35 +114030,89 @@ Niivue.prototype.init = async function() {
   this.gl.enableVertexAttribArray(0);
   this.gl.vertexAttribPointer(0, 3, this.gl.FLOAT, false, 0, 0);
   this.gl.bindVertexArray(this.unusedVAO);
-  this.pickingShader = new Shader(this.gl, vertRenderShader, fragVolumePickingShader);
-  this.pickingShader.use(this.gl);
-  this.gl.uniform1i(this.pickingShader.uniforms["volume"], 0);
-  this.gl.uniform1i(this.pickingShader.uniforms["overlay"], 2);
-  this.pickingShader.mvpUniformLoc = this.pickingShader.uniforms["mvpMtx"];
-  this.pickingShader.rayDirUniformLoc = this.pickingShader.uniforms["rayDir"];
-  this.pickingShader.clipPlaneUniformLoc = this.pickingShader.uniforms["clipPlane"];
+  this.pickingMeshShader = new Shader(this.gl, vertMeshShader, fragMeshDepthShader);
+  this.pickingMeshShader.use(this.gl);
+  this.pickingMeshShader.mvpLoc = this.pickingMeshShader.uniforms["mvpMtx"];
+  this.pickingImageShader = new Shader(this.gl, vertRenderShader, fragVolumePickingShader);
+  this.pickingImageShader.use(this.gl);
+  this.pickingImageShader.drawOpacityLoc = this.pickingImageShader.uniforms["drawOpacity"];
+  this.pickingImageShader.backgroundMasksOverlaysLoc = this.pickingImageShader.uniforms["backgroundMasksOverlays"];
+  this.pickingImageShader.mvpLoc = this.pickingImageShader.uniforms["mvpMtx"];
+  this.gl.uniform1i(this.pickingImageShader.uniforms["volume"], 0);
+  this.gl.uniform1i(this.pickingImageShader.uniforms["overlay"], 2);
+  this.gl.uniform1i(this.pickingImageShader.uniforms["drawing"], 7);
+  this.pickingImageShader.mvpLoc = this.pickingImageShader.uniforms["mvpMtx"];
+  this.pickingImageShader.rayDirLoc = this.pickingImageShader.uniforms["rayDir"];
+  this.pickingImageShader.clipPlaneLoc = this.pickingImageShader.uniforms["clipPlane"];
   this.sliceShader = new Shader(this.gl, vertSliceShader, fragSliceShader);
   this.sliceShader.use(this.gl);
+  this.sliceShader.drawOpacityLoc = this.sliceShader.uniforms["drawOpacity"];
+  this.sliceShader.opacityLoc = this.sliceShader.uniforms["opacity"];
+  this.sliceShader.backgroundMasksOverlaysLoc = this.sliceShader.uniforms["backgroundMasksOverlays"];
+  this.sliceShader.axCorSagLoc = this.sliceShader.uniforms["axCorSag"];
+  this.sliceShader.sliceLoc = this.sliceShader.uniforms["slice"];
+  this.sliceShader.canvasWidthHeightLoc = this.sliceShader.uniforms["canvasWidthHeight"];
+  this.sliceShader.leftTopWidthHeightLoc = this.sliceShader.uniforms["leftTopWidthHeight"];
   this.gl.uniform1i(this.sliceShader.uniforms["volume"], 0);
   this.gl.uniform1i(this.sliceShader.uniforms["overlay"], 2);
   this.gl.uniform1i(this.sliceShader.uniforms["drawing"], 7);
   this.gl.uniform1f(this.sliceShader.uniforms["drawOpacity"], this.drawOpacity);
   this.sliceMMShader = new Shader(this.gl, vertSliceMMShader, fragSliceMMShader);
   this.sliceMMShader.use(this.gl);
+  this.sliceMMShader.drawOpacityLoc = this.sliceMMShader.uniforms["drawOpacity"];
+  this.sliceMMShader.backgroundMasksOverlaysLoc = this.sliceMMShader.uniforms["backgroundMasksOverlays"];
+  this.sliceMMShader.opacityLoc = this.sliceMMShader.uniforms["opacity"];
+  this.sliceMMShader.axCorSagLoc = this.sliceMMShader.uniforms["axCorSag"];
+  this.sliceMMShader.sliceLoc = this.sliceMMShader.uniforms["slice"];
+  this.sliceMMShader.frac2mmLoc = this.sliceMMShader.uniforms["frac2mm"];
+  this.sliceMMShader.mvpLoc = this.sliceMMShader.uniforms["mvpMtx"];
   this.gl.uniform1i(this.sliceMMShader.uniforms["volume"], 0);
   this.gl.uniform1i(this.sliceMMShader.uniforms["overlay"], 2);
   this.gl.uniform1i(this.sliceMMShader.uniforms["drawing"], 7);
   this.gl.uniform1f(this.sliceMMShader.uniforms["drawOpacity"], this.drawOpacity);
+  this.orientCubeShader = new Shader(this.gl, vertOrientCubeShader, fragOrientCubeShader);
+  let gl = this.gl;
+  this.orientCubeShaderVAO = gl.createVertexArray();
+  gl.bindVertexArray(this.orientCubeShaderVAO);
+  let program = this.orientCubeShader.program;
+  this.orientCubeMtxLoc = gl.getUniformLocation(program, "u_matrix");
+  var positionBuffer = gl.createBuffer();
+  gl.enableVertexAttribArray(0);
+  gl.enableVertexAttribArray(1);
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, orientCube, gl.STATIC_DRAW);
+  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0);
+  gl.enableVertexAttribArray(1);
+  gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12);
+  gl.bindVertexArray(this.unusedVAO);
   this.rectShader = new Shader(this.gl, vertRectShader, fragRectShader);
+  this.rectShader.use(this.gl);
+  this.rectShader.lineColorLoc = this.rectShader.uniforms["lineColor"];
+  this.rectShader.canvasWidthHeightLoc = this.rectShader.uniforms["canvasWidthHeight"];
+  this.rectShader.leftTopWidthHeightLoc = this.rectShader.uniforms["leftTopWidthHeight"];
   this.lineShader = new Shader(this.gl, vertLineShader, fragRectShader);
-  this.graphShader = new Shader(this.gl, vertGraphShader, fragRectShader);
+  this.lineShader.use(this.gl);
+  this.lineShader.lineColorLoc = this.lineShader.uniforms["lineColor"];
+  this.lineShader.canvasWidthHeightLoc = this.lineShader.uniforms["canvasWidthHeight"];
+  this.lineShader.thicknessLoc = this.lineShader.uniforms["thickness"];
+  this.lineShader.startXYendXYLoc = this.lineShader.uniforms["startXYendXY"];
   this.renderShader = new Shader(this.gl, vertRenderShader, fragRenderShader);
   this.renderShader.use(this.gl);
+  this.renderShader.drawOpacityLoc = this.renderShader.uniforms["drawOpacity"];
+  this.renderShader.backgroundMasksOverlaysLoc = this.renderShader.uniforms["backgroundMasksOverlays"];
   this.gl.uniform1i(this.renderShader.uniforms["volume"], 0);
   this.gl.uniform1i(this.renderShader.uniforms["overlay"], 2);
-  this.renderShader.mvpUniformLoc = this.renderShader.uniforms["mvpMtx"], this.renderShader.mvpMatRASLoc = this.renderShader.uniforms["matRAS"];
-  this.renderShader.rayDirUniformLoc = this.renderShader.uniforms["rayDir"], this.renderShader.clipPlaneUniformLoc = this.renderShader.uniforms["clipPlane"], this.colorbarShader = new Shader(this.gl, vertColorbarShader, fragColorbarShader);
+  this.gl.uniform1i(this.renderShader.uniforms["drawing"], 7);
+  this.renderShader.mvpLoc = this.renderShader.uniforms["mvpMtx"];
+  this.renderShader.clipPlaneClrLoc = this.renderShader.uniforms["clipPlaneColor"];
+  this.renderShader.mvpMatRASLoc = this.renderShader.uniforms["matRAS"];
+  this.renderShader.rayDirLoc = this.renderShader.uniforms["rayDir"];
+  this.renderShader.clipPlaneLoc = this.renderShader.uniforms["clipPlane"];
+  this.colorbarShader = new Shader(this.gl, vertColorbarShader, fragColorbarShader);
   this.colorbarShader.use(this.gl);
+  this.colorbarShader.layerLoc = this.colorbarShader.uniforms["layer"];
+  this.colorbarShader.canvasWidthHeightLoc = this.colorbarShader.uniforms["canvasWidthHeight"];
+  this.colorbarShader.leftTopWidthHeightLoc = this.colorbarShader.uniforms["leftTopWidthHeight"];
   this.gl.uniform1i(this.colorbarShader.uniforms["colormap"], 1);
   this.growCutShader = new Shader(this.gl, vertGrowCutShader, fragGrowCutShader);
   this.passThroughShader = new Shader(this.gl, vertPassThroughShader, fragPassThroughShader);
@@ -112588,10 +114121,19 @@ Niivue.prototype.init = async function() {
   this.orientShaderI = new Shader(this.gl, vertOrientShader, fragOrientShaderI.concat(fragOrientShader));
   this.orientShaderF = new Shader(this.gl, vertOrientShader, fragOrientShaderF.concat(fragOrientShader));
   this.orientShaderRGBU = new Shader(this.gl, vertOrientShader, fragOrientShaderU.concat(fragRGBOrientShader));
-  this.pickingSurfaceShader = new Shader(this.gl, vertRenderShader, fragDepthPickingShader);
   this.surfaceShader = new Shader(this.gl, vertSurfaceShader, fragSurfaceShader);
+  this.surfaceShader.use(this.gl);
+  this.surfaceShader.mvpLoc = this.surfaceShader.uniforms["mvpMtx"];
+  this.surfaceShader.colorLoc = this.surfaceShader.uniforms["surfaceColor"];
   this.fiberShader = new Shader(this.gl, vertFiberShader, fragFiberShader);
-  this.meshShader = new Shader(this.gl, vertMeshShader, this.meshShaders[0].Frag);
+  this.pickingImageShader.use(this.gl);
+  this.fiberShader.mvpLoc = this.fiberShader.uniforms["mvpMtx"];
+  for (var i2 = 0; i2 < this.meshShaders.length; i2++) {
+    let m = this.meshShaders[i2];
+    m.shader = new Shader(this.gl, vertMeshShader, m.Frag);
+    m.shader.use(this.gl);
+    m.shader.mvpLoc = m.shader.uniforms["mvpMtx"];
+  }
   this.bmpShader = new Shader(this.gl, vertBmpShader, fragBmpShader);
   await this.initText();
   if (this.opts.thumbnail.length > 0) {
@@ -112600,6 +114142,7 @@ Niivue.prototype.init = async function() {
   }
   this.updateGLVolume();
   this.initialized = true;
+  this.resizeListener();
   this.drawScene();
   return this;
 };
@@ -112673,7 +114216,6 @@ Niivue.prototype.getDescriptives = function(layer = 0, ignoreZeros = false, mask
     M = Mnext;
   }
   let stdev = Math.sqrt(S / (k - 1));
-  "Number of voxels: " + k + "\nMean:" + M + "\nMin:" + mn + "\nMax:" + mx + "\nStandard deviation: " + stdev + "\nRobust Min: " + this.volumes[layer].robust_min + "\nRobust Max: " + this.volumes[layer].robust_max;
   return {
     mean: M,
     stdev,
@@ -112684,7 +114226,7 @@ Niivue.prototype.getDescriptives = function(layer = 0, ignoreZeros = false, mask
     robust_max: this.volumes[layer].robust_max
   };
 };
-Niivue.prototype.refreshLayers = function(overlayItem, layer, numLayers) {
+Niivue.prototype.refreshLayers = function(overlayItem, layer) {
   if (this.volumes.length < 1)
     return;
   let hdr = overlayItem.hdr;
@@ -112711,8 +114253,7 @@ Niivue.prototype.refreshLayers = function(overlayItem, layer, numLayers) {
     this.renderShader.use(this.gl);
     this.gl.uniform3fv(this.renderShader.uniforms["texVox"], vox2);
     this.gl.uniform3fv(this.renderShader.uniforms["volScale"], volScale2);
-    this.renderShader;
-    let pickingShader = this.pickingShader;
+    let pickingShader = this.pickingImageShader;
     pickingShader.use(this.gl);
     this.gl.uniform1i(pickingShader.uniforms["volume"], 0);
     this.gl.uniform1i(pickingShader.uniforms["colormap"], 1);
@@ -112894,14 +114435,14 @@ Niivue.prototype.refreshLayers = function(overlayItem, layer, numLayers) {
   let vox = slicescl.vox;
   let volScale = slicescl.volScale;
   this.gl.uniform1f(this.renderShader.uniforms["overlays"], this.overlays);
-  this.gl.uniform4fv(this.renderShader.uniforms["clipPlaneColor"], this.opts.clipPlaneColor);
+  this.gl.uniform4fv(this.renderShader.clipPlaneClrLoc, this.opts.clipPlaneColor);
   this.gl.uniform1f(this.renderShader.uniforms["backOpacity"], this.volumes[0].opacity);
   this.gl.uniform4fv(this.renderShader.uniforms["clipPlane"], this.scene.clipPlane);
   this.gl.uniform3fv(this.renderShader.uniforms["texVox"], vox);
   this.gl.uniform3fv(this.renderShader.uniforms["volScale"], volScale);
-  this.pickingShader.use(this.gl);
-  this.gl.uniform1f(this.pickingShader.uniforms["overlays"], this.overlays.length);
-  this.gl.uniform3fv(this.pickingShader.uniforms["texVox"], vox);
+  this.pickingImageShader.use(this.gl);
+  this.gl.uniform1f(this.pickingImageShader.uniforms["overlays"], this.overlays.length);
+  this.gl.uniform3fv(this.pickingImageShader.uniforms["texVox"], vox);
   this.sliceMMShader.use(this.gl);
   this.gl.uniform1f(this.sliceMMShader.uniforms["overlays"], this.overlays.length);
   this.gl.uniform1f(this.sliceMMShader.uniforms["drawOpacity"], this.drawOpacity);
@@ -112948,6 +114489,10 @@ Niivue.prototype.setFrame4D = function(id, frame4D) {
   }
   this.volumes[idx].frame4D = frame4D;
   this.updateGLVolume();
+  if (this.isInSession && this.mediaUrlMap.has(this.volumes[idx])) {
+    let url = this.mediaUrlMap.get(this.volumes[idx]);
+    this.serverConnection$.next(new NVMessage(SET_4D_VOL_INDEX, new NVMessageSet4DVolumeIndexData(url, frame4D), this.sessionKey));
+  }
 };
 Niivue.prototype.getFrame4D = function(id) {
   let idx = this.getVolumeIndexByID(id);
@@ -112974,12 +114519,12 @@ Niivue.prototype.refreshColormaps = function() {
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_R, this.gl.CLAMP_TO_EDGE);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
   this.gl.pixelStorei(this.gl.UNPACK_ALIGNMENT, 1);
-  let luts2 = this.colormap(this.volumes[0].colorMap);
+  let luts = this.colormap(this.volumes[0].colorMap);
   function addColormap(lut) {
-    let c2 = new Uint8ClampedArray(luts2.length + lut.length);
-    c2.set(luts2);
-    c2.set(lut, luts2.length);
-    luts2 = c2;
+    let c2 = new Uint8ClampedArray(luts.length + lut.length);
+    c2.set(luts);
+    c2.set(lut, luts.length);
+    luts = c2;
   }
   for (let i2 = 1; i2 < nLayer; i2++)
     addColormap(this.colormap(this.volumes[i2].colorMap));
@@ -112998,7 +114543,7 @@ Niivue.prototype.refreshColormaps = function() {
       lut = this.colormap(this.volumes[i2].colorMapNegative);
     addColormap(lut);
   }
-  this.gl.texSubImage2D(this.gl.TEXTURE_2D, 0, 0, 0, 256, nLayer * 2, this.gl.RGBA, this.gl.UNSIGNED_BYTE, luts2);
+  this.gl.texSubImage2D(this.gl.TEXTURE_2D, 0, 0, 0, 256, nLayer * 2, this.gl.RGBA, this.gl.UNSIGNED_BYTE, luts);
   return this;
 };
 Niivue.prototype.sliceScale = function() {
@@ -113051,6 +114596,8 @@ Niivue.prototype.sliceScroll3D = function(posChange = 0) {
   this.drawScene();
 };
 Niivue.prototype.mouseClick = function(x2, y, posChange = 0, isDelta = true) {
+  x2 *= this.scene.dpr;
+  y *= this.scene.dpr;
   var posNow;
   var posFuture;
   this.canvas.focus();
@@ -113178,13 +114725,13 @@ Niivue.prototype.drawRuler = function() {
 Niivue.prototype.drawRuler10cm = function(startXYendXY) {
   this.gl.bindVertexArray(this.genericVAO);
   this.lineShader.use(this.gl);
-  this.gl.uniform4fv(this.lineShader.uniforms["lineColor"], this.opts.rulerColor);
-  this.gl.uniform2fv(this.lineShader.uniforms["canvasWidthHeight"], [
+  this.gl.uniform4fv(this.lineShader.lineColorLoc, this.opts.rulerColor);
+  this.gl.uniform2fv(this.lineShader.canvasWidthHeightLoc, [
     this.gl.canvas.width,
     this.gl.canvas.height
   ]);
-  this.gl.uniform1f(this.lineShader.uniforms["thickness"], this.opts.rulerWidth);
-  this.gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], startXYendXY);
+  this.gl.uniform1f(this.lineShader.thicknessLoc, this.opts.rulerWidth);
+  this.gl.uniform4fv(this.lineShader.startXYendXYLoc, startXYendXY);
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   let w1cm = -0.1 * (startXYendXY[0] - startXYendXY[2]);
   let b = startXYendXY[1];
@@ -113195,11 +114742,45 @@ Niivue.prototype.drawRuler10cm = function(startXYendXY) {
     let xyxy = [l, b, l, t];
     if (i2 % 5 === 0)
       xyxy[3] = t2;
-    this.gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], xyxy);
+    this.gl.uniform4fv(this.lineShader.startXYendXYLoc, xyxy);
     this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   }
   this.gl.bindVertexArray(this.unusedVAO);
 };
+Niivue.prototype.screenXY2mm = function(x2, y, forceSlice = -1) {
+  for (let s = 0; s < this.screenSlices.length; s++) {
+    let i2 = s;
+    if (forceSlice >= 0)
+      i2 = forceSlice;
+    var axCorSag = this.screenSlices[i2].axCorSag;
+    if (axCorSag > this.sliceTypeSagittal)
+      continue;
+    let ltwh = this.screenSlices[i2].leftTopWidthHeight;
+    if (x2 < ltwh[0] || y < ltwh[1] || x2 > ltwh[0] + ltwh[2] || y > ltwh[1] + ltwh[3])
+      continue;
+    console.log(this.screenSlices[i2].leftTopWidthHeight, x2, y);
+    let texFrac = this.screenXY2TextureFrac(x2, y, i2, false);
+    if (forceSlice < 0 && texFrac[0] < 0)
+      continue;
+    let mm = this.frac2mm(texFrac);
+    return [mm[0], mm[1], mm[2], i2];
+  }
+  return [NaN, NaN, NaN, NaN];
+};
+Niivue.prototype.dragForPanZoom = function(startXYendXY) {
+  let endMM = this.screenXY2mm(startXYendXY[2], startXYendXY[3]);
+  if (isNaN(endMM[0]))
+    return;
+  let startMM = this.screenXY2mm(startXYendXY[0], startXYendXY[1], endMM[3]);
+  if (isNaN(startMM[0]) || isNaN(endMM[0]) || endMM[3] !== endMM[3]) {
+    return;
+  }
+  let v = create$1();
+  sub(v, endMM, startMM);
+  this.scene.pan2Dxyzmm[0] = this.scene.pan2DxyzmmAtMouseDown[0] + v[0];
+  this.scene.pan2Dxyzmm[1] = this.scene.pan2DxyzmmAtMouseDown[1] + v[1];
+  this.scene.pan2Dxyzmm[2] = this.scene.pan2DxyzmmAtMouseDown[2] + v[2];
+};
 Niivue.prototype.drawMeasurementTool = function(startXYendXY) {
   let gl = this.gl;
   gl.bindVertexArray(this.genericVAO);
@@ -113207,26 +114788,26 @@ Niivue.prototype.drawMeasurementTool = function(startXYendXY) {
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   this.lineShader.use(this.gl);
-  gl.uniform4fv(this.lineShader.uniforms["lineColor"], this.opts.rulerColor);
-  gl.uniform2fv(this.lineShader.uniforms["canvasWidthHeight"], [
+  gl.uniform4fv(this.lineShader.lineColorLoc, this.opts.rulerColor);
+  gl.uniform2fv(this.lineShader.canvasWidthHeightLoc, [
     gl.canvas.width,
     gl.canvas.height
   ]);
-  gl.uniform1f(this.lineShader.uniforms["thickness"], this.opts.rulerWidth);
-  gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], startXYendXY);
+  gl.uniform1f(this.lineShader.thicknessLoc, this.opts.rulerWidth);
+  gl.uniform4fv(this.lineShader.startXYendXYLoc, startXYendXY);
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
   let c2 = this.opts.rulerColor;
   c2[3] = 1;
-  gl.uniform4fv(this.lineShader.uniforms["lineColor"], c2);
+  gl.uniform4fv(this.lineShader.lineColorLoc, c2);
   let w = this.opts.rulerWidth;
-  gl.uniform1f(this.lineShader.uniforms["thickness"], w * 2);
+  gl.uniform1f(this.lineShader.thicknessLoc, w * 2);
   let sXYeXY = [
     startXYendXY[0],
     startXYendXY[1] - w,
     startXYendXY[0],
     startXYendXY[1] + w
   ];
-  gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], sXYeXY);
+  gl.uniform4fv(this.lineShader.startXYendXYLoc, sXYeXY);
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
   sXYeXY = [
     startXYendXY[2],
@@ -113234,7 +114815,7 @@ Niivue.prototype.drawMeasurementTool = function(startXYendXY) {
     startXYendXY[2],
     startXYendXY[3] + w
   ];
-  gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], sXYeXY);
+  gl.uniform4fv(this.lineShader.startXYendXYLoc, sXYeXY);
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
   let startXY = this.canvasPos2frac([startXYendXY[0], startXYendXY[1]]);
   let endXY = this.canvasPos2frac([startXYendXY[2], startXYendXY[3]]);
@@ -113254,21 +114835,23 @@ Niivue.prototype.drawMeasurementTool = function(startXYendXY) {
   }
   gl.bindVertexArray(this.unusedVAO);
 };
-Niivue.prototype.drawBox = function(leftTopWidthHeight, lineColor = [1, 0, 0, 1]) {
+Niivue.prototype.drawRect = function(leftTopWidthHeight, lineColor = [1, 0, 0, -1]) {
+  if (lineColor[3] < 0)
+    lineColor = this.opts.crosshairColor;
   this.rectShader.use(this.gl);
   this.gl.enable(this.gl.BLEND);
-  this.gl.uniform4fv(this.rectShader.uniforms["lineColor"], lineColor);
-  this.gl.uniform2fv(this.rectShader.uniforms["canvasWidthHeight"], [
+  this.gl.uniform4fv(this.rectShader.lineColorLoc, lineColor);
+  this.gl.uniform2fv(this.rectShader.canvasWidthHeightLoc, [
     this.gl.canvas.width,
     this.gl.canvas.height
   ]);
-  this.gl.uniform4f(this.rectShader.uniforms["leftTopWidthHeight"], leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
+  this.gl.uniform4f(this.rectShader.leftTopWidthHeightLoc, leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
   this.gl.bindVertexArray(this.genericVAO);
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   this.gl.bindVertexArray(this.unusedVAO);
 };
-Niivue.prototype.drawSelectionBox = function(leftTopWidthHeight, lineColor = [1, 0, 0, 1]) {
-  this.drawBox(leftTopWidthHeight, this.opts.selectionBoxColor);
+Niivue.prototype.drawSelectionBox = function(leftTopWidthHeight) {
+  this.drawRect(leftTopWidthHeight, this.opts.selectionBoxColor);
 };
 function tickSpacingX(tickCount, mn, mx) {
   let range = Math.abs(mx - mn);
@@ -113285,13 +114868,22 @@ function tickSpacingX(tickCount, mn, mx) {
     ticMin = Math.sign(ticMin) * Math.round(Math.abs(ticMin));
   return [spacing, ticMin];
 }
+function isDivisible(num, denom) {
+  return Math.abs(num - Math.round(num / denom) * (denom / num)) < 1e-5;
+}
 function tickSpacing(mn, mx) {
   let range = Math.abs(mx - mn);
   let [spacing, ticMin] = tickSpacingX(5, mn, mx);
-  if (range % spacing === 0)
+  if (isDivisible(range, spacing))
     return [spacing, ticMin];
   [spacing, ticMin] = tickSpacingX(4, mn, mx);
-  if (range % spacing === 0)
+  if (isDivisible(range, spacing))
+    return [spacing, ticMin];
+  [spacing, ticMin] = tickSpacingX(6, mn, mx);
+  if (isDivisible(range, spacing))
+    return [spacing, ticMin];
+  [spacing, ticMin] = tickSpacingX(7, mn, mx);
+  if (isDivisible(range, spacing))
     return [spacing, ticMin];
   [spacing, ticMin] = tickSpacingX(5, mn, mx);
   return [spacing, ticMin];
@@ -113332,13 +114924,6 @@ Niivue.prototype.drawColorbarCore = function(layer = 0, leftTopWidthHeight = [0,
   }
   this.gl.disable(this.gl.DEPTH_TEST);
   this.colorbarHeight = leftTopWidthHeight[3] + 1;
-  [
-    this.opts.backColor[0],
-    this.opts.backColor[1],
-    this.opts.backColor[2],
-    0.5
-  ];
-  leftTopWidthHeight[1];
   let barLTWH = [
     leftTopWidthHeight[0] + margin,
     leftTopWidthHeight[1],
@@ -113351,7 +114936,7 @@ Niivue.prototype.drawColorbarCore = function(layer = 0, leftTopWidthHeight = [0,
     barLTWH[2] + 2,
     barLTWH[3] + 2
   ];
-  this.drawBox(rimLTWH, this.opts.crosshairColor);
+  this.drawRect(rimLTWH, this.opts.crosshairColor);
   this.colorbarShader.use(this.gl);
   this.gl.activeTexture(this.gl.TEXTURE1);
   this.gl.bindTexture(this.gl.TEXTURE_2D, this.colormapTexture);
@@ -113360,12 +114945,12 @@ Niivue.prototype.drawColorbarCore = function(layer = 0, leftTopWidthHeight = [0,
   let lx = layer;
   if (isNegativeColor)
     lx += this.volumes.length;
-  this.gl.uniform1f(this.colorbarShader.uniforms["layer"], lx);
-  this.gl.uniform2fv(this.colorbarShader.uniforms["canvasWidthHeight"], [
+  this.gl.uniform1f(this.colorbarShader.layerLoc, lx);
+  this.gl.uniform2fv(this.colorbarShader.canvasWidthHeightLoc, [
     this.gl.canvas.width,
     this.gl.canvas.height
   ]);
-  this.gl.uniform4fv(this.colorbarShader.uniforms["leftTopWidthHeight"], barLTWH);
+  this.gl.uniform4fv(this.colorbarShader.leftTopWidthHeightLoc, barLTWH);
   this.gl.bindVertexArray(this.genericVAO);
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   this.gl.bindVertexArray(this.unusedVAO);
@@ -113385,7 +114970,7 @@ Niivue.prototype.drawColorbarCore = function(layer = 0, leftTopWidthHeight = [0,
   let txtTop = ticLTWH[1] + ticLTWH[3];
   while (tic <= max2) {
     ticLTWH[0] = barLTWH[0] + (tic - min2) / range * barLTWH[2];
-    this.drawBox(ticLTWH);
+    this.drawRect(ticLTWH);
     let str = humanize(tic);
     if (isNegativeColor)
       str = "-" + str;
@@ -113434,8 +115019,8 @@ Niivue.prototype.drawChar = function(xy, scale2, char) {
   let w = scale2 * metrics2.lbwh[2];
   let h = scale2 * metrics2.lbwh[3];
   let t = xy[1] + (b - h) + scale2;
-  this.gl.uniform4f(this.fontShader.uniforms["leftTopWidthHeight"], l, t, w, h);
-  this.gl.uniform4fv(this.fontShader.uniforms["uvLeftTopWidthHeight"], metrics2.uv_lbwh);
+  this.gl.uniform4f(this.fontShader.leftTopWidthHeightLoc, l, t, w, h);
+  this.gl.uniform4fv(this.fontShader.uvLeftTopWidthHeightLoc, metrics2.uv_lbwh);
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   return scale2 * metrics2.xadv;
 };
@@ -113452,13 +115037,13 @@ Niivue.prototype.drawText = function(xy, str, scale2 = 1, color = null) {
   this.fontShader.use(this.gl);
   let size = this.opts.textHeight * Math.min(this.gl.canvas.height, this.gl.canvas.width) * scale2;
   this.gl.enable(this.gl.BLEND);
-  this.gl.uniform2f(this.fontShader.uniforms["canvasWidthHeight"], this.gl.canvas.width, this.gl.canvas.height);
+  this.gl.uniform2f(this.fontShader.canvasWidthHeightLoc, this.gl.canvas.width, this.gl.canvas.height);
   if (color === null)
     color = this.opts.crosshairColor;
-  this.gl.uniform4fv(this.fontShader.uniforms["fontColor"], color);
+  this.gl.uniform4fv(this.fontShader.fontColorLoc, color);
   let screenPxRange = size / this.fontMets.size * this.fontMets.distanceRange;
   screenPxRange = Math.max(screenPxRange, 1);
-  this.gl.uniform1f(this.fontShader.uniforms["screenPxRange"], screenPxRange);
+  this.gl.uniform1f(this.fontShader.screenPxRangeLoc, screenPxRange);
   var bytes = new TextEncoder().encode(str);
   this.gl.bindVertexArray(this.genericVAO);
   for (let i2 = 0; i2 < str.length; i2++)
@@ -113482,7 +115067,6 @@ Niivue.prototype.drawTextLeft = function(xy, str, scale2 = 1, color = null) {
 Niivue.prototype.drawTextRightBelow = function(xy, str, scale2 = 1, color = null) {
   if (this.opts.textHeight <= 0)
     return;
-  this.opts.textHeight * this.gl.canvas.height * scale2;
   this.drawText(xy, str, scale2, color);
 };
 Niivue.prototype.drawTextBetween = function(startXYendXY, str, scale2 = 1, color = null) {
@@ -113545,7 +115129,7 @@ function deg2rad(deg) {
 }
 Niivue.prototype.calculateMvpMatrix2D = function(leftTopWidthHeight, mn, mx, clipTolerance = Infinity, clipDepth = 0, azimuth = null, elevation = null, isRadiolgical) {
   let gl = this.gl;
-  gl.viewport(leftTopWidthHeight[0], this.gl.canvas.clientHeight - (leftTopWidthHeight[1] + leftTopWidthHeight[3]), leftTopWidthHeight[2], leftTopWidthHeight[3]);
+  gl.viewport(leftTopWidthHeight[0], this.gl.canvas.height - (leftTopWidthHeight[1] + leftTopWidthHeight[3]), leftTopWidthHeight[2], leftTopWidthHeight[3]);
   let left = mn[0];
   let right = mx[0];
   let leftTopMM = [left, mn[1]];
@@ -113606,7 +115190,6 @@ Niivue.prototype.screenFieldOfViewMM = function(axCorSag = 0, forceSliceMM = fal
   }
   let mnMM = this.volumeObject3D.extentsMin.slice();
   let mxMM = this.volumeObject3D.extentsMax.slice();
-  create$2();
   mnMM = this.swizzleVec3MM(mnMM, axCorSag);
   mxMM = this.swizzleVec3MM(mxMM, axCorSag);
   let fovMM = create$1();
@@ -113734,15 +115317,16 @@ Niivue.prototype.draw2DMM = function(leftTopWidthHeight, axCorSag, customMM = Na
   gl.depthFunc(gl.GREATER);
   gl.disable(gl.CULL_FACE);
   this.sliceMMShader.use(this.gl);
-  this.gl.uniform1i(this.sliceMMShader.uniforms["backgroundMasksOverlays"], this.backgroundMasksOverlays);
-  this.gl.uniform1f(this.sliceMMShader.uniforms["opacity"], this.volumes[0].opacity);
-  this.gl.uniform1i(this.sliceMMShader.uniforms["axCorSag"], axCorSag);
-  this.gl.uniform1f(this.sliceMMShader.uniforms["slice"], sliceFrac);
-  this.gl.uniformMatrix4fv(this.sliceMMShader.uniforms["frac2mm"], false, this.volumes[0].frac2mm);
-  this.gl.uniformMatrix4fv(this.sliceMMShader.uniforms["mvpMtx"], false, obj.modelViewProjectionMatrix.slice());
-  this.gl.bindVertexArray(this.genericVAO);
-  this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
-  this.gl.bindVertexArray(this.unusedVAO);
+  gl.uniform1i(this.sliceMMShader.backgroundMasksOverlaysLoc, this.backgroundMasksOverlays);
+  gl.uniform1f(this.sliceMMShader.drawOpacityLoc, this.drawOpacity);
+  gl.uniform1f(this.sliceMMShader.opacityLoc, this.volumes[0].opacity);
+  gl.uniform1i(this.sliceMMShader.axCorSagLoc, axCorSag);
+  gl.uniform1f(this.sliceMMShader.sliceLoc, sliceFrac);
+  gl.uniformMatrix4fv(this.sliceMMShader.frac2mmLoc, false, this.volumes[0].frac2mm);
+  gl.uniformMatrix4fv(this.sliceMMShader.mvpLoc, false, obj.modelViewProjectionMatrix.slice());
+  gl.bindVertexArray(this.genericVAO);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  gl.bindVertexArray(this.unusedVAO);
   this.screenSlices.push({
     leftTopWidthHeight,
     axCorSag,
@@ -113752,7 +115336,7 @@ Niivue.prototype.draw2DMM = function(leftTopWidthHeight, axCorSag, customMM = Na
     fovMM: obj.fovMM
   });
   if (isNaN(customMM)) {
-    this.drawCrosshairs3D(true, 1, obj.modelViewProjectionMatrix);
+    this.drawCrosshairs3D(true, 1, obj.modelViewProjectionMatrix, true);
   }
   if (this.opts.meshThicknessOn2D > 0) {
     if (this.opts.meshThicknessOn2D !== Infinity)
@@ -113760,18 +115344,19 @@ Niivue.prototype.draw2DMM = function(leftTopWidthHeight, axCorSag, customMM = Na
     this.drawMesh3D(true, 1, obj.modelViewProjectionMatrix, obj.modelMatrix, obj.normalMatrix);
   }
   if (isNaN(customMM))
-    this.drawCrosshairs3D(false, 0.15, obj.modelViewProjectionMatrix);
+    this.drawCrosshairs3D(false, 0.15, obj.modelViewProjectionMatrix, true);
   this.drawSliceOrientationText(leftTopWidthHeight, axCorSag);
   this.readyForSync = true;
 };
+Niivue.prototype.drawCro;
 Niivue.prototype.draw2DVox = function(leftTopWidthHeight, axCorSag, customMM = NaN) {
+  let gl = this.gl;
   let fovMM = this.screenFieldOfViewMM(axCorSag);
   if (leftTopWidthHeight[2] === 0 || leftTopWidthHeight[3] === 0) {
     leftTopWidthHeight = this.scaleSlice(fovMM[0], fovMM[1]);
   }
-  this.gl.cullFace(this.gl.FRONT);
+  gl.cullFace(gl.FRONT);
   let ltwh = leftTopWidthHeight.slice();
-  let gl = this.gl;
   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
   gl.disable(gl.DEPTH_TEST);
   let sliceDim = 2;
@@ -113806,22 +115391,23 @@ Niivue.prototype.draw2DVox = function(leftTopWidthHeight, axCorSag, customMM = N
   if (this.opts.sagittalNoseLeft && axCorSag === this.sliceTypeSagittal)
     isMirrorLR = !isMirrorLR;
   this.sliceShader.use(this.gl);
-  this.gl.uniform1f(this.sliceShader.uniforms["opacity"], this.volumes[0].opacity);
-  this.gl.uniform1i(this.sliceShader.uniforms["backgroundMasksOverlays"], this.backgroundMasksOverlays);
-  this.gl.uniform1i(this.sliceShader.uniforms["axCorSag"], axCorSag);
-  this.gl.uniform1f(this.sliceShader.uniforms["slice"], crossXYZ[2]);
-  this.gl.uniform2fv(this.sliceShader.uniforms["canvasWidthHeight"], [
-    this.gl.canvas.width,
-    this.gl.canvas.height
+  gl.uniform1f(this.sliceShader.drawOpacityLoc, this.drawOpacity);
+  gl.uniform1f(this.sliceShader.opacityLoc, this.volumes[0].opacity);
+  gl.uniform1i(this.sliceShader.backgroundMasksOverlaysLoc, this.backgroundMasksOverlays);
+  gl.uniform1i(this.sliceShader.axCorSagLoc, axCorSag);
+  gl.uniform1f(this.sliceShader.sliceLoc, crossXYZ[2]);
+  gl.uniform2fv(this.sliceShader.canvasWidthHeightLoc, [
+    gl.canvas.width,
+    gl.canvas.height
   ]);
   if (isMirrorLR) {
-    this.gl.disable(this.gl.CULL_FACE);
+    gl.disable(gl.CULL_FACE);
     leftTopWidthHeight[2] = -leftTopWidthHeight[2];
     leftTopWidthHeight[0] = leftTopWidthHeight[0] - leftTopWidthHeight[2];
   }
-  this.gl.uniform4f(this.sliceShader.uniforms["leftTopWidthHeight"], leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
-  this.gl.bindVertexArray(this.genericVAO);
-  this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  gl.uniform4f(this.sliceShader.leftTopWidthHeightLoc, leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
+  gl.bindVertexArray(this.genericVAO);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
   this.screenSlices.push({
     leftTopWidthHeight,
     axCorSag,
@@ -113836,21 +115422,21 @@ Niivue.prototype.draw2DVox = function(leftTopWidthHeight, axCorSag, customMM = N
     return;
   if (this.opts.crosshairWidth <= 0)
     return;
-  this.gl.bindVertexArray(this.genericVAO);
+  gl.bindVertexArray(this.genericVAO);
   this.rectShader.use(this.gl);
-  this.gl.uniform4fv(this.rectShader.uniforms["lineColor"], this.opts.crosshairColor);
-  this.gl.uniform2fv(this.rectShader.uniforms["canvasWidthHeight"], [
-    this.gl.canvas.width,
-    this.gl.canvas.height
+  gl.uniform4fv(this.rectShader.lineColorLoc, this.opts.crosshairColor);
+  gl.uniform2fv(this.rectShader.canvasWidthHeightLoc, [
+    gl.canvas.width,
+    gl.canvas.height
   ]);
   var xleft = leftTopWidthHeight[0] + leftTopWidthHeight[2] * crossXYZ[0];
-  this.gl.uniform4f(this.rectShader.uniforms["leftTopWidthHeight"], xleft - 0.5 * this.opts.crosshairWidth, leftTopWidthHeight[1], this.opts.crosshairWidth, leftTopWidthHeight[3]);
-  this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  gl.uniform4f(this.rectShader.leftTopWidthHeightLoc, xleft - 0.5 * this.opts.crosshairWidth, leftTopWidthHeight[1], this.opts.crosshairWidth, leftTopWidthHeight[3]);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
   var xtop = leftTopWidthHeight[1] + leftTopWidthHeight[3] * (1 - crossXYZ[1]);
-  this.gl.uniform4f(this.rectShader.uniforms["leftTopWidthHeight"], leftTopWidthHeight[0], xtop - 0.5 * this.opts.crosshairWidth, leftTopWidthHeight[2], this.opts.crosshairWidth);
-  this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
-  this.gl.bindVertexArray(this.unusedVAO);
-  this.gl.enable(this.gl.CULL_FACE);
+  gl.uniform4f(this.rectShader.leftTopWidthHeightLoc, leftTopWidthHeight[0], xtop - 0.5 * this.opts.crosshairWidth, leftTopWidthHeight[2], this.opts.crosshairWidth);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  gl.bindVertexArray(this.unusedVAO);
+  gl.enable(gl.CULL_FACE);
   gl.enable(gl.DEPTH_TEST);
   gl.depthFunc(gl.ALWAYS);
   gl.clearDepth(0);
@@ -113896,13 +115482,10 @@ Niivue.prototype.calculateMvpMatrix = function(unused, leftTopWidthHeight = [0,
   return [modelViewProjectionMatrix, modelMatrix, normalMatrix];
 };
 Niivue.prototype.calculateRayDirection = function(azimuth, elevation) {
-  function deg2rad2(deg) {
-    return deg * (Math.PI / 180);
-  }
   const modelMatrix = create$2();
   modelMatrix[0] = -1;
-  rotateX(modelMatrix, modelMatrix, deg2rad2(270 - elevation));
-  rotateZ(modelMatrix, modelMatrix, deg2rad2(azimuth - 180));
+  rotateX(modelMatrix, modelMatrix, deg2rad(270 - elevation));
+  rotateZ(modelMatrix, modelMatrix, deg2rad(azimuth - 180));
   if (this.back.obliqueRAS) {
     let oblique = clone$1(this.back.obliqueRAS);
     multiply(modelMatrix, modelMatrix, oblique);
@@ -113925,7 +115508,7 @@ Niivue.prototype.calculateRayDirection = function(azimuth, elevation) {
     rayDir[2] = tiny;
   return rayDir;
 };
-Niivue.prototype.setPivot3D = function() {
+Niivue.prototype.sceneExtentsMinMax = function() {
   let mn = fromValues$1(0, 0, 0);
   let mx = fromValues$1(0, 0, 0);
   if (this.volumes.length > 0) {
@@ -113943,6 +115526,12 @@ Niivue.prototype.setPivot3D = function() {
       max$T(mx, mx, v);
     }
   }
+  let range = create$1();
+  subtract(range, mx, mn);
+  return [mn, mx, range];
+};
+Niivue.prototype.setPivot3D = function() {
+  let [mn, mx] = this.sceneExtentsMinMax();
   let pivot = create$1();
   add$1(pivot, mn, mx);
   scale(pivot, pivot, 0.5);
@@ -113952,33 +115541,7 @@ Niivue.prototype.setPivot3D = function() {
   this.extentsMax = mx;
   this.furthestFromPivot = length$1(pivot) * 0.5;
 };
-Niivue.prototype.drawGraphLine = function(LTRB, color = [1, 0, 0, 0.5], thickness = 2) {
-  this.graphShader.use(this.gl);
-  this.gl.uniform4fv(this.graphShader.uniforms["lineColor"], color);
-  this.gl.uniform2fv(this.graphShader.uniforms["canvasWidthHeight"], [
-    this.gl.canvas.width,
-    this.gl.canvas.height
-  ]);
-  this.gl.uniform1f(this.graphShader.uniforms["thickness"], thickness);
-  this.gl.uniform4f(this.graphShader.uniforms["leftTopRightBottom"], LTRB[0], LTRB[1], LTRB[2], LTRB[3]);
-  this.gl.bindVertexArray(this.genericVAO);
-  this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
-  this.gl.bindVertexArray(this.unusedVAO);
-};
-Niivue.prototype.drawRect = function(LTWH, color = [1, 0, 0, 0.5]) {
-  this.rectShader.use(this.gl);
-  this.gl.uniform4fv(this.rectShader.uniforms["lineColor"], color);
-  this.gl.uniform2fv(this.rectShader.uniforms["canvasWidthHeight"], [
-    this.gl.canvas.width,
-    this.gl.canvas.height
-  ]);
-  this.gl.uniform4f(this.rectShader.uniforms["leftTopWidthHeight"], LTWH[0], LTWH[1], LTWH[2], LTWH[3]);
-  this.gl.bindVertexArray(this.genericVAO);
-  this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
-  this.gl.bindVertexArray(this.unusedVAO);
-};
 Niivue.prototype.drawGraph = function() {
-  this.gl;
   let graph = this.graph;
   if (this.graph.autoSizeMultiplanar && this.sliceType === this.sliceTypeMultiplanar) {
     for (let i2 = 0; i2 < this.screenSlices.length; i2++) {
@@ -114116,13 +115679,13 @@ Niivue.prototype.drawGraph = function() {
   thinColor[3] = 0.25 * graph.lineColor[3];
   while (lineH <= mx) {
     let y = plotBottom - (lineH - mn) * scaleH;
-    this.drawGraphLine([plotLTWH[0], y, plotLTWH[0] + plotLTWH[2], y], thinColor, 0.5 * graph.lineThickness);
+    this.drawLine([plotLTWH[0], y, plotLTWH[0] + plotLTWH[2], y], 0.5 * graph.lineThickness, thinColor);
     lineH += spacing;
   }
   lineH = ticMin;
   while (lineH <= mx) {
     let y = plotBottom - (lineH - mn) * scaleH;
-    this.drawGraphLine([plotLTWH[0], y, plotLTWH[0] + plotLTWH[2], y], graph.lineColor, graph.lineThickness);
+    this.drawLine([plotLTWH[0], y, plotLTWH[0] + plotLTWH[2], y], graph.lineThickness, graph.lineColor);
     let str = humanize(lineH);
     if (fntSize > 0)
       this.drawTextLeft([plotLTWH[0] - 6, y], str, fntScale, graph.textColor);
@@ -114137,12 +115700,12 @@ Niivue.prototype.drawGraph = function() {
     let thick = graph.lineThickness;
     if (i2 % 2 === 1) {
       thick *= 0.5;
-      this.drawGraphLine([x2, plotLTWH[1], x2, plotLTWH[1] + plotLTWH[3]], thinColor, thick);
-    } else if (i2 > 0) {
+      this.drawLine([x2, plotLTWH[1], x2, plotLTWH[1] + plotLTWH[3]], thick, thinColor);
+    } else {
       let str = humanize(i2);
       if (fntSize > 0)
         this.drawTextBelow([x2, 2 + plotLTWH[1] + plotLTWH[3]], str, fntScale, graph.textColor);
-      this.drawGraphLine([x2, plotLTWH[1], x2, plotLTWH[1] + plotLTWH[3]], graph.lineColor, thick);
+      this.drawLine([x2, plotLTWH[1], x2, plotLTWH[1] + plotLTWH[3]], thick, graph.lineColor);
     }
   }
   for (let j = 0; j < graph.lines.length; j++) {
@@ -114166,13 +115729,12 @@ Niivue.prototype.drawGraph = function() {
         plotLTWH[0] + x1,
         plotLTWH[1] + plotLTWH[3] - y1
       ];
-      this.drawGraphLine(LTWH, lineRGBA, graph.lineThickness);
+      this.drawLine(LTWH, graph.lineThickness, lineRGBA);
     }
   }
   if (graph.selectedColumn >= 0 && graph.selectedColumn < graph.lines[0].length) {
     let x2 = graph.selectedColumn * scaleW + plotLTWH[0];
-    graph.lineRGB[0];
-    this.drawGraphLine([x2, plotLTWH[1], x2, plotLTWH[1] + plotLTWH[3]], [graph.lineRGB[3][0], graph.lineRGB[3][1], graph.lineRGB[3][2], 1], graph.lineThickness);
+    this.drawLine([x2, plotLTWH[1], x2, plotLTWH[1] + plotLTWH[3]], graph.lineThickness, [graph.lineRGB[3][0], graph.lineRGB[3][1], graph.lineRGB[3][2], 1]);
   }
 };
 function isRadiological(mtx) {
@@ -114181,6 +115743,117 @@ function isRadiological(mtx) {
   transformMat4(vRotated, vRight, mtx);
   return vRotated[0];
 }
+function unProject(winX, winY, winZ, mvpMatrix) {
+  let inp = fromValues(winX, winY, winZ, 1);
+  let finalMatrix = clone$1(mvpMatrix);
+  invert(finalMatrix, finalMatrix);
+  inp[0] = inp[0] * 2 - 1;
+  inp[1] = inp[1] * 2 - 1;
+  inp[2] = inp[2] * 2 - 1;
+  let out = create();
+  transformMat4(out, inp, finalMatrix);
+  if (out[3] === 0)
+    return out;
+  out[0] /= out[3];
+  out[1] /= out[3];
+  out[2] /= out[3];
+  return out;
+}
+function unpackFloatFromVec4i(val) {
+  var bitSh = [
+    1 / (256 * 256 * 256),
+    1 / (256 * 256),
+    1 / 256,
+    1
+  ];
+  return (val[0] * bitSh[0] + val[1] * bitSh[1] + val[2] * bitSh[2] + val[3] * bitSh[3]) / 255;
+}
+Niivue.prototype.depthPicker = function(leftTopWidthHeight, mvpMatrix) {
+  if (!this.scene.mouseDepthPicker)
+    return;
+  this.scene.mouseDepthPicker = false;
+  let gl = this.gl;
+  const pixelX = this.mousePos[0] * leftTopWidthHeight[2] / leftTopWidthHeight[2];
+  const pixelY = gl.canvas.height - this.mousePos[1] * leftTopWidthHeight[3] / leftTopWidthHeight[3] - 1;
+  const rgbaPixel = new Uint8Array(4);
+  gl.readPixels(pixelX, pixelY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, rgbaPixel);
+  this.selectedObjectId = rgbaPixel[3];
+  if (this.selectedObjectId === this.VOLUME_ID) {
+    this.scene.crosshairPos = new Float32Array(rgbaPixel.slice(0, 3)).map((x2) => x2 / 255);
+    return;
+  }
+  let depthZ = unpackFloatFromVec4i(rgbaPixel);
+  if (depthZ > 1)
+    return;
+  let fracX = (this.mousePos[0] - leftTopWidthHeight[0]) / leftTopWidthHeight[2];
+  let fracY = (gl.canvas.height - this.mousePos[1] - leftTopWidthHeight[1]) / leftTopWidthHeight[3];
+  let mm = unProject(fracX, fracY, depthZ, mvpMatrix);
+  let frac = this.mm2frac(mm);
+  if (frac[0] < 0 || frac[0] > 1 || frac[1] < 0 || frac[1] > 1 || frac[2] < 0 || frac[2] > 1)
+    return;
+  this.scene.crosshairPos = this.mm2frac(mm);
+};
+Niivue.prototype.drawImage3D = function(mvpMatrix, azimuth, elevation) {
+  if (this.volumes.length === 0)
+    return;
+  let gl = this.gl;
+  const rayDir = this.calculateRayDirection(azimuth, elevation);
+  let object3D = this.volumeObject3D;
+  if (object3D) {
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    gl.enable(gl.CULL_FACE);
+    gl.cullFace(gl.FRONT);
+    let shader = this.renderShader;
+    if (this.scene.mouseDepthPicker)
+      shader = this.pickingImageShader;
+    shader.use(this.gl);
+    gl.uniform1i(shader.backgroundMasksOverlaysLoc, this.backgroundMasksOverlays);
+    if (this.drawBitmap && this.drawBitmap.length > 8)
+      gl.uniform1f(shader.drawOpacityLoc, this.drawOpacity);
+    else
+      gl.uniform1f(shader.drawOpacityLoc, 0);
+    gl.uniformMatrix4fv(shader.mvpLoc, false, mvpMatrix);
+    gl.uniformMatrix4fv(shader.mvpMatRASLoc, false, this.back.matRAS);
+    gl.uniform3fv(shader.rayDirLoc, rayDir);
+    gl.uniform4fv(shader.clipPlaneLoc, this.scene.clipPlane);
+    gl.bindVertexArray(object3D.vao);
+    gl.drawElements(object3D.mode, object3D.indexCount, gl.UNSIGNED_SHORT, 0);
+    gl.bindVertexArray(this.unusedVAO);
+  }
+};
+Niivue.prototype.drawOrientationCube = function(leftTopWidthHeight, azimuth = 0, elevation = 0) {
+  if (!this.opts.isOrientCube)
+    return;
+  let sz = 0.05 * Math.min(leftTopWidthHeight[2], leftTopWidthHeight[3]);
+  if (sz < 5)
+    return;
+  let gl = this.gl;
+  gl.enable(gl.CULL_FACE);
+  gl.cullFace(gl.BACK);
+  this.orientCubeShader.use(this.gl);
+  gl.bindVertexArray(this.orientCubeShaderVAO);
+  let modelMatrix = create$2();
+  let projectionMatrix = create$2();
+  ortho(projectionMatrix, 0, gl.canvas.width, 0, gl.canvas.height, -10 * sz, 10 * sz);
+  let translateUpForColorbar = 0;
+  if (leftTopWidthHeight[1] === 0)
+    translateUpForColorbar = gl.canvas.height - this.effectiveCanvasHeight();
+  translate(modelMatrix, modelMatrix, [
+    1.8 * sz + leftTopWidthHeight[0],
+    translateUpForColorbar + 1.8 * sz + leftTopWidthHeight[1],
+    0
+  ]);
+  scale$1(modelMatrix, modelMatrix, [sz, sz, sz]);
+  rotateX(modelMatrix, modelMatrix, deg2rad(270 - elevation));
+  rotateZ(modelMatrix, modelMatrix, deg2rad(-azimuth));
+  let modelViewProjectionMatrix = create$2();
+  multiply(modelViewProjectionMatrix, projectionMatrix, modelMatrix);
+  gl.uniformMatrix4fv(this.orientCubeMtxLoc, false, modelViewProjectionMatrix);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 168);
+  gl.bindVertexArray(this.unusedVAO);
+  this.gl.disable(this.gl.CULL_FACE);
+};
 Niivue.prototype.draw3D = function(leftTopWidthHeight = [0, 0, 0, 0], mvpMatrix = null, modelMatrix, normalMatrix, azimuth = null, elevation) {
   let isMosaic = azimuth !== null;
   this.setPivot3D();
@@ -114216,62 +115889,20 @@ Niivue.prototype.draw3D = function(leftTopWidthHeight = [0, 0, 0, 0], mvpMatrix
   gl.enable(gl.DEPTH_TEST);
   gl.depthFunc(gl.ALWAYS);
   gl.clearDepth(0);
-  if (this.volumes.length === 0) {
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    this.drawMesh3D(true, 1, mvpMatrix, modelMatrix, normalMatrix);
-    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-    return;
-  }
-  const rayDir = this.calculateRayDirection(azimuth, elevation);
-  let object3D = this.volumeObject3D;
-  if (this.scene.mouseDepthPicker) {
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    this.scene.mouseDepthPicker = false;
-    if (object3D.isVisible && object3D.isPickable) {
-      let shader = this.pickingShader;
-      shader.use(this.gl);
-      gl.enable(gl.CULL_FACE);
-      gl.cullFace(gl.FRONT);
-      gl.uniformMatrix4fv(shader.mvpUniformLoc, false, mvpMatrix);
-      gl.uniform3fv(shader.rayDirUniformLoc, rayDir);
-      gl.uniform4fv(shader.clipPlaneUniformLoc, this.scene.clipPlane);
-      gl.uniform1i(shader.uniforms["id"], object3D.id);
-      gl.bindVertexArray(object3D.vao);
-      gl.drawElements(object3D.mode, object3D.indexCount, gl.UNSIGNED_SHORT, 0);
-      gl.bindVertexArray(this.unusedVAO);
-    }
-    const pixelX = this.mousePos[0] * leftTopWidthHeight[2] / leftTopWidthHeight[2];
-    const pixelY = gl.canvas.height - this.mousePos[1] * leftTopWidthHeight[3] / leftTopWidthHeight[3] - 1;
-    const rgbaPixel = new Uint8Array(4);
-    gl.readPixels(pixelX, pixelY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, rgbaPixel);
-    this.selectedObjectId = rgbaPixel[3];
-    if (this.selectedObjectId === this.VOLUME_ID) {
-      this.scene.crosshairPos = new Float32Array(rgbaPixel.slice(0, 3)).map((x2) => x2 / 255);
-    }
-  }
-  if (this.volumeObject3D.isVisible) {
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    gl.enable(gl.CULL_FACE);
-    gl.cullFace(gl.FRONT);
-    let shader = this.renderShader;
-    shader.use(this.gl);
-    gl.uniform1i(shader.uniforms["backgroundMasksOverlays"], this.backgroundMasksOverlays);
-    gl.uniformMatrix4fv(shader.mvpUniformLoc, false, mvpMatrix);
-    gl.uniformMatrix4fv(shader.mvpMatRASLoc, false, this.back.matRAS);
-    gl.uniform3fv(shader.rayDirUniformLoc, rayDir);
-    gl.uniform4fv(shader.clipPlaneUniformLoc, this.scene.clipPlane);
-    gl.bindVertexArray(object3D.vao);
-    gl.drawElements(object3D.mode, object3D.indexCount, gl.UNSIGNED_SHORT, 0);
-    gl.bindVertexArray(this.unusedVAO);
-  }
+  if (this.volumes.length > 0)
+    this.drawImage3D(mvpMatrix, azimuth, elevation);
   if (!isMosaic)
     this.drawCrosshairs3D(true, 1, mvpMatrix);
   this.drawMesh3D(true, 1, mvpMatrix, modelMatrix, normalMatrix);
+  if (this.scene.mouseDepthPicker) {
+    this.depthPicker(leftTopWidthHeight, mvpMatrix, true);
+    return;
+  }
   this.drawMesh3D(false, 0.02, mvpMatrix, modelMatrix, normalMatrix);
   if (!isMosaic)
     this.drawCrosshairs3D(false, 0.15, mvpMatrix);
   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+  this.drawOrientationCube(leftTopWidthHeight, azimuth, elevation);
   let posString = "azimuth: " + this.scene.renderAzimuth.toFixed(0) + " elevation: " + this.scene.renderElevation.toFixed(0);
   this.drawGraph();
   this.readyForSync = true;
@@ -114296,13 +115927,17 @@ Niivue.prototype.drawMesh3D = function(isDepthTest = true, alpha = 1, m, modelMt
     gl.depthFunc(gl.ALWAYS);
   }
   gl.disable(gl.CULL_FACE);
-  this.meshShader.use(this.gl);
-  gl.uniformMatrix4fv(this.meshShader.uniforms["mvpMtx"], false, m);
-  gl.uniformMatrix4fv(this.meshShader.uniforms["modelMtx"], false, modelMtx);
-  gl.uniformMatrix4fv(this.meshShader.uniforms["normMtx"], false, normMtx);
-  gl.uniform1f(this.meshShader.uniforms["opacity"], alpha);
+  let shader = this.meshShaders[0];
   let hasFibers = false;
   for (let i2 = 0; i2 < this.meshes.length; i2++) {
+    shader = this.meshShaders[this.meshes[i2].meshShaderIndex].shader;
+    if (this.scene.mouseDepthPicker)
+      shader = this.pickingMeshShader;
+    shader.use(this.gl);
+    gl.uniformMatrix4fv(shader.mvpLoc, false, m);
+    gl.uniformMatrix4fv(shader.uniforms["modelMtx"], false, modelMtx);
+    gl.uniformMatrix4fv(shader.uniforms["normMtx"], false, normMtx);
+    gl.uniform1f(shader.uniforms["opacity"], alpha);
     if (this.meshes[i2].indexCount < 3)
       continue;
     if (this.meshes[i2].offsetPt0) {
@@ -114318,9 +115953,9 @@ Niivue.prototype.drawMesh3D = function(isDepthTest = true, alpha = 1, m, modelMt
     gl.depthFunc(gl.ALWAYS);
     return;
   }
-  let shader = this.fiberShader;
+  shader = this.fiberShader;
   shader.use(this.gl);
-  gl.uniformMatrix4fv(shader.uniforms["mvpMtx"], false, m);
+  gl.uniformMatrix4fv(shader.mvpLoc, false, m);
   gl.uniform1f(shader.uniforms["opacity"], alpha);
   for (let i2 = 0; i2 < this.meshes.length; i2++) {
     if (this.meshes[i2].indexCount < 3)
@@ -114335,8 +115970,10 @@ Niivue.prototype.drawMesh3D = function(isDepthTest = true, alpha = 1, m, modelMt
   gl.depthFunc(gl.ALWAYS);
   this.readyForSync = true;
 };
-Niivue.prototype.drawCrosshairs3D = function(isDepthTest = true, alpha = 1, mvpMtx = null) {
-  if (!this.opts.show3Dcrosshair)
+Niivue.prototype.drawCrosshairs3D = function(isDepthTest = true, alpha = 1, mvpMtx = null, is2DView = false) {
+  if (!this.opts.show3Dcrosshair && !is2DView)
+    return;
+  if (this.opts.crosshairWidth <= 0 && is2DView)
     return;
   let gl = this.gl;
   let mm = this.frac2mm(this.scene.crosshairPos);
@@ -114345,8 +115982,14 @@ Niivue.prototype.drawCrosshairs3D = function(isDepthTest = true, alpha = 1, mvpM
       gl.deleteBuffer(this.crosshairs3D.indexBuffer);
       gl.deleteBuffer(this.crosshairs3D.vertexBuffer);
     }
-    let radius = 0.5 * Math.min(Math.min(this.back.pixDims[1], this.back.pixDims[2]), this.back.pixDims[3]);
-    this.crosshairs3D = NiivueObject3D.generateCrosshairs(this.gl, 1, mm, this.volumeObject3D.extentsMin, this.volumeObject3D.extentsMax, radius);
+    let [mn, mx, range] = this.sceneExtentsMinMax();
+    let radius = 1;
+    if (this.volumes.length > 0)
+      radius = 0.5 * Math.min(Math.min(this.back.pixDims[1], this.back.pixDims[2]), this.back.pixDims[3]);
+    else if (range[0] < 50 || range[0] > 1e3)
+      radius = range[0] * 0.02;
+    radius *= this.opts.crosshairWidth;
+    this.crosshairs3D = NiivueObject3D.generateCrosshairs(this.gl, 1, mm, mn, mx, radius);
     this.crosshairs3D.mm = mm;
   }
   let crosshairsShader = this.surfaceShader;
@@ -114354,7 +115997,7 @@ Niivue.prototype.drawCrosshairs3D = function(isDepthTest = true, alpha = 1, mvpM
   let modelMtx, normMtx;
   if (mvpMtx == null)
     [mvpMtx, modelMtx, normMtx] = this.calculateMvpMatrix(this.crosshairs3D, this.scene.renderAzimuth, this.scene.renderElevation);
-  gl.uniformMatrix4fv(crosshairsShader.uniforms["mvpMtx"], false, mvpMtx);
+  gl.uniformMatrix4fv(crosshairsShader.mvpLoc, false, mvpMtx);
   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.crosshairs3D.indexBuffer);
   gl.enable(gl.DEPTH_TEST);
   let color = [...this.opts.crosshairColor];
@@ -114367,12 +116010,20 @@ Niivue.prototype.drawCrosshairs3D = function(isDepthTest = true, alpha = 1, mvpM
     gl.depthFunc(gl.ALWAYS);
   }
   color[3] = alpha;
-  gl.uniform4fv(crosshairsShader.uniforms["surfaceColor"], color);
+  gl.uniform4fv(crosshairsShader.colorLoc, color);
   gl.bindVertexArray(this.crosshairs3D.vao);
   gl.drawElements(gl.TRIANGLES, this.crosshairs3D.indexCount, gl.UNSIGNED_INT, 0);
   gl.bindVertexArray(this.unusedVAO);
 };
 Niivue.prototype.mm2frac = function(mm, volIdx = 0) {
+  if (this.volumes.length < 1) {
+    let frac2 = [0.1, 0.5, 0.5];
+    let [mn, mx, range] = this.sceneExtentsMinMax();
+    frac2[0] = (mm[0] - mn[0]) / range[0];
+    frac2[1] = (mm[1] - mn[1]) / range[1];
+    frac2[2] = (mm[2] - mn[2]) / range[2];
+    return frac2;
+  }
   let mm4 = fromValues(mm[0], mm[1], mm[2], 1);
   let d = this.volumes[volIdx].dimsRAS;
   let frac = [0, 0, 0];
@@ -114416,10 +116067,18 @@ Niivue.prototype.moveCrosshairInVox = function(x2, y, z) {
 };
 Niivue.prototype.frac2mm = function(frac, volIdx = 0) {
   let pos = fromValues(frac[0], frac[1], frac[2], 1);
-  transformMat4(pos, pos, this.volumes[volIdx].frac2mm);
+  if (this.volumes.length > 0)
+    transformMat4(pos, pos, this.volumes[volIdx].frac2mm);
+  else {
+    let [mn, mx] = this.sceneExtentsMinMax();
+    const lerp2 = (x2, y, a) => x2 * (1 - a) + y * a;
+    pos[0] = lerp2(mn[0], mx[0], frac[0]);
+    pos[1] = lerp2(mn[1], mx[1], frac[1]);
+    pos[2] = lerp2(mn[2], mx[2], frac[2]);
+  }
   return pos;
 };
-Niivue.prototype.screenXY2TextureFrac = function(x2, y, i2) {
+Niivue.prototype.screenXY2TextureFrac = function(x2, y, i2, restrict0to1 = true) {
   let texFrac = [-1, -1, -1];
   var axCorSag = this.screenSlices[i2].axCorSag;
   if (axCorSag > this.sliceTypeSagittal)
@@ -114448,8 +116107,10 @@ Niivue.prototype.screenXY2TextureFrac = function(x2, y, i2) {
     if (axCorSag === this.sliceTypeSagittal)
       xyzMM = swizzleVec3(xyzMM, [2, 0, 1]);
     let xyz = this.mm2frac(xyzMM);
-    if (xyz[0] < 0 || xyz[0] > 1 || xyz[1] < 0 || xyz[1] > 1 || xyz[2] < 0 || xyz[2] > 1)
-      return texFrac;
+    if (restrict0to1) {
+      if (xyz[0] < 0 || xyz[0] > 1 || xyz[1] < 0 || xyz[1] > 1 || xyz[2] < 0 || xyz[2] > 1)
+        return texFrac;
+    }
     texFrac[0] = xyz[0];
     texFrac[1] = xyz[1];
     texFrac[2] = xyz[2];
@@ -114478,15 +116139,17 @@ Niivue.prototype.canvasPos2frac = function(canvasPos) {
   }
   return [-1, -1, -1];
 };
-Niivue.prototype.scaleSlice = function(w, h) {
-  let scalePix = this.gl.canvas.clientWidth / w;
-  if (h * scalePix > this.effectiveCanvasHeight())
-    scalePix = this.effectiveCanvasHeight() / h;
+Niivue.prototype.scaleSlice = function(w, h, widthPadPixels = 0, heightPadPixels = 0) {
+  let canvasW = this.canvas.width - widthPadPixels;
+  let canvasH = this.effectiveCanvasHeight() - heightPadPixels;
+  let scalePix = canvasW / w;
+  if (h * scalePix > canvasH)
+    scalePix = canvasH / h;
   let wPix = w * scalePix;
   let hPix = h * scalePix;
   let leftTopWidthHeight = [
-    (this.gl.canvas.clientWidth - wPix) * 0.5,
-    (this.effectiveCanvasHeight() - hPix) * 0.5,
+    (canvasW - wPix) * 0.5,
+    (canvasH - hPix) * 0.5,
     wPix,
     hPix
   ];
@@ -114506,32 +116169,24 @@ Niivue.prototype.drawThumbnail = function() {
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   this.gl.bindVertexArray(this.unusedVAO);
 };
-Niivue.prototype.drawLine = function(leftTopWidthHeight) {
-  this.gl.enable(this.gl.BLEND);
-  this.rectShader.use(this.gl);
-  this.gl.uniform4fv(this.rectShader.uniforms["lineColor"], this.opts.crosshairColor);
-  this.gl.uniform2fv(this.rectShader.uniforms["canvasWidthHeight"], [
-    this.gl.canvas.width,
-    this.gl.canvas.height
-  ]);
-  this.gl.uniform4f(this.rectShader.uniforms["leftTopWidthHeight"], leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
-  this.gl.bindVertexArray(this.genericVAO);
-  this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
-  this.gl.bindVertexArray(this.unusedVAO);
-};
-Niivue.prototype.drawLine2DX = function(startXYendXY, thickness = 1) {
+Niivue.prototype.drawLine = function(startXYendXY, thickness = 1, lineColor = [1, 0, 0, -1]) {
   this.gl.bindVertexArray(this.genericVAO);
   this.lineShader.use(this.gl);
-  this.gl.uniform4fv(this.lineShader.uniforms["lineColor"], this.opts.crosshairColor);
-  this.gl.uniform2fv(this.lineShader.uniforms["canvasWidthHeight"], [
+  if (lineColor[3] < 0)
+    lineColor = this.opts.crosshairColor;
+  this.gl.uniform4fv(this.lineShader.lineColorLoc, lineColor);
+  this.gl.uniform2fv(this.lineShader.canvasWidthHeightLoc, [
     this.gl.canvas.width,
     this.gl.canvas.height
   ]);
-  this.gl.uniform1f(this.lineShader.uniforms["thickness"], thickness);
-  this.gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], startXYendXY);
+  this.gl.uniform1f(this.lineShader.thicknessLoc, thickness);
+  this.gl.uniform4fv(this.lineShader.startXYendXYLoc, startXYendXY);
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   this.gl.bindVertexArray(this.unusedVAO);
 };
+Niivue.prototype.drawGraphLine = function(LTRB, color = [1, 0, 0, 0.5], thickness = 2) {
+  this.drawLine(LTRB, thickness, color);
+};
 Niivue.prototype.drawCrossLinesMM = function(sliceIndex, axCorSag, axiMM, corMM, sagMM) {
   if (sliceIndex < 0 || this.screenSlices.length <= sliceIndex)
     return;
@@ -114565,12 +116220,11 @@ Niivue.prototype.drawCrossLinesMM = function(sliceIndex, axCorSag, axiMM, corMM,
       right = swizzleVec3(right, [0, 1, 2]);
       left = mm2screen(left);
       right = mm2screen(right);
-      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+      this.drawLine([left[0], left[1], right[0], right[1]], thick);
     }
   }
   if (linesH.length > 0 && axCorSag === 1) {
     let fracH = tile.sliceFrac;
-    this.frac2mm([0.5, fracH, 0.5]);
     let dimV = 2;
     for (let i2 = 0; i2 < linesH.length; i2++) {
       let mmV = this.frac2mm([0.5, 0.5, 0.5]);
@@ -114583,7 +116237,7 @@ Niivue.prototype.drawCrossLinesMM = function(sliceIndex, axCorSag, axiMM, corMM,
       right = swizzleVec3(right, [0, 2, 1]);
       left = mm2screen(left);
       right = mm2screen(right);
-      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+      this.drawLine([left[0], left[1], right[0], right[1]], thick);
     }
   }
   if (linesH.length > 0 && axCorSag === 2) {
@@ -114600,7 +116254,7 @@ Niivue.prototype.drawCrossLinesMM = function(sliceIndex, axCorSag, axiMM, corMM,
       right = swizzleVec3(right, [1, 2, 0]);
       left = mm2screen(left);
       right = mm2screen(right);
-      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+      this.drawLine([left[0], left[1], right[0], right[1]], thick);
     }
   }
   if (linesV.length > 0 && axCorSag === 0) {
@@ -114617,7 +116271,7 @@ Niivue.prototype.drawCrossLinesMM = function(sliceIndex, axCorSag, axiMM, corMM,
       right = swizzleVec3(right, [0, 1, 2]);
       left = mm2screen(left);
       right = mm2screen(right);
-      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+      this.drawLine([left[0], left[1], right[0], right[1]], thick);
     }
   }
   if (linesV.length > 0 && axCorSag === 1) {
@@ -114634,7 +116288,7 @@ Niivue.prototype.drawCrossLinesMM = function(sliceIndex, axCorSag, axiMM, corMM,
       right = swizzleVec3(right, [0, 2, 1]);
       left = mm2screen(left);
       right = mm2screen(right);
-      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+      this.drawLine([left[0], left[1], right[0], right[1]], thick);
     }
   }
   if (linesV.length > 0 && axCorSag === 2) {
@@ -114651,7 +116305,7 @@ Niivue.prototype.drawCrossLinesMM = function(sliceIndex, axCorSag, axiMM, corMM,
       right = swizzleVec3(right, [1, 2, 0]);
       left = mm2screen(left);
       right = mm2screen(right);
-      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+      this.drawLine([left[0], left[1], right[0], right[1]], thick);
     }
   }
 };
@@ -114663,7 +116317,6 @@ Niivue.prototype.drawCrossLines = function(sliceIndex, axCorSag, axiMM, corMM, s
   let tile = this.screenSlices[sliceIndex];
   let linesH = corMM.slice();
   let linesV = sagMM.slice();
-  Math.max(1, this.opts.crosshairWidth);
   if (axCorSag === this.sliceTypeCoronal)
     linesH = axiMM.slice();
   if (axCorSag === this.sliceTypeSagittal) {
@@ -114677,7 +116330,7 @@ Niivue.prototype.drawCrossLines = function(sliceIndex, axCorSag, axiMM, corMM, s
     for (let i2 = 0; i2 < linesH.length; i2++) {
       mm[sliceDim] = linesH[i2];
       let frac = this.mm2frac(mm);
-      this.drawLine([
+      this.drawRect([
         LTWH[0],
         LTWH[1] + LTWH[3] - frac[sliceDim] * LTWH[3],
         LTWH[2],
@@ -114696,14 +116349,14 @@ Niivue.prototype.drawCrossLines = function(sliceIndex, axCorSag, axiMM, corMM, s
       mm[sliceDim] = linesV[i2];
       let frac = this.mm2frac(mm);
       if (isRadiolgical)
-        this.drawLine([
+        this.drawRect([
           LTWH[0] + (LTWH[2] - frac[sliceDim] * LTWH[2]),
           LTWH[1],
           1,
           LTWH[3]
         ]);
       else
-        this.drawLine([
+        this.drawRect([
           LTWH[0] + frac[sliceDim] * LTWH[2],
           LTWH[1],
           1,
@@ -114825,7 +116478,7 @@ Niivue.prototype.drawScene = function() {
   }
   this.colorbarHeight = 0;
   this.gl.clearColor(this.opts.backColor[0], this.opts.backColor[1], this.opts.backColor[2], this.opts.backColor[3]);
-  this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+  this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
   if (this.bmpTexture) {
     this.drawThumbnail();
     return;
@@ -114855,6 +116508,8 @@ Niivue.prototype.drawScene = function() {
     }
   }
   if (this.sliceMosaicString.length < 1 && this.sliceType === this.sliceTypeRender) {
+    if (this.opts.isColorbar)
+      this.reserveColorbarPanel();
     this.screenSlices = [];
     this.draw3D();
     if (this.opts.isColorbar)
@@ -114875,12 +116530,15 @@ Niivue.prototype.drawScene = function() {
     } else if (this.sliceType === this.sliceTypeSagittal) {
       this.draw2D([0, 0, 0, 0], 2);
     } else {
-      let { volScale, vox, longestAxis } = this.sliceScale();
-      let ltwh = this.scaleSlice(volScale[0] + volScale[1], volScale[1] + volScale[2]);
+      let { volScale } = this.sliceScale();
+      if (typeof this.opts.multiplanarPadPixels !== "number")
+        console.log("multiplanarPadPixels must be numeric");
+      let pad = parseFloat(this.opts.multiplanarPadPixels);
+      let ltwh = this.scaleSlice(volScale[0] + volScale[1], volScale[1] + volScale[2], pad * 1, pad * 1);
       let wX = ltwh[2] * volScale[0] / (volScale[0] + volScale[1]);
-      let ltwh3x1 = this.scaleSlice(volScale[0] + volScale[0] + volScale[1], Math.max(volScale[1], volScale[2]));
+      let ltwh3x1 = this.scaleSlice(volScale[0] + volScale[0] + volScale[1], Math.max(volScale[1], volScale[2]), pad * 2);
       let mx = Math.max(Math.max(volScale[1], volScale[2]), volScale[0]);
-      let ltwh4x1 = this.scaleSlice(volScale[0] + volScale[0] + volScale[1] + mx, mx);
+      let ltwh4x1 = this.scaleSlice(volScale[0] + volScale[0] + volScale[1] + mx, mx, pad * 3);
       let wX1 = ltwh3x1[2] * volScale[0] / (volScale[0] + volScale[0] + volScale[1]);
       if (wX1 > wX && !this.graph.autoSizeMultiplanar) {
         let pixScale = wX1 / volScale[0];
@@ -114889,24 +116547,24 @@ Niivue.prototype.drawScene = function() {
         if (ltwh3x1[3] === ltwh4x1[3]) {
           ltwh3x1 = ltwh4x1;
           this.draw3D([
-            ltwh3x1[0] + wX1 + wX1 + hY1,
+            ltwh3x1[0] + wX1 + wX1 + hY1 + pad * 3,
             ltwh3x1[1],
             ltwh4x1[3],
             ltwh4x1[3]
           ]);
         }
         this.draw2D([ltwh3x1[0], ltwh3x1[1], wX1, hY1], 0);
-        this.draw2D([ltwh3x1[0] + wX1, ltwh3x1[1], wX1, hZ1], 1);
-        this.draw2D([ltwh3x1[0] + wX1 + wX1, ltwh3x1[1], hY1, hZ1], 2);
+        this.draw2D([ltwh3x1[0] + wX1 + pad, ltwh3x1[1], wX1, hZ1], 1);
+        this.draw2D([ltwh3x1[0] + wX1 + wX1 + pad * 2, ltwh3x1[1], hY1, hZ1], 2);
       } else {
         let wY = ltwh[2] - wX;
         let hY = ltwh[3] * volScale[1] / (volScale[1] + volScale[2]);
         let hZ = ltwh[3] - hY;
-        this.draw2D([ltwh[0], ltwh[1] + hZ, wX, hY], 0);
+        this.draw2D([ltwh[0], ltwh[1] + hZ + pad, wX, hY], 0);
         this.draw2D([ltwh[0], ltwh[1], wX, hZ], 1);
-        this.draw2D([ltwh[0] + wX, ltwh[1], wY, hZ], 2);
+        this.draw2D([ltwh[0] + wX + pad, ltwh[1], wY, hZ], 2);
         if (!this.graph.autoSizeMultiplanar)
-          this.draw3D([ltwh[0] + wX, ltwh[1] + hZ, wY, hY]);
+          this.draw3D([ltwh[0] + wX + pad, ltwh[1] + hZ + pad, wY, hY]);
       }
     }
   }
@@ -114915,6 +116573,15 @@ Niivue.prototype.drawScene = function() {
   if (this.opts.isColorbar)
     this.drawColorbar();
   if (this.isDragging) {
+    if (this.opts.isDragForPanZoom) {
+      this.dragForPanZoom([
+        this.dragStart[0],
+        this.dragStart[1],
+        this.dragEnd[0],
+        this.dragEnd[1]
+      ]);
+      return;
+    }
     if (this.opts.isDragShowsMeasurementTool) {
       this.drawMeasurementTool([
         this.dragStart[0],
@@ -114946,4 +116613,4 @@ Niivue.prototype.drawScene = function() {
   this.readyForSync = true;
   return posString;
 };
-export { NVImage, NVMesh, Niivue };
+export { NVImage, NVImageFromUrlOptions, NVMesh, NVMeshFromUrlOptions, Niivue, colortables };