@niivue/niivue 0.24.2 → 0.26.3

package/src/niivue.js

@@ -1,10 +1,16 @@
 import { Shader } from "./shader.js";
 import * as mat from "gl-matrix";
-import { vertSliceShader, fragSliceShader } from "./shader-srcs.js";
+import {
+  vertSliceMMShader,
+  fragSliceMMShader,
+  vertSliceShader,
+  fragSliceShader,
+} from "./shader-srcs.js";
 import {
   vertGraphShader,
+  vertRectShader,
   vertLineShader,
-  fragLineShader,
+  fragRectShader,
 } from "./shader-srcs.js";
 import { vertRenderShader, fragRenderShader } from "./shader-srcs.js";
 import { vertColorbarShader, fragColorbarShader } from "./shader-srcs.js";
@@ -32,6 +38,7 @@ import {
   fragMeshOutlineShader,
   fragMeshHemiShader,
   fragMeshMatteShader,
+  fragMeshDepthShader,
   fragMeshShaderSHBlue,
   vertFiberShader,
   fragFiberShader,
@@ -51,6 +58,9 @@ import { Log } from "./logger";
 import defaultFontPNG from "./fonts/Roboto-Regular.png";
 import defaultFontMetrics from "./fonts/Roboto-Regular.json";
 import { colortables } from "./colortables";
+import { webSocket } from "rxjs/webSocket";
+import { interval } from "rxjs";
+
 const log = new Log();
 const cmapper = new colortables();
 
@@ -91,11 +101,13 @@ export function Niivue(options = {}) {
     textHeight: 0.06, // 0 for no text, fraction of canvas min(height,width)
     colorbarHeight: 0.05, // 0 for no colorbars, fraction of Nifti j dimension
     crosshairWidth: 1, // 0 for no crosshairs
+    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, // x axis margin arount color bar, clip space coordinates
     trustCalMinMax: true, // trustCalMinMax: if true do not calculate cal_min or cal_max if set in image header. If false, always calculate display intensity range.
     clipPlaneHotKey: "KeyC", // keyboard short cut to activate the clip plane
@@ -103,7 +115,14 @@ export function Niivue(options = {}) {
     keyDebounceTime: 50, // default debounce time used in keyup listeners
     isNearestInterpolation: false,
     isAtlasOutline: false,
+    isRuler: false,
+    isColorbar: false,
     isRadiologicalConvention: false,
+    meshThicknessOn2D: Infinity,
+    isDragShowsMeasurementTool: false,
+    isCornerOrientationText: false,
+    sagittalNoseLeft: false, //sagittal slices can have Y+ going left or right
+    isSliceMM: false,
     logging: false,
     loadingText: "waiting for images...",
     dragAndDropEnabled: true,
@@ -111,6 +130,9 @@ export function Niivue(options = {}) {
     penValue: 1, // sets drawing color. see "drawPt"
     isFilledPen: false,
     thumbnail: "",
+    onLocationChange: () => {},
+    onIntensityChange: () => {},
+    onImageLoaded: () => {},
   };
 
   this.canvas = null; // the canvas element on the page
@@ -119,8 +141,11 @@ export function Niivue(options = {}) {
   this.volumeTexture = null;
   this.drawTexture = null; //the GPU memory storage of the drawing
   this.drawBitmap = null; //the CPU memory storage of the drawing
-  this.drawUndoBitmap = null; //copy of prior drawBitmap
+  this.maxDrawUndoBitmaps = 8; //analogy: number of bullets in revolver, we will cycle these
+  this.currentDrawUndoBitmap = this.maxDrawUndoBitmaps; //analogy: cylinder position of a revolver
+  this.drawUndoBitmaps = [];
   this.drawOpacity = 0.8;
+  this.colorbarHeight = 0; //height in pixels, set when colorbar is drawn
   this.drawPenLocation = [NaN, NaN, NaN];
   this.drawPenAxCorSag = -1; //do not allow pen to drag between Sagittal/Coronal/Axial
   this.drawFillOverwrites = true;
@@ -128,7 +153,8 @@ export function Niivue(options = {}) {
   this.overlayTexture = null;
   this.overlayTextureID = [];
   this.sliceShader = null;
-  this.lineShader = null;
+  this.sliceMMShader = null;
+  this.rectShader = null;
   this.graphShader = null;
   this.renderShader = null;
   this.pickingShader = null;
@@ -162,6 +188,8 @@ export function Niivue(options = {}) {
   this.sliceTypeSagittal = 2;
   this.sliceTypeMultiplanar = 3;
   this.sliceTypeRender = 4;
+  //this.sliceTypeMosaic = 5; //kava
+  this.sliceMosaicString = "";
   this.sliceType = this.sliceTypeMultiplanar; // sets current view in webgl canvas
   this.scene = {};
   this.syncOpts = {};
@@ -178,6 +206,7 @@ export 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.0;
   this.scene.prevX = 0;
   this.scene.prevY = 0;
@@ -194,14 +223,7 @@ export function Niivue(options = {}) {
   this.volScale = [];
   this.vox = [];
   this.mousePos = [0, 0];
-  this.numScreenSlices = 0; // e.g. for multiplanar view, 3 simultaneous slices: axial, coronal, sagittal
-  this.screenSlices = [
-    //location and type of each 2D slice on screen, allows clicking to detect position
-    { 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 = []; // empty array
   this.isDragging = false;
   this.dragStart = [0.0, 0.0];
   this.dragEnd = [0.0, 0.0];
@@ -211,10 +233,7 @@ export function Niivue(options = {}) {
   this.volumeObject3D = null;
   this.pivot3D = [0, 0, 0]; //center for rendering rotation
   this.furthestFromPivot = 10.0; //most distant point from pivot
-  this.intensityRange$ = new Subject(); // an array
-  this.scene.location$ = new Subject(); // object with properties: {mm: [N N N], vox: [N N N], frac: [N N N]}
   this.scene.loading$ = new Subject(); // whether or not the scene is loading
-  this.imageLoaded$ = new Subject();
   this.currentClipPlaneIndex = 0;
   this.lastCalled = new Date().getTime();
   this.multiTouchGesture = false;
@@ -255,8 +274,20 @@ export function Niivue(options = {}) {
       Name: "Toon",
       Frag: fragMeshToonShader,
     },
+    {
+      Name: "Depth",
+      Frag: fragMeshDepthShader,
+    },
   ];
 
+  // multiuser
+  this.isController = false;
+  this.isInSession = false;
+  this.sessionKey = "";
+  this.sessionUrl = "";
+  this.serverConnection$ = null;
+  this.interval$ = null;
+
   this.initialized = false;
   // loop through known Niivue properties
   // if the user supplied opts object has a
@@ -280,16 +311,37 @@ export function Niivue(options = {}) {
 
   // maping of keys (event strings) to rxjs subjects
   this.eventsToSubjects = {
-    location: this.scene.location$,
     loading: this.scene.loading$,
-    imageLoaded: this.imageLoaded$,
-    intensityRange: this.intensityRange$,
   };
 
   // rxjs subscriptions. Keeping a reference array like this allows us to unsubscribe later
   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);
+  });
+};
+
 /**
  * attach the Niivue instance to the webgl2 canvas by element id
  * @param {string} id the id of an html canvas element
@@ -320,9 +372,6 @@ Niivue.prototype.attachTo = async function (id) {
  *    // data has the shape {mm: [N, N, N], vox: [N, N, N], frac: [N, N, N], values: this.volumes.map(v => {return val})}
  *    //...
  * }
- * niivue.on('location', doSomethingWithLocationData)
- * niivue.on('intensityRange', callback)
- * niivue.on('imageLoaded', callback)
  */
 Niivue.prototype.on = function (event, callback) {
   let knownEvents = Object.keys(this.eventsToSubjects);
@@ -434,6 +483,142 @@ Niivue.prototype.sync = function () {
   this.otherNV.drawScene();
 };
 
+// Internal function to connect to web socket server
+Niivue.prototype.connectToServer = function (wsServerUrl, sessionName) {
+  const url = new URL(wsServerUrl);
+  url.pathname = "websockets";
+  url.search = "?session=" + sessionName;
+  this.serverConnection$ = webSocket(url.href);
+  console.log(url.href);
+};
+
+// Internal function to schedule updates to the server
+Niivue.prototype.setUpdateInterval = function () {
+  this.interval$ = interval(300);
+  this.interval$.subscribe(() => {
+    this.serverConnection$.next({
+      op: "update",
+      azimuth: this.scene.renderAzimuth,
+      elevation: this.scene.renderElevation,
+      clipPlane: this.scene.clipPlane,
+      zoom: this.volScaleMultiplier,
+      key: this.sessionKey,
+    });
+  });
+};
+
+// Internal function called after a connection with the server has been made
+Niivue.prototype.subscribeToServer = function (
+  sessionCreatedCallback,
+  sessionJoinedCallback
+) {
+  this.serverConnection$.subscribe({
+    next: (msg) => {
+      switch (msg["op"]) {
+        case "update":
+          this.scene.renderAzimuth = msg["azimuth"];
+          this.scene.renderElevation = msg["elevation"];
+          this.volScaleMultiplier = msg["zoom"];
+          this.scene.clipPlane = msg["clipPlane"];
+          this.drawScene();
+          break;
+
+        case "create":
+          console.log(msg);
+          if (!msg["isError"]) {
+            this.isInSession = true;
+            this.sessionKey = msg["key"];
+            this.setUpdateInterval();
+          }
+          if (sessionCreatedCallback) {
+            sessionCreatedCallback(
+              msg["message"],
+              msg["url"],
+              msg["key"],
+              msg["isError"]
+            );
+          }
+          break;
+
+        case "join":
+          this.isInSession = true;
+          this.isController = msg["isController"];
+          if (this.isController) {
+            this.setUpdateInterval();
+          }
+
+          if (sessionJoinedCallback) {
+            sessionJoinedCallback(
+              msg["message"],
+              msg["url"],
+              msg["isController"]
+            );
+          }
+          break;
+      }
+    }, // Called whenever there is a message from the server.
+    error: (err) => console.log(err), // Called if at any point WebSocket API signals some kind of error.
+    complete: () => console.log("complete"), // Called when connection is closed (for whatever reason).
+  });
+};
+
+/**
+ * Create a multiuser session
+ * @param {string} wsServerUrl e.g. ws://localhost:3000
+ * @param {string} sessionName
+ * @param {function(string, string, string, boolean):void} sessionCreatedCallback callback after session has been created with message, session url, session key
+ * if there was no error.
+ */
+Niivue.prototype.createSession = function (
+  wsServerUrl,
+  sessionName,
+  sessionCreatedCallback
+) {
+  this.connectToServer(wsServerUrl, sessionName);
+
+  // subscribe to any messages from the server
+  this.subscribeToServer(sessionCreatedCallback);
+
+  // tell the server we want to create a sesion
+  this.serverConnection$.next({
+    op: "create",
+  });
+};
+
+/**
+ * Join a multiuser session
+ * @param {string} wsServerUrl e.g. ws://localhost:3000
+ * @param {string} sessionName
+ * @param {function(string, string, boolean):void} sessionJoinedCallback callback after session has been joined with message, session url and session key
+ */
+Niivue.prototype.joinSession = function (
+  wsServerUrl,
+  sessionName,
+  key,
+  sessionJoinedCallback
+) {
+  this.connectToServer(wsServerUrl, sessionName);
+
+  // subscribe to any messages from the server
+  this.subscribeToServer(null, sessionJoinedCallback);
+
+  // tell the server we want to create a sesion
+  this.serverConnection$.next({
+    op: "join",
+    key: key,
+  });
+};
+
+/**
+ * Close a multiuser session
+ */
+Niivue.prototype.closeSession = function () {
+  this.interval$.complete();
+  this.serverConnection$.complete();
+  this.isInSession = false;
+  this.isController = false;
+};
+
 /* Not documented publicly for now
  * test if two arrays have equal values for each element
  * @param {Array} a the first array
@@ -565,7 +750,10 @@ function intensityRaw2Scaled(hdr, raw) {
 // not included in public docs
 // note: no test yet
 Niivue.prototype.calculateNewRange = function (volIdx = 0) {
-  if (this.sliceType === this.sliceTypeRender) {
+  if (
+    this.sliceType === this.sliceTypeRender &&
+    this.sliceMosaicString.length < 1
+  ) {
     return;
   }
   if (
@@ -575,9 +763,10 @@ Niivue.prototype.calculateNewRange = function (volIdx = 0) {
     return;
   // calculate our box
   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,
@@ -624,7 +813,7 @@ Niivue.prototype.calculateNewRange = function (volIdx = 0) {
   var mxScale = intensityRaw2Scaled(hdr, hi);
   this.volumes[volIdx].cal_min = mnScale;
   this.volumes[volIdx].cal_max = mxScale;
-  this.intensityRange$.next(this.volumes[volIdx]); //reference to volume to access cal_min and cal_max
+  this.opts.onIntensityChange(this.volumes[volIdx]);
 };
 
 // not included in public docs
@@ -635,10 +824,13 @@ Niivue.prototype.mouseUpListener = function () {
   this.scene.mouseButtonRightDown = false;
   this.scene.mouseButtonLeftDown = false;
   if (this.drawPenFillPts.length > 0) this.drawPenFilled();
+  else if (this.drawPenAxCorSag >= 0) this.drawAddUndoBitmap();
   this.drawPenLocation = [NaN, NaN, NaN];
   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);
   }
@@ -711,19 +903,28 @@ Niivue.prototype.mouseMoveListener = function (e) {
 // note: should update this to accept a volume index to reset a selected volume rather than only the background (TODO)
 // reset brightness and contrast to global min and max
 // note: no test yet
-Niivue.prototype.resetBriCon = function () {
+Niivue.prototype.resetBriCon = function (msg = null) {
   //this.volumes[0].cal_min = this.volumes[0].global_min;
   //this.volumes[0].cal_max = this.volumes[0].global_max;
 
   // don't reset bri/con if the user is in 3D mode and double clicks
+  let isRender = false;
   if (this.sliceType === this.sliceTypeRender) {
+    isRender = true;
+  }
+  if (msg !== null) {
+    // test if render is one of the tiles
+    if (this.inRenderTile(msg.offsetX, msg.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;
   this.volumes[0].cal_max = this.volumes[0].robust_max;
-  this.intensityRange$.next(this.volumes[0]);
+  this.opts.onIntensityChange(this.volumes[0]);
   this.refreshLayers(this.volumes[0], 0, this.volumes.length);
   this.drawScene();
 };
@@ -787,9 +988,9 @@ Niivue.prototype.handlePinchZoom = function (e) {
 // handler for keyboard shortcuts
 Niivue.prototype.keyUpListener = function (e) {
   if (e.code === this.opts.clipPlaneHotKey) {
-    if (this.sliceType != this.sliceTypeRender) {
+    /*if (this.sliceType != this.sliceTypeRender) {
       return;
-    }
+    }*/ //bravo
     let now = new Date().getTime();
     let elapsed = now - this.lastCalled;
     if (elapsed > this.opts.keyDebounceTime) {
@@ -1140,10 +1341,32 @@ Niivue.prototype.dropListener = async function (e) {
   this.drawScene(); //<- this seems to be required if you drag and drop a mesh, not a volume
 };
 
+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 () {
@@ -1161,7 +1384,7 @@ Niivue.prototype.addVolume = function (volume) {
   this.volumes.push(volume);
   let idx = this.volumes.length === 1 ? 0 : this.volumes.length - 1;
   this.setVolume(volume, idx);
-  this.imageLoaded$.next(volume); // pass reference to the loaded NVImage (the volume)
+  this.opts.onImageLoaded(volume);
 };
 
 /**
@@ -1175,7 +1398,7 @@ Niivue.prototype.addMesh = function (mesh) {
   this.meshes.push(mesh);
   let idx = this.meshes.length === 1 ? 0 : this.meshes.length - 1;
   this.setMesh(mesh, idx);
-  this.imageLoaded$.next(mesh); // pass reference to the loaded NVImage (the volume)
+  this.opts.onImageLoaded(mesh);
 };
 
 /**
@@ -1196,8 +1419,165 @@ Niivue.prototype.getVolumeIndexByID = function (id) {
   return -1; // -1 signals that no valid index was found for a volume with the given id
 };
 
+//inputs
+// data: Uint8Array to compress
+//output
+// returns rle compressed Uint8Array
+
+function encodeRLE(data) {
+  //https://en.wikipedia.org/wiki/PackBits
+  //run length encoding
+  // input and output are Uint8Array
+  // Will compress data with long runs up to x64
+  // Worst case encoded size is ~1% larger than input
+  let dl = data.length; //input length
+  let dp = 0; //input position
+  //worst case: run length encoding (1+1/127) times larger than input
+  let r = new Uint8Array(dl + Math.ceil(0.01 * dl));
+  let rI = new Int8Array(r.buffer); //typecast as header can be negative
+  let rp = 0; //run length position
+  while (dp < dl) {
+    //for each byte in input
+    let v = data[dp];
+    dp++;
+    let rl = 1; //run length
+    while (rl < 129 && dp < dl && data[dp] === v) {
+      dp++;
+      rl++;
+    } //count run length
+    if (rl > 1) {
+      //header
+      rI[rp] = -rl + 1;
+      rp++;
+      r[rp] = v;
+      rp++;
+      continue;
+    }
+    //count literal length
+    while (dp < dl) {
+      if (rl > 127) break;
+      if (dp + 2 < dl) {
+        //console.log(':', v, data[dp], data[dp+1]);
+        if (
+          v !== data[dp] &&
+          data[dp + 2] === data[dp] &&
+          data[dp + 1] === data[dp]
+        )
+          break;
+      }
+      v = data[dp];
+      dp++;
+      rl++;
+    }
+    //write header
+    r[rp] = rl - 1;
+    rp++;
+    for (let i = 0; i < rl; i++) {
+      r[rp] = data[dp - rl + i];
+      rp++;
+    }
+  }
+  log.info("PackBits " + dl + " -> " + rp + " bytes (x" + dl / rp + ")");
+  return r.slice(0, rp);
+} // encodeRLE()
+
+//inputs
+// rle: packbits compressed stream
+// decodedlen: size of uncompressed data
+//output
+// returns Uint8Array of decodedlen bytes
+function decodeRLE(rle, decodedlen) {
+  let r = new Uint8Array(rle.buffer);
+  let rI = new Int8Array(r.buffer); //typecast as header can be negative
+  let rp = 0; //input position in rle array
+  //d: output uncompressed data array
+  let d = new Uint8Array(decodedlen);
+  let dp = 0; //output position in decoded array
+  while (rp < r.length) {
+    //read header
+    let hdr = rI[rp];
+    rp++;
+    if (hdr < 0) {
+      //write run
+      let v = rI[rp];
+      rp++;
+      for (let i = 0; i < 1 - hdr; i++) {
+        d[dp] = v;
+        dp++;
+      }
+    } else {
+      //write literal
+      for (let i = 0; i < hdr + 1; i++) {
+        d[dp] = rI[rp];
+        rp++;
+        dp++;
+      }
+    } //if run else literal
+  } //while rp < r.length
+  return d;
+} // decodeRLE()
+
+/*Niivue.prototype.testRLE = function() {
+  //Demo to test encodeRLE/decodeRLE
+  let len = 256*256*256;
+  let data = new Uint8Array(len);
+  for (let i = 0; i < len; i++)
+    data[i] = ((Math.random() > 0.30) ? 1 : 0);
+  console.log(data);
+  let rle = encodeRLE(data);
+  let ddata = decodeRLE(rle, len);
+  let ok = true;
+  for (let i = 0; i < len; i++)
+    if (data[i] !== ddata[i])
+      ok = false;
+  console.log('decoded correctly:', ok);
+} // testRLE()*/
+
+Niivue.prototype.drawAddUndoBitmap = async function (fnm) {
+  if (!this.drawBitmap || this.drawBitmap.length < 1) {
+    console.log("drawAddUndoBitmap error: No drawing open");
+    return false;
+  }
+  //let rle = encodeRLE(this.drawBitmap);
+  //the bitmaps are a cyclical loop, like a revolver hand gun: increment the cylinder
+  this.currentDrawUndoBitmap++;
+  if (this.currentDrawUndoBitmap >= this.maxDrawUndoBitmaps)
+    this.currentDrawUndoBitmap = 0;
+  this.drawUndoBitmaps[this.currentDrawUndoBitmap] = encodeRLE(this.drawBitmap);
+}; // drawAddUndoBitmap()
+
+Niivue.prototype.drawClearAllUndoBitmaps = async function () {
+  this.currentDrawUndoBitmap = this.maxDrawUndoBitmaps; //next add will be cylinder 0
+  if (this.drawUndoBitmaps.length < 1) return;
+  for (let i = this.drawUndoBitmaps.length - 1; i >= 0; i--) array[i] = [];
+}; // drawClearAllUndoBitmaps()
+
+Niivue.prototype.drawUndo = function () {
+  if (this.drawUndoBitmaps.length < 1) {
+    console.log("undo bitmaps not loaded");
+    return;
+  }
+  //let dims = this.back.hdr.dims;
+  //let nv = dims[1] * dims[2] * dims[3];
+  this.currentDrawUndoBitmap--;
+  if (this.currentDrawUndoBitmap < 0)
+    this.currentDrawUndoBitmap = this.drawUndoBitmaps.length - 1;
+  if (this.currentDrawUndoBitmap >= this.drawUndoBitmaps.length)
+    this.currentDrawUndoBitmap = 0;
+  if (this.drawUndoBitmaps[this.currentDrawUndoBitmap].length < 2) {
+    console.log("drawUndo is misbehaving");
+    return;
+  }
+  this.drawBitmap = decodeRLE(
+    this.drawUndoBitmaps[this.currentDrawUndoBitmap],
+    this.drawBitmap.length
+  );
+  this.refreshDrawing(true);
+};
+
 Niivue.prototype.loadDrawing = async function (fnm) {
   if (this.drawBitmap) console.log("Overwriting open drawing!");
+  this.drawClearAllUndoBitmaps();
   let volume = await NVImage.loadFromUrl({ url: fnm });
   //let volume = await NVImage.loadFromFile({file: fnm});
   let dims = volume.hdr.dims; //reverse to original
@@ -1215,7 +1595,7 @@ Niivue.prototype.loadDrawing = async function (fnm) {
   //if (perm[0] === 1 && perm[1] === 2 && perm[2] === 3) {
   let vx = dims[1] * dims[2] * dims[3];
   //this.drawBitmap = new Uint8Array(vx);
-  this.drawUndoBitmap = null;
+  //this.drawUndoBitmap = null;
   this.drawBitmap = new Uint8Array(vx);
   this.drawTexture = this.r8Tex(
     this.drawTexture,
@@ -1273,6 +1653,7 @@ Niivue.prototype.loadDrawing = async function (fnm) {
       } //for x
     } //for y
   } //for z
+  this.drawAddUndoBitmap();
   this.refreshDrawing(false);
   this.drawScene();
 };
@@ -1381,6 +1762,7 @@ Niivue.prototype.reverseFaces = function (mesh) {
   this.meshes[idx].reverseFaces(this.gl);
   this.updateGLVolume();
 };
+
 Niivue.prototype.setMeshLayerProperty = function (mesh, layer, key, val) {
   let idx = this.getMeshIndexByID(mesh);
   if (idx < 0) {
@@ -1391,17 +1773,21 @@ Niivue.prototype.setMeshLayerProperty = function (mesh, layer, key, val) {
   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();
-}; // mouseMove()
+}; // setScale2D()
 
 Niivue.prototype.setRenderAzimuthElevation = function (a, e) {
   this.scene.renderAzimuth = a;
   this.scene.renderElevation = e;
   this.drawScene();
-}; // mouseMove()
+}; // setRenderAzimuthElevation()
 
 /**
  * get the index of an overlay by its unique id. unique ids are assigned to the NVImage.id property when a new NVImage is created.
@@ -1548,14 +1934,14 @@ Niivue.prototype.moveVolumeToTop = function (volume) {
 // update mouse position from new mouse down coordinates
 // note: no test yet
 Niivue.prototype.mouseDown = function mouseDown(x, y) {
-  if (this.sliceType != this.sliceTypeRender) return;
+  if (this.inRenderTile(x, y) < 0) return;
   this.mousePos = [x, y];
 }; // mouseDown()
 
 // not included in public docs
 // note: no test yet
 Niivue.prototype.mouseMove = function mouseMove(x, y) {
-  if (this.sliceType != this.sliceTypeRender) return;
+  if (this.inRenderTile(x, y) < 0) return;
   this.scene.renderAzimuth += x - this.mousePos[0];
   this.scene.renderElevation += y - this.mousePos[1];
   this.mousePos = [x, y];
@@ -1608,7 +1994,7 @@ Niivue.prototype.setClipPlane = function (depthAzimuthElevation) {
   );
   this.scene.clipPlane = [v[0], v[1], v[2], depthAzimuthElevation[0]];
   this.scene.clipPlaneDepthAziElev = depthAzimuthElevation;
-  if (this.sliceType != this.sliceTypeRender) return;
+  //if (this.sliceType != this.sliceTypeRender) return;
   this.drawScene();
 }; // setClipPlane()
 
@@ -1715,6 +2101,11 @@ Niivue.prototype.setScale = function (scale) {
  */
 Niivue.prototype.setClipPlaneColor = function (color) {
   this.opts.clipPlaneColor = color;
+  this.renderShader.use(this.gl);
+  this.gl.uniform4fv(
+    this.renderShader.uniforms["clipPlaneColor"],
+    this.opts.clipPlaneColor
+  );
   this.drawScene();
 }; // setClipPlaneColor()
 
@@ -1805,6 +2196,7 @@ Niivue.prototype.loadVolumes = async function (volumeList) {
       url: volumeList[i].url,
       name: volumeList[i].name,
       colorMap: volumeList[i].colorMap,
+      colorMapNegative: volumeList[i].colorMapNegative,
       opacity: volumeList[i].opacity,
       urlImgData: volumeList[i].urlImgData,
       cal_min: volumeList[i].cal_min,
@@ -1915,7 +2307,9 @@ Niivue.prototype.createEmptyDrawing = function () {
   if (mn < 1) return; //something is horribly wrong!
   let vx = this.back.dims[1] * this.back.dims[2] * this.back.dims[3];
   this.drawBitmap = new Uint8Array(vx);
-  this.drawUndoBitmap = null;
+  this.drawClearAllUndoBitmaps();
+  this.drawAddUndoBitmap();
+  //this.drawUndoBitmap = null;
   this.drawTexture = this.r8Tex(
     this.drawTexture,
     this.gl.TEXTURE7,
@@ -2038,16 +2432,6 @@ function img2ras16(volume) {
   return img16;
 }
 
-Niivue.prototype.drawUndo = function () {
-  let hdr = this.back.hdr;
-  let nv = hdr.dims[1] * hdr.dims[2] * hdr.dims[3];
-  if (this.drawUndoBitmap.length !== nv || this.drawBitmap.length !== nv) {
-    console.log("bitmap dims are wrong");
-    return;
-  }
-  this.drawBitmap = this.drawUndoBitmap.slice();
-  this.refreshDrawing(true);
-};
 Niivue.prototype.drawGrowCut = function () {
   let hdr = this.back.hdr;
   let nv = hdr.dims[1] * hdr.dims[2] * hdr.dims[3];
@@ -2055,7 +2439,7 @@ Niivue.prototype.drawGrowCut = function () {
     console.log("bitmap dims are wrong");
     return;
   }
-  this.drawUndoBitmap = this.drawBitmap.slice();
+  //this.drawUndoBitmap = this.drawBitmap.slice();
   let gl = this.gl;
   let fb = gl.createFramebuffer();
   gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
@@ -2068,15 +2452,17 @@ Niivue.prototype.drawGrowCut = function () {
   for (let i = 1; i < nv; i++) img16[i] = this.drawBitmap[i];
   let label0 = this.r16Tex(null, gl.TEXTURE6, this.back.dims, img16);
   let label1 = this.r16Tex(null, gl.TEXTURE7, this.back.dims, img16); //TEXTURE7 = draw Texture
-  for (let i = 1; i < nv; i++) if (img16[i] > 0) img16[i] = 10000;
+  let kMAX_STRENGTH = 10000;
+  for (let i = 1; i < nv; i++) if (img16[i] > 0) img16[i] = kMAX_STRENGTH;
   let strength0 = this.r16Tex(null, gl.TEXTURE4, this.back.dims, img16);
   let strength1 = this.r16Tex(null, gl.TEXTURE5, this.back.dims, img16);
   this.gl.bindVertexArray(this.genericVAO);
   let shader = this.growCutShader;
   shader.use(gl);
+  let iterations = 128; //will run 2x this value
+  gl.uniform1i(shader.uniforms["finalPass"], 0);
   gl.uniform1i(shader.uniforms["inputTexture0"], 3); // background is TEXTURE3
-  //for (let j = 0; j < 250; j++) {
-  for (let j = 0; j < 45; j++) {
+  for (let j = 0; j < iterations; j++) {
     gl.uniform1i(shader.uniforms["inputTexture1"], 6); // label0 is TEXTURE6
     gl.uniform1i(shader.uniforms["inputTexture2"], 4); // strength0 is TEXTURE4
     for (let i = 0; i < this.back.dims[3]; i++) {
@@ -2104,6 +2490,7 @@ Niivue.prototype.drawGrowCut = function () {
       this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
     } //for i: each slice
     //reverse order strength1/label1 and strength0/label0 for reading and writing:
+    if (j === iterations - 1) gl.uniform1i(shader.uniforms["finalPass"], 1);
     gl.uniform1i(shader.uniforms["inputTexture1"], 7); // label1 is TEXTURE7
     gl.uniform1i(shader.uniforms["inputTexture2"], 5); // strength1 is TEXTURE5
     for (let i = 0; i < this.back.dims[3]; i++) {
@@ -2132,17 +2519,9 @@ Niivue.prototype.drawGrowCut = function () {
   } //for j: each iteration
   //read data
   gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
-  let readAttach = gl.COLOR_ATTACHMENT0;
-  let readTex = label1;
-  let readStrength = false;
-  if (readStrength) {
-    //read strength or label
-    //readAttach = gl.COLOR_ATTACHMENT1;
-    readTex = strength1;
-  }
-  //gl.readBuffer(gl.COLOR_ATTACHMENT1); //strength
+  let readAttach = gl.COLOR_ATTACHMENT1;
+  let readTex = label0;
   gl.readBuffer(readAttach); //label
-
   // assuming a framebuffer is bound with the texture to read attached
   const format = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_FORMAT);
   const type = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_TYPE);
@@ -2173,12 +2552,7 @@ Niivue.prototype.drawGrowCut = function () {
   }
   let mx = img16[0];
   for (let i = 0; i < img16.length; i++) mx = Math.max(mx, img16[i]);
-  //let img16 = new Int16Array(nv);
-  //gl.readPixels(0, 0, w, h, format, type);
-  //            this.fallbackReadPixelsFormat, this.fallbackReadPixelsType, fallbackSliceView);
-
   for (let i = 1; i < nv; i++) this.drawBitmap[i] = img16[i];
-
   //clean up
   //restore textures
   gl.activeTexture(gl.TEXTURE2);
@@ -2199,6 +2573,7 @@ Niivue.prototype.drawGrowCut = function () {
   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
   gl.deleteFramebuffer(fb);
+  this.drawAddUndoBitmap();
   this.refreshDrawing(true);
 };
 
@@ -2215,7 +2590,7 @@ Niivue.prototype.drawPt = function (x, y, z, penValue) {
 //https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm
 // https://www.geeksforgeeks.org/bresenhams-algorithm-for-3-d-line-drawing/
 // ptA, ptB are start and end points of line (each XYZ)
-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]);
@@ -2289,6 +2664,87 @@ Niivue.prototype.drawLine = function (ptA, ptB, penValue) {
   }
 };
 
+Niivue.prototype.drawFloodFill = function (seedXYZ, newColor = 0) {
+  //3D "paint bucket" fill:
+  // set all voxels connected to seed point to newColor
+  // https://en.wikipedia.org/wiki/Flood_fill
+  newColor = Math.abs(newColor);
+  let dims = [this.back.dims[1], this.back.dims[2], this.back.dims[3]]; //+1: dims indexed from 0!
+  if (seedXYZ[0] < 0 || seedXYZ[1] < 0 || seedXYZ[2] < 0) return;
+  if (seedXYZ[0] >= dims[0] || seedXYZ[1] >= dims[1] || seedXYZ[2] >= dims[2])
+    return;
+  let nx = dims[0];
+  let nxy = nx * dims[1];
+  let nxyz = nxy * dims[2];
+  let img = this.drawBitmap.slice();
+  if (img.length !== nxy * dims[2]) return;
+  function xyz2vx(pt) {
+    //provided an XYZ 3D point, provide address in 1D array
+    return pt[0] + pt[1] * nx + pt[2] * nxy;
+  }
+  function vx2xyz(vx) {
+    //provided address in 1D array, return XYZ coordinate
+    let Z = Math.floor(vx / nxy); //slice
+    let Y = Math.floor((vx - Z * nxy) / nx); //column
+    let X = Math.floor(vx % nx);
+    return [X, Y, Z];
+  }
+  let seedVx = xyz2vx(seedXYZ);
+  let seedColor = img[seedVx];
+  if (seedColor === newColor) {
+    console.log("drawFloodFill selected voxel is already desired color");
+    return;
+  }
+  //img is binary mask with selected color as 1 and all other colors 0
+  for (let i = 1; i < nxyz; i++) {
+    img[i] = 0;
+    if (this.drawBitmap[i] === seedColor) img[i] = 1;
+  }
+  //1. Set Q to the empty queue or stack.
+  let Q = [];
+  //2. Add node to the end of Q.
+  Q.push(seedVx);
+  img[seedVx] = 2; //part of cluster
+  //3. While Q is not empty:
+  while (Q.length > 0) {
+    //4.   Set n equal to the first element of Q.
+    let vx = Q[0];
+    //5.   Remove first element from Q.
+    Q.shift();
+    //6. Test six neighbors of n (left,right,anterior,posterior,inferior, superior
+    //   If any is is unfound part of cluster (value = 1) set it to found (value 2) and add to Q
+    let xyz = vx2xyz(vx);
+    function testNeighbor(offset) {
+      let xyzN = xyz.slice();
+      xyzN[0] += offset[0];
+      xyzN[1] += offset[1];
+      xyzN[2] += offset[2];
+      if (xyzN[0] < 0 || xyzN[1] < 0 || xyzN[2] < 0) return;
+      if (xyzN[0] >= dims[0] || xyzN[1] >= dims[1] || xyzN[2] >= dims[2])
+        return;
+      let vxT = xyz2vx(xyzN);
+      if (img[vxT] !== 1) return;
+      img[vxT] = 2; //part of cluster
+      Q.push(vxT);
+    }
+    testNeighbor([0, 0, -1]); //inferior
+    testNeighbor([0, 0, 1]); //superior
+    testNeighbor([0, -1, 0]); //posterior
+    testNeighbor([0, 1, 0]); //anterior
+    testNeighbor([-1, 0, 0]); //left
+    testNeighbor([1, 0, 0]); //right
+    //7. Continue looping until Q is exhausted.
+  }
+  //8. Return
+  //this.drawUndoBitmap = this.drawBitmap.slice();
+  for (let i = 1; i < nxyz; i++)
+    if (img[i] === 2)
+      //if part of cluster
+      this.drawBitmap[i] = newColor;
+  this.drawAddUndoBitmap();
+  this.refreshDrawing(false);
+}; // drawFloodFill()
+
 Niivue.prototype.drawPenFilled = function () {
   let nPts = this.drawPenFillPts.length;
   if (nPts < 2) {
@@ -2415,17 +2871,20 @@ Niivue.prototype.drawPenFilled = function () {
       } // x column
     } //y row
   } //not axial
+  //this.drawUndoBitmaps[this.currentDrawUndoBitmap]
   if (
     !this.drawFillOverwrites &&
-    this.drawUndoBitmap.length === this.drawBitmap.length
+    this.drawUndoBitmaps[this.currentDrawUndoBitmap].length > 0
   ) {
-    let nv = this.drawUndoBitmap.length;
+    let nv = this.drawBitmap.length;
+    let bmp = decodeRLE(this.drawUndoBitmaps[this.currentDrawUndoBitmap], nv);
     for (let i = 0; i < nv; i++) {
-      if (this.drawUndoBitmap[i] === 0) continue;
-      this.drawBitmap[i] = this.drawUndoBitmap[i];
+      if (bmp[i] === 0) continue;
+      this.drawBitmap[i] = bmp[i];
     }
   }
   this.drawPenFillPts = [];
+  this.drawAddUndoBitmap();
   this.refreshDrawing(false);
 }; // drawPenFilled()
 
@@ -2880,13 +3339,28 @@ Niivue.prototype.init = async function () {
   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["colormap"], 1); //orient shader applies colormap
   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);
-  // line shader (crosshair)
-  this.lineShader = new Shader(this.gl, vertLineShader, fragLineShader);
-  this.graphShader = new Shader(this.gl, vertGraphShader, fragLineShader);
+  // slice mm shader
+  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
+  );
+  // rect shader (crosshair): horizontal and vertical lines only
+  this.rectShader = new Shader(this.gl, vertRectShader, fragRectShader);
+  // line shader: diagonal lines
+  this.lineShader = new Shader(this.gl, vertLineShader, fragRectShader);
+  this.graphShader = new Shader(this.gl, vertGraphShader, fragRectShader);
   // render shader (3D)
   this.renderShader = new Shader(this.gl, vertRenderShader, fragRenderShader);
   this.renderShader.use(this.gl);
@@ -3115,7 +3589,7 @@ Niivue.prototype.refreshLayers = function (overlayItem, layer, numLayers) {
   if (layer === 0) {
     this.volumeObject3D = overlayItem.toNiivueObject3D(this.VOLUME_ID, this.gl);
     mat.mat4.invert(mtx, mtx);
-    log.debug(`mtx layer ${layer}`, mtx);
+    //log.debug(`mtx layer ${layer}`, mtx);
     this.back.matRAS = overlayItem.matRAS;
     this.back.dims = overlayItem.dimsRAS;
     this.back.pixDims = overlayItem.pixDimsRAS;
@@ -3428,10 +3902,81 @@ 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["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);
+
+      //r8Tex(texID, activeID, dims, isInit = false)
+      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 scale = 255.0 / (mhdr.cal_max - mhdr.cal_min);
+      let imgRaw = this.volumes[overlayItem.modulationImage].img.buffer;
+      let img = new Uint8Array(imgRaw);
+      switch (mhdr.datatypeCode) {
+        case overlayItem.DT_SIGNED_SHORT:
+          img = new Int16Array(imgRaw);
+          break;
+        case overlayItem.DT_FLOAT:
+          img = new Float32Array(imgRaw);
+          break;
+        case overlayItem.DT_DOUBLE:
+          img = new Float64Array(imgRaw);
+          break;
+        case overlayItem.DT_RGB:
+          img = new Uint8Array(imgRaw);
+          break;
+        case overlayItem.DT_UINT16:
+          img = new Uint16Array(imgRaw);
+          break;
+      }
+      console.log(this.volumes[overlayItem.modulationImage]);
+      for (let i = 0; i < vx; i++) {
+        let v = img[i] * mhdr.scl_slope + mhdr.scl_inter;
+        v = (v - mn) * scale;
+        v = Math.min(Math.max(v, 0.0), 255.0);
+        modulateVolume[i] = 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 x = 1.0 / this.back.dims[1];
@@ -3459,6 +4004,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);
@@ -3491,6 +4037,16 @@ Niivue.prototype.refreshLayers = function (overlayItem, layer, numLayers) {
     this.overlays.length
   );
   this.gl.uniform3fv(this.pickingShader.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);
   // set overlays for slice shader
   this.sliceShader.use(this.gl);
   this.gl.uniform1f(
@@ -3499,6 +4055,8 @@ Niivue.prototype.refreshLayers = function (overlayItem, layer, numLayers) {
   );
   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);
   //this.createEmptyDrawing(); //DO NOT DO THIS ON EVERY CALL TO REFRESH LAYERS!!!!
   //this.createRandomDrawing(); //DO NOT DO THIS ON EVERY CALL TO REFRESH LAYERS!!!!
@@ -3530,6 +4088,24 @@ Niivue.prototype.setColorMap = function (id, 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) {
+  //to set:
+  // nv1.setModulationImage(nv1.volumes[0].id, nv1.volumes[1].id);
+  //to clear:
+  // nv1.setModulationImage(nv1.volumes[0].id, null);
+  let idxTarget = this.getVolumeIndexByID(idTarget);
+  let idxModulation = null;
+  //if (idModulation)
+  idxModulation = this.getVolumeIndexByID(idModulation);
+  this.volumes[idxTarget].modulationImage = idxModulation;
+  this.updateGLVolume();
+};
 Niivue.prototype.setGamma = function (gamma = 1.0) {
   cmapper.gamma = gamma;
   this.updateGLVolume();
@@ -3573,7 +4149,7 @@ 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,
@@ -3598,22 +4174,38 @@ Niivue.prototype.refreshColormaps = function () {
   );
   this.gl.pixelStorei(this.gl.UNPACK_ALIGNMENT, 1);
   let luts = this.colormap(this.volumes[0].colorMap);
-  if (nLayer > 1) {
-    for (let i = 1; i < nLayer; i++) {
-      let lut = this.colormap(this.volumes[i].colorMap);
-      let c = new Uint8ClampedArray(luts.length + lut.length);
-      c.set(luts);
-      c.set(lut, luts.length);
-      luts = c;
-    } //colorMap
-  }
+  function addColormap(lut) {
+    let c = new Uint8ClampedArray(luts.length + lut.length);
+    c.set(luts);
+    c.set(lut, luts.length);
+    luts = c;
+  }
+  for (let i = 1; i < nLayer; i++)
+    addColormap(this.colormap(this.volumes[i].colorMap));
+  //slots for (optional) negative colorMaps
+  let bogusLut = new Uint8ClampedArray(1024);
+  //bogus LUT key - allow shader to discriminate slots used for colorMapNegative
+  bogusLut[0] = 255; //R
+  bogusLut[1] = 255; //G
+  bogusLut[2] = 255; //B
+  bogusLut[3] = 0; //A
+  bogusLut[4] = 0; //R
+  bogusLut[5] = 0; //G
+  bogusLut[6] = 0; //B
+  bogusLut[7] = 255; //A
+  for (let i = 0; i < nLayer; i++) {
+    let lut = bogusLut.slice();
+    if (this.volumes[i].colorMapNegative.length > 0)
+      lut = this.colormap(this.volumes[i].colorMapNegative);
+    addColormap(lut);
+  } //each layer
   this.gl.texSubImage2D(
     this.gl.TEXTURE_2D,
     0,
     0,
     0,
     256,
-    nLayer,
+    nLayer * 2,
     this.gl.RGBA,
     this.gl.UNSIGNED_BYTE,
     luts
@@ -3623,23 +4215,64 @@ Niivue.prototype.refreshColormaps = function () {
 
 // not included in public docs
 Niivue.prototype.sliceScale = function () {
-  var dims = [
-    1.0,
-    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 };
 }; // sliceScale()
 
-// not included in public docs
+function swizzleVec3(vec, order = [0, 1, 2]) {
+  let vout = mat.vec3.create();
+  vout[0] = vec[order[0]];
+  vout[1] = vec[order[1]];
+  vout[2] = vec[order[2]];
+  return vout;
+}
+
+Niivue.prototype.inRenderTile = function (x, y) {
+  for (let i = 0; i < this.screenSlices.length; i++) {
+    if (this.screenSlices[i].axCorSag !== this.sliceTypeRender) continue;
+    let ltwh = this.screenSlices[i].leftTopWidthHeight;
+    if (
+      x > ltwh[0] &&
+      y > ltwh[1] &&
+      x < ltwh[0] + ltwh[2] &&
+      y < ltwh[1] + ltwh[3]
+    )
+      return i;
+  }
+  return -1; //mouse position not in rendering tile
+};
+
+Niivue.prototype.sliceScroll3D = function (posChange = 0) {
+  if (posChange === 0) return;
+  //n.b. clip plane only influences voxel-based volumes, so zoom is only action for meshes
+  if (this.volumes.length > 0 && this.scene.clipPlaneDepthAziElev[0] < 1.8) {
+    //clipping mode: change clip plane depth
+    //if (this.scene.clipPlaneDepthAziElev[0] > 1.8) return;
+    let depthAziElev = this.scene.clipPlaneDepthAziElev.slice();
+    //bound clip sqrt(3) = 1.73
+    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); //Math.max(-1.7,
+    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.0, this.volScaleMultiplier * 1.1);
+  if (posChange < 0)
+    this.volScaleMultiplier = Math.max(0.5, this.volScaleMultiplier * 0.9);
+  this.drawScene();
+};
+
 Niivue.prototype.mouseClick = function (x, y, posChange = 0, isDelta = true) {
   var posNow;
   var posFuture;
@@ -3674,34 +4307,14 @@ Niivue.prototype.mouseClick = function (x, y, posChange = 0, isDelta = true) {
       return;
     }
   }
-  if (this.sliceType === this.sliceTypeRender) {
-    if (posChange === 0) return;
-    //n.b. clip plane only influences voxel-based volumes, so zoom is only action for meshes
-
-    if (this.volumes.length > 0 && this.scene.clipPlaneDepthAziElev[0] < 1.8) {
-      //clipping mode: change clip plane depth
-      //if (this.scene.clipPlaneDepthAziElev[0] > 1.8) return;
-      let depthAziElev = this.scene.clipPlaneDepthAziElev.slice();
-      //bound clip sqrt(3) = 1.73
-      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); //Math.max(-1.7,
-      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.0, this.volScaleMultiplier * 1.1);
-    if (posChange < 0)
-      this.volScaleMultiplier = Math.max(0.5, this.volScaleMultiplier * 0.9);
-    this.drawScene();
+  //if (this.sliceType === this.sliceTypeRender) {
+  if (this.inRenderTile(x, y) >= 0) {
+    this.sliceScroll3D(posChange);
+    this.drawScene(); //TODO: twice?
     return;
   }
   if (
-    this.numScreenSlices < 1 ||
+    this.screenSlices.length < 1 ||
     this.gl.canvas.height < 1 ||
     this.gl.canvas.width < 1
   )
@@ -3710,22 +4323,15 @@ Niivue.prototype.mouseClick = function (x, y, posChange = 0, isDelta = true) {
   // webGL clip space L,R,T,B = [-1, 1, 1, 1]
   // n.b. webGL Y polarity reversed
   // https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html
-  for (let i = 0; i < this.numScreenSlices; i++) {
+  for (let i = 0; i < this.screenSlices.length; i++) {
     var axCorSag = this.screenSlices[i].axCorSag;
     if (this.drawPenAxCorSag >= 0 && this.drawPenAxCorSag !== axCorSag)
       continue; //if mouse is drawing on axial slice, ignore any entry to coronal slice
     if (axCorSag > this.sliceTypeSagittal) continue;
-    var ltwh = this.screenSlices[i].leftTopWidthHeight;
-    let isMirror = false;
-    if (ltwh[2] < 0) {
-      isMirror = true;
-      ltwh[0] += ltwh[2];
-      ltwh[2] = -ltwh[2];
-    }
-    var fracX = (x - ltwh[0]) / ltwh[2];
-    if (isMirror) fracX = 1.0 - fracX;
-    var fracY = 1.0 - (y - ltwh[1]) / ltwh[3];
-    if (fracX >= 0.0 && fracX < 1.0 && fracY >= 0.0 && fracY < 1.0) {
+    let texFrac = this.screenXY2TextureFrac(x, y, i);
+    if (texFrac[0] < 0) continue; //click not on slice i
+
+    if (true) {
       //user clicked on slice i
       if (!isDelta) {
         this.scene.crosshairPos[2 - axCorSag] = posChange;
@@ -3740,38 +4346,31 @@ Niivue.prototype.mouseClick = function (x, y, posChange = 0, isDelta = true) {
         if (posFuture < 0) posFuture = 0;
         this.scene.crosshairPos[2 - axCorSag] = posFuture;
         this.drawScene();
-        this.scene.location$.next({
+        this.opts.onLocationChange({
           mm: this.frac2mm(this.scene.crosshairPos),
           vox: this.frac2vox(this.scene.crosshairPos),
           frac: this.scene.crosshairPos,
+          xy: [x, y],
           values: this.volumes.map((v) => {
             let mm = this.frac2mm(this.scene.crosshairPos);
             let vox = v.mm2vox(mm);
             let val = v.getValue(...vox);
-            return val;
+            return { name: v.name, value: val, id: v.id, mm: mm, vox: vox };
           }),
         });
         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)) {
+          this.drawFloodFill(pt, Math.abs(this.opts.penValue));
+          return;
+        }
         if (isNaN(this.drawPenLocation[0])) {
           this.drawPenAxCorSag = axCorSag;
           this.drawPenFillPts = [];
           this.drawPt(...pt, this.opts.penValue);
-          this.drawUndoBitmap = this.drawBitmap.slice();
         } else {
           if (
             pt[0] === this.drawPenLocation[0] &&
@@ -3779,22 +4378,23 @@ Niivue.prototype.mouseClick = function (x, y, posChange = 0, isDelta = true) {
             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) this.drawPenFillPts.push(pt);
         this.refreshDrawing(false);
       }
       this.drawScene();
-      this.scene.location$.next({
+      this.opts.onLocationChange({
         mm: this.frac2mm(this.scene.crosshairPos),
         vox: this.frac2vox(this.scene.crosshairPos),
         frac: this.scene.crosshairPos,
+        xy: [x, y],
         values: this.volumes.map((v) => {
           let mm = this.frac2mm(this.scene.crosshairPos);
           let vox = v.mm2vox(mm);
           let val = v.getValue(...vox);
-          return val;
+          return { name: v.name, value: val, id: v.id, mm: mm, vox: vox };
         }),
       });
       return;
@@ -3810,60 +4410,135 @@ Niivue.prototype.mouseClick = function (x, y, posChange = 0, isDelta = true) {
   } //for i: each slice on screen
 }; // mouseClick()
 
-// not included in public docs
-Niivue.prototype.drawSelectionBox = function (leftTopWidthHeight) {
+Niivue.prototype.drawRuler = function () {
+  let fovMM = [];
+  let ltwh = [];
+  //leftTopWidthHeight
+  for (let i = 0; i < this.screenSlices.length; i++) {
+    if (this.screenSlices[i].axCorSag === this.sliceTypeRender) continue;
+    //let ltwh = this.screenSlices[i].leftTopWidthHeight;
+    if (this.screenSlices[i].fovMM.length > 1) {
+      ltwh = this.screenSlices[i].leftTopWidthHeight;
+      fovMM = this.screenSlices[i].fovMM;
+      break;
+    }
+  }
+  if (ltwh.length < 4) return;
+  let frac10cm = 100.0 / 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.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]
+  //draw Line
+  this.gl.uniform1f(
+    this.lineShader.uniforms["thickness"],
+    this.opts.rulerWidth
   );
-  this.gl.bindVertexArray(this.genericVAO);
+  this.gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], startXYendXY);
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
-  this.gl.bindVertexArray(this.unusedVAO); //switch off to avoid tampering with settings
+  //draw tick marks
+  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 i = 0; i < 11; i++) {
+    let l = startXYendXY[0] + i * w1cm;
+    let xyxy = [l, b, l, t];
+    if (i % 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); //set vertex attributes
+};
+
+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,
+  ]);
+  //draw Line
+  gl.uniform1f(this.lineShader.uniforms["thickness"], this.opts.rulerWidth);
+  gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], startXYendXY);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  //draw startCap
+  let c = this.opts.rulerColor;
+  c[3] = 1.0; //opaque
+  gl.uniform4fv(this.lineShader.uniforms["lineColor"], c);
+  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);
+  //end cap
+  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);
+  //distance between start and stop
+  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 = mat.vec3.create();
+    mat.vec3.sub(v, startXY, endXY);
+    let lenMM = mat.vec3.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); //set vertex attributes
 };
 
 // not included in public docs
-Niivue.prototype.drawColorbar = function (leftTopWidthHeight) {
-  if (leftTopWidthHeight[2] <= 0 || leftTopWidthHeight[3] <= 0) return;
-  // if (this.opts.crosshairWidth > 0) {
-  // 	//gl.disable(gl.DEPTH_TEST);
-  // 	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]);
-  // 	let ltwh = [leftTopWidthHeight[0]-1, leftTopWidthHeight[1]-1, leftTopWidthHeight[2]+2, leftTopWidthHeight[3]+2];
-  // 	this.gl.uniform4f(this.lineShader.uniforms["leftTopWidthHeight"], ltwh[0], ltwh[1], ltwh[2], ltwh[3]);
-  // 	this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
-  // }
-  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
-  );
-  this.gl.uniform2fv(this.colorbarShader.uniforms["canvasWidthHeight"], [
+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.colorbarShader.uniforms["leftTopWidthHeight"],
+    this.rectShader.uniforms["leftTopWidthHeight"],
     leftTopWidthHeight[0],
     leftTopWidthHeight[1],
     leftTopWidthHeight[2],
@@ -3872,20 +4547,193 @@ Niivue.prototype.drawColorbar = function (leftTopWidthHeight) {
   this.gl.bindVertexArray(this.genericVAO);
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   this.gl.bindVertexArray(this.unusedVAO); //switch off to avoid tampering with settings
-  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
-  );
-  //gl.enable(gl.DEPTH_TEST);
-}; // drawColorbar()
+};
 
-// not included in public docs
+Niivue.prototype.drawSelectionBox = function (
+  leftTopWidthHeight,
+  lineColor = [1, 0, 0, 1]
+) {
+  this.drawBox(leftTopWidthHeight, this.opts.selectionBoxColor);
+};
+
+function tickSpacingX(tickCount, mn, mx) {
+  //https://www.realtimerendering.com/resources/GraphicsGems/gems/Label.c
+  //https://stackoverflow.com/questions/326679/choosing-an-attractive-linear-scale-for-a-graphs-y-axis
+  let range = Math.abs(mx - mn);
+  if (range === 0.0) return [0, 0];
+  let unroundedTickSize = range / (tickCount - 1);
+  let x = Math.ceil(Math.log10(unroundedTickSize) - 1);
+  let pow10x = Math.pow(10, x);
+  let spacing = Math.ceil(unroundedTickSize / pow10x) * pow10x;
+  let ticMin = mn;
+  if (ticMin % spacing !== 0.0 && range % spacing !== 0.0)
+    ticMin = Math.floor((mn + spacing) / spacing) * spacing;
+  if ((mn / spacing) % 1 !== 0.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(6, 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 () {
+  //available canvas height differs from actual height if bottom colorbar is shown
+  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 margin = txtHt;
+  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) {
+    //no space for text
+    if (leftTopWidthHeight[3] < 3) return;
+    margin = 1;
+    barHt = leftTopWidthHeight[3] - 2;
+  }
+  this.gl.disable(this.gl.DEPTH_TEST);
+  this.colorbarHeight = leftTopWidthHeight[3] + 1;
+  let clr = [
+    this.opts.backColor[0],
+    this.opts.backColor[1],
+    this.opts.backColor[2],
+    0.5,
+  ];
+  let top = 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.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); //switch off to avoid tampering with settings
+  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 min = this.volumes[layer].cal_min;
+  let max = this.volumes[layer].cal_max;
+  if (min >= max || txtHt < 1) return;
+  let range = max - min;
+  let [spacing, ticMin] = tickSpacing(min, max);
+  //determine font size
+  function humanize(x) {
+    //drop trailing zeros from numerical string
+    return x.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 <= max) {
+    ticLTWH[0] = barLTWH[0] + ((tic - min) / range) * barLTWH[2];
+    this.drawBox(ticLTWH);
+    let str = humanize(tic);
+    if (isNegativeColor) str = "-" + str;
+    //if (fntSize > 0)
+    this.drawTextBelow([ticLTWH[0], txtTop], str);
+    //this.drawTextRight([plotLTWH[0], y], str, fntScale)
+    tic += spacing;
+  }
+};
+
+Niivue.prototype.drawColorbar = function () {
+  let nlayers = this.volumes.length;
+  if (nlayers < 1) return;
+  let ncolorMapNegative = 0;
+  for (let i = 0; i < nlayers; i++)
+    if (this.volumes[i].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 i = 0; i < nlayers; i++) {
+    this.drawColorbarCore(i, leftTopWidthHeight);
+    leftTopWidthHeight[0] += wid;
+    if (this.volumes[i].colorMapNegative.length === 0) continue;
+    this.drawColorbarCore(i, leftTopWidthHeight, true);
+    leftTopWidthHeight[0] += wid;
+  }
+};
+
+// not included in public docs
 Niivue.prototype.textWidth = function (scale, str) {
   let w = 0;
   var bytes = new TextEncoder().encode(str);
@@ -3965,7 +4813,48 @@ Niivue.prototype.drawTextLeft = function (xy, str, scale = 1, color = null) {
   xy[0] -= this.textWidth(size, str);
   xy[1] -= 0.5 * size;
   this.drawText(xy, str, scale, color);
-}; // drawTextRight()
+}; // drawTextLeft()
+
+// not included in public docs
+Niivue.prototype.drawTextRightBelow = function (
+  xy,
+  str,
+  scale = 1,
+  color = null
+) {
+  //to right of x, vertically centered on y
+  if (this.opts.textHeight <= 0) return;
+  let size = this.opts.textHeight * this.gl.canvas.height * scale;
+  //xy[0] -= this.textWidth(size, str);
+  //xy[1] -= 0.5 * size;
+  this.drawText(xy, str, scale, color);
+}; // drawTextLeftBelow()
+
+// not included in public docs
+Niivue.prototype.drawTextBetween = function (
+  startXYendXY,
+  str,
+  scale = 1,
+  color = null
+) {
+  //horizontally centered on x, below y
+  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 * scale;
+  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, scale, color);
+}; // drawTextBetween()
 
 // not included in public docs
 Niivue.prototype.drawTextBelow = function (xy, str, scale = 1, color = null) {
@@ -4001,170 +4890,382 @@ Niivue.prototype.setInterpolation = function (isNearest) {
   this.drawScene();
 }; // setInterpolation()
 
-Niivue.prototype.calculateMvpMatrixX = function () {
-  let whratio = this.gl.canvas.clientWidth / this.gl.canvas.clientHeight;
-  //pivot from center of objects
-  //let scale = this.furthestVertexFromOrigin;
-  //let origin = [0,0,0];
-  let scale = this.furthestFromPivot;
-  let origin = [0, 0, 0];
+function deg2rad(deg) {
+  return deg * (Math.PI / 180.0);
+} // deg2rad()
+
+Niivue.prototype.calculateMvpMatrix2D = function (
+  leftTopWidthHeight,
+  mn,
+  mx,
+  clipTolerance = Infinity,
+  clipDepth = 0,
+  azimuth = null,
+  elevation = null,
+  isRadiolgical
+) {
+  let gl = this.gl;
+  gl.viewport(
+    leftTopWidthHeight[0],
+    this.gl.canvas.clientHeight -
+      (leftTopWidthHeight[1] + leftTopWidthHeight[3]), //lower numbers near bottom
+    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 scale = 2 * Math.max(Math.abs(mn[2]), Math.abs(mx[2])); //3rd dimension is near/far from camera
   let projectionMatrix = mat.mat4.create();
-  //scale = (0.8 * scale) / this.volScaleMultiplier; //2.0 WebGL viewport has range of 2.0 [-1,-1]...[1,1]
-  if (whratio < 1)
-    //tall window: "portrait" mode, width constrains
-    mat.mat4.ortho(
-      projectionMatrix,
-      -scale,
-      scale,
-      -scale / whratio,
-      scale / whratio,
-      0.01,
-      scale * 8.0
-    );
-  //Wide window: "landscape" mode, height constrains
-  else
-    mat.mat4.ortho(
-      projectionMatrix,
-      -scale * whratio,
-      scale * whratio,
-      -scale,
-      scale,
-      0.01,
-      scale * 8.0
-    );
+  let near = 0.01;
+  let far = scale * 8.0;
+  if (clipTolerance !== Infinity) {
+    let r = isRadiolgical;
+    if (elevation === 0 && (azimuth === 0 || azimuth === 180)) r = !r;
+    let dx = scale * 1.8 - clipDepth;
+    if (!r) dx = scale * 1.8 + clipDepth;
+    near = dx - clipTolerance;
+    far = dx + clipTolerance;
+  }
+  mat.mat4.ortho(projectionMatrix, left, right, mn[1], mx[1], near, far);
   const modelMatrix = mat.mat4.create();
   modelMatrix[0] = -1; //mirror X coordinate
   //push the model away from the camera so camera not inside model
-
   let translateVec3 = mat.vec3.fromValues(0, 0, -scale * 1.8); // to avoid clipping, >= SQRT(3)
   mat.mat4.translate(modelMatrix, modelMatrix, translateVec3);
-  if (this.position)
-    mat.mat4.translate(modelMatrix, modelMatrix, this.position);
-
-  mat.mat4.translate(modelMatrix, modelMatrix, [
-    -origin[0],
-    -origin[1],
-    -origin[2],
-  ]);
-  //
+  //apply elevation
+  mat.mat4.rotateX(modelMatrix, modelMatrix, deg2rad(270 - elevation));
+  //apply azimuth
+  mat.mat4.rotateZ(modelMatrix, modelMatrix, deg2rad(azimuth - 180));
   let iModelMatrix = mat.mat4.create();
   mat.mat4.invert(iModelMatrix, modelMatrix);
   let normalMatrix = mat.mat4.create();
   mat.mat4.transpose(normalMatrix, iModelMatrix);
-  //this.gl.uniformMatrix4fv(this.meshShader.uniforms["mvpMtx"], false, m);
-
-  // transpose(out, a) - > {mat4}
-  // invert(out, a)
-  //  normalMatrix := modelMatrix.Inverse.Transpose;
   let modelViewProjectionMatrix = mat.mat4.create();
   mat.mat4.multiply(modelViewProjectionMatrix, projectionMatrix, modelMatrix);
-  return [modelViewProjectionMatrix, modelMatrix, normalMatrix];
-}; // calculateMvpMatrix
 
-Niivue.prototype.drawMesh3DX = function (
-  isDepthTest = true,
-  alpha = 1.0,
-  leftTopWidthHeight
+  return {
+    modelViewProjectionMatrix,
+    modelMatrix,
+    normalMatrix,
+    leftTopMM,
+    fovMM,
+  };
+}; // calculateMvpMatrix2D
+
+Niivue.prototype.swizzleVec3MM = function (v3, axCorSag) {
+  // change order of vector components
+  if (axCorSag === this.sliceTypeCoronal) {
+    //2D coronal screenXYZ = nifti [i,k,j]
+    v3 = swizzleVec3(v3, [0, 2, 1]);
+  } else if (axCorSag === this.sliceTypeSagittal) {
+    //2D sagittal screenXYZ = nifti [j,k,i]
+    v3 = swizzleVec3(v3, [1, 2, 0]);
+  }
+  return v3;
+}; // swizzleVec3MM()
+
+Niivue.prototype.screenFieldOfViewMM = function (
+  axCorSag = 0,
+  forceSliceMM = false
 ) {
-  if (this.meshes.length < 1) return;
-  let gl = this.gl;
-  let m, modelMtx, normMtx;
-  [m, modelMtx, normMtx] = this.calculateMvpMatrixX(
-    this.volumeObject3D,
-    leftTopWidthHeight
+  //extent of volume/mesh (in millimeters) in screen space
+  if (!forceSliceMM && !this.opts.isSliceMM) {
+    //return voxel space
+    let fov = this.volumeObject3D.fieldOfViewDeObliqueMM.slice();
+    return this.swizzleVec3MM(fov, axCorSag);
+  }
+  let mnMM = this.volumeObject3D.extentsMin.slice();
+  let mxMM = this.volumeObject3D.extentsMax.slice();
+  let rotation = mat.mat4.create(); //identity matrix: 2D axial screenXYZ = nifti [i,j,k]
+  mnMM = this.swizzleVec3MM(mnMM, axCorSag);
+  mxMM = this.swizzleVec3MM(mxMM, axCorSag);
+  let fovMM = mat.vec3.create();
+  mat.vec3.subtract(fovMM, mxMM, mnMM);
+  return fovMM;
+};
+
+Niivue.prototype.screenFieldOfViewExtendedMM = function (axCorSag = 0) {
+  //extent of volume/mesh (in millimeters) in screen space
+  let mnMM = this.volumeObject3D.extentsMin.slice();
+  let mxMM = this.volumeObject3D.extentsMax.slice();
+  let rotation = mat.mat4.create(); //identity matrix: 2D axial screenXYZ = nifti [i,j,k]
+  mnMM = this.swizzleVec3MM(mnMM, axCorSag);
+  mxMM = this.swizzleVec3MM(mxMM, axCorSag);
+  let fovMM = mat.vec3.create();
+  mat.vec3.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
   );
 
-  gl.enable(gl.DEPTH_TEST);
-  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  this.drawTextRight(
+    [
+      leftTopWidthHeight[0],
+      leftTopWidthHeight[1] + leftTopWidthHeight[3] * 0.5,
+    ],
+    leftText
+  );
+};
 
-  gl.disable(gl.BLEND);
-  gl.depthFunc(gl.GREATER);
+Niivue.prototype.xyMM2xyzMM = function (axCorSag, sliceFrac) {
+  //given X and Y, find Z for a plane defined by 3 points (a,b,c)
+  //https://math.stackexchange.com/questions/851742/calculate-coordinate-of-any-point-on-triangle-in-3d-plane
+  let sliceDim = 2; //axial depth is NIfTI k dimension
+  if (axCorSag === this.sliceTypeCoronal) sliceDim = 1; //sagittal depth is NIfTI j dimension
+  if (axCorSag === this.sliceTypeSagittal) sliceDim = 0; //sagittal depth is NIfTI i dimension
+  let a = [0, 0, 0];
+  let b = [1, 1, 0];
+  let c = [1, 0, 1];
+
+  a[sliceDim] = sliceFrac;
+  b[sliceDim] = sliceFrac;
+  c[sliceDim] = sliceFrac;
+  a = this.frac2mm(a);
+  b = this.frac2mm(b);
+  c = this.frac2mm(c);
+  a = this.swizzleVec3MM(a, axCorSag);
+  b = this.swizzleVec3MM(b, axCorSag);
+  c = this.swizzleVec3MM(c, axCorSag);
+  let denom = (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
+  let yMult = (b[0] - a[0]) * (c[2] - a[2]) - (c[0] - a[0]) * (b[2] - a[2]);
+  yMult /= denom;
+  let xMult = (b[1] - a[1]) * (c[2] - a[2]) - (c[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;
+};
 
-  if (isDepthTest) {
-    gl.disable(gl.BLEND);
-    gl.depthFunc(gl.GREATER);
+Niivue.prototype.draw2DMM = function (
+  leftTopWidthHeight,
+  axCorSag,
+  customMM = NaN
+) {
+  let screen = 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 {
-    gl.enable(gl.BLEND);
-    gl.depthFunc(gl.ALWAYS);
+    azimuth = isRadiolgical ? 180 : 0;
+    elevation = isRadiolgical ? -90 : 90;
+  }
+  if (leftTopWidthHeight[2] === 0 || leftTopWidthHeight[3] === 0)
+    //use full screen
+    leftTopWidthHeight = this.scaleSlice(screen.fovMM[0], screen.fovMM[1]);
+  if (isNaN(customMM)) {
+    let panXY = this.swizzleVec3MM(this.scene.pan2Dxyzmm, axCorSag);
+    screen.mnMM[0] -= panXY[0];
+    screen.mxMM[0] -= panXY[0];
+    screen.mnMM[1] -= panXY[1];
+    screen.mxMM[1] -= panXY[1];
+    screen.mnMM[0] /= this.scene.pan2Dxyzmm[3];
+    screen.mxMM[0] /= this.scene.pan2Dxyzmm[3];
+    screen.mnMM[1] /= this.scene.pan2Dxyzmm[3];
+    screen.mxMM[1] /= this.scene.pan2Dxyzmm[3];
+  }
+  let sliceDim = 2; //axial depth is NIfTI k dimension
+  if (axCorSag === this.sliceTypeCoronal) sliceDim = 1; //sagittal depth is NIfTI j dimension
+  if (axCorSag === this.sliceTypeSagittal) sliceDim = 0; //sagittal depth is NIfTI i dimension
+  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];
   }
-  gl.disable(gl.CULL_FACE); //show front and back faces
-  //Draw the mesh
-  this.meshShader.use(this.gl); // set Shader
-  //set shader uniforms
-  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 i = 0; i < this.meshes.length; i++) {
-    if (this.meshes[i].indexCount < 3) continue;
-    if (this.meshes[i].offsetPt0) {
-      hasFibers = true;
-      continue;
-    }
-    gl.bindVertexArray(this.meshes[i].vao);
-    gl.drawElements(
-      gl.TRIANGLES,
-      this.meshes[i].indexCount,
-      gl.UNSIGNED_INT,
-      0
+  let sliceMM = mm[sliceDim];
+  let gl = this.gl;
+  gl.clear(gl.DEPTH_BUFFER_BIT);
+  let obj = this.calculateMvpMatrix2D(
+    leftTopWidthHeight,
+    screen.mnMM,
+    screen.mxMM,
+    Infinity,
+    0,
+    azimuth,
+    elevation,
+    isRadiolgical
+  );
+  if (customMM === Infinity || customMM === -Infinity) {
+    //draw rendering
+    this.draw3D(
+      leftTopWidthHeight,
+      obj.modelViewProjectionMatrix,
+      obj.modelMatrix,
+      obj.normalMatrix,
+      azimuth,
+      elevation
     );
-    gl.bindVertexArray(this.unusedVAO);
-  }
-  //draw fibers
-  if (!hasFibers) {
-    gl.enable(gl.BLEND);
-    gl.depthFunc(gl.ALWAYS);
     return;
   }
-  let shader = this.fiberShader;
-  shader.use(this.gl);
-  gl.uniformMatrix4fv(shader.uniforms["mvpMtx"], false, m);
-  gl.uniform1f(shader.uniforms["opacity"], alpha);
-  for (let i = 0; i < this.meshes.length; i++) {
-    if (this.meshes[i].indexCount < 3) continue;
-    if (!this.meshes[i].offsetPt0) continue;
-    gl.bindVertexArray(this.meshes[i].vao);
-    gl.drawElements(
-      gl.LINE_STRIP,
-      this.meshes[i].indexCount,
-      gl.UNSIGNED_INT,
-      0
+  gl.enable(gl.DEPTH_TEST);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  //draw the slice
+  gl.disable(gl.BLEND);
+  gl.depthFunc(gl.GREATER);
+  gl.disable(gl.CULL_FACE); //show front and back faces
+  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); //set vertex attributes
+  this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  this.gl.bindVertexArray(this.unusedVAO); //set vertex attributes
+  //record screenSlices to detect mouse click positions
+  this.screenSlices.push({
+    leftTopWidthHeight: leftTopWidthHeight,
+    axCorSag: axCorSag,
+    sliceFrac: sliceFrac,
+    AxyzMxy: this.xyMM2xyzMM(axCorSag, sliceFrac),
+    leftTopMM: obj.leftTopMM,
+    fovMM: obj.fovMM,
+  });
+  if (isNaN(customMM)) {
+    //draw crosshairs
+    this.drawCrosshairs3D(true, 1.0, obj.modelViewProjectionMatrix);
+  }
+  if (this.opts.meshThicknessOn2D > 0.0) {
+    if (this.opts.meshThicknessOn2D !== Infinity)
+      obj = this.calculateMvpMatrix2D(
+        leftTopWidthHeight,
+        screen.mnMM,
+        screen.mxMM,
+        this.opts.meshThicknessOn2D,
+        sliceMM,
+        azimuth,
+        elevation,
+        isRadiolgical
+      );
+    this.drawMesh3D(
+      true,
+      1,
+      obj.modelViewProjectionMatrix,
+      obj.modelMatrix,
+      obj.normalMatrix
     );
-    gl.bindVertexArray(this.unusedVAO);
   }
-  gl.enable(gl.BLEND);
-  gl.depthFunc(gl.ALWAYS);
+
+  if (isNaN(customMM))
+    //no crossbars for mosaic view
+    this.drawCrosshairs3D(false, 0.15, obj.modelViewProjectionMatrix);
+  this.drawSliceOrientationText(leftTopWidthHeight, axCorSag);
+  //gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
   this.readyForSync = true;
-}; //drawMesh3D()
+}; // draw2DMM()
 
 // not included in public docs
-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) {
+    //use full screen
+    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.viewport(ltwh[0], ltwh[1], ltwh[2], ltwh[3]);
   gl.disable(gl.DEPTH_TEST);
-
-  var crossXYZ = [
+  let sliceDim = 2;
+  let crossXYZ = [
     this.scene.crosshairPos[0],
     this.scene.crosshairPos[1],
     this.scene.crosshairPos[2],
   ]; //axial: width=i, height=j, slice=k
-  if (axCorSag === this.sliceTypeCoronal)
+  if (axCorSag === this.sliceTypeCoronal) {
+    sliceDim = 1;
     crossXYZ = [
       this.scene.crosshairPos[0],
       this.scene.crosshairPos[2],
       this.scene.crosshairPos[1],
     ]; //coronal: width=i, height=k, slice=j
-  if (axCorSag === this.sliceTypeSagittal)
+  }
+  if (axCorSag === this.sliceTypeSagittal) {
+    sliceDim = 0;
     crossXYZ = [
       this.scene.crosshairPos[1],
       this.scene.crosshairPos[2],
       this.scene.crosshairPos[0],
     ]; //sagittal: width=j, height=k, slice=i
+  }
+  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"],
@@ -4192,29 +5293,35 @@ Niivue.prototype.draw2D = function (leftTopWidthHeight, axCorSag) {
     leftTopWidthHeight[2],
     leftTopWidthHeight[3]
   );
-  //gl.uniform4f(sliceShader.uniforms["leftTopWidthHeight"], leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
-  //gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
   this.gl.bindVertexArray(this.genericVAO); //set vertex attributes
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   //record screenSlices to detect mouse click positions
-  this.screenSlices[this.numScreenSlices].leftTopWidthHeight =
-    leftTopWidthHeight;
-  this.screenSlices[this.numScreenSlices].axCorSag = axCorSag;
-  this.numScreenSlices += 1;
+  this.screenSlices.push({
+    leftTopWidthHeight: leftTopWidthHeight,
+    axCorSag: 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.0) return;
-  this.lineShader.use(this.gl);
+  this.gl.bindVertexArray(this.genericVAO);
+  this.rectShader.use(this.gl);
   this.gl.uniform4fv(
-    this.lineShader.uniforms["lineColor"],
+    this.rectShader.uniforms["lineColor"],
     this.opts.crosshairColor
   );
-  this.gl.uniform2fv(this.lineShader.uniforms["canvasWidthHeight"], [
+  this.gl.uniform2fv(this.rectShader.uniforms["canvasWidthHeight"], [
     this.gl.canvas.width,
     this.gl.canvas.height,
   ]);
   //vertical line of crosshair:
   var xleft = leftTopWidthHeight[0] + leftTopWidthHeight[2] * crossXYZ[0];
   this.gl.uniform4f(
-    this.lineShader.uniforms["leftTopWidthHeight"],
+    this.rectShader.uniforms["leftTopWidthHeight"],
     xleft - 0.5 * this.opts.crosshairWidth,
     leftTopWidthHeight[1],
     this.opts.crosshairWidth,
@@ -4225,7 +5332,7 @@ Niivue.prototype.draw2D = function (leftTopWidthHeight, axCorSag) {
   var xtop =
     leftTopWidthHeight[1] + leftTopWidthHeight[3] * (1.0 - crossXYZ[1]);
   this.gl.uniform4f(
-    this.lineShader.uniforms["leftTopWidthHeight"],
+    this.rectShader.uniforms["leftTopWidthHeight"],
     leftTopWidthHeight[0],
     xtop - 0.5 * this.opts.crosshairWidth,
     leftTopWidthHeight[2],
@@ -4233,60 +5340,34 @@ Niivue.prototype.draw2D = function (leftTopWidthHeight, axCorSag) {
   );
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   this.gl.bindVertexArray(this.unusedVAO); //set vertex attributes
-
   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(0, 0, gl.canvas.width, gl.canvas.height);
-  this.setPivot3D();
-  gl.viewport(
-    leftTopWidthHeight[0],
-    leftTopWidthHeight[1],
-    leftTopWidthHeight[2],
-    leftTopWidthHeight[3]
-  );
   gl.enable(gl.DEPTH_TEST);
   gl.depthFunc(gl.ALWAYS);
   gl.clearDepth(0.0);
   this.sync();
-}; // draw2D()
+}; // draw2DVox()
 
-Niivue.prototype.calculateMvpMatrix = function () {
-  function deg2rad(deg) {
-    return deg * (Math.PI / 180.0);
-  }
-  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)
+    //use full canvas
+    leftTopWidthHeight = [0, 0, this.gl.canvas.width, this.gl.canvas.height];
+  let whratio = leftTopWidthHeight[2] / leftTopWidthHeight[3];
+  //let whratio = this.gl.canvas.clientWidth / this.gl.canvas.clientHeight;
   //pivot from center of objects
   //let scale = this.furthestVertexFromOrigin;
   //let origin = [0,0,0];
@@ -4325,26 +5406,9 @@ Niivue.prototype.calculateMvpMatrix = function () {
   if (this.position)
     mat.mat4.translate(modelMatrix, modelMatrix, this.position);
   //apply elevation
-  mat.mat4.rotateX(
-    modelMatrix,
-    modelMatrix,
-    deg2rad(270 - this.scene.renderElevation)
-  );
+  mat.mat4.rotateX(modelMatrix, modelMatrix, deg2rad(270 - elevation));
   //apply azimuth
-  mat.mat4.rotateZ(
-    modelMatrix,
-    modelMatrix,
-    deg2rad(this.scene.renderAzimuth - 180)
-  );
-  //translate object to be in center of field of view (e.g. CT brain scans where origin is distant table center)
-  /*if (this.volumeObject3D) {
-    mat.mat4.translate(
-      modelMatrix,
-      modelMatrix,
-      this.volumeObject3D.originNegate
-    );
-  }*/
-
+  mat.mat4.rotateZ(modelMatrix, modelMatrix, deg2rad(azimuth - 180));
   mat.mat4.translate(modelMatrix, modelMatrix, [
     -origin[0],
     -origin[1],
@@ -4366,7 +5430,7 @@ Niivue.prototype.calculateMvpMatrix = function () {
 }; // calculateMvpMatrix
 
 // not included in public docs
-Niivue.prototype.calculateRayDirection = function () {
+Niivue.prototype.calculateRayDirection = function (azimuth, elevation) {
   function deg2rad(deg) {
     return deg * (Math.PI / 180.0);
   }
@@ -4374,17 +5438,9 @@ Niivue.prototype.calculateRayDirection = function () {
   modelMatrix[0] = -1; //mirror X coordinate
   //push the model away from the camera so camera not inside model
   //apply elevation
-  mat.mat4.rotateX(
-    modelMatrix,
-    modelMatrix,
-    deg2rad(270 - this.scene.renderElevation)
-  );
+  mat.mat4.rotateX(modelMatrix, modelMatrix, deg2rad(270 - elevation));
   //apply azimuth
-  mat.mat4.rotateZ(
-    modelMatrix,
-    modelMatrix,
-    deg2rad(this.scene.renderAzimuth - 180)
-  );
+  mat.mat4.rotateZ(modelMatrix, modelMatrix, deg2rad(azimuth - 180));
   if (this.back.obliqueRAS) {
     let oblique = mat.mat4.clone(this.back.obliqueRAS);
     mat.mat4.multiply(modelMatrix, modelMatrix, oblique);
@@ -4471,6 +5527,8 @@ Niivue.prototype.setPivot3D = function () {
   this.pivot3D = [pivot[0], pivot[1], pivot[2]];
   //find scale of scene
   mat.vec3.subtract(pivot, mx, mn);
+  this.extentsMin = mn;
+  this.extentsMax = mx;
   this.furthestFromPivot = mat.vec3.length(pivot) * 0.5; //pivot is half way between the extreme vertices
 }; // setPivot3D()
 
@@ -4499,14 +5557,14 @@ Niivue.prototype.drawGraphLine = function (
 };
 
 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"],
+    this.rectShader.uniforms["leftTopWidthHeight"],
     LTWH[0],
     LTWH[1],
     LTWH[2],
@@ -4517,21 +5575,6 @@ Niivue.prototype.drawRect = function (LTWH, color = [1, 0, 0, 0.5]) {
   this.gl.bindVertexArray(this.unusedVAO); //switch off to avoid tampering with settings
 };
 
-function tickSpacing(tickCount, mn, mx) {
-  //https://www.realtimerendering.com/resources/GraphicsGems/gems/Label.c
-  //https://stackoverflow.com/questions/326679/choosing-an-attractive-linear-scale-for-a-graphs-y-axis
-  let range = Math.abs(mx - mn);
-  if (range === 0.0) return [0, 0];
-  let unroundedTickSize = range / (tickCount - 1);
-  let x = Math.ceil(Math.log10(unroundedTickSize) - 1);
-  let pow10x = Math.pow(10, x);
-  let spacing = Math.ceil(unroundedTickSize / pow10x) * pow10x;
-  let ticMin = mn;
-  if ((mn / spacing) % 1 !== 0.0)
-    ticMin = Math.sign(ticMin) * Math.round(Math.abs(ticMin));
-  return [spacing, ticMin];
-}
-
 Niivue.prototype.drawGraph = function () {
   let gl = this.gl;
   let graph = this.graph;
@@ -4539,7 +5582,7 @@ Niivue.prototype.drawGraph = function () {
     this.graph.autoSizeMultiplanar &&
     this.sliceType === this.sliceTypeMultiplanar
   ) {
-    for (let i = 0; i < this.numScreenSlices; i++) {
+    for (let i = 0; i < this.screenSlices.length; i++) {
       var axCorSag = this.screenSlices[i].axCorSag;
       if (axCorSag !== this.sliceTypeSagittal) continue;
       var ltwh = this.screenSlices[i].leftTopWidthHeight;
@@ -4629,7 +5672,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);
   //determine font size
   function humanize(x) {
     //drop trailing zeros from numerical string
@@ -4774,27 +5817,78 @@ Niivue.prototype.drawGraph = function () {
   }
 };
 
+function isRadiological(mtx) {
+  let vRight = mat.vec4.fromValues(1, 0, 0, 0); //pure right vector
+  let vRotated = mat.vec4.create();
+  mat.vec4.transformMat4(vRotated, vRight, mtx);
+  return vRotated[0];
+} //n.b. ambiguous for pure sagittal views
+
 // not included in public docs
-Niivue.prototype.draw3D = function () {
+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;
-  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+  if (mvpMatrix === null)
+    [mvpMatrix, modelMatrix, normalMatrix] = this.calculateMvpMatrix(
+      null,
+      leftTopWidthHeight,
+      azimuth,
+      elevation
+    );
+  if (leftTopWidthHeight[2] === 0 || leftTopWidthHeight[3] === 0) {
+    //use full canvas
+    leftTopWidthHeight = [0, 0, gl.canvas.width, gl.canvas.height];
+    this.screenSlices.push({
+      leftTopWidthHeight: 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.0);
+
   if (this.volumes.length === 0) {
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    this.drawMesh3D(true, 1);
+    this.drawMesh3D(true, 1, mvpMatrix, modelMatrix, normalMatrix);
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
     return;
   }
-
   // mvp matrix and ray direction can now be a constant because of world space
-  let mvpMatrix, modelMatrix, normalMatrix;
-  // eslint-disable-next-line no-unused-vars
-  [mvpMatrix, modelMatrix, normalMatrix] = this.calculateMvpMatrix(
-    this.volumeObject3D
-  );
-  const rayDir = this.calculateRayDirection();
+  const rayDir = this.calculateRayDirection(azimuth, elevation);
+
   let object3D = this.volumeObject3D;
   // render picking surfaces
   if (this.scene.mouseDepthPicker) {
@@ -4815,10 +5909,11 @@ Niivue.prototype.draw3D = function () {
       gl.bindVertexArray(this.unusedVAO);
     }
     //check if we have a selected object
-    const pixelX = (this.mousePos[0] * gl.canvas.width) / gl.canvas.clientWidth;
+    const pixelX =
+      (this.mousePos[0] * leftTopWidthHeight[2]) / leftTopWidthHeight[2];
     const pixelY =
       gl.canvas.height -
-      (this.mousePos[1] * gl.canvas.height) / gl.canvas.clientHeight -
+      (this.mousePos[1] * leftTopWidthHeight[3]) / leftTopWidthHeight[3] -
       1;
     const rgbaPixel = new Uint8Array(4);
     gl.readPixels(
@@ -4860,11 +5955,12 @@ Niivue.prototype.draw3D = function () {
     gl.drawElements(object3D.mode, object3D.indexCount, gl.UNSIGNED_SHORT, 0);
     gl.bindVertexArray(this.unusedVAO);
   }
-  this.drawCrosshairs3D(true, 1.0);
-  this.drawMesh3D(true, 1.0);
-  this.drawMesh3D(false, 0.02);
+  if (!isMosaic) this.drawCrosshairs3D(true, 1.0, mvpMatrix);
+  this.drawMesh3D(true, 1.0, mvpMatrix, modelMatrix, normalMatrix);
+  this.drawMesh3D(false, 0.02, mvpMatrix, modelMatrix, normalMatrix);
   //  this.drawMesh3D(true, 1.0);
-  this.drawCrosshairs3D(false, 0.15);
+  if (!isMosaic) this.drawCrosshairs3D(false, 0.15, mvpMatrix);
+  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
   let posString =
     "azimuth: " +
     this.scene.renderAzimuth.toFixed(0) +
@@ -4877,12 +5973,22 @@ Niivue.prototype.draw3D = function () {
   return posString;
 }; // draw3D()
 
-Niivue.prototype.drawMesh3D = function (isDepthTest = true, alpha = 1.0) {
+Niivue.prototype.drawMesh3D = function (
+  isDepthTest = true,
+  alpha = 1.0,
+  m,
+  modelMtx,
+  normMtx
+) {
   if (this.meshes.length < 1) return;
   let gl = this.gl;
-  let m, modelMtx, normMtx;
-  [m, modelMtx, normMtx] = this.calculateMvpMatrix(this.volumeObject3D);
-
+  //let m, modelMtx, normMtx;
+  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);
 
@@ -4948,7 +6054,11 @@ Niivue.prototype.drawMesh3D = function (isDepthTest = true, alpha = 1.0) {
   this.readyForSync = true;
 }; //drawMesh3D()
 
-Niivue.prototype.drawCrosshairs3D = function (isDepthTest = true, alpha = 1.0) {
+Niivue.prototype.drawCrosshairs3D = function (
+  isDepthTest = true,
+  alpha = 1.0,
+  mvpMtx = null
+) {
   if (!this.opts.show3Dcrosshair) return;
   let gl = this.gl;
   let mm = this.frac2mm(this.scene.crosshairPos);
@@ -4964,10 +6074,12 @@ Niivue.prototype.drawCrosshairs3D = function (isDepthTest = true, alpha = 1.0) {
       gl.deleteBuffer(this.crosshairs3D.indexBuffer); //TODO: handle in nvimage.js: create once, update with bufferSubData
       gl.deleteBuffer(this.crosshairs3D.vertexBuffer); //TODO: handle in nvimage.js: create once, update with bufferSubData
     }
-    let radius = Math.min(
-      Math.min(this.back.pixDims[1], this.back.pixDims[2]),
-      this.back.pixDims[3]
-    );
+    let radius =
+      0.5 *
+      Math.min(
+        Math.min(this.back.pixDims[1], this.back.pixDims[2]),
+        this.back.pixDims[3]
+      );
     this.crosshairs3D = NiivueObject3D.generateCrosshairs(
       this.gl,
       1,
@@ -4983,13 +6095,17 @@ Niivue.prototype.drawCrosshairs3D = function (isDepthTest = true, alpha = 1.0) {
   }
   let crosshairsShader = this.surfaceShader;
   crosshairsShader.use(this.gl);
-  let m, modelMtx, normMtx;
+  let modelMtx, normMtx;
   // eslint-disable-next-line no-unused-vars
-  [m, modelMtx, normMtx] = this.calculateMvpMatrix(this.crosshairs3D);
-  gl.uniformMatrix4fv(crosshairsShader.uniforms["mvpMtx"], false, m);
+  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];
   if (isDepthTest) {
@@ -5001,6 +6117,7 @@ Niivue.prototype.drawCrosshairs3D = function (isDepthTest = true, alpha = 1.0) {
     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
     gl.depthFunc(gl.ALWAYS);
   }
+
   color[3] = alpha;
   gl.uniform4fv(crosshairsShader.uniforms["surfaceColor"], color);
   gl.bindVertexArray(this.crosshairs3D.vao);
@@ -5068,94 +6185,92 @@ Niivue.prototype.moveCrosshairInVox = function (x, y, z) {
   this.drawScene();
 };
 
-// not included in public docs
 Niivue.prototype.frac2mm = function (frac, volIdx = 0) {
-  //convert from normalized texture space XYZ= [0..1, 0..1 ,0..1] to object space in millimeters
   let pos = mat.vec4.fromValues(frac[0], frac[1], frac[2], 1);
-  //let d = overlayItem.hdr.dims;
-  let dim = mat.vec4.fromValues(
-    this.volumes[volIdx].dimsRAS[1],
-    this.volumes[volIdx].dimsRAS[2],
-    this.volumes[volIdx].dimsRAS[3],
-    1
-  );
-  let sform = mat.mat4.clone(this.volumes[volIdx].matRAS);
-  mat.mat4.transpose(sform, sform);
-  mat.vec4.mul(pos, pos, dim);
-  let shim = mat.vec4.fromValues(-0.5, -0.5, -0.5, 0); //bitmap with 5 voxels scaled 0..1, voxel centers are 0.1,0.3,0.5,0.7,0.9
-  mat.vec4.add(pos, pos, shim);
-  mat.vec4.transformMat4(pos, pos, sform);
+  mat.vec4.transformMat4(pos, pos, this.volumes[volIdx].frac2mm);
   return pos;
-}; // frac2mm()
-
-// not included in public docs
-Niivue.prototype.canvasPos2frac = function (canvasPos) {
-  let x, y, z;
-
-  // convert canvas pos to normalized texture space
-  for (let i = 0; i < this.numScreenSlices; i++) {
-    var axCorSag = this.screenSlices[i].axCorSag;
-    if (axCorSag > this.sliceTypeSagittal) continue;
+};
 
-    var ltwh = this.screenSlices[i].leftTopWidthHeight;
-    let isMirror = false;
-    if (ltwh[2] < 0) {
-      isMirror = true;
-      ltwh[0] += ltwh[2];
-      ltwh[2] = -ltwh[2];
+Niivue.prototype.screenXY2TextureFrac = function (x, y, i) {
+  let texFrac = [-1, -1, -1]; //texture 0..1 so -1 is out of bounds
+  var axCorSag = this.screenSlices[i].axCorSag;
+  if (axCorSag > this.sliceTypeSagittal) return texFrac;
+  var ltwh = this.screenSlices[i].leftTopWidthHeight.slice();
+  let isMirror = false;
+  if (ltwh[2] < 0) {
+    isMirror = true;
+    ltwh[0] += ltwh[2];
+    ltwh[2] = -ltwh[2];
+  }
+  var fracX = (x - ltwh[0]) / ltwh[2];
+  if (isMirror) fracX = 1.0 - fracX;
+  var fracY = 1.0 - (y - ltwh[1]) / ltwh[3];
+  if (fracX < 0.0 || fracX > 1.0 || fracY < 0.0 || fracY > 1.0) return texFrac;
+  if (this.screenSlices[i].AxyzMxy.length > 4) {
+    let xyzMM = [0, 0, 0];
+    xyzMM[0] =
+      this.screenSlices[i].leftTopMM[0] + fracX * this.screenSlices[i].fovMM[0];
+    xyzMM[1] =
+      this.screenSlices[i].leftTopMM[1] + fracY * this.screenSlices[i].fovMM[1];
+    // let xyz = mat.vec3.fromValues(30, 30, 0);
+    let v = this.screenSlices[i].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]); //screen RSA to NIfTI RAS
+    if (axCorSag === this.sliceTypeSagittal)
+      xyzMM = swizzleVec3(xyzMM, [2, 0, 1]); //screen ASR to NIfTI RAS
+    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;
     }
-
-    var fracX = (canvasPos[0] - ltwh[0]) / ltwh[2];
-    if (isMirror) {
-      fracX = 1.0 - fracX;
+    if (axCorSag === this.sliceTypeCoronal) {
+      texFrac[0] = fracX;
+      texFrac[2] = fracY;
     }
-
-    var fracY = 1.0 - (canvasPos[1] - ltwh[1]) / ltwh[3];
-    if (fracX >= 0.0 && fracX < 1.0 && fracY >= 0.0 && fracY < 1.0) {
-      // this is the slice the user right clicked in
-      switch (axCorSag) {
-        case this.sliceTypeAxial:
-          break;
-        case this.sliceTypeCoronal:
-          break;
-        default:
-      }
-
-      if (axCorSag === this.sliceTypeAxial) {
-        x = fracX;
-        y = fracY;
-        z = this.scene.crosshairPos[2];
-      }
-      if (axCorSag === this.sliceTypeCoronal) {
-        x = fracX;
-        y = this.scene.crosshairPos[1];
-        z = fracY;
-      }
-      if (axCorSag === this.sliceTypeSagittal) {
-        x = this.scene.crosshairPos[0];
-        y = fracX;
-        z = fracY;
-      }
-
-      break;
+    if (axCorSag === this.sliceTypeSagittal) {
+      texFrac[1] = fracX;
+      texFrac[2] = fracY;
     }
   }
+  return texFrac;
+}; // screenXY2TextureFrac()
 
-  return [x, y, z];
-}; // canvas2frac
+// not included in public docs
+Niivue.prototype.canvasPos2frac = function (canvasPos) {
+  for (let i = 0; i < this.screenSlices.length; i++) {
+    let texFrac = this.screenXY2TextureFrac(canvasPos[0], canvasPos[1], i);
+    if (texFrac[0] >= 0) return texFrac;
+  }
+  return [-1, -1, -1]; //texture 0..1 so -1 is out of bounds
+};
 
 // not included in public docs
 // note: we also have a "sliceScale" method, which could be confusing
 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;
+  if (h * scalePix > this.effectiveCanvasHeight())
+    scalePix = this.effectiveCanvasHeight() / h;
   //canvas space is 0,0...w,h with origin at upper left
   let wPix = w * scalePix;
   let hPix = h * scalePix;
   let leftTopWidthHeight = [
     (this.gl.canvas.clientWidth - wPix) * 0.5,
-    (this.gl.canvas.clientHeight - hPix) * 0.5,
+    (this.effectiveCanvasHeight() - hPix) * 0.5,
     wPix,
     hPix,
   ];
@@ -5183,11 +6298,365 @@ Niivue.prototype.drawThumbnail = function () {
   this.gl.bindVertexArray(this.unusedVAO); //switch off to avoid tampering with settings
 };
 
+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,
+  ]);
+  //vertical line of crosshair:
+  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); //switch off to avoid tampering with settings
+};
+
+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,
+  ]);
+  //draw Line
+  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); //set vertex attributes
+};
+
+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 i = 0; i < linesH.length; i++) {
+      let mmV = this.frac2mm([0.5, 0.5, 0.5]);
+      mmV[dimV] = linesH[i];
+      let fracY = this.mm2frac(mmV);
+      fracY = fracY[dimV];
+      let left = this.frac2mm([0.0, fracY, fracZ]);
+      left = swizzleVec3(left, [0, 1, 2]);
+      let right = this.frac2mm([1.0, 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;
+    let mm = this.frac2mm([0.5, fracH, 0.5]);
+    let dimV = 2;
+    for (let i = 0; i < linesH.length; i++) {
+      let mmV = this.frac2mm([0.5, 0.5, 0.5]);
+      mmV[dimV] = linesH[i];
+      let fracV = this.mm2frac(mmV);
+      fracV = fracV[dimV];
+      let left = this.frac2mm([0.0, fracH, fracV]);
+      left = swizzleVec3(left, [0, 2, 1]);
+      let right = this.frac2mm([1.0, 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 i = 0; i < linesH.length; i++) {
+      let mmV = this.frac2mm([0.5, 0.5, 0.5]);
+      mmV[dimV] = linesH[i];
+      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 i = 0; i < linesV.length; i++) {
+      let mm = this.frac2mm([0.5, 0.5, 0.5]);
+      mm[dimH] = linesV[i];
+      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 vertical lines
+  if (linesV.length > 0 && axCorSag === 1) {
+    let fracY = tile.sliceFrac;
+    let dimH = 0;
+    for (let i = 0; i < linesV.length; i++) {
+      let mm = this.frac2mm([0.5, 0.5, 0.5]);
+      mm[dimH] = linesV[i];
+      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 vertical lines
+  if (linesV.length > 0 && axCorSag === 2) {
+    let fracX = tile.sliceFrac;
+    let dimH = 1;
+    for (let i = 0; i < linesV.length; i++) {
+      let mm = this.frac2mm([0.5, 0.5, 0.5]);
+      mm[dimH] = linesV[i];
+      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);
+    }
+  } //if vertical lines
+};
+
+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();
+  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();
+  }
+  if (linesH.length > 0) {
+    //draw horizontal lines
+    let LTWH = tile.leftTopWidthHeight.slice();
+    let sliceDim = 2; //
+    let mm = this.frac2mm([0.5, 0.5, 0.5]);
+    for (let i = 0; i < linesH.length; i++) {
+      mm[sliceDim] = linesH[i];
+      let frac = this.mm2frac(mm);
+      this.drawLine([
+        LTWH[0],
+        LTWH[1] + LTWH[3] - frac[sliceDim] * LTWH[3],
+        LTWH[2],
+        1,
+      ]);
+    }
+  } //if horizontal lines
+  if (linesV.length > 0) {
+    //draw vertical lines
+    let LTWH = tile.leftTopWidthHeight.slice();
+    let isRadiolgical = tile.fovMM[0] < 0;
+    let sliceDim = 0; //vertical lines on axial/coronal are L/R axis
+    if (axCorSag === this.sliceTypeSagittal) sliceDim = 1; //vertical lines on sagittal are A/P
+    let mm = this.frac2mm([0.5, 0.5, 0.5]);
+    for (let i = 0; i < linesV.length; i++) {
+      mm[sliceDim] = linesV[i];
+      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],
+        ]);
+    }
+  } //if vertical lines
+};
+
+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 = [];
+  //render always in world space
+  let fovRenderMM = this.screenFieldOfViewMM(this.sliceTypeAxial, true);
+  //2d slices might be in world space or voxel space
+  let fovSliceMM = this.screenFieldOfViewMM(this.sliceTypeAxial);
+  //fovRender and fovSlice will only be different if scans are oblique and shown in voxel space
+  //let mosaicStr = 'A -52 -12 C 8 ; S 28 48 66'
+  let mxRow = 1;
+  mosaicStr = mosaicStr.replaceAll(";", " ;").trim();
+  let axiMM = [];
+  let corMM = [];
+  let sagMM = [];
+  let items = mosaicStr.split(/\s+/);
+  let scale = 1.0; //e.g. if 1.0 1mm per pixel
+  let labelSize = this.opts.textHeight;
+  let isCrossLinesUsed = false;
+  for (let pass = 0; pass < 2; pass++) {
+    //two pass: first calculate dimensions to determine scale, second draw items
+    let isRender = false;
+    let isCrossLines = false;
+    isRender = false;
+    let row = 0;
+    let rowHt = 0;
+    let left = 0;
+    let top = 0;
+    let mxRowWid = 0;
+    let isLabel = false;
+    let axCorSag = this.sliceTypeAxial;
+    for (let i = 0; i < items.length; i++) {
+      let item = items[i];
+      if (item.includes("X")) {
+        isCrossLines = true;
+        continue;
+      }
+      if (item.includes("L")) {
+        isLabel = !item.includes("-");
+        continue;
+      }
+      if (item.includes("V") || item.includes("H")) {
+        i++; //skip numeric value for vertical/horizontal overlap
+        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(";")) {
+        //EOLN
+        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;
+      //draw the slice
+      if (axCorSag === this.sliceTypeSagittal) w = fov[1];
+      else w = fov[0];
+      if (axCorSag === this.sliceTypeAxial) h = fov[1];
+      else h = fov[2];
+      //console.log("w" + w + " h" + h + "::", fov);
+      let leftTopWidthHeight = [left, top, w, h];
+      if (pass === 0) {
+        //1st pass: record slice locations in world space
+        if (!isRender) {
+          if (axCorSag === this.sliceTypeAxial) axiMM.push(sliceMM);
+          if (axCorSag === this.sliceTypeCoronal) corMM.push(sliceMM);
+          if (axCorSag === this.sliceTypeSagittal) sagMM.push(sliceMM);
+        }
+      } else {
+        //2nd pass draw
+        let ltwh = [scale * left, scale * top, scale * w, scale * h];
+        this.opts.textHeight = isLabel ? labelSize : 0;
+        if (isRender) {
+          let inf = sliceMM < 0 ? -Infinity : Infinity;
+          if (Object.is(sliceMM, -0)) inf = -Infinity; //catch negative zero
+          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
+          );
+          isCrossLinesUsed = true;
+        }
+        isRender = false;
+        isCrossLines = false;
+      }
+      left += w;
+      rowHt = Math.max(rowHt, h);
+    } //for each item in string
+    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;
+    scale = Math.min(scaleW, scaleH);
+  } //for pass 0 and 1
+  this.opts.textHeight = labelSize;
+}; // drawMosaic()
+
 // not included in public docs
 Niivue.prototype.drawScene = function () {
   if (!this.initialized) {
     return; // do not do anything until we are initialized (init will call drawScene).
   }
+  this.colorbarHeight = 0;
   this.gl.clearColor(
     this.opts.backColor[0],
     this.opts.backColor[1],
@@ -5206,6 +6675,7 @@ Niivue.prototype.drawScene = function () {
     typeof this.volumes[0].dims === "undefined"
   ) {
     if (this.meshes.length > 0) {
+      this.screenSlices = []; // empty array
       this.sliceType = this.sliceTypeRender; //only meshes loaded: we must use 3D render mode
       return this.draw3D(); //meshes loaded but no volume
     }
@@ -5213,95 +6683,122 @@ Niivue.prototype.drawScene = function () {
     return;
   }
   if (!this.back.hasOwnProperty("dims")) return;
-  if (this.sliceType === this.sliceTypeRender) {
-    //draw rendering
-    if (this.isDragging && this.scene.clipPlaneDepthAziElev[0] < 1.8) {
-      //if (this.scene.clipPlaneDepthAziElev[0] > 1.8) return;
-      let x = this.dragStart[0] - this.dragEnd[0];
-      let y = this.dragStart[1] - this.dragEnd[1];
-      let depthAziElev = this.dragClipPlaneStartDepthAziElev.slice();
-      depthAziElev[1] -= x;
-      depthAziElev[1] = depthAziElev[1] % 360;
-      depthAziElev[2] += y;
-      //gimbal lock: these next two lines could be changed - when we go over the pole, the Azimuth reverses
-      //if (depthAziElev[2] > 90) depthAziElev[2] = 90;
-      //if (depthAziElev[2] < -90) depthAziElev[2] = -90;
-      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.isDragging &&
+    this.scene.clipPlaneDepthAziElev[0] < 1.8 &&
+    this.inRenderTile(this.dragStart[0], this.dragStart[1]) >= 0
+  ) {
+    //user dragging over a 3D rendering
+    let x = this.dragStart[0] - this.dragEnd[0];
+    let y = this.dragStart[1] - this.dragEnd[1];
+    let depthAziElev = this.dragClipPlaneStartDepthAziElev.slice();
+    depthAziElev[1] -= x;
+    depthAziElev[1] = depthAziElev[1] % 360;
+    depthAziElev[2] += y;
+    //gimbal lock: these next two lines could be changed - when we go over the pole, the Azimuth reverses
+    //if (depthAziElev[2] > 90) depthAziElev[2] = 90;
+    //if (depthAziElev[2] < -90) depthAziElev[2] = -90;
+    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();
+  } //dragging over rendering
+  if (
+    this.sliceMosaicString.length < 1 &&
+    this.sliceType === this.sliceTypeRender
+  ) {
+    this.screenSlices = []; // empty array
+    this.draw3D();
+    if (this.opts.isColorbar) this.drawColorbar();
+    return;
   }
-  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) {
-    //draw axial
-    let leftTopWidthHeight = this.scaleSlice(volScale[0], volScale[1]);
-    this.draw2D(leftTopWidthHeight, 0);
-  } else if (this.sliceType === this.sliceTypeCoronal) {
-    //draw coronal
-    let leftTopWidthHeight = this.scaleSlice(volScale[0], volScale[2]);
-    this.draw2D(leftTopWidthHeight, 1);
-  } else if (this.sliceType === this.sliceTypeSagittal) {
-    //draw sagittal
-    let leftTopWidthHeight = this.scaleSlice(volScale[1], volScale[2]);
-    this.draw2D(leftTopWidthHeight, 2);
+  if (this.opts.isColorbar) this.reserveColorbarPanel();
+  if (this.sliceMosaicString.length > 0) {
+    this.drawMosaic(this.sliceMosaicString);
   } else {
-    //sliceTypeMultiplanar
-    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) {
-      //landscape screen ratio: 3 slices in single row
-      let pixScale = wX1 / volScale[0];
-      let hY1 = volScale[1] * pixScale;
-      let hZ1 = volScale[2] * pixScale;
-      //draw axial
-      this.draw2D([ltwh3x1[0], ltwh3x1[1], wX1, hY1], 0);
-      //draw coronal
-      this.draw2D([ltwh3x1[0] + wX1, ltwh3x1[1], wX1, hZ1], 1);
-      //draw sagittal
-      this.draw2D([ltwh3x1[0] + wX1 + wX1, ltwh3x1[1], hY1, hZ1], 2);
+    // issue56 is use mm else use voxel
+    this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+    this.screenSlices = []; // empty array
+    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;
-      //draw axial
-      this.draw2D([ltwh[0], ltwh[1] + hZ, wX, hY], 0);
-      //draw coronal
-      this.draw2D([ltwh[0], ltwh[1], wX, hZ], 1);
-      //draw sagittal
-      this.draw2D([ltwh[0] + wX, ltwh[1], wY, hZ], 2);
-      //draw colorbar (optional) // TODO currently only drawing one colorbar, there may be one per overlay + one for the background
-      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,
-        ]);
-      }
-      // drawTextBelow(gl, [ltwh[0]+ wX + (wY * 0.5), ltwh[1] + hZ + margin + hY * colorbarHeight], "Syzygy"); //DEMO
+      //sliceTypeMultiplanar
+      let { volScale, vox, longestAxis } = this.sliceScale();
+      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 mx = Math.max(Math.max(volScale[1], volScale[2]), volScale[0]);
+      let ltwh4x1 = this.scaleSlice(
+        volScale[0] + volScale[0] + volScale[1] + mx,
+        mx
+      );
+      let wX1 =
+        (ltwh3x1[2] * volScale[0]) / (volScale[0] + volScale[0] + volScale[1]);
+      if (wX1 > wX && !this.graph.autoSizeMultiplanar) {
+        //landscape screen ratio: 3 slices in single row
+        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,
+            ltwh3x1[1],
+            ltwh4x1[3],
+            ltwh4x1[3],
+          ]);
+        }
+        //draw axial
+        this.draw2D([ltwh3x1[0], ltwh3x1[1], wX1, hY1], 0);
+        //draw coronal
+        this.draw2D([ltwh3x1[0] + wX1, ltwh3x1[1], wX1, hZ1], 1);
+        //draw sagittal
+        this.draw2D([ltwh3x1[0] + wX1 + wX1, 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;
+        //draw axial
+        this.draw2D([ltwh[0], ltwh[1] + hZ, wX, hY], 0);
+        //draw coronal
+        this.draw2D([ltwh[0], ltwh[1], wX, hZ], 1);
+        //draw sagittal
+        this.draw2D([ltwh[0] + wX, ltwh[1], wY, hZ], 2);
+        if (!this.graph.autoSizeMultiplanar)
+          this.draw3D([ltwh[0] + wX, ltwh[1] + hZ, wY, hY]);
+      } //if landscape else portrait
+    } //if multiplanar
+  } //if mosaic not 2D
+  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.isDragging && this.sliceType !== this.sliceTypeRender) {
+    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([
       Math.min(this.dragStart[0], this.dragEnd[0]),
       Math.min(this.dragStart[1], this.dragEnd[1]),
@@ -5309,18 +6806,15 @@ Niivue.prototype.drawScene = function () {
       height,
     ]);
   }
-
   const pos = this.frac2mm([
     this.scene.crosshairPos[0],
     this.scene.crosshairPos[1],
     this.scene.crosshairPos[2],
   ]);
   this.drawGraph();
-
   posString =
     pos[0].toFixed(2) + "×" + pos[1].toFixed(2) + "×" + pos[2].toFixed(2);
   this.gl.finish();
-
   this.readyForSync = true; // by the time we get here, all volumes should be loaded and ready to be drawn. We let other niivue instances know that we can now reliably sync draw calls (images are loaded)
   return posString;
 }; // drawScene()