@niivue/niivue 0.24.3 → 0.26.2

package/dist/niivue.es.js

@@ -91,7 +91,7 @@ function fromValues$3(m00, m01, m02, m10, m11, m12, m20, m21, m22) {
   out[8] = m22;
   return out;
 }
-function multiply$2(out, a, b) {
+function multiply$1(out, a, b) {
   var a00 = a[0], a01 = a[1], a02 = a[2];
   var a10 = a[3], a11 = a[4], a12 = a[5];
   var a20 = a[6], a21 = a[7], a22 = a[8];
@@ -286,7 +286,7 @@ function invert(out, a) {
   out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
   return out;
 }
-function multiply$1(out, a, b) {
+function multiply(out, a, b) {
   var a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3];
   var a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7];
   var a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11];
@@ -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);
@@ -500,7 +520,7 @@ function multiplyScalar(out, a, b) {
   out[15] = a[15] * b;
   return out;
 }
-var mul$1 = multiply$1;
+var mul = multiply;
 function create$1() {
   var out = new ARRAY_TYPE(3);
   if (ARRAY_TYPE != Float32Array) {
@@ -609,6 +629,7 @@ function angle(a, b) {
   var ax = a[0], ay = a[1], az = a[2], bx = b[0], by = b[1], bz = b[2], mag1 = Math.sqrt(ax * ax + ay * ay + az * az), mag2 = Math.sqrt(bx * bx + by * by + bz * bz), mag = mag1 * mag2, cosine = mag && dot(a, b) / mag;
   return Math.acos(Math.min(Math.max(cosine, -1), 1));
 }
+var sub = subtract;
 var len = length$1;
 (function() {
   var vec = create$1();
@@ -662,13 +683,6 @@ function add(out, a, b) {
   out[3] = a[3] + b[3];
   return out;
 }
-function multiply(out, a, b) {
-  out[0] = a[0] * b[0];
-  out[1] = a[1] * b[1];
-  out[2] = a[2] * b[2];
-  out[3] = a[3] * b[3];
-  return out;
-}
 function transformMat4(out, a, m) {
   var x2 = a[0], y = a[1], z = a[2], w = a[3];
   out[0] = m[0] * x2 + m[4] * y + m[8] * z + m[12] * w;
@@ -677,7 +691,6 @@ function transformMat4(out, a, m) {
   out[3] = m[3] * x2 + m[7] * y + m[11] * z + m[15] * w;
   return out;
 }
-var mul = multiply;
 (function() {
   var vec = create();
   return function(a, stride, offset, count, fn, arg2) {
@@ -754,7 +767,20 @@ 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;
+	
+}
+`;
 var fragRenderShader = `#version 300 es
 #line 14
 precision highp int;
@@ -772,20 +798,11 @@ uniform mat4 matRAS;
 uniform vec4 clipPlaneColor;
 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() {
+` + 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)
@@ -821,19 +838,23 @@ 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 (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);
@@ -844,25 +865,29 @@ void main() {
 	while (samplePos.a <= len) {
 		vec4 colorSample = texture(volume, samplePos.xyz);
 		samplePos += deltaDir; //advance ray position
-		if (colorSample.a < 0.01) continue;
-		if (firstHit.a > lenNoClip)
-			firstHit = samplePos;
-		backNearest = min(backNearest, samplePos.a);
-		colorSample.a = 1.0-pow((1.0 - colorSample.a), opacityCorrection);
-		colorSample.rgb *= colorSample.a;
-		colAcc= (1.0 - colAcc.a) * colorSample + colAcc;
-		if ( colAcc.a > earlyTermination )
-			break;
+		if (colorSample.a >= 0.01) {
+			if (firstHit.a > lenNoClip)
+				firstHit = samplePos;
+			backNearest = min(backNearest, samplePos.a);
+			colorSample.a = 1.0-pow((1.0 - colorSample.a), opacityCorrection);
+			colorSample.rgb *= colorSample.a;
+			colAcc= (1.0 - colAcc.a) * colorSample + colAcc;
+			if ( colAcc.a > earlyTermination )
+				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) {
+    return;
+  }
 	//overlay pass
 	len = lenNoClip;
 	samplePos = vec4(start.xyz, 0.0); //ray position
@@ -871,48 +896,56 @@ void main() {
 	deltaDirFast = vec4(dir.xyz * stepSizeFast, stepSizeFast);
 	while (samplePos.a <= len) {
 		float val = texture(overlay, samplePos.xyz).a;
-		if (val > 0.01) break;
+    if (val > 0.01) {
+      break;
+    }
 		samplePos += deltaDirFast; //advance ray position
 	}
 	if (samplePos.a >= len) {
-		if (isClip && (fColor.a == 0.0))
+    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);
 		samplePos += deltaDir; //advance ray position
-		if (colorSample.a < 0.01) continue;
-		if (overFirstHit.a > len)
-			overFirstHit = samplePos;
-		colorSample.a = 1.0-pow((1.0 - colorSample.a), opacityCorrection);
-		colorSample.rgb *= colorSample.a;
-		colAcc= (1.0 - colAcc.a) * colorSample + colAcc;
-		overFarthest = samplePos.a;
-		if ( colAcc.a > earlyTermination )
-			break;
+		if (colorSample.a >= 0.01) {
+			if (overFirstHit.a > len)
+				overFirstHit = samplePos;
+			colorSample.a = 1.0-pow((1.0 - colorSample.a), opacityCorrection);
+			colorSample.rgb *= colorSample.a;
+			colAcc= (1.0 - colAcc.a) * colorSample + colAcc;
+			overFarthest = samplePos.a;
+			if ( colAcc.a > earlyTermination )
+				break;
+		}
 	}
 	if (samplePos.a >= len) {
-		if (isClip && (fColor.a == 0.0))
+    if (isClip && (fColor.a == 0.0)){
 			fColor += clipPlaneColorX;
+    }
 		return;
 	}
 	//if (overFirstHit.a < len)
-		gl_FragDepth = frac2ndc(overFirstHit.xyz);
+	gl_FragDepth = frac2ndc(overFirstHit.xyz);
 	float overMix = colAcc.a;
 	float overlayDepth = 0.3;
-	if (fColor.a <= 0.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);
@@ -927,15 +960,22 @@ layout(location=0) in vec3 pos;
 uniform int axCorSag;
 uniform float slice;
 uniform vec2 canvasWidthHeight;
+uniform vec3 panXYscale;
 uniform vec4 leftTopWidthHeight;
 out vec3 texPos;
 void main(void) {
 	//convert pixel x,y space 1..canvasWidth,1..canvasHeight to WebGL 1..-1,-1..1
 	vec2 frac;
-	frac.x = (leftTopWidthHeight.x + (pos.x * leftTopWidthHeight.z)) / canvasWidthHeight.x; //0..1
-	frac.y = 1.0 - ((leftTopWidthHeight.y + ((1.0 - pos.y) * leftTopWidthHeight.w)) / canvasWidthHeight.y); //1..0
+	vec3 vpos = pos;
+	frac.x = (leftTopWidthHeight.x + (vpos.x * leftTopWidthHeight.z)) / canvasWidthHeight.x; //0..1
+	frac.y = 1.0 - ((leftTopWidthHeight.y + ((1.0 - vpos.y) * leftTopWidthHeight.w)) / canvasWidthHeight.y); //1..0
+	//frac.x = pos.x; //0..1
+	//frac.y = pos.y; //1..0
+
 	frac = (frac * 2.0) - 1.0;
 	gl_Position = vec4(frac, 0.0, 1.0);
+	gl_Position.x += panXYscale.x;
+	gl_Position.y += panXYscale.y;
 	if (axCorSag == 1)
 		texPos = vec3(pos.x, slice, pos.y);
 	else if (axCorSag == 2)
@@ -984,7 +1024,68 @@ void main() {
 	color.rgb = mix(color.rgb, ocolor.rgb, ocolor.a);
 	color.a = aout;
 }`;
-var fragLineShader = `#version 300 es
+var vertSliceMMShader = `#version 300 es
+#line 4
+layout(location=0) in vec3 pos;
+uniform int axCorSag;
+uniform mat4 mvpMtx;
+uniform mat4 frac2mm;
+uniform float slice;
+out vec3 texPos;
+void main(void) {
+	texPos = vec3(pos.x, pos.y, slice);
+	if (axCorSag > 1)
+		texPos = vec3(slice, pos.x, pos.y);
+  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;
+	gl_Position = mvpMtx * mm;
+	//gl_Position = mm;
+}`;
+var fragSliceMMShader = `#version 300 es
+#line 228
+precision highp int;
+precision highp float;
+uniform highp sampler3D volume, overlay;
+uniform int backgroundMasksOverlays;
+uniform float overlays;
+uniform float opacity;
+uniform float drawOpacity;
+uniform highp sampler3D drawing;
+in vec3 texPos;
+out vec4 color;
+void main() {
+	//color = vec4(1.0, 0.0, 1.0, 1.0);return;
+	vec4 background = texture(volume, texPos);
+	color = vec4(background.rgb, opacity);
+	vec4 ocolor = vec4(0.0);
+	if (overlays > 0.0) {
+		ocolor = texture(overlay, texPos);
+	}
+	float draw = texture(drawing, texPos).r;
+	if (draw > 0.0) {
+		vec3 dcolor = vec3(0.0, 0.0, 0.0);
+		if (draw >= (4.0/255.0))
+			dcolor.rgb = vec3(draw,0.0,draw);
+		else if (draw >= (3.0/255.0))
+			dcolor.b = 1.0;
+		else if (draw >= (2.0/255.0))
+			dcolor.g = 1.0;
+		else
+			dcolor.r = 1.0;
+		color.rgb = mix(color.rgb, dcolor, drawOpacity);
+		color.a = max(drawOpacity, color.a);
+	}
+	if ((backgroundMasksOverlays > 0) && (background.a == 0.0))
+		return;
+	//float aout = ocolor.a + (1.0 - ocolor.a) * color.a;
+	//if (aout <= 0.0) return;
+	//color.rgb = ((ocolor.rgb * ocolor.a) + (color.rgb * color.a * (1.0 - ocolor.a))) / aout;
+	color.rgb = mix(color.rgb, ocolor.rgb, ocolor.a);
+	color.a = 1.0;
+}`;
+var fragRectShader = `#version 300 es
 #line 189
 precision highp int;
 precision highp float;
@@ -1013,10 +1114,13 @@ var fragColorbarShader = `#version 300 es
 precision highp int;
 precision highp float;
 uniform highp sampler2D colormap;
+uniform float layer;
 in vec2 vColor;
 out vec4 color;
 void main() {
-	color = vec4(texture(colormap, vColor).rgb, 1.0);
+	float nlayer = float(textureSize(colormap, 0).y);
+	float fmap = (0.5 + layer) / nlayer;
+	color = vec4(texture(colormap, vec2(vColor.x, fmap)).rgb, 1.0);
 }`;
 var vertGraphShader = `#version 300 es
 #line 229
@@ -1057,7 +1161,7 @@ void main(void) {
 	frac = (frac * 2.0) - 1.0;
 	gl_Position = vec4(frac, 0.0, 1.0);
 }`;
-var vertLineShader = `#version 300 es
+var vertRectShader = `#version 300 es
 #line 229
 layout(location=0) in vec3 pos;
 uniform vec2 canvasWidthHeight;
@@ -1070,6 +1174,20 @@ void main(void) {
 	frac = (frac * 2.0) - 1.0;
 	gl_Position = vec4(frac, 0.0, 1.0);
 }`;
+var vertLineShader = `#version 300 es
+#line 229
+layout(location=0) in vec3 pos;
+uniform vec2 canvasWidthHeight;
+uniform float thickness;
+uniform vec4 startXYendXY;
+void main(void) {
+	vec2 posXY = mix(startXYendXY.xy, startXYendXY.zw, pos.x);
+	vec2 dir = normalize(startXYendXY.xy - startXYendXY.zw);
+	posXY += vec2(-dir.y, dir.x) * thickness * (pos.y - 0.5);
+	posXY.x = (posXY.x) / canvasWidthHeight.x; //0..1
+	posXY.y = 1.0 - (posXY.y / canvasWidthHeight.y); //1..0
+	gl_Position = vec4((posXY * 2.0) - 1.0, 0.0, 1.0);
+}`;
 var vertBmpShader = `#version 300 es
 #line 229
 layout(location=0) in vec3 pos;
@@ -1156,7 +1274,7 @@ in vec2 TexCoord;
 out vec4 FragColor;
 uniform float coordZ;
 uniform float layer;
-uniform float numLayers;
+//uniform float numLayers;
 uniform highp sampler2D colormap;
 uniform lowp sampler3D blend3D;
 uniform float opacity;
@@ -1186,7 +1304,9 @@ void main(void) {
  }
  idx = ((idx - uint(1)) % uint(100))+uint(1);
  float fx = (float(idx)+0.5) / 256.0;
- float y = (2.0 * layer + 1.0)/(2.0 * numLayers);
+ 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;
@@ -1205,28 +1325,43 @@ in vec2 TexCoord;
 out vec4 FragColor;
 uniform float coordZ;
 uniform float layer;
-uniform float numLayers;
+//uniform float numLayers;
 uniform float scl_slope;
 uniform float scl_inter;
 uniform float cal_max;
 uniform float cal_min;
 uniform highp sampler2D colormap;
 uniform lowp sampler3D blend3D;
+uniform int modulation;
+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);
- f = mix(0.0, 1.0, (f - mn) / r);
- //float y = 1.0 / numLayers;
- //y = ((layer + 0.5) * y);
+ float txl = mix(0.0, 1.0, (f - mn) / r);
  //https://stackoverflow.com/questions/5879403/opengl-texture-coordinates-in-pixel-space
- float y = (2.0 * layer + 1.0)/(2.0 * numLayers);
- FragColor = texture(colormap, vec2(f, y)).rgba;
+ 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);
@@ -1244,7 +1379,7 @@ in vec2 TexCoord;
 out vec4 FragColor;
 uniform float coordZ;
 uniform float layer;
-uniform float numLayers;
+//uniform float numLayers;
 uniform float scl_slope;
 uniform float scl_inter;
 uniform float cal_max;
@@ -1254,10 +1389,14 @@ uniform lowp sampler3D blend3D;
 uniform float opacity;
 uniform mat4 mtx;
 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;
@@ -1404,6 +1543,21 @@ void main(void) {
 	vV = -vec3(modelMtx*vec4(pos,1.0));
 	vClr = clr;
 }`;
+var fragMeshDepthShader = `#version 300 es
+precision highp int;
+precision highp float;
+uniform float opacity;
+out vec4 color;
+vec4 packFloatToVec4i(const float value) {
+	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);
+	res -= res.xxyz * bitMsk;
+	return res;
+}
+void main() {
+	color = packFloatToVec4i(gl_FragCoord.z);
+}`;
 var fragMeshToonShader = `#version 300 es
 precision highp int;
 precision highp float;
@@ -1599,15 +1753,6 @@ void main() {
 	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;
@@ -1618,12 +1763,15 @@ uniform vec3 texVox;
 uniform vec4 clipPlane;
 uniform highp sampler3D volume, overlay;
 uniform float overlays;
-uniform int id;
+uniform mat4 matRAS;
+uniform mat4 mvpMtx;
 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);
@@ -1647,6 +1795,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
@@ -1663,6 +1812,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
@@ -1670,6 +1820,34 @@ 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.
 
@@ -2709,6 +2887,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;
@@ -17201,11 +18389,11 @@ var jpx = { exports: {} };
       }
       return dict.get(name);
     };
-    Util2.inherit = function Util_inherit(sub, base, prototype) {
-      sub.prototype = Object.create(base.prototype);
-      sub.prototype.constructor = sub;
+    Util2.inherit = function Util_inherit(sub2, base, prototype) {
+      sub2.prototype = Object.create(base.prototype);
+      sub2.prototype.constructor = sub2;
       for (var prop in prototype) {
-        sub.prototype[prop] = prototype[prop];
+        sub2.prototype[prop] = prototype[prop];
       }
     };
     Util2.loadScript = function Util_loadScript(src, callback) {
@@ -103407,7 +104595,7 @@ function isPlatformLittleEndian() {
   new DataView(buffer2).setInt16(0, 256, true);
   return new Int16Array(buffer2)[0] === 256;
 }
-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) {
+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;
   this.DT_BINARY = 1;
@@ -103436,7 +104624,9 @@ function NVImage(dataBuffer, name = "", colorMap = "gray", opacity = 1, pairedIm
   this.percentileFrac = percentileFrac;
   this.ignoreZeroVoxels = ignoreZeroVoxels;
   this.trustCalMinMax = trustCalMinMax;
+  this.colorMapNegative = colorMapNegative;
   this.visible = visible;
+  this.modulationImage = null;
   this.series = [];
   if (!dataBuffer) {
     return;
@@ -103700,7 +104890,25 @@ function NVImage(dataBuffer, name = "", colorMap = "gray", opacity = 1, pairedIm
     this.hdr.cal_max = cal_max;
   this.calMinMax();
 }
+NVImage.prototype.computeObliqueAngle = function(mtx44) {
+  let mtx = clone$1(mtx44);
+  transpose(mtx, mtx44);
+  let dxtmp = Math.sqrt(mtx[0] * mtx[0] + mtx[1] * mtx[1] + mtx[2] * mtx[2]);
+  let xmax = Math.max(Math.max(Math.abs(mtx[0]), Math.abs(mtx[1])), Math.abs(mtx[2])) / dxtmp;
+  let dytmp = Math.sqrt(mtx[4] * mtx[4] + mtx[5] * mtx[5] + mtx[6] * mtx[6]);
+  let ymax = Math.max(Math.max(Math.abs(mtx[4]), Math.abs(mtx[5])), Math.abs(mtx[6])) / dytmp;
+  let dztmp = Math.sqrt(mtx[8] * mtx[8] + mtx[9] * mtx[9] + mtx[10] * mtx[10]);
+  let zmax = Math.max(Math.max(Math.abs(mtx[8]), Math.abs(mtx[9])), Math.abs(mtx[10])) / dztmp;
+  let fig_merit = Math.min(Math.min(xmax, ymax), zmax);
+  let oblique_angle = Math.abs(Math.acos(fig_merit) * 180 / 3.141592653);
+  if (oblique_angle > 0.01)
+    console.log("Warning voxels not aligned with world space: " + oblique_angle + " degrees from plumb.\n");
+  else
+    oblique_angle = 0;
+  return oblique_angle;
+};
 NVImage.prototype.calculateOblique = function() {
+  this.oblique_angle = this.computeObliqueAngle(this.matRAS);
   let LPI = this.vox2mm([0, 0, 0], this.matRAS);
   let X1mm = this.vox2mm([1 / this.pixDimsRAS[1], 0, 0], this.matRAS);
   let Y1mm = this.vox2mm([0, 1 / this.pixDimsRAS[2], 0], this.matRAS);
@@ -103716,6 +104924,21 @@ NVImage.prototype.calculateOblique = function() {
   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);
+  let dim = fromValues(this.dimsRAS[1], this.dimsRAS[2], this.dimsRAS[3], 1);
+  let sform = clone$1(this.matRAS);
+  transpose(sform, sform);
+  let shim = fromValues(-0.5, -0.5, -0.5, 0);
+  translate(sform, sform, shim);
+  sform[0] *= dim[0];
+  sform[1] *= dim[0];
+  sform[2] *= dim[0];
+  sform[4] *= dim[1];
+  sform[5] *= dim[1];
+  sform[6] *= dim[1];
+  sform[8] *= dim[2];
+  sform[9] *= dim[2];
+  sform[10] *= dim[2];
+  this.frac2mm = clone$1(sform);
 };
 NVImage.prototype.THD_daxes_to_NIFTI = function(xyzDelta, xyzOrigin, orientSpecific) {
   let hdr = this.hdr;
@@ -104411,7 +105634,7 @@ NVImage.prototype.readMHA = function(buffer2, pairedImgData) {
     line = readStr();
   }
   let mmMat = fromValues$3(hdr.pixDims[1], 0, 0, 0, hdr.pixDims[2], 0, 0, 0, hdr.pixDims[3]);
-  multiply$2(mat33, mmMat, mat33);
+  multiply$1(mat33, mmMat, mat33);
   hdr.affine = [
     [-mat33[0], -mat33[3], -mat33[6], -offset[0]],
     [-mat33[1], -mat33[4], -mat33[7], -offset[1]],
@@ -104812,7 +106035,7 @@ NVImage.prototype.readNRRD = function(dataBuffer, pairedImgData) {
       offset[1] = -offset[1];
     if (rot33[8] < 0)
       offset[2] = -offset[2];
-    multiply$2(mat33, rot33, mat33);
+    multiply$1(mat33, rot33, mat33);
     let mat = fromValues$2(mat33[0], mat33[3], mat33[6], offset[0], mat33[1], mat33[4], mat33[7], offset[1], mat33[2], mat33[5], mat33[8], offset[2], 0, 0, 0, 1);
     let mm000 = this.vox2mm([0, 0, 0], mat);
     let mm100 = this.vox2mm([1, 0, 0], mat);
@@ -104928,7 +106151,7 @@ NVImage.prototype.calculateRAS = function() {
   rotM[3 + 2 * 4] = (header.dims[perm[2]] - 1) * flip[2];
   let residualR = create$2();
   invert(residualR, rotM);
-  multiply$1(residualR, residualR, R2);
+  multiply(residualR, residualR, R2);
   this.matRAS = clone$1(residualR);
   rotM = fromValues$2(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
   rotM[perm[0] - 1 + 0 * 4] = -flip[0] * 2 + 1;
@@ -105230,7 +106453,8 @@ NVImage.loadFromUrl = async function({
   trustCalMinMax = true,
   percentileFrac = 0.02,
   ignoreZeroVoxels = false,
-  visible = true
+  visible = true,
+  colorMapNegative = ""
 } = {}) {
   if (url === "") {
     throw Error("url must not be empty");
@@ -105263,7 +106487,7 @@ NVImage.loadFromUrl = async function({
     pairedImgData = await resp.arrayBuffer();
   }
   if (dataBuffer) {
-    nvimage = new NVImage(dataBuffer, name, colorMap, opacity, pairedImgData, cal_min, cal_max, trustCalMinMax, percentileFrac, ignoreZeroVoxels, visible);
+    nvimage = new NVImage(dataBuffer, name, colorMap, opacity, pairedImgData, cal_min, cal_max, trustCalMinMax, percentileFrac, ignoreZeroVoxels, visible, false, false, colorMapNegative);
   } else {
     alert("Unable to load buffer properly from volume");
   }
@@ -105463,14 +106687,20 @@ function getExtents$1(positions, forceOriginInVolume = true) {
   return { min: min2, max: max2, furthestVertexFromOrigin, origin };
 }
 NVImage.prototype.toNiivueObject3D = function(id, gl) {
-  let LPI = this.vox2mm([0, 0, 0], this.matRAS);
-  let LAI = this.vox2mm([0, this.dimsRAS[2] - 1, 0], this.matRAS);
-  let LPS = this.vox2mm([0, 0, this.dimsRAS[3] - 1], this.matRAS);
-  let LAS = this.vox2mm([0, this.dimsRAS[2] - 1, this.dimsRAS[3] - 1], this.matRAS);
-  let RPI = this.vox2mm([this.dimsRAS[1] - 1, 0, 0], this.matRAS);
-  let RAI = this.vox2mm([this.dimsRAS[1] - 1, this.dimsRAS[2] - 1, 0], this.matRAS);
-  let RPS = this.vox2mm([this.dimsRAS[1] - 1, 0, this.dimsRAS[3] - 1], this.matRAS);
-  let RAS = this.vox2mm([this.dimsRAS[1] - 1, this.dimsRAS[2] - 1, this.dimsRAS[3] - 1], this.matRAS);
+  let L = -0.5;
+  let P = -0.5;
+  let I2 = -0.5;
+  let R2 = this.dimsRAS[1] - 1 + 0.5;
+  let A2 = this.dimsRAS[2] - 1 + 0.5;
+  let S = this.dimsRAS[3] - 1 + 0.5;
+  let LPI = this.vox2mm([L, P, I2], this.matRAS);
+  let LAI = this.vox2mm([L, A2, I2], this.matRAS);
+  let LPS = this.vox2mm([L, P, S], this.matRAS);
+  let LAS = this.vox2mm([L, A2, S], this.matRAS);
+  let RPI = this.vox2mm([R2, P, I2], this.matRAS);
+  let RAI = this.vox2mm([R2, A2, I2], this.matRAS);
+  let RPS = this.vox2mm([R2, P, S], this.matRAS);
+  let RAS = this.vox2mm([R2, A2, S], this.matRAS);
   let posTex = [
     ...LPS,
     ...[0, 0, 1],
@@ -105553,11 +106783,16 @@ NVImage.prototype.toNiivueObject3D = function(id, gl) {
     ...RAI,
     ...RPI
   ]);
-  obj3D.extentsMin = extents.min;
-  obj3D.extentsMax = extents.max;
+  obj3D.extentsMin = extents.min.slice();
+  obj3D.extentsMax = extents.max.slice();
   obj3D.furthestVertexFromOrigin = extents.furthestVertexFromOrigin;
   obj3D.originNegate = clone(extents.origin);
   negate(obj3D.originNegate, obj3D.originNegate);
+  obj3D.fieldOfViewDeObliqueMM = [
+    this.dimsRAS[1] * this.pixDimsRAS[1],
+    this.dimsRAS[2] * this.pixDimsRAS[2],
+    this.dimsRAS[3] * this.pixDimsRAS[3]
+  ];
   return obj3D;
 };
 const colortables = function() {
@@ -105609,6 +106844,8 @@ colortables.prototype.makeLut = function(Rs, Gs, Bs, As, Is) {
   if (this.gamma === 1)
     return lut;
   for (var i2 = 0; i2 < 255 * 4; i2++) {
+    if (i2 % 4 === 3)
+      continue;
     lut[i2] = Math.pow(lut[i2] / 255, 1 / this.gamma) * 255;
   }
   return lut;
@@ -106282,7 +107519,7 @@ NVMesh.readTRK = function(buffer2) {
     identity$1(mat);
   }
   var vox2mmMat = create$2();
-  mul$1(vox2mmMat, mat, zoomMat);
+  mul(vox2mmMat, mat, zoomMat);
   let i32 = null;
   let f32 = null;
   i32 = new Int32Array(buffer2.slice(hdr_sz));
@@ -110233,11 +111470,13 @@ function Niivue(options = {}) {
     textHeight: 0.06,
     colorbarHeight: 0.05,
     crosshairWidth: 1,
+    rulerWidth: 4,
     show3Dcrosshair: false,
     backColor: [0, 0, 0, 1],
     crosshairColor: [1, 0, 0, 1],
     selectionBoxColor: [1, 1, 1, 0.5],
     clipPlaneColor: [0.7, 0, 0.7, 0.5],
+    rulerColor: [1, 0, 0, 0.8],
     colorBarMargin: 0.05,
     trustCalMinMax: true,
     clipPlaneHotKey: "KeyC",
@@ -110245,7 +111484,17 @@ function Niivue(options = {}) {
     keyDebounceTime: 50,
     isNearestInterpolation: false,
     isAtlasOutline: false,
+    isRuler: false,
+    isColorbar: false,
+    isOrientCube: false,
+    multiplanarPadPixels: 0,
     isRadiologicalConvention: false,
+    meshThicknessOn2D: Infinity,
+    isDragShowsMeasurementTool: false,
+    isDepthPickMesh: false,
+    isCornerOrientationText: false,
+    sagittalNoseLeft: false,
+    isSliceMM: false,
     logging: false,
     loadingText: "waiting for images...",
     dragAndDropEnabled: true,
@@ -110264,6 +111513,7 @@ function Niivue(options = {}) {
   this.currentDrawUndoBitmap = this.maxDrawUndoBitmaps;
   this.drawUndoBitmaps = [];
   this.drawOpacity = 0.8;
+  this.colorbarHeight = 0;
   this.drawPenLocation = [NaN, NaN, NaN];
   this.drawPenAxCorSag = -1;
   this.drawFillOverwrites = true;
@@ -110271,10 +111521,14 @@ function Niivue(options = {}) {
   this.overlayTexture = null;
   this.overlayTextureID = [];
   this.sliceShader = null;
-  this.lineShader = 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;
@@ -110294,7 +111548,6 @@ function Niivue(options = {}) {
   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;
@@ -110304,6 +111557,7 @@ function Niivue(options = {}) {
   this.sliceTypeSagittal = 2;
   this.sliceTypeMultiplanar = 3;
   this.sliceTypeRender = 4;
+  this.sliceMosaicString = "";
   this.sliceType = this.sliceTypeMultiplanar;
   this.scene = {};
   this.syncOpts = {};
@@ -110320,6 +111574,7 @@ function Niivue(options = {}) {
   this.scene.mouseButtonLeftDown = false;
   this.scene.mouseButtonRightDown = false;
   this.scene.mouseDepthPicker = false;
+  this.scene.pan2Dxyzmm = [0, 0, 0, 1];
   this.scene.scale2D = 1;
   this.scene.prevX = 0;
   this.scene.prevY = 0;
@@ -110336,13 +111591,7 @@ function Niivue(options = {}) {
   this.volScale = [];
   this.vox = [];
   this.mousePos = [0, 0];
-  this.numScreenSlices = 0;
-  this.screenSlices = [
-    { leftTopWidthHeight: [1, 0, 0, 1], axCorSag: this.sliceTypeAxial },
-    { leftTopWidthHeight: [1, 0, 0, 1], axCorSag: this.sliceTypeAxial },
-    { leftTopWidthHeight: [1, 0, 0, 1], axCorSag: this.sliceTypeAxial },
-    { leftTopWidthHeight: [1, 0, 0, 1], axCorSag: this.sliceTypeAxial }
-  ];
+  this.screenSlices = [];
   this.isDragging = false;
   this.dragStart = [0, 0];
   this.dragEnd = [0, 0];
@@ -110394,6 +111643,10 @@ function Niivue(options = {}) {
     {
       Name: "Toon",
       Frag: fragMeshToonShader
+    },
+    {
+      Name: "Depth",
+      Frag: fragMeshDepthShader
     }
   ];
   this.isController = false;
@@ -110422,6 +111675,28 @@ function Niivue(options = {}) {
   };
   this.subscriptions = [];
 }
+Niivue.prototype.saveScene = function(filename = "") {
+  function saveBlob(blob, name) {
+    const a = document.createElement("a");
+    document.body.appendChild(a);
+    a.style.display = "none";
+    const url = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = name;
+    a.click();
+    a.remove();
+  }
+  let canvas = this.canvas;
+  this.drawScene();
+  canvas.toBlob((blob) => {
+    if (filename === "") {
+      filename = `niivue-screenshot-${new Date().toString()}.png`;
+      filename = filename.replace(/\s/g, "_");
+    }
+    console.log(filename);
+    saveBlob(blob, filename);
+  });
+};
 Niivue.prototype.attachTo = async function(id) {
   await this.attachToCanvas(document.getElementById(id));
   log.debug("attached to element with id: ", id);
@@ -110640,14 +111915,18 @@ function intensityRaw2Scaled(hdr, raw) {
   return raw * hdr.scl_slope + hdr.scl_inter;
 }
 Niivue.prototype.calculateNewRange = function(volIdx = 0) {
-  if (this.sliceType === this.sliceTypeRender) {
+  if (this.sliceType === this.sliceTypeRender && this.sliceMosaicString.length < 1) {
     return;
   }
   if (this.dragStart[0] === this.dragEnd[0] && this.dragStart[1] === this.dragEnd[1])
     return;
   let frac = this.canvasPos2frac([this.dragStart[0], this.dragStart[1]]);
+  if (frac[0] < 0)
+    return;
   let startVox = this.frac2vox(frac, volIdx);
   frac = this.canvasPos2frac([this.dragEnd[0], this.dragEnd[1]]);
+  if (frac[0] < 0)
+    return;
   let endVox = this.frac2vox(frac, volIdx);
   let hi = -Number.MAX_VALUE, lo = Number.MAX_VALUE;
   let xrange;
@@ -110702,6 +111981,8 @@ Niivue.prototype.mouseUpListener = function() {
   this.drawPenAxCorSag = -1;
   if (this.isDragging) {
     this.isDragging = false;
+    if (this.opts.isDragShowsMeasurementTool)
+      return;
     this.calculateNewRange();
     this.refreshLayers(this.volumes[0], 0, this.volumes.length);
   }
@@ -110744,10 +112025,18 @@ Niivue.prototype.mouseMoveListener = function(e) {
     this.scene.prevY = this.scene.currY;
   }
 };
-Niivue.prototype.resetBriCon = function() {
-  if (this.sliceType === this.sliceTypeRender) {
+Niivue.prototype.resetBriCon = function(msg2 = null) {
+  let isRender = false;
+  if (this.sliceType === this.sliceTypeRender)
+    isRender = true;
+  if (msg2 !== null) {
+    if (this.inRenderTile(msg2.offsetX, msg2.offsetY) >= 0)
+      isRender = true;
+  }
+  if (isRender) {
     this.scene.mouseDepthPicker = true;
     this.drawScene();
+    this.drawScene();
     return;
   }
   this.volumes[0].cal_min = this.volumes[0].robust_min;
@@ -110783,9 +112072,6 @@ Niivue.prototype.handlePinchZoom = function(e) {
 };
 Niivue.prototype.keyUpListener = function(e) {
   if (e.code === this.opts.clipPlaneHotKey) {
-    if (this.sliceType != this.sliceTypeRender) {
-      return;
-    }
     let now = new Date().getTime();
     let elapsed = now - this.lastCalled;
     if (elapsed > this.opts.keyDebounceTime) {
@@ -110983,8 +112269,26 @@ Niivue.prototype.dropListener = async function(e) {
   }
   this.drawScene();
 };
+Niivue.prototype.setCornerOrientationText = function(isCornerOrientationText) {
+  this.opts.isCornerOrientationText = isCornerOrientationText;
+  this.updateGLVolume();
+};
 Niivue.prototype.setRadiologicalConvention = function(isRadiologicalConvention) {
   this.opts.isRadiologicalConvention = isRadiologicalConvention;
+  this.updateGLVolume();
+};
+Niivue.prototype.setMeshThicknessOn2D = function(meshThicknessOn2D) {
+  this.opts.meshThicknessOn2D = meshThicknessOn2D;
+  this.updateGLVolume();
+};
+Niivue.prototype.setSliceMosaicString = function(str) {
+  this.sliceMosaicString = str;
+  this.updateGLVolume();
+};
+Niivue.prototype.setSliceMM = function(isSliceMM) {
+  this.opts.isSliceMM = isSliceMM;
+  console.log("SliceMM feature is experimental");
+  this.updateGLVolume();
 };
 Niivue.prototype.getRadiologicalConvention = function() {
   return this.opts.isRadiologicalConvention;
@@ -111291,9 +112595,12 @@ Niivue.prototype.setMeshLayerProperty = function(mesh, layer, key2, val) {
   this.meshes[idx].setLayerProperty(layer, key2, val, this.gl);
   this.updateGLVolume();
 };
+Niivue.prototype.setPan2Dxyzmm = function(xyzmmZoom) {
+  this.scene.pan2Dxyzmm = xyzmmZoom;
+  this.drawScene();
+};
 Niivue.prototype.setScale2D = function(zoomFactor) {
   this.scene.scale2D = zoomFactor;
-  console.log("bingo");
   this.drawScene();
 };
 Niivue.prototype.setRenderAzimuthElevation = function(a, e) {
@@ -111388,12 +112695,12 @@ Niivue.prototype.moveVolumeToTop = function(volume) {
   this.setVolume(volume, this.volumes.length - 1);
 };
 Niivue.prototype.mouseDown = function mouseDown(x2, y) {
-  if (this.sliceType != this.sliceTypeRender)
+  if (this.inRenderTile(x2, y) < 0)
     return;
   this.mousePos = [x2, y];
 };
 Niivue.prototype.mouseMove = function mouseMove(x2, y) {
-  if (this.sliceType != this.sliceTypeRender)
+  if (this.inRenderTile(x2, y) < 0)
     return;
   this.scene.renderAzimuth += x2 - this.mousePos[0];
   this.scene.renderElevation += y - this.mousePos[1];
@@ -111420,8 +112727,6 @@ Niivue.prototype.setClipPlane = function(depthAzimuthElevation) {
   let v = this.sph2cartDeg(depthAzimuthElevation[1] + 180, depthAzimuthElevation[2]);
   this.scene.clipPlane = [v[0], v[1], v[2], depthAzimuthElevation[0]];
   this.scene.clipPlaneDepthAziElev = depthAzimuthElevation;
-  if (this.sliceType != this.sliceTypeRender)
-    return;
   this.drawScene();
 };
 Niivue.prototype.setCrosshairColor = function(color) {
@@ -111538,6 +112843,7 @@ Niivue.prototype.loadVolumes = async function(volumeList) {
       url: volumeList[i2].url,
       name: volumeList[i2].name,
       colorMap: volumeList[i2].colorMap,
+      colorMapNegative: volumeList[i2].colorMapNegative,
       opacity: volumeList[i2].opacity,
       urlImgData: volumeList[i2].urlImgData,
       cal_min: volumeList[i2].cal_min,
@@ -111806,7 +113112,7 @@ Niivue.prototype.drawPt = function(x2, y, z, penValue) {
   z = Math.min(Math.max(z, 0), dz - 1);
   this.drawBitmap[x2 + y * dx + z * dx * dy] = penValue;
 };
-Niivue.prototype.drawLine = function(ptA, ptB, penValue) {
+Niivue.prototype.drawPenLine = function(ptA, ptB, penValue) {
   let dx = Math.abs(ptA[0] - ptB[0]);
   let dy = Math.abs(ptA[1] - ptB[1]);
   let dz = Math.abs(ptA[2] - ptB[2]);
@@ -112302,21 +113608,44 @@ 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.pickingImageShader = new Shader(this.gl, vertRenderShader, fragVolumePickingShader);
+  this.pickingImageShader.use(this.gl);
+  this.gl.uniform1i(this.pickingImageShader.uniforms["volume"], 0);
+  this.gl.uniform1i(this.pickingImageShader.uniforms["overlay"], 2);
+  this.pickingImageShader.mvpUniformLoc = this.pickingImageShader.uniforms["mvpMtx"];
+  this.pickingImageShader.rayDirUniformLoc = this.pickingImageShader.uniforms["rayDir"];
+  this.pickingImageShader.clipPlaneUniformLoc = this.pickingImageShader.uniforms["clipPlane"];
   this.sliceShader = new Shader(this.gl, vertSliceShader, fragSliceShader);
   this.sliceShader.use(this.gl);
   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.lineShader = new Shader(this.gl, vertLineShader, fragLineShader);
-  this.graphShader = new Shader(this.gl, vertGraphShader, fragLineShader);
+  this.sliceMMShader = new Shader(this.gl, vertSliceMMShader, fragSliceMMShader);
+  this.sliceMMShader.use(this.gl);
+  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.lineShader = new Shader(this.gl, vertLineShader, fragRectShader);
+  this.graphShader = new Shader(this.gl, vertGraphShader, fragRectShader);
   this.renderShader = new Shader(this.gl, vertRenderShader, fragRenderShader);
   this.renderShader.use(this.gl);
   this.gl.uniform1i(this.renderShader.uniforms["volume"], 0);
@@ -112332,7 +113661,6 @@ 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.fiberShader = new Shader(this.gl, vertFiberShader, fragFiberShader);
   this.meshShader = new Shader(this.gl, vertMeshShader, this.meshShaders[0].Frag);
@@ -112444,7 +113772,6 @@ Niivue.prototype.refreshLayers = function(overlayItem, layer, numLayers) {
   if (layer === 0) {
     this.volumeObject3D = overlayItem.toNiivueObject3D(this.VOLUME_ID, this.gl);
     invert(mtx, mtx);
-    log.debug(`mtx layer ${layer}`, mtx);
     this.back.matRAS = overlayItem.matRAS;
     this.back.dims = overlayItem.dimsRAS;
     this.back.pixDims = overlayItem.pixDimsRAS;
@@ -112456,8 +113783,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);
@@ -112561,10 +113887,54 @@ Niivue.prototype.refreshLayers = function(overlayItem, layer, numLayers) {
   this.gl.uniform1i(orientShader.uniforms["blend3D"], 5);
   this.gl.uniform1i(orientShader.uniforms["colormap"], 1);
   this.gl.uniform1f(orientShader.uniforms["layer"], layer);
-  this.gl.uniform1f(orientShader.uniforms["numLayers"], numLayers);
   this.gl.uniform1f(orientShader.uniforms["scl_inter"], hdr.scl_inter);
   this.gl.uniform1f(orientShader.uniforms["scl_slope"], hdr.scl_slope);
   this.gl.uniform1f(orientShader.uniforms["opacity"], opacity);
+  this.gl.uniform1i(orientShader.uniforms["modulationVol"], 7);
+  let modulateTexture = null;
+  if (overlayItem.modulationImage && overlayItem.modulationImage >= 0 && overlayItem.modulationImage < this.volumes.length) {
+    console.log(this.volumes);
+    let mhdr = this.volumes[overlayItem.modulationImage].hdr;
+    if (mhdr.dims[1] === hdr.dims[1] && mhdr.dims[2] === hdr.dims[2] && mhdr.dims[3] === hdr.dims[3]) {
+      this.gl.uniform1i(orientShader.uniforms["modulation"], 1);
+      modulateTexture = this.r8Tex(modulateTexture, this.gl.TEXTURE7, hdr.dims, true);
+      this.gl.activeTexture(this.gl.TEXTURE7);
+      this.gl.bindTexture(this.gl.TEXTURE_3D, modulateTexture);
+      let vx = hdr.dims[1] * hdr.dims[2] * hdr.dims[3];
+      let modulateVolume = new Uint8Array(vx);
+      let mn = mhdr.cal_min;
+      let scale2 = 255 / (mhdr.cal_max - mhdr.cal_min);
+      let imgRaw = this.volumes[overlayItem.modulationImage].img.buffer;
+      let img2 = new Uint8Array(imgRaw);
+      switch (mhdr.datatypeCode) {
+        case overlayItem.DT_SIGNED_SHORT:
+          img2 = new Int16Array(imgRaw);
+          break;
+        case overlayItem.DT_FLOAT:
+          img2 = new Float32Array(imgRaw);
+          break;
+        case overlayItem.DT_DOUBLE:
+          img2 = new Float64Array(imgRaw);
+          break;
+        case overlayItem.DT_RGB:
+          img2 = new Uint8Array(imgRaw);
+          break;
+        case overlayItem.DT_UINT16:
+          img2 = new Uint16Array(imgRaw);
+          break;
+      }
+      console.log(this.volumes[overlayItem.modulationImage]);
+      for (let i2 = 0; i2 < vx; i2++) {
+        let v = img2[i2] * mhdr.scl_slope + mhdr.scl_inter;
+        v = (v - mn) * scale2;
+        v = Math.min(Math.max(v, 0), 255);
+        modulateVolume[i2] = v;
+      }
+      this.gl.texSubImage3D(this.gl.TEXTURE_3D, 0, 0, 0, 0, hdr.dims[1], hdr.dims[2], hdr.dims[3], this.gl.RED, this.gl.UNSIGNED_BYTE, modulateVolume);
+    } else
+      console.log("Modulation image dimensions do not match target");
+  } else
+    this.gl.uniform1i(orientShader.uniforms["modulation"], 0);
   this.gl.uniformMatrix4fv(orientShader.uniforms["mtx"], false, mtx);
   if (hdr.intent_code === 1002) {
     let x2 = 1 / this.back.dims[1];
@@ -112585,6 +113955,7 @@ Niivue.prototype.refreshLayers = function(overlayItem, layer, numLayers) {
   }
   this.gl.bindVertexArray(this.unusedVAO);
   this.gl.deleteTexture(tempTex3D);
+  this.gl.deleteTexture(modulateTexture);
   this.gl.deleteTexture(blendTexture);
   this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
   this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
@@ -112599,13 +113970,19 @@ Niivue.prototype.refreshLayers = function(overlayItem, layer, numLayers) {
   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);
+  this.gl.uniform1i(this.sliceMMShader.uniforms["drawing"], 7);
   this.sliceShader.use(this.gl);
   this.gl.uniform1f(this.sliceShader.uniforms["overlays"], this.overlays.length);
   this.gl.uniform1f(this.sliceShader.uniforms["drawOpacity"], this.drawOpacity);
   this.gl.uniform1i(this.sliceShader.uniforms["drawing"], 7);
+  this.gl.activeTexture(this.gl.TEXTURE7);
+  this.gl.bindTexture(this.gl.TEXTURE_3D, this.drawTexture);
   this.updateInterpolation(layer);
 };
 Niivue.prototype.colorMaps = function(sort = true) {
@@ -112616,6 +113993,18 @@ Niivue.prototype.setColorMap = function(id, colorMap) {
   this.volumes[idx].colorMap = colorMap;
   this.updateGLVolume();
 };
+Niivue.prototype.setColorMapNegative = function(id, colorMapNegative) {
+  let idx = this.getVolumeIndexByID(id);
+  this.volumes[idx].colorMapNegative = colorMapNegative;
+  this.updateGLVolume();
+};
+Niivue.prototype.setModulationImage = function(idTarget, idModulation) {
+  let idxTarget = this.getVolumeIndexByID(idTarget);
+  let idxModulation = null;
+  idxModulation = this.getVolumeIndexByID(idModulation);
+  this.volumes[idxTarget].modulationImage = idxModulation;
+  this.updateGLVolume();
+};
 Niivue.prototype.setGamma = function(gamma = 1) {
   cmapper.gamma = gamma;
   this.updateGLVolume();
@@ -112650,40 +114039,87 @@ Niivue.prototype.refreshColormaps = function() {
   this.colormapTexture = this.gl.createTexture();
   this.gl.activeTexture(this.gl.TEXTURE1);
   this.gl.bindTexture(this.gl.TEXTURE_2D, this.colormapTexture);
-  this.gl.texStorage2D(this.gl.TEXTURE_2D, 1, this.gl.RGBA8, 256, nLayer);
+  this.gl.texStorage2D(this.gl.TEXTURE_2D, 1, this.gl.RGBA8, 256, nLayer * 2);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
   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);
-  if (nLayer > 1) {
-    for (let i2 = 1; i2 < nLayer; i2++) {
-      let lut = this.colormap(this.volumes[i2].colorMap);
-      let c2 = new Uint8ClampedArray(luts2.length + lut.length);
-      c2.set(luts2);
-      c2.set(lut, luts2.length);
-      luts2 = c2;
-    }
-  }
-  this.gl.texSubImage2D(this.gl.TEXTURE_2D, 0, 0, 0, 256, nLayer, this.gl.RGBA, this.gl.UNSIGNED_BYTE, luts2);
+  function addColormap(lut) {
+    let c2 = new Uint8ClampedArray(luts2.length + lut.length);
+    c2.set(luts2);
+    c2.set(lut, luts2.length);
+    luts2 = c2;
+  }
+  for (let i2 = 1; i2 < nLayer; i2++)
+    addColormap(this.colormap(this.volumes[i2].colorMap));
+  let bogusLut = new Uint8ClampedArray(1024);
+  bogusLut[0] = 255;
+  bogusLut[1] = 255;
+  bogusLut[2] = 255;
+  bogusLut[3] = 0;
+  bogusLut[4] = 0;
+  bogusLut[5] = 0;
+  bogusLut[6] = 0;
+  bogusLut[7] = 255;
+  for (let i2 = 0; i2 < nLayer; i2++) {
+    let lut = bogusLut.slice();
+    if (this.volumes[i2].colorMapNegative.length > 0)
+      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);
   return this;
 };
 Niivue.prototype.sliceScale = function() {
-  var dims = [
-    1,
-    this.back.dims[1] * this.back.pixDims[1],
-    this.back.dims[2] * this.back.pixDims[2],
-    this.back.dims[3] * this.back.pixDims[3]
-  ];
-  var longestAxis = Math.max(dims[1], Math.max(dims[2], dims[3]));
+  let dimsMM = this.screenFieldOfViewMM(this.sliceTypeAxial);
+  var longestAxis = Math.max(dimsMM[0], Math.max(dimsMM[1], dimsMM[2]));
   var volScale = [
-    dims[1] / longestAxis,
-    dims[2] / longestAxis,
-    dims[3] / longestAxis
+    dimsMM[0] / longestAxis,
+    dimsMM[1] / longestAxis,
+    dimsMM[2] / longestAxis
   ];
   var vox = [this.back.dims[1], this.back.dims[2], this.back.dims[3]];
-  return { volScale, vox };
+  return { volScale, vox, longestAxis, dimsMM };
+};
+function swizzleVec3(vec, order = [0, 1, 2]) {
+  let vout = create$1();
+  vout[0] = vec[order[0]];
+  vout[1] = vec[order[1]];
+  vout[2] = vec[order[2]];
+  return vout;
+}
+Niivue.prototype.inRenderTile = function(x2, y) {
+  for (let i2 = 0; i2 < this.screenSlices.length; i2++) {
+    if (this.screenSlices[i2].axCorSag !== this.sliceTypeRender)
+      continue;
+    let ltwh = this.screenSlices[i2].leftTopWidthHeight;
+    if (x2 > ltwh[0] && y > ltwh[1] && x2 < ltwh[0] + ltwh[2] && y < ltwh[1] + ltwh[3])
+      return i2;
+  }
+  return -1;
+};
+Niivue.prototype.sliceScroll3D = function(posChange = 0) {
+  if (posChange === 0)
+    return;
+  if (this.volumes.length > 0 && this.scene.clipPlaneDepthAziElev[0] < 1.8) {
+    let depthAziElev = this.scene.clipPlaneDepthAziElev.slice();
+    if (posChange > 0)
+      depthAziElev[0] = Math.min(1.5, depthAziElev[0] + 0.025);
+    if (posChange < 0)
+      depthAziElev[0] = Math.max(-1.5, depthAziElev[0] - 0.025);
+    if (depthAziElev[0] !== this.scene.clipPlaneDepthAziElev[0]) {
+      this.scene.clipPlaneDepthAziElev = depthAziElev;
+      return this.setClipPlane(this.scene.clipPlaneDepthAziElev);
+    }
+    return;
+  }
+  if (posChange > 0)
+    this.volScaleMultiplier = Math.min(2, this.volScaleMultiplier * 1.1);
+  if (posChange < 0)
+    this.volScaleMultiplier = Math.max(0.5, this.volScaleMultiplier * 0.9);
+  this.drawScene();
 };
 Niivue.prototype.mouseClick = function(x2, y, posChange = 0, isDelta = true) {
   var posNow;
@@ -112706,48 +114142,23 @@ Niivue.prototype.mouseClick = function(x2, y, posChange = 0, isDelta = true) {
       return;
     }
   }
-  if (this.sliceType === this.sliceTypeRender) {
-    if (posChange === 0)
-      return;
-    if (this.volumes.length > 0 && this.scene.clipPlaneDepthAziElev[0] < 1.8) {
-      let depthAziElev = this.scene.clipPlaneDepthAziElev.slice();
-      if (posChange > 0)
-        depthAziElev[0] = Math.min(1.5, depthAziElev[0] + 0.025);
-      if (posChange < 0)
-        depthAziElev[0] = Math.max(-1.5, depthAziElev[0] - 0.025);
-      if (depthAziElev[0] !== this.scene.clipPlaneDepthAziElev[0]) {
-        this.scene.clipPlaneDepthAziElev = depthAziElev;
-        return this.setClipPlane(this.scene.clipPlaneDepthAziElev);
-      }
-      return;
-    }
-    if (posChange > 0)
-      this.volScaleMultiplier = Math.min(2, this.volScaleMultiplier * 1.1);
-    if (posChange < 0)
-      this.volScaleMultiplier = Math.max(0.5, this.volScaleMultiplier * 0.9);
+  if (this.inRenderTile(x2, y) >= 0) {
+    this.sliceScroll3D(posChange);
     this.drawScene();
     return;
   }
-  if (this.numScreenSlices < 1 || this.gl.canvas.height < 1 || this.gl.canvas.width < 1)
+  if (this.screenSlices.length < 1 || this.gl.canvas.height < 1 || this.gl.canvas.width < 1)
     return;
-  for (let i2 = 0; i2 < this.numScreenSlices; i2++) {
+  for (let i2 = 0; i2 < this.screenSlices.length; i2++) {
     var axCorSag = this.screenSlices[i2].axCorSag;
     if (this.drawPenAxCorSag >= 0 && this.drawPenAxCorSag !== axCorSag)
       continue;
     if (axCorSag > this.sliceTypeSagittal)
       continue;
-    var ltwh = this.screenSlices[i2].leftTopWidthHeight;
-    let isMirror = false;
-    if (ltwh[2] < 0) {
-      isMirror = true;
-      ltwh[0] += ltwh[2];
-      ltwh[2] = -ltwh[2];
-    }
-    var fracX = (x2 - ltwh[0]) / ltwh[2];
-    if (isMirror)
-      fracX = 1 - fracX;
-    var fracY = 1 - (y - ltwh[1]) / ltwh[3];
-    if (fracX >= 0 && fracX < 1 && fracY >= 0 && fracY < 1) {
+    let texFrac = this.screenXY2TextureFrac(x2, y, i2);
+    if (texFrac[0] < 0)
+      continue;
+    {
       if (!isDelta) {
         this.scene.crosshairPos[2 - axCorSag] = posChange;
         this.drawScene();
@@ -112775,18 +114186,7 @@ Niivue.prototype.mouseClick = function(x2, y, posChange = 0, isDelta = true) {
         });
         return;
       }
-      if (axCorSag === this.sliceTypeAxial) {
-        this.scene.crosshairPos[0] = fracX;
-        this.scene.crosshairPos[1] = fracY;
-      }
-      if (axCorSag === this.sliceTypeCoronal) {
-        this.scene.crosshairPos[0] = fracX;
-        this.scene.crosshairPos[2] = fracY;
-      }
-      if (axCorSag === this.sliceTypeSagittal) {
-        this.scene.crosshairPos[1] = fracX;
-        this.scene.crosshairPos[2] = fracY;
-      }
+      this.scene.crosshairPos = texFrac.slice();
       if (this.opts.drawingEnabled) {
         let pt = this.frac2vox(this.scene.crosshairPos);
         if (this.opts.penValue < 0 || Object.is(this.opts.penValue, -0)) {
@@ -112800,7 +114200,7 @@ Niivue.prototype.mouseClick = function(x2, y, posChange = 0, isDelta = true) {
         } else {
           if (pt[0] === this.drawPenLocation[0] && pt[1] === this.drawPenLocation[1] && pt[2] === this.drawPenLocation[2])
             return;
-          this.drawLine(pt, this.drawPenLocation, this.opts.penValue);
+          this.drawPenLine(pt, this.drawPenLocation, this.opts.penValue);
         }
         this.drawPenLocation = pt;
         if (this.opts.isFilledPen)
@@ -112820,45 +114220,274 @@ Niivue.prototype.mouseClick = function(x2, y, posChange = 0, isDelta = true) {
         })
       });
       return;
-    } else {
-      if (x2 === null && y === null) {
-        this.scene.crosshairPos[2 - axCorSag] = posChange;
-        this.drawScene();
-        return;
-      }
     }
   }
 };
-Niivue.prototype.drawSelectionBox = function(leftTopWidthHeight) {
+Niivue.prototype.drawRuler = function() {
+  let fovMM = [];
+  let ltwh = [];
+  for (let i2 = 0; i2 < this.screenSlices.length; i2++) {
+    if (this.screenSlices[i2].axCorSag === this.sliceTypeRender)
+      continue;
+    if (this.screenSlices[i2].fovMM.length > 1) {
+      ltwh = this.screenSlices[i2].leftTopWidthHeight;
+      fovMM = this.screenSlices[i2].fovMM;
+      break;
+    }
+  }
+  if (ltwh.length < 4)
+    return;
+  let frac10cm = 100 / fovMM[0];
+  let pix10cm = frac10cm * ltwh[2];
+  let pixLeft = ltwh[0] + 0.5 * ltwh[2] - 0.5 * pix10cm;
+  let pixTop = ltwh[1] + ltwh[3] - 2 * this.opts.rulerWidth;
+  let startXYendXY = [pixLeft, pixTop, pixLeft + pix10cm, pixTop];
+  this.drawRuler10cm(startXYendXY);
+};
+Niivue.prototype.drawRuler10cm = function(startXYendXY) {
+  this.gl.bindVertexArray(this.genericVAO);
   this.lineShader.use(this.gl);
-  this.gl.uniform4fv(this.lineShader.uniforms["lineColor"], this.opts.selectionBoxColor);
+  this.gl.uniform4fv(this.lineShader.uniforms["lineColor"], this.opts.rulerColor);
   this.gl.uniform2fv(this.lineShader.uniforms["canvasWidthHeight"], [
     this.gl.canvas.width,
     this.gl.canvas.height
   ]);
-  this.gl.uniform4f(this.lineShader.uniforms["leftTopWidthHeight"], leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
+  this.gl.uniform1f(this.lineShader.uniforms["thickness"], this.opts.rulerWidth);
+  this.gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], startXYendXY);
+  this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  let w1cm = -0.1 * (startXYendXY[0] - startXYendXY[2]);
+  let b = startXYendXY[1];
+  let t = b - 2 * this.opts.rulerWidth;
+  let t2 = b - 4 * this.opts.rulerWidth;
+  for (let i2 = 0; i2 < 11; i2++) {
+    let l = startXYendXY[0] + i2 * w1cm;
+    let xyxy = [l, b, l, t];
+    if (i2 % 5 === 0)
+      xyxy[3] = t2;
+    this.gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], xyxy);
+    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  }
+  this.gl.bindVertexArray(this.unusedVAO);
+};
+Niivue.prototype.drawMeasurementTool = function(startXYendXY) {
+  let gl = this.gl;
+  gl.bindVertexArray(this.genericVAO);
+  gl.depthFunc(gl.ALWAYS);
+  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.canvas.width,
+    gl.canvas.height
+  ]);
+  gl.uniform1f(this.lineShader.uniforms["thickness"], this.opts.rulerWidth);
+  gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], startXYendXY);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  let c2 = this.opts.rulerColor;
+  c2[3] = 1;
+  gl.uniform4fv(this.lineShader.uniforms["lineColor"], c2);
+  let w = this.opts.rulerWidth;
+  gl.uniform1f(this.lineShader.uniforms["thickness"], w * 2);
+  let sXYeXY = [
+    startXYendXY[0],
+    startXYendXY[1] - w,
+    startXYendXY[0],
+    startXYendXY[1] + w
+  ];
+  gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], sXYeXY);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  sXYeXY = [
+    startXYendXY[2],
+    startXYendXY[3] - w,
+    startXYendXY[2],
+    startXYendXY[3] + w
+  ];
+  gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], sXYeXY);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  let startXY = this.canvasPos2frac([startXYendXY[0], startXYendXY[1]]);
+  let endXY = this.canvasPos2frac([startXYendXY[2], startXYendXY[3]]);
+  if (startXY[0] >= 0 && endXY[0] >= 0) {
+    startXY = this.frac2mm(startXY);
+    endXY = this.frac2mm(endXY);
+    let v = create$1();
+    sub(v, startXY, endXY);
+    let lenMM = len(v);
+    let decimals = 2;
+    if (lenMM > 9)
+      decimals = 1;
+    if (lenMM > 99)
+      decimals = 0;
+    let stringMM = lenMM.toFixed(decimals);
+    this.drawTextBetween(startXYendXY, stringMM);
+  }
+  gl.bindVertexArray(this.unusedVAO);
+};
+Niivue.prototype.drawBox = function(leftTopWidthHeight, lineColor = [1, 0, 0, 1]) {
+  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.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.drawColorbar = function(leftTopWidthHeight) {
+Niivue.prototype.drawSelectionBox = function(leftTopWidthHeight, lineColor = [1, 0, 0, 1]) {
+  this.drawBox(leftTopWidthHeight, this.opts.selectionBoxColor);
+};
+function tickSpacingX(tickCount, mn, mx) {
+  let range = Math.abs(mx - mn);
+  if (range === 0)
+    return [0, 0];
+  let unroundedTickSize = range / (tickCount - 1);
+  let x2 = Math.ceil(Math.log10(unroundedTickSize) - 1);
+  let pow10x = Math.pow(10, x2);
+  let spacing = Math.ceil(unroundedTickSize / pow10x) * pow10x;
+  let ticMin = mn;
+  if (ticMin % spacing !== 0 && range % spacing !== 0)
+    ticMin = Math.floor((mn + spacing) / spacing) * spacing;
+  if (mn / spacing % 1 !== 0)
+    ticMin = Math.sign(ticMin) * Math.round(Math.abs(ticMin));
+  return [spacing, ticMin];
+}
+function tickSpacing(mn, mx) {
+  let range = Math.abs(mx - mn);
+  let [spacing, ticMin] = tickSpacingX(5, mn, mx);
+  if (range % spacing === 0)
+    return [spacing, ticMin];
+  [spacing, ticMin] = tickSpacingX(4, mn, mx);
+  if (range % spacing === 0)
+    return [spacing, ticMin];
+  [spacing, ticMin] = tickSpacingX(5, mn, mx);
+  return [spacing, ticMin];
+}
+Niivue.prototype.effectiveCanvasHeight = function() {
+  return this.gl.canvas.height - this.colorbarHeight;
+};
+Niivue.prototype.reserveColorbarPanel = function() {
+  let txtHt = Math.max(this.opts.textHeight, 0.01);
+  txtHt = txtHt * Math.min(this.gl.canvas.height, this.gl.canvas.width);
+  let fullHt = 3 * txtHt;
+  let leftTopWidthHeight = [
+    0,
+    this.gl.canvas.height - fullHt,
+    this.gl.canvas.width,
+    fullHt
+  ];
+  this.colorbarHeight = leftTopWidthHeight[3] + 1;
+  return leftTopWidthHeight;
+};
+Niivue.prototype.drawColorbarCore = function(layer = 0, leftTopWidthHeight = [0, 0, 0, 0], isNegativeColor = false) {
+  if (this.volumes.length < 1)
+    return;
+  if (layer >= this.volumes.length)
+    layer = 0;
   if (leftTopWidthHeight[2] <= 0 || leftTopWidthHeight[3] <= 0)
     return;
+  let txtHt = Math.max(this.opts.textHeight, 0.01);
+  txtHt = txtHt * Math.min(this.gl.canvas.height, this.gl.canvas.width);
+  let margin = txtHt;
+  let fullHt = 3 * txtHt;
+  let barHt = txtHt;
+  if (leftTopWidthHeight[3] < fullHt) {
+    if (leftTopWidthHeight[3] < 3)
+      return;
+    margin = 1;
+    barHt = leftTopWidthHeight[3] - 2;
+  }
+  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],
+    leftTopWidthHeight[2] - 2 * margin,
+    barHt
+  ];
+  let rimLTWH = [
+    barLTWH[0] - 1,
+    barLTWH[1] - 1,
+    barLTWH[2] + 2,
+    barLTWH[3] + 2
+  ];
+  this.drawBox(rimLTWH, this.opts.crosshairColor);
   this.colorbarShader.use(this.gl);
   this.gl.activeTexture(this.gl.TEXTURE1);
   this.gl.bindTexture(this.gl.TEXTURE_2D, this.colormapTexture);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+  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.canvas.width,
     this.gl.canvas.height
   ]);
-  this.gl.uniform4f(this.colorbarShader.uniforms["leftTopWidthHeight"], leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
+  this.gl.uniform4fv(this.colorbarShader.uniforms["leftTopWidthHeight"], barLTWH);
   this.gl.bindVertexArray(this.genericVAO);
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   this.gl.bindVertexArray(this.unusedVAO);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+  let min2 = this.volumes[layer].cal_min;
+  let max2 = this.volumes[layer].cal_max;
+  if (min2 >= max2 || txtHt < 1)
+    return;
+  let range = max2 - min2;
+  let [spacing, ticMin] = tickSpacing(min2, max2);
+  function humanize(x2) {
+    return x2.toFixed(6).replace(/\.?0*$/, "");
+  }
+  let tic = ticMin;
+  let ticLTWH = [0, barLTWH[1] + barLTWH[3] - txtHt * 0.5, 2, txtHt * 0.75];
+  let txtTop = ticLTWH[1] + ticLTWH[3];
+  while (tic <= max2) {
+    ticLTWH[0] = barLTWH[0] + (tic - min2) / range * barLTWH[2];
+    this.drawBox(ticLTWH);
+    let str = humanize(tic);
+    if (isNegativeColor)
+      str = "-" + str;
+    this.drawTextBelow([ticLTWH[0], txtTop], str);
+    tic += spacing;
+  }
+};
+Niivue.prototype.drawColorbar = function() {
+  let nlayers = this.volumes.length;
+  if (nlayers < 1)
+    return;
+  let ncolorMapNegative = 0;
+  for (let i2 = 0; i2 < nlayers; i2++)
+    if (this.volumes[i2].colorMapNegative.length > 0)
+      ncolorMapNegative++;
+  let leftTopWidthHeight = this.reserveColorbarPanel();
+  let txtHt = Math.max(this.opts.textHeight, 0.01);
+  txtHt = txtHt * Math.min(this.gl.canvas.height, this.gl.canvas.width);
+  let fullHt = 3 * txtHt;
+  let wid = leftTopWidthHeight[2] / (nlayers + ncolorMapNegative);
+  if (leftTopWidthHeight[2] <= 0 || leftTopWidthHeight[3] <= 0) {
+    wid = this.gl.canvas.width / nlayers;
+    leftTopWidthHeight = [0, this.gl.canvas.height - fullHt, wid, fullHt];
+  }
+  leftTopWidthHeight[2] = wid;
+  for (let i2 = 0; i2 < nlayers; i2++) {
+    this.drawColorbarCore(i2, leftTopWidthHeight);
+    leftTopWidthHeight[0] += wid;
+    if (this.volumes[i2].colorMapNegative.length === 0)
+      continue;
+    this.drawColorbarCore(i2, leftTopWidthHeight, true);
+    leftTopWidthHeight[0] += wid;
+  }
 };
 Niivue.prototype.textWidth = function(scale2, str) {
   let w = 0;
@@ -112919,6 +114548,34 @@ Niivue.prototype.drawTextLeft = function(xy, str, scale2 = 1, color = null) {
   xy[1] -= 0.5 * size;
   this.drawText(xy, str, scale2, color);
 };
+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) {
+  if (this.opts.textHeight <= 0)
+    return;
+  let xy = [
+    (startXYendXY[0] + startXYendXY[2]) * 0.5,
+    (startXYendXY[1] + startXYendXY[3]) * 0.5
+  ];
+  let size = this.opts.textHeight * this.gl.canvas.height * scale2;
+  let w = this.textWidth(size, str);
+  xy[0] -= 0.5 * w;
+  xy[1] -= 0.5 * size;
+  let LTWH = [xy[0] - 1, xy[1] - 1, w + 2, size + 2];
+  let clr = color;
+  if (clr === null)
+    clr = this.opts.crosshairColor;
+  if (clr[0] + clr[1] + clr[2] > 0.8)
+    clr = [0, 0, 0, 0.5];
+  else
+    clr = [1, 1, 1, 0.5];
+  this.drawRect(LTWH, clr);
+  this.drawText(xy, str, scale2, color);
+};
 Niivue.prototype.drawTextBelow = function(xy, str, scale2 = 1, color = null) {
   if (this.opts.textHeight <= 0)
     return;
@@ -112952,117 +114609,271 @@ Niivue.prototype.setInterpolation = function(isNearest) {
     this.updateInterpolation(1);
   this.drawScene();
 };
-Niivue.prototype.calculateMvpMatrixX = function(leftTopWidthHeight) {
+function deg2rad(deg) {
+  return deg * (Math.PI / 180);
+}
+Niivue.prototype.calculateMvpMatrix2D = function(leftTopWidthHeight, mn, mx, clipTolerance = Infinity, clipDepth = 0, azimuth = null, elevation = null, isRadiolgical) {
   let gl = this.gl;
-  gl.viewport(leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
-  let whratio = leftTopWidthHeight[2] / leftTopWidthHeight[3];
-  console.log(">>", this.back.dimsRAS, this.back.matRAS);
-  let scale2 = this.furthestFromPivot * 0.5;
-  let origin = [0, 0, 0];
+  gl.viewport(leftTopWidthHeight[0], this.gl.canvas.clientHeight - (leftTopWidthHeight[1] + leftTopWidthHeight[3]), leftTopWidthHeight[2], leftTopWidthHeight[3]);
+  let left = mn[0];
+  let right = mx[0];
+  let leftTopMM = [left, mn[1]];
+  let fovMM = [right - left, mx[1] - mn[1]];
+  if (isRadiolgical) {
+    leftTopMM = [mx[0], mn[1]];
+    fovMM = [mn[0] - mx[0], mx[1] - mn[1]];
+    left = -mx[0];
+    right = -mn[0];
+  }
+  let scale2 = 2 * Math.max(Math.abs(mn[2]), Math.abs(mx[2]));
   let projectionMatrix = create$2();
-  if (whratio < 1)
-    ortho(projectionMatrix, -scale2, scale2, -scale2 / whratio, scale2 / whratio, 0.01, scale2 * 8);
-  else
-    ortho(projectionMatrix, -scale2 * whratio, scale2 * whratio, -scale2, scale2, 0.01, scale2 * 8);
+  let near = 0.01;
+  let far = scale2 * 8;
+  if (clipTolerance !== Infinity) {
+    let r = isRadiolgical;
+    if (elevation === 0 && (azimuth === 0 || azimuth === 180))
+      r = !r;
+    let dx = scale2 * 1.8 - clipDepth;
+    if (!r)
+      dx = scale2 * 1.8 + clipDepth;
+    near = dx - clipTolerance;
+    far = dx + clipTolerance;
+  }
+  ortho(projectionMatrix, left, right, mn[1], mx[1], near, far);
   const modelMatrix = create$2();
   modelMatrix[0] = -1;
   let translateVec3 = fromValues$1(0, 0, -scale2 * 1.8);
   translate(modelMatrix, modelMatrix, translateVec3);
-  if (this.position)
-    translate(modelMatrix, modelMatrix, this.position);
-  translate(modelMatrix, modelMatrix, [
-    -origin[0],
-    -origin[1],
-    -origin[2]
-  ]);
+  rotateX(modelMatrix, modelMatrix, deg2rad(270 - elevation));
+  rotateZ(modelMatrix, modelMatrix, deg2rad(azimuth - 180));
   let iModelMatrix = create$2();
   invert(iModelMatrix, modelMatrix);
   let normalMatrix = create$2();
   transpose(normalMatrix, iModelMatrix);
   let modelViewProjectionMatrix = create$2();
-  multiply$1(modelViewProjectionMatrix, projectionMatrix, modelMatrix);
-  return [modelViewProjectionMatrix, modelMatrix, normalMatrix];
+  multiply(modelViewProjectionMatrix, projectionMatrix, modelMatrix);
+  return {
+    modelViewProjectionMatrix,
+    modelMatrix,
+    normalMatrix,
+    leftTopMM,
+    fovMM
+  };
 };
-Niivue.prototype.drawMesh3DX = function(isDepthTest = true, alpha = 1, leftTopWidthHeight) {
-  if (this.meshes.length < 1)
+Niivue.prototype.swizzleVec3MM = function(v3, axCorSag) {
+  if (axCorSag === this.sliceTypeCoronal) {
+    v3 = swizzleVec3(v3, [0, 2, 1]);
+  } else if (axCorSag === this.sliceTypeSagittal) {
+    v3 = swizzleVec3(v3, [1, 2, 0]);
+  }
+  return v3;
+};
+Niivue.prototype.screenFieldOfViewMM = function(axCorSag = 0, forceSliceMM = false) {
+  if (!forceSliceMM && !this.opts.isSliceMM) {
+    let fov = this.volumeObject3D.fieldOfViewDeObliqueMM.slice();
+    return this.swizzleVec3MM(fov, axCorSag);
+  }
+  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();
+  subtract(fovMM, mxMM, mnMM);
+  return fovMM;
+};
+Niivue.prototype.screenFieldOfViewExtendedMM = function(axCorSag = 0) {
+  let mnMM = this.volumeObject3D.extentsMin.slice();
+  let mxMM = this.volumeObject3D.extentsMax.slice();
+  let rotation = create$2();
+  mnMM = this.swizzleVec3MM(mnMM, axCorSag);
+  mxMM = this.swizzleVec3MM(mxMM, axCorSag);
+  let fovMM = create$1();
+  subtract(fovMM, mxMM, mnMM);
+  return { mnMM, mxMM, rotation, fovMM };
+};
+Niivue.prototype.drawSliceOrientationText = function(leftTopWidthHeight, axCorSag) {
+  this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+  let topText = "S";
+  if (axCorSag === this.sliceTypeAxial)
+    topText = "A";
+  let leftText = this.opts.isRadiologicalConvention ? "R" : "L";
+  if (axCorSag === this.sliceTypeSagittal)
+    leftText = this.opts.sagittalNoseLeft ? "A" : "P";
+  if (this.opts.isCornerOrientationText) {
+    this.drawTextRightBelow([leftTopWidthHeight[0], leftTopWidthHeight[1]], leftText + topText);
     return;
+  }
+  this.drawTextBelow([
+    leftTopWidthHeight[0] + leftTopWidthHeight[2] * 0.5,
+    leftTopWidthHeight[1]
+  ], topText);
+  this.drawTextRight([
+    leftTopWidthHeight[0],
+    leftTopWidthHeight[1] + leftTopWidthHeight[3] * 0.5
+  ], leftText);
+};
+Niivue.prototype.xyMM2xyzMM = function(axCorSag, sliceFrac) {
+  let sliceDim = 2;
+  if (axCorSag === this.sliceTypeCoronal)
+    sliceDim = 1;
+  if (axCorSag === this.sliceTypeSagittal)
+    sliceDim = 0;
+  let a = [0, 0, 0];
+  let b = [1, 1, 0];
+  let c2 = [1, 0, 1];
+  a[sliceDim] = sliceFrac;
+  b[sliceDim] = sliceFrac;
+  c2[sliceDim] = sliceFrac;
+  a = this.frac2mm(a);
+  b = this.frac2mm(b);
+  c2 = this.frac2mm(c2);
+  a = this.swizzleVec3MM(a, axCorSag);
+  b = this.swizzleVec3MM(b, axCorSag);
+  c2 = this.swizzleVec3MM(c2, axCorSag);
+  let denom = (b[0] - a[0]) * (c2[1] - a[1]) - (c2[0] - a[0]) * (b[1] - a[1]);
+  let yMult = (b[0] - a[0]) * (c2[2] - a[2]) - (c2[0] - a[0]) * (b[2] - a[2]);
+  yMult /= denom;
+  let xMult = (b[1] - a[1]) * (c2[2] - a[2]) - (c2[1] - a[1]) * (b[2] - a[2]);
+  xMult /= denom;
+  let AxyzMxy = [0, 0, 0, 0, 0];
+  AxyzMxy[0] = a[0];
+  AxyzMxy[1] = a[1];
+  AxyzMxy[2] = a[2];
+  AxyzMxy[3] = xMult;
+  AxyzMxy[4] = yMult;
+  return AxyzMxy;
+};
+Niivue.prototype.draw2DMM = function(leftTopWidthHeight, axCorSag, customMM = NaN) {
+  let screen2 = this.screenFieldOfViewExtendedMM(axCorSag);
+  let isRadiolgical = this.opts.isRadiologicalConvention && axCorSag < this.sliceTypeSagittal;
+  if (customMM === Infinity || customMM === -Infinity) {
+    isRadiolgical = customMM !== Infinity;
+    if (axCorSag === this.sliceTypeCoronal)
+      isRadiolgical = !isRadiolgical;
+  } else if (this.opts.sagittalNoseLeft && axCorSag === this.sliceTypeSagittal)
+    isRadiolgical = !isRadiolgical;
+  let elevation = 0;
+  let azimuth = 0;
+  if (axCorSag === this.sliceTypeSagittal) {
+    azimuth = isRadiolgical ? 90 : -90;
+  } else if (axCorSag === this.sliceTypeCoronal) {
+    azimuth = isRadiolgical ? 180 : 0;
+  } else {
+    azimuth = isRadiolgical ? 180 : 0;
+    elevation = isRadiolgical ? -90 : 90;
+  }
+  if (leftTopWidthHeight[2] === 0 || leftTopWidthHeight[3] === 0)
+    leftTopWidthHeight = this.scaleSlice(screen2.fovMM[0], screen2.fovMM[1]);
+  if (isNaN(customMM)) {
+    let panXY = this.swizzleVec3MM(this.scene.pan2Dxyzmm, axCorSag);
+    screen2.mnMM[0] -= panXY[0];
+    screen2.mxMM[0] -= panXY[0];
+    screen2.mnMM[1] -= panXY[1];
+    screen2.mxMM[1] -= panXY[1];
+    screen2.mnMM[0] /= this.scene.pan2Dxyzmm[3];
+    screen2.mxMM[0] /= this.scene.pan2Dxyzmm[3];
+    screen2.mnMM[1] /= this.scene.pan2Dxyzmm[3];
+    screen2.mxMM[1] /= this.scene.pan2Dxyzmm[3];
+  }
+  let sliceDim = 2;
+  if (axCorSag === this.sliceTypeCoronal)
+    sliceDim = 1;
+  if (axCorSag === this.sliceTypeSagittal)
+    sliceDim = 0;
+  let sliceFrac = this.scene.crosshairPos[sliceDim];
+  let mm = this.frac2mm(this.scene.crosshairPos);
+  if (!isNaN(customMM) && customMM !== Infinity && customMM !== -Infinity) {
+    mm = this.frac2mm([0.5, 0.5, 0.5]);
+    mm[sliceDim] = customMM;
+    let frac = this.mm2frac(mm);
+    sliceFrac = frac[sliceDim];
+  }
+  let sliceMM = mm[sliceDim];
   let gl = this.gl;
-  let m, modelMtx, normMtx;
-  [m, modelMtx, normMtx] = this.calculateMvpMatrixX(leftTopWidthHeight);
+  gl.clear(gl.DEPTH_BUFFER_BIT);
+  let obj = this.calculateMvpMatrix2D(leftTopWidthHeight, screen2.mnMM, screen2.mxMM, Infinity, 0, azimuth, elevation, isRadiolgical);
+  if (customMM === Infinity || customMM === -Infinity) {
+    this.draw3D(leftTopWidthHeight, obj.modelViewProjectionMatrix, obj.modelMatrix, obj.normalMatrix, azimuth, elevation);
+    return;
+  }
   gl.enable(gl.DEPTH_TEST);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   gl.disable(gl.BLEND);
   gl.depthFunc(gl.GREATER);
-  if (isDepthTest) {
-    gl.disable(gl.BLEND);
-    gl.depthFunc(gl.GREATER);
-  } else {
-    gl.enable(gl.BLEND);
-    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 hasFibers = false;
-  for (let i2 = 0; i2 < this.meshes.length; i2++) {
-    if (this.meshes[i2].indexCount < 3)
-      continue;
-    if (this.meshes[i2].offsetPt0) {
-      hasFibers = true;
-      continue;
-    }
-    gl.bindVertexArray(this.meshes[i2].vao);
-    gl.drawElements(gl.TRIANGLES, this.meshes[i2].indexCount, gl.UNSIGNED_INT, 0);
-    gl.bindVertexArray(this.unusedVAO);
-  }
-  if (!hasFibers) {
-    gl.enable(gl.BLEND);
-    gl.depthFunc(gl.ALWAYS);
-    return;
+  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);
+  this.screenSlices.push({
+    leftTopWidthHeight,
+    axCorSag,
+    sliceFrac,
+    AxyzMxy: this.xyMM2xyzMM(axCorSag, sliceFrac),
+    leftTopMM: obj.leftTopMM,
+    fovMM: obj.fovMM
+  });
+  if (isNaN(customMM)) {
+    this.drawCrosshairs3D(true, 1, obj.modelViewProjectionMatrix);
   }
-  let shader = this.fiberShader;
-  shader.use(this.gl);
-  gl.uniformMatrix4fv(shader.uniforms["mvpMtx"], false, m);
-  gl.uniform1f(shader.uniforms["opacity"], alpha);
-  for (let i2 = 0; i2 < this.meshes.length; i2++) {
-    if (this.meshes[i2].indexCount < 3)
-      continue;
-    if (!this.meshes[i2].offsetPt0)
-      continue;
-    gl.bindVertexArray(this.meshes[i2].vao);
-    gl.drawElements(gl.LINE_STRIP, this.meshes[i2].indexCount, gl.UNSIGNED_INT, 0);
-    gl.bindVertexArray(this.unusedVAO);
+  if (this.opts.meshThicknessOn2D > 0) {
+    if (this.opts.meshThicknessOn2D !== Infinity)
+      obj = this.calculateMvpMatrix2D(leftTopWidthHeight, screen2.mnMM, screen2.mxMM, this.opts.meshThicknessOn2D, sliceMM, azimuth, elevation, isRadiolgical);
+    this.drawMesh3D(true, 1, obj.modelViewProjectionMatrix, obj.modelMatrix, obj.normalMatrix);
   }
-  gl.enable(gl.BLEND);
-  gl.depthFunc(gl.ALWAYS);
+  if (isNaN(customMM))
+    this.drawCrosshairs3D(false, 0.15, obj.modelViewProjectionMatrix);
+  this.drawSliceOrientationText(leftTopWidthHeight, axCorSag);
   this.readyForSync = true;
 };
-Niivue.prototype.draw2D = function(leftTopWidthHeight, axCorSag) {
+Niivue.prototype.draw2DVox = function(leftTopWidthHeight, axCorSag, customMM = NaN) {
+  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);
+  let ltwh = leftTopWidthHeight.slice();
   let gl = this.gl;
   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
   gl.disable(gl.DEPTH_TEST);
-  var crossXYZ = [
+  let sliceDim = 2;
+  let crossXYZ = [
     this.scene.crosshairPos[0],
     this.scene.crosshairPos[1],
     this.scene.crosshairPos[2]
   ];
-  if (axCorSag === this.sliceTypeCoronal)
+  if (axCorSag === this.sliceTypeCoronal) {
+    sliceDim = 1;
     crossXYZ = [
       this.scene.crosshairPos[0],
       this.scene.crosshairPos[2],
       this.scene.crosshairPos[1]
     ];
-  if (axCorSag === this.sliceTypeSagittal)
+  }
+  if (axCorSag === this.sliceTypeSagittal) {
+    sliceDim = 0;
     crossXYZ = [
       this.scene.crosshairPos[1],
       this.scene.crosshairPos[2],
       this.scene.crosshairPos[0]
     ];
+  }
+  if (!isNaN(customMM)) {
+    let mm = this.frac2mm([0.5, 0.5, 0.5]);
+    mm[sliceDim] = customMM;
+    let frac = this.mm2frac(mm);
+    crossXYZ[2] = frac[sliceDim];
+  }
   let isMirrorLR = this.opts.isRadiologicalConvention && axCorSag < this.sliceTypeSagittal;
+  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);
@@ -113080,58 +114891,50 @@ Niivue.prototype.draw2D = function(leftTopWidthHeight, axCorSag) {
   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);
-  this.screenSlices[this.numScreenSlices].leftTopWidthHeight = leftTopWidthHeight;
-  this.screenSlices[this.numScreenSlices].axCorSag = axCorSag;
-  this.numScreenSlices += 1;
+  this.screenSlices.push({
+    leftTopWidthHeight,
+    axCorSag,
+    sliceFrac: crossXYZ[2],
+    AxyzMxy: [],
+    leftTopMM: [],
+    fovMM: [fovMM[0], fovMM[1]]
+  });
+  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+  this.drawSliceOrientationText(ltwh, axCorSag);
+  if (!isNaN(customMM))
+    return;
   if (this.opts.crosshairWidth <= 0)
     return;
-  this.lineShader.use(this.gl);
-  this.gl.uniform4fv(this.lineShader.uniforms["lineColor"], this.opts.crosshairColor);
-  this.gl.uniform2fv(this.lineShader.uniforms["canvasWidthHeight"], [
+  this.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
   ]);
   var xleft = leftTopWidthHeight[0] + leftTopWidthHeight[2] * crossXYZ[0];
-  this.gl.uniform4f(this.lineShader.uniforms["leftTopWidthHeight"], xleft - 0.5 * this.opts.crosshairWidth, leftTopWidthHeight[1], this.opts.crosshairWidth, leftTopWidthHeight[3]);
+  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);
   var xtop = leftTopWidthHeight[1] + leftTopWidthHeight[3] * (1 - crossXYZ[1]);
-  this.gl.uniform4f(this.lineShader.uniforms["leftTopWidthHeight"], leftTopWidthHeight[0], xtop - 0.5 * this.opts.crosshairWidth, leftTopWidthHeight[2], this.opts.crosshairWidth);
+  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);
-  if (isMirrorLR)
-    this.drawTextRight([
-      leftTopWidthHeight[0] + leftTopWidthHeight[2] + 1,
-      leftTopWidthHeight[1] + 0.5 * leftTopWidthHeight[3]
-    ], "R");
-  else if (axCorSag < this.sliceTypeSagittal)
-    this.drawTextRight([
-      leftTopWidthHeight[0] + 1,
-      leftTopWidthHeight[1] + 0.5 * leftTopWidthHeight[3]
-    ], "L");
-  if (axCorSag === this.sliceTypeAxial)
-    this.drawTextBelow([
-      leftTopWidthHeight[0] + 0.5 * leftTopWidthHeight[2],
-      leftTopWidthHeight[1] + 1
-    ], "A");
-  if (axCorSag > this.sliceTypeAxial)
-    this.drawTextBelow([
-      leftTopWidthHeight[0] + 0.5 * leftTopWidthHeight[2],
-      leftTopWidthHeight[1] + 1
-    ], "S");
-  if (axCorSag !== this.sliceTypeAxial)
-    return;
-  gl.viewport(leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
   gl.enable(gl.DEPTH_TEST);
   gl.depthFunc(gl.ALWAYS);
   gl.clearDepth(0);
   this.sync();
 };
-Niivue.prototype.calculateMvpMatrix = function() {
-  function deg2rad(deg) {
-    return deg * (Math.PI / 180);
-  }
-  let whratio = this.gl.canvas.clientWidth / this.gl.canvas.clientHeight;
+Niivue.prototype.draw2D = function(leftTopWidthHeight, axCorSag, customMM = NaN) {
+  if (this.opts.isSliceMM)
+    this.draw2DMM(leftTopWidthHeight, axCorSag, customMM);
+  else
+    this.draw2DVox(leftTopWidthHeight, axCorSag, customMM);
+};
+Niivue.prototype.calculateMvpMatrix = function(unused, leftTopWidthHeight = [0, 0, 0, 0], azimuth, elevation) {
+  if (leftTopWidthHeight[2] === 0 || leftTopWidthHeight[3] === 0)
+    leftTopWidthHeight = [0, 0, this.gl.canvas.width, this.gl.canvas.height];
+  let whratio = leftTopWidthHeight[2] / leftTopWidthHeight[3];
   let scale2 = this.furthestFromPivot;
   let origin = this.pivot3D;
   let projectionMatrix = create$2();
@@ -113146,8 +114949,8 @@ Niivue.prototype.calculateMvpMatrix = function() {
   translate(modelMatrix, modelMatrix, translateVec3);
   if (this.position)
     translate(modelMatrix, modelMatrix, this.position);
-  rotateX(modelMatrix, modelMatrix, deg2rad(270 - this.scene.renderElevation));
-  rotateZ(modelMatrix, modelMatrix, deg2rad(this.scene.renderAzimuth - 180));
+  rotateX(modelMatrix, modelMatrix, deg2rad(270 - elevation));
+  rotateZ(modelMatrix, modelMatrix, deg2rad(azimuth - 180));
   translate(modelMatrix, modelMatrix, [
     -origin[0],
     -origin[1],
@@ -113158,24 +114961,24 @@ Niivue.prototype.calculateMvpMatrix = function() {
   let normalMatrix = create$2();
   transpose(normalMatrix, iModelMatrix);
   let modelViewProjectionMatrix = create$2();
-  multiply$1(modelViewProjectionMatrix, projectionMatrix, modelMatrix);
+  multiply(modelViewProjectionMatrix, projectionMatrix, modelMatrix);
   return [modelViewProjectionMatrix, modelMatrix, normalMatrix];
 };
-Niivue.prototype.calculateRayDirection = function() {
-  function deg2rad(deg) {
+Niivue.prototype.calculateRayDirection = function(azimuth, elevation) {
+  function deg2rad2(deg) {
     return deg * (Math.PI / 180);
   }
   const modelMatrix = create$2();
   modelMatrix[0] = -1;
-  rotateX(modelMatrix, modelMatrix, deg2rad(270 - this.scene.renderElevation));
-  rotateZ(modelMatrix, modelMatrix, deg2rad(this.scene.renderAzimuth - 180));
+  rotateX(modelMatrix, modelMatrix, deg2rad2(270 - elevation));
+  rotateZ(modelMatrix, modelMatrix, deg2rad2(azimuth - 180));
   if (this.back.obliqueRAS) {
     let oblique = clone$1(this.back.obliqueRAS);
-    multiply$1(modelMatrix, modelMatrix, oblique);
+    multiply(modelMatrix, modelMatrix, oblique);
   }
   let projectionMatrix = fromValues$2(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
   let mvpMatrix = create$2();
-  multiply$1(mvpMatrix, projectionMatrix, modelMatrix);
+  multiply(mvpMatrix, projectionMatrix, modelMatrix);
   var inv = create$2();
   invert(inv, mvpMatrix);
   var rayDir4 = fromValues(0, 0, -1, 1);
@@ -113191,7 +114994,7 @@ Niivue.prototype.calculateRayDirection = function() {
     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) {
@@ -113209,11 +115012,19 @@ 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);
   this.pivot3D = [pivot[0], pivot[1], pivot[2]];
   subtract(pivot, mx, mn);
+  this.extentsMin = mn;
+  this.extentsMax = mx;
   this.furthestFromPivot = length$1(pivot) * 0.5;
 };
 Niivue.prototype.drawGraphLine = function(LTRB, color = [1, 0, 0, 0.5], thickness = 2) {
@@ -113230,35 +115041,22 @@ Niivue.prototype.drawGraphLine = function(LTRB, color = [1, 0, 0, 0.5], thicknes
   this.gl.bindVertexArray(this.unusedVAO);
 };
 Niivue.prototype.drawRect = function(LTWH, color = [1, 0, 0, 0.5]) {
-  this.lineShader.use(this.gl);
-  this.gl.uniform4fv(this.lineShader.uniforms["lineColor"], color);
-  this.gl.uniform2fv(this.lineShader.uniforms["canvasWidthHeight"], [
+  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.lineShader.uniforms["leftTopWidthHeight"], LTWH[0], LTWH[1], LTWH[2], LTWH[3]);
+  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);
 };
-function tickSpacing(tickCount, mn, mx) {
-  let range = Math.abs(mx - mn);
-  if (range === 0)
-    return [0, 0];
-  let unroundedTickSize = range / (tickCount - 1);
-  let x2 = Math.ceil(Math.log10(unroundedTickSize) - 1);
-  let pow10x = Math.pow(10, x2);
-  let spacing = Math.ceil(unroundedTickSize / pow10x) * pow10x;
-  let ticMin = mn;
-  if (mn / spacing % 1 !== 0)
-    ticMin = Math.sign(ticMin) * Math.round(Math.abs(ticMin));
-  return [spacing, ticMin];
-}
 Niivue.prototype.drawGraph = function() {
   this.gl;
   let graph = this.graph;
   if (this.graph.autoSizeMultiplanar && this.sliceType === this.sliceTypeMultiplanar) {
-    for (let i2 = 0; i2 < this.numScreenSlices; i2++) {
+    for (let i2 = 0; i2 < this.screenSlices.length; i2++) {
       var axCorSag = this.screenSlices[i2].axCorSag;
       if (axCorSag !== this.sliceTypeSagittal)
         continue;
@@ -113351,7 +115149,7 @@ Niivue.prototype.drawGraph = function() {
     graph.backColor[3]
   ];
   this.drawRect(graph.LTWH, borderColor);
-  let [spacing, ticMin] = tickSpacing(5, mn, mx);
+  let [spacing, ticMin] = tickSpacing(mn, mx);
   function humanize(x2) {
     return x2.toFixed(6).replace(/\.?0*$/, "");
   }
@@ -113415,7 +115213,7 @@ Niivue.prototype.drawGraph = function() {
     if (i2 % 2 === 1) {
       thick *= 0.5;
       this.drawGraphLine([x2, plotLTWH[1], x2, plotLTWH[1] + plotLTWH[3]], thinColor, thick);
-    } else if (i2 > 0) {
+    } else {
       let str = humanize(i2);
       if (fntSize > 0)
         this.drawTextBelow([x2, 2 + plotLTWH[1] + plotLTWH[3]], str, fntScale, graph.textColor);
@@ -113452,53 +115250,77 @@ Niivue.prototype.drawGraph = function() {
     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);
   }
 };
-Niivue.prototype.draw3D = function() {
-  this.setPivot3D();
+function isRadiological(mtx) {
+  let vRight = fromValues(1, 0, 0, 0);
+  let vRotated = create();
+  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;
-  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-  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);
+  const pixelX = this.mousePos[0] * leftTopWidthHeight[2] / leftTopWidthHeight[2];
+  const pixelY = gl.canvas.height - this.mousePos[1] * leftTopWidthHeight[3] / leftTopWidthHeight[3] - 1;
+  console.log(pixelX + "/" + pixelY);
+  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 mvpMatrix, modelMatrix, normalMatrix;
-  [mvpMatrix, modelMatrix, normalMatrix] = this.calculateMvpMatrix(this.volumeObject3D);
-  const rayDir = this.calculateRayDirection();
+  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 (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] * gl.canvas.width / gl.canvas.clientWidth;
-    const pixelY = gl.canvas.height - this.mousePos[1] * gl.canvas.height / gl.canvas.clientHeight - 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) {
+  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.uniforms["backgroundMasksOverlays"], this.backgroundMasksOverlays);
     gl.uniformMatrix4fv(shader.mvpUniformLoc, false, mvpMatrix);
@@ -113509,22 +115331,99 @@ Niivue.prototype.draw3D = function() {
     gl.drawElements(object3D.mode, object3D.indexCount, gl.UNSIGNED_SHORT, 0);
     gl.bindVertexArray(this.unusedVAO);
   }
-  this.drawCrosshairs3D(true, 1);
-  this.drawMesh3D(true, 1);
-  this.drawMesh3D(false, 0.02);
-  this.drawCrosshairs3D(false, 0.15);
+};
+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);
+  function deg2rad2(deg) {
+    return deg * (Math.PI / 180);
+  }
+  let modelMatrix = create$2();
+  let projectionMatrix = create$2();
+  ortho(projectionMatrix, 0, gl.canvas.width, 0, gl.canvas.height, -10 * sz, 10 * sz);
+  translate(modelMatrix, modelMatrix, [
+    1.8 * sz + leftTopWidthHeight[0],
+    1.8 * sz + leftTopWidthHeight[1],
+    0
+  ]);
+  scale$1(modelMatrix, modelMatrix, [sz, sz, sz]);
+  rotateX(modelMatrix, modelMatrix, deg2rad2(270 - elevation));
+  rotateZ(modelMatrix, modelMatrix, deg2rad2(-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);
+};
+Niivue.prototype.draw3D = function(leftTopWidthHeight = [0, 0, 0, 0], mvpMatrix = null, modelMatrix, normalMatrix, azimuth = null, elevation) {
+  let isMosaic = azimuth !== null;
+  this.setPivot3D();
+  if (!isMosaic) {
+    azimuth = this.scene.renderAzimuth;
+    elevation = this.scene.renderElevation;
+  }
+  let gl = this.gl;
+  if (mvpMatrix === null)
+    [mvpMatrix, modelMatrix, normalMatrix] = this.calculateMvpMatrix(null, leftTopWidthHeight, azimuth, elevation);
+  if (leftTopWidthHeight[2] === 0 || leftTopWidthHeight[3] === 0) {
+    leftTopWidthHeight = [0, 0, gl.canvas.width, gl.canvas.height];
+    this.screenSlices.push({
+      leftTopWidthHeight,
+      axCorSag: this.sliceTypeRender,
+      sliceFrac: 0,
+      AxyzMxy: [],
+      leftTopMM: [],
+      fovMM: [isRadiological(modelMatrix), 0]
+    });
+  } else {
+    this.screenSlices.push({
+      leftTopWidthHeight: leftTopWidthHeight.slice(),
+      axCorSag: this.sliceTypeRender,
+      sliceFrac: 0,
+      AxyzMxy: [],
+      leftTopMM: [],
+      fovMM: [isRadiological(modelMatrix), 0]
+    });
+    leftTopWidthHeight[1] = gl.canvas.height - leftTopWidthHeight[3] - leftTopWidthHeight[1];
+  }
+  gl.viewport(leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
+  gl.enable(gl.DEPTH_TEST);
+  gl.depthFunc(gl.ALWAYS);
+  gl.clearDepth(0);
+  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;
   this.sync();
   return posString;
 };
-Niivue.prototype.drawMesh3D = function(isDepthTest = true, alpha = 1) {
+Niivue.prototype.drawMesh3D = function(isDepthTest = true, alpha = 1, m, modelMtx, normMtx) {
   if (this.meshes.length < 1)
     return;
   let gl = this.gl;
-  let m, modelMtx, normMtx;
-  [m, modelMtx, normMtx] = this.calculateMvpMatrix(this.volumeObject3D);
+  if (!m)
+    [m, modelMtx, normMtx] = this.calculateMvpMatrix(this.volumeObject3D, this.scene.renderAzimuth, this.scene.renderElevation);
   gl.enable(gl.DEPTH_TEST);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   gl.disable(gl.BLEND);
@@ -113537,11 +115436,14 @@ Niivue.prototype.drawMesh3D = function(isDepthTest = true, alpha = 1) {
     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.meshShader;
+  if (this.scene.mouseDepthPicker)
+    shader = this.pickingMeshShader;
+  shader.use(this.gl);
+  gl.uniformMatrix4fv(shader.uniforms["mvpMtx"], false, m);
+  gl.uniformMatrix4fv(shader.uniforms["modelMtx"], false, modelMtx);
+  gl.uniformMatrix4fv(shader.uniforms["normMtx"], false, normMtx);
+  gl.uniform1f(shader.uniforms["opacity"], alpha);
   let hasFibers = false;
   for (let i2 = 0; i2 < this.meshes.length; i2++) {
     if (this.meshes[i2].indexCount < 3)
@@ -113559,7 +115461,7 @@ Niivue.prototype.drawMesh3D = function(isDepthTest = true, alpha = 1) {
     gl.depthFunc(gl.ALWAYS);
     return;
   }
-  let shader = this.fiberShader;
+  shader = this.fiberShader;
   shader.use(this.gl);
   gl.uniformMatrix4fv(shader.uniforms["mvpMtx"], false, m);
   gl.uniform1f(shader.uniforms["opacity"], alpha);
@@ -113576,7 +115478,7 @@ Niivue.prototype.drawMesh3D = function(isDepthTest = true, alpha = 1) {
   gl.depthFunc(gl.ALWAYS);
   this.readyForSync = true;
 };
-Niivue.prototype.drawCrosshairs3D = function(isDepthTest = true, alpha = 1) {
+Niivue.prototype.drawCrosshairs3D = function(isDepthTest = true, alpha = 1, mvpMtx = null) {
   if (!this.opts.show3Dcrosshair)
     return;
   let gl = this.gl;
@@ -113586,15 +115488,21 @@ Niivue.prototype.drawCrosshairs3D = function(isDepthTest = true, alpha = 1) {
       gl.deleteBuffer(this.crosshairs3D.indexBuffer);
       gl.deleteBuffer(this.crosshairs3D.vertexBuffer);
     }
-    let radius = 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;
+    this.crosshairs3D = NiivueObject3D.generateCrosshairs(this.gl, 1, mm, mn, mx, radius);
     this.crosshairs3D.mm = mm;
   }
   let crosshairsShader = this.surfaceShader;
   crosshairsShader.use(this.gl);
-  let m, modelMtx, normMtx;
-  [m, modelMtx, normMtx] = this.calculateMvpMatrix(this.crosshairs3D);
-  gl.uniformMatrix4fv(crosshairsShader.uniforms["mvpMtx"], false, m);
+  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.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.crosshairs3D.indexBuffer);
   gl.enable(gl.DEPTH_TEST);
   let color = [...this.opts.crosshairColor];
@@ -113613,6 +115521,14 @@ Niivue.prototype.drawCrosshairs3D = function(isDepthTest = true, alpha = 1) {
   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];
@@ -113656,69 +115572,87 @@ Niivue.prototype.moveCrosshairInVox = function(x2, y, z) {
 };
 Niivue.prototype.frac2mm = function(frac, volIdx = 0) {
   let pos = fromValues(frac[0], frac[1], frac[2], 1);
-  let dim = fromValues(this.volumes[volIdx].dimsRAS[1], this.volumes[volIdx].dimsRAS[2], this.volumes[volIdx].dimsRAS[3], 1);
-  let sform = clone$1(this.volumes[volIdx].matRAS);
-  transpose(sform, sform);
-  mul(pos, pos, dim);
-  let shim = fromValues(-0.5, -0.5, -0.5, 0);
-  add(pos, pos, shim);
-  transformMat4(pos, pos, sform);
+  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.canvasPos2frac = function(canvasPos) {
-  let x2, y, z;
-  for (let i2 = 0; i2 < this.numScreenSlices; i2++) {
-    var axCorSag = this.screenSlices[i2].axCorSag;
-    if (axCorSag > this.sliceTypeSagittal)
-      continue;
-    var ltwh = this.screenSlices[i2].leftTopWidthHeight;
-    let isMirror = false;
-    if (ltwh[2] < 0) {
-      isMirror = true;
-      ltwh[0] += ltwh[2];
-      ltwh[2] = -ltwh[2];
-    }
-    var fracX = (canvasPos[0] - ltwh[0]) / ltwh[2];
-    if (isMirror) {
-      fracX = 1 - fracX;
-    }
-    var fracY = 1 - (canvasPos[1] - ltwh[1]) / ltwh[3];
-    if (fracX >= 0 && fracX < 1 && fracY >= 0 && fracY < 1) {
-      switch (axCorSag) {
-        case this.sliceTypeAxial:
-          break;
-        case this.sliceTypeCoronal:
-          break;
-      }
-      if (axCorSag === this.sliceTypeAxial) {
-        x2 = fracX;
-        y = fracY;
-        z = this.scene.crosshairPos[2];
-      }
-      if (axCorSag === this.sliceTypeCoronal) {
-        x2 = fracX;
-        y = this.scene.crosshairPos[1];
-        z = fracY;
-      }
-      if (axCorSag === this.sliceTypeSagittal) {
-        x2 = this.scene.crosshairPos[0];
-        y = fracX;
-        z = fracY;
-      }
-      break;
+Niivue.prototype.screenXY2TextureFrac = function(x2, y, i2) {
+  let texFrac = [-1, -1, -1];
+  var axCorSag = this.screenSlices[i2].axCorSag;
+  if (axCorSag > this.sliceTypeSagittal)
+    return texFrac;
+  var ltwh = this.screenSlices[i2].leftTopWidthHeight.slice();
+  let isMirror = false;
+  if (ltwh[2] < 0) {
+    isMirror = true;
+    ltwh[0] += ltwh[2];
+    ltwh[2] = -ltwh[2];
+  }
+  var fracX = (x2 - ltwh[0]) / ltwh[2];
+  if (isMirror)
+    fracX = 1 - fracX;
+  var fracY = 1 - (y - ltwh[1]) / ltwh[3];
+  if (fracX < 0 || fracX > 1 || fracY < 0 || fracY > 1)
+    return texFrac;
+  if (this.screenSlices[i2].AxyzMxy.length > 4) {
+    let xyzMM = [0, 0, 0];
+    xyzMM[0] = this.screenSlices[i2].leftTopMM[0] + fracX * this.screenSlices[i2].fovMM[0];
+    xyzMM[1] = this.screenSlices[i2].leftTopMM[1] + fracY * this.screenSlices[i2].fovMM[1];
+    let v = this.screenSlices[i2].AxyzMxy;
+    xyzMM[2] = v[2] + v[4] * (xyzMM[1] - v[1]) - v[3] * (xyzMM[0] - v[0]);
+    if (axCorSag === this.sliceTypeCoronal)
+      xyzMM = swizzleVec3(xyzMM, [0, 2, 1]);
+    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;
+    texFrac[0] = xyz[0];
+    texFrac[1] = xyz[1];
+    texFrac[2] = xyz[2];
+  } else {
+    texFrac = this.scene.crosshairPos.slice();
+    if (axCorSag === this.sliceTypeAxial) {
+      texFrac[0] = fracX;
+      texFrac[1] = fracY;
+    }
+    if (axCorSag === this.sliceTypeCoronal) {
+      texFrac[0] = fracX;
+      texFrac[2] = fracY;
     }
+    if (axCorSag === this.sliceTypeSagittal) {
+      texFrac[1] = fracX;
+      texFrac[2] = fracY;
+    }
+  }
+  return texFrac;
+};
+Niivue.prototype.canvasPos2frac = function(canvasPos) {
+  for (let i2 = 0; i2 < this.screenSlices.length; i2++) {
+    let texFrac = this.screenXY2TextureFrac(canvasPos[0], canvasPos[1], i2);
+    if (texFrac[0] >= 0)
+      return texFrac;
   }
-  return [x2, y, z];
+  return [-1, -1, -1];
 };
-Niivue.prototype.scaleSlice = function(w, h) {
-  let scalePix = this.gl.canvas.clientWidth / w;
-  if (h * scalePix > this.gl.canvas.clientHeight)
-    scalePix = this.gl.canvas.clientHeight / h;
+Niivue.prototype.scaleSlice = function(w, h, widthPadPixels = 0, heightPadPixels = 0) {
+  let canvasW = this.gl.canvas.clientWidth - 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.gl.canvas.clientHeight - hPix) * 0.5,
+    (canvasW - wPix) * 0.5,
+    (canvasH - hPix) * 0.5,
     wPix,
     hPix
   ];
@@ -113738,12 +115672,326 @@ 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) {
+  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"], [
+    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.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  this.gl.bindVertexArray(this.unusedVAO);
+};
+Niivue.prototype.drawCrossLinesMM = function(sliceIndex, axCorSag, axiMM, corMM, sagMM) {
+  if (sliceIndex < 0 || this.screenSlices.length <= sliceIndex)
+    return;
+  let tile = this.screenSlices[sliceIndex];
+  let linesH = corMM.slice();
+  let linesV = sagMM.slice();
+  let thick = Math.max(1, this.opts.crosshairWidth);
+  if (axCorSag === this.sliceTypeCoronal)
+    linesH = axiMM.slice();
+  if (axCorSag === this.sliceTypeSagittal) {
+    linesH = axiMM.slice();
+    linesV = corMM.slice();
+  }
+  function mm2screen(mm) {
+    let screenXY = [0, 0];
+    screenXY[0] = tile.leftTopWidthHeight[0] + (mm[0] - tile.leftTopMM[0]) / tile.fovMM[0] * tile.leftTopWidthHeight[2];
+    screenXY[1] = tile.leftTopWidthHeight[1] + tile.leftTopWidthHeight[3] - (mm[1] - tile.leftTopMM[1]) / tile.fovMM[1] * tile.leftTopWidthHeight[3];
+    return screenXY;
+  }
+  if (linesH.length > 0 && axCorSag === 0) {
+    let fracZ = tile.sliceFrac;
+    let dimV = 1;
+    for (let i2 = 0; i2 < linesH.length; i2++) {
+      let mmV = this.frac2mm([0.5, 0.5, 0.5]);
+      mmV[dimV] = linesH[i2];
+      let fracY = this.mm2frac(mmV);
+      fracY = fracY[dimV];
+      let left = this.frac2mm([0, fracY, fracZ]);
+      left = swizzleVec3(left, [0, 1, 2]);
+      let right = this.frac2mm([1, fracY, fracZ]);
+      right = swizzleVec3(right, [0, 1, 2]);
+      left = mm2screen(left);
+      right = mm2screen(right);
+      this.drawLine2DX([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]);
+      mmV[dimV] = linesH[i2];
+      let fracV = this.mm2frac(mmV);
+      fracV = fracV[dimV];
+      let left = this.frac2mm([0, fracH, fracV]);
+      left = swizzleVec3(left, [0, 2, 1]);
+      let right = this.frac2mm([1, fracH, fracV]);
+      right = swizzleVec3(right, [0, 2, 1]);
+      left = mm2screen(left);
+      right = mm2screen(right);
+      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+    }
+  }
+  if (linesH.length > 0 && axCorSag === 2) {
+    let fracX = tile.sliceFrac;
+    let dimV = 2;
+    for (let i2 = 0; i2 < linesH.length; i2++) {
+      let mmV = this.frac2mm([0.5, 0.5, 0.5]);
+      mmV[dimV] = linesH[i2];
+      let fracZ = this.mm2frac(mmV);
+      fracZ = fracZ[dimV];
+      let left = this.frac2mm([fracX, 0, fracZ]);
+      left = swizzleVec3(left, [1, 2, 0]);
+      let right = this.frac2mm([fracX, 1, fracZ]);
+      right = swizzleVec3(right, [1, 2, 0]);
+      left = mm2screen(left);
+      right = mm2screen(right);
+      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+    }
+  }
+  if (linesV.length > 0 && axCorSag === 0) {
+    let fracZ = tile.sliceFrac;
+    let dimH = 0;
+    for (let i2 = 0; i2 < linesV.length; i2++) {
+      let mm = this.frac2mm([0.5, 0.5, 0.5]);
+      mm[dimH] = linesV[i2];
+      let frac = this.mm2frac(mm);
+      frac = frac[dimH];
+      let left = this.frac2mm([frac, 0, fracZ]);
+      left = swizzleVec3(left, [0, 1, 2]);
+      let right = this.frac2mm([frac, 1, fracZ]);
+      right = swizzleVec3(right, [0, 1, 2]);
+      left = mm2screen(left);
+      right = mm2screen(right);
+      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+    }
+  }
+  if (linesV.length > 0 && axCorSag === 1) {
+    let fracY = tile.sliceFrac;
+    let dimH = 0;
+    for (let i2 = 0; i2 < linesV.length; i2++) {
+      let mm = this.frac2mm([0.5, 0.5, 0.5]);
+      mm[dimH] = linesV[i2];
+      let frac = this.mm2frac(mm);
+      frac = frac[dimH];
+      let left = this.frac2mm([frac, fracY, 0]);
+      left = swizzleVec3(left, [0, 2, 1]);
+      let right = this.frac2mm([frac, fracY, 1]);
+      right = swizzleVec3(right, [0, 2, 1]);
+      left = mm2screen(left);
+      right = mm2screen(right);
+      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+    }
+  }
+  if (linesV.length > 0 && axCorSag === 2) {
+    let fracX = tile.sliceFrac;
+    let dimH = 1;
+    for (let i2 = 0; i2 < linesV.length; i2++) {
+      let mm = this.frac2mm([0.5, 0.5, 0.5]);
+      mm[dimH] = linesV[i2];
+      let frac = this.mm2frac(mm);
+      frac = frac[dimH];
+      let left = this.frac2mm([fracX, frac, 0]);
+      left = swizzleVec3(left, [1, 2, 0]);
+      let right = this.frac2mm([fracX, frac, 1]);
+      right = swizzleVec3(right, [1, 2, 0]);
+      left = mm2screen(left);
+      right = mm2screen(right);
+      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+    }
+  }
+};
+Niivue.prototype.drawCrossLines = function(sliceIndex, axCorSag, axiMM, corMM, sagMM) {
+  if (sliceIndex < 0 || this.screenSlices.length <= sliceIndex)
+    return;
+  if (this.opts.isSliceMM)
+    return this.drawCrossLinesMM(sliceIndex, axCorSag, axiMM, corMM, sagMM);
+  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) {
+    linesH = axiMM.slice();
+    linesV = corMM.slice();
+  }
+  if (linesH.length > 0) {
+    let LTWH = tile.leftTopWidthHeight.slice();
+    let sliceDim = 2;
+    let mm = this.frac2mm([0.5, 0.5, 0.5]);
+    for (let i2 = 0; i2 < linesH.length; i2++) {
+      mm[sliceDim] = linesH[i2];
+      let frac = this.mm2frac(mm);
+      this.drawLine([
+        LTWH[0],
+        LTWH[1] + LTWH[3] - frac[sliceDim] * LTWH[3],
+        LTWH[2],
+        1
+      ]);
+    }
+  }
+  if (linesV.length > 0) {
+    let LTWH = tile.leftTopWidthHeight.slice();
+    let isRadiolgical = tile.fovMM[0] < 0;
+    let sliceDim = 0;
+    if (axCorSag === this.sliceTypeSagittal)
+      sliceDim = 1;
+    let mm = this.frac2mm([0.5, 0.5, 0.5]);
+    for (let i2 = 0; i2 < linesV.length; i2++) {
+      mm[sliceDim] = linesV[i2];
+      let frac = this.mm2frac(mm);
+      if (isRadiolgical)
+        this.drawLine([
+          LTWH[0] + (LTWH[2] - frac[sliceDim] * LTWH[2]),
+          LTWH[1],
+          1,
+          LTWH[3]
+        ]);
+      else
+        this.drawLine([
+          LTWH[0] + frac[sliceDim] * LTWH[2],
+          LTWH[1],
+          1,
+          LTWH[3]
+        ]);
+    }
+  }
+};
+Niivue.prototype.drawMosaic = function(mosaicStr) {
+  if (this.volumes.length === 0) {
+    console.log("Unable to draw mosaic until voxel-based image is loaded");
+    return;
+  }
+  this.screenSlices = [];
+  let fovRenderMM = this.screenFieldOfViewMM(this.sliceTypeAxial, true);
+  let fovSliceMM = this.screenFieldOfViewMM(this.sliceTypeAxial);
+  mosaicStr = mosaicStr.replaceAll(";", " ;").trim();
+  let axiMM = [];
+  let corMM = [];
+  let sagMM = [];
+  let items = mosaicStr.split(/\s+/);
+  let scale2 = 1;
+  let labelSize = this.opts.textHeight;
+  for (let pass = 0; pass < 2; pass++) {
+    let isRender = false;
+    let isCrossLines = false;
+    isRender = false;
+    let rowHt = 0;
+    let left = 0;
+    let top = 0;
+    let mxRowWid = 0;
+    let isLabel = false;
+    let axCorSag = this.sliceTypeAxial;
+    for (let i2 = 0; i2 < items.length; i2++) {
+      let item = items[i2];
+      if (item.includes("X")) {
+        isCrossLines = true;
+        continue;
+      }
+      if (item.includes("L")) {
+        isLabel = !item.includes("-");
+        continue;
+      }
+      if (item.includes("V") || item.includes("H")) {
+        i2++;
+        continue;
+      }
+      if (item.includes("A"))
+        axCorSag = this.sliceTypeAxial;
+      if (item.includes("C"))
+        axCorSag = this.sliceTypeCoronal;
+      if (item.includes("S"))
+        axCorSag = this.sliceTypeSagittal;
+      if (item.includes("R"))
+        isRender = true;
+      if (item.includes(";")) {
+        top += rowHt;
+        mxRowWid = Math.max(mxRowWid, left);
+        rowHt = 0;
+        left = 0;
+      }
+      let sliceMM = parseFloat(item, NaN);
+      if (isNaN(sliceMM))
+        continue;
+      let w = 0;
+      let h = 0;
+      let fov = fovSliceMM;
+      if (isRender)
+        fov = fovRenderMM;
+      if (axCorSag === this.sliceTypeSagittal)
+        w = fov[1];
+      else
+        w = fov[0];
+      if (axCorSag === this.sliceTypeAxial)
+        h = fov[1];
+      else
+        h = fov[2];
+      if (pass === 0) {
+        if (!isRender) {
+          if (axCorSag === this.sliceTypeAxial)
+            axiMM.push(sliceMM);
+          if (axCorSag === this.sliceTypeCoronal)
+            corMM.push(sliceMM);
+          if (axCorSag === this.sliceTypeSagittal)
+            sagMM.push(sliceMM);
+        }
+      } else {
+        let ltwh = [scale2 * left, scale2 * top, scale2 * w, scale2 * h];
+        this.opts.textHeight = isLabel ? labelSize : 0;
+        if (isRender) {
+          let inf = sliceMM < 0 ? -Infinity : Infinity;
+          if (Object.is(sliceMM, -0))
+            inf = -Infinity;
+          this.draw2DMM(ltwh, axCorSag, inf, isLabel);
+        } else
+          this.draw2D(ltwh, axCorSag, sliceMM, isLabel);
+        if (isCrossLines) {
+          this.drawCrossLines(this.screenSlices.length - 1, axCorSag, axiMM, corMM, sagMM);
+        }
+        isRender = false;
+        isCrossLines = false;
+      }
+      left += w;
+      rowHt = Math.max(rowHt, h);
+    }
+    top += rowHt;
+    mxRowWid = Math.max(mxRowWid, left);
+    if (mxRowWid <= 0 || top <= 0)
+      break;
+    let scaleW = this.gl.canvas.width / mxRowWid;
+    let scaleH = this.effectiveCanvasHeight() / top;
+    scale2 = Math.min(scaleW, scaleH);
+  }
+  this.opts.textHeight = labelSize;
+};
 Niivue.prototype.drawScene = function() {
   if (!this.initialized) {
     return;
   }
+  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;
@@ -113751,6 +115999,7 @@ Niivue.prototype.drawScene = function() {
   let posString = "";
   if (this.volumes.length === 0 || typeof this.volumes[0].dims === "undefined") {
     if (this.meshes.length > 0) {
+      this.screenSlices = [];
       this.sliceType = this.sliceTypeRender;
       return this.draw3D();
     }
@@ -113759,64 +116008,91 @@ Niivue.prototype.drawScene = function() {
   }
   if (!this.back.hasOwnProperty("dims"))
     return;
-  if (this.sliceType === this.sliceTypeRender) {
-    if (this.isDragging && this.scene.clipPlaneDepthAziElev[0] < 1.8) {
-      let x2 = this.dragStart[0] - this.dragEnd[0];
-      let y = this.dragStart[1] - this.dragEnd[1];
-      let depthAziElev = this.dragClipPlaneStartDepthAziElev.slice();
-      depthAziElev[1] -= x2;
-      depthAziElev[1] = depthAziElev[1] % 360;
-      depthAziElev[2] += y;
-      if (depthAziElev[1] !== this.scene.clipPlaneDepthAziElev[1] || depthAziElev[2] !== this.scene.clipPlaneDepthAziElev[2]) {
-        this.scene.clipPlaneDepthAziElev = depthAziElev;
-        return this.setClipPlane(this.scene.clipPlaneDepthAziElev);
-      }
-    }
-    return this.draw3D();
-  }
-  let { volScale } = this.sliceScale();
-  this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
-  this.numScreenSlices = 0;
-  if (this.sliceType === this.sliceTypeAxial) {
-    let leftTopWidthHeight = this.scaleSlice(volScale[0], volScale[1]);
-    this.draw2D(leftTopWidthHeight, 0);
-  } else if (this.sliceType === this.sliceTypeCoronal) {
-    let leftTopWidthHeight = this.scaleSlice(volScale[0], volScale[2]);
-    this.draw2D(leftTopWidthHeight, 1);
-  } else if (this.sliceType === this.sliceTypeSagittal) {
-    let leftTopWidthHeight = this.scaleSlice(volScale[1], volScale[2]);
-    this.draw2D(leftTopWidthHeight, 2);
+  if (this.isDragging && this.scene.clipPlaneDepthAziElev[0] < 1.8 && this.inRenderTile(this.dragStart[0], this.dragStart[1]) >= 0) {
+    let x2 = this.dragStart[0] - this.dragEnd[0];
+    let y = this.dragStart[1] - this.dragEnd[1];
+    let depthAziElev = this.dragClipPlaneStartDepthAziElev.slice();
+    depthAziElev[1] -= x2;
+    depthAziElev[1] = depthAziElev[1] % 360;
+    depthAziElev[2] += y;
+    if (depthAziElev[1] !== this.scene.clipPlaneDepthAziElev[1] || depthAziElev[2] !== this.scene.clipPlaneDepthAziElev[2]) {
+      this.scene.clipPlaneDepthAziElev = depthAziElev;
+      return this.setClipPlane(this.scene.clipPlaneDepthAziElev);
+    }
+  }
+  if (this.sliceMosaicString.length < 1 && this.sliceType === this.sliceTypeRender) {
+    this.screenSlices = [];
+    this.draw3D();
+    if (this.opts.isColorbar)
+      this.drawColorbar();
+    return;
+  }
+  if (this.opts.isColorbar)
+    this.reserveColorbarPanel();
+  if (this.sliceMosaicString.length > 0) {
+    this.drawMosaic(this.sliceMosaicString);
   } else {
-    let ltwh = this.scaleSlice(volScale[0] + volScale[1], volScale[1] + volScale[2]);
-    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 wX1 = ltwh3x1[2] * volScale[0] / (volScale[0] + volScale[0] + volScale[1]);
-    if (wX1 > wX && !this.graph.autoSizeMultiplanar) {
-      let pixScale = wX1 / volScale[0];
-      let hY1 = volScale[1] * pixScale;
-      let hZ1 = volScale[2] * pixScale;
-      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.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+    this.screenSlices = [];
+    if (this.sliceType === this.sliceTypeAxial) {
+      this.draw2D([0, 0, 0, 0], 0);
+    } else if (this.sliceType === this.sliceTypeCoronal) {
+      this.draw2D([0, 0, 0, 0], 1);
+    } else if (this.sliceType === this.sliceTypeSagittal) {
+      this.draw2D([0, 0, 0, 0], 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], wX, hZ], 1);
-      this.draw2D([ltwh[0] + wX, ltwh[1], wY, hZ], 2);
-      var margin = this.opts.colorBarMargin * hY;
-      if (!this.graph.autoSizeMultiplanar) {
-        this.drawColorbar([
-          ltwh[0] + wX + margin,
-          ltwh[1] + hZ + margin,
-          wY - margin - margin,
-          hY * this.opts.colorbarHeight
-        ]);
+      let { volScale, vox, longestAxis } = this.sliceScale();
+      let pad = 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]), 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, 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];
+        let hY1 = volScale[1] * pixScale;
+        let hZ1 = volScale[2] * pixScale;
+        if (ltwh3x1[3] === ltwh4x1[3]) {
+          ltwh3x1 = ltwh4x1;
+          this.draw3D([
+            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 + 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 + pad, wX, hY], 0);
+        this.draw2D([ltwh[0], ltwh[1], wX, hZ], 1);
+        this.draw2D([ltwh[0] + wX + pad, ltwh[1], wY, hZ], 2);
+        if (!this.graph.autoSizeMultiplanar)
+          this.draw3D([ltwh[0] + wX + pad, ltwh[1] + hZ + pad, wY, hY]);
       }
     }
   }
-  if (this.isDragging && this.sliceType !== this.sliceTypeRender) {
+  if (this.opts.isRuler)
+    this.drawRuler();
+  if (this.opts.isColorbar)
+    this.drawColorbar();
+  if (this.isDragging) {
+    if (this.opts.isDragShowsMeasurementTool) {
+      this.drawMeasurementTool([
+        this.dragStart[0],
+        this.dragStart[1],
+        this.dragEnd[0],
+        this.dragEnd[1]
+      ]);
+      return;
+    }
+    if (this.inRenderTile(this.dragStart[0], this.dragStart[1]) >= 0)
+      return;
     let width = Math.abs(this.dragStart[0] - this.dragEnd[0]);
     let height = Math.abs(this.dragStart[1] - this.dragEnd[1]);
     this.drawSelectionBox([