@vitessce/all 4.0.0-test.1 → 4.0.0-test.2

package/dist/index-CoIDzRuL.js

@@ -0,0 +1,3855 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useEffect, Suspense } from "react";
+import { useThree, useFrame, Canvas } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import * as THREE from "three";
+import { Data3DTexture, RedFormat, UnsignedByteType, LinearFilter, RedIntegerFormat, UnsignedIntType, NearestFilter, Vector3, Vector2, Vector4, UniformsUtils, WebGLMultipleRenderTargets } from "three";
+import { l as log, i as isEqual, C as CoordinationType, u as useEventCallback } from "./index-BYPSbKAg.js";
+const LogLevel = {
+  INFO: "info",
+  WARN: "warn",
+  ERROR: "error",
+  DEBUG: "debug",
+  TRACE: "trace"
+  // default value
+};
+const OrderedLogLevels = [
+  LogLevel.TRACE,
+  LogLevel.DEBUG,
+  LogLevel.INFO,
+  LogLevel.WARN,
+  LogLevel.ERROR
+];
+function getLogLevel() {
+  return log.getLevel();
+}
+function atLeastLogLevel(someLevel) {
+  const currLevel = getLogLevel();
+  const numericTarget = OrderedLogLevels.indexOf(someLevel);
+  return currLevel <= numericTarget;
+}
+const BRICK_SIZE = 32;
+const BRICK_CACHE_SIZE_X = 64;
+const BRICK_CACHE_SIZE_Y = 64;
+const BRICK_CACHE_SIZE_Z = 4;
+const TOTAL_NUM_BRICKS = BRICK_CACHE_SIZE_X * BRICK_CACHE_SIZE_Y * BRICK_CACHE_SIZE_Z;
+const BRICK_CACHE_SIZE_VOXELS_X = BRICK_CACHE_SIZE_X * BRICK_SIZE;
+const BRICK_CACHE_SIZE_VOXELS_Y = BRICK_CACHE_SIZE_Y * BRICK_SIZE;
+const BRICK_CACHE_SIZE_VOXELS_Z = BRICK_CACHE_SIZE_Z * BRICK_SIZE;
+const INIT_STATUS = {
+  NOT_STARTED: "not_started",
+  IN_PROGRESS: "in_progress",
+  COMPLETE: "complete",
+  FAILED: "failed"
+};
+function logWithColor$2(message) {
+  if (atLeastLogLevel(LogLevel.DEBUG)) {
+    console.warn(`%cDM: ${message}`, "background: blue; color: white; padding: 2px; border-radius: 3px;");
+  }
+}
+function _resolutionStatsToShapes(multiResolutionStats) {
+  return multiResolutionStats.map((stats) => {
+    const { dims } = stats;
+    const shape = [
+      // Other spatial-accelerated code assumes TCZYX dimension order
+      dims.t,
+      // TODO: standardize lowercase/uppercase dim names at store-level
+      dims.c,
+      // TODO: handle case when dimension(s) are missing
+      dims.z,
+      dims.y,
+      dims.x
+    ];
+    return shape;
+  });
+}
+function _resolutionStatsToBrickLayout(multiResolutionStats) {
+  return multiResolutionStats.map((stats) => {
+    const shape = [
+      stats.depth,
+      // z
+      stats.height,
+      // y
+      stats.width
+      // x
+    ];
+    return [
+      Math.ceil((shape[0] || 1) / BRICK_SIZE),
+      Math.ceil((shape[1] || 1) / BRICK_SIZE),
+      Math.ceil((shape[2] || 1) / BRICK_SIZE)
+    ];
+  });
+}
+function _initMRMCPT(zarrStoreBrickLayout, channelsZarrMappingsLength) {
+  log.debug("_initMRMCPT", zarrStoreBrickLayout, channelsZarrMappingsLength);
+  const PT = {
+    channelOffsets: [
+      [0, 0, 1],
+      [0, 1, 0],
+      [0, 1, 1],
+      [1, 0, 0],
+      [1, 0, 1],
+      [1, 1, 0],
+      [1, 1, 1]
+    ],
+    anchors: [],
+    offsets: [],
+    xExtent: 0,
+    // includes the offset inclusive
+    yExtent: 0,
+    // includes the offset inclusive
+    zExtent: 0,
+    // includes the offset inclusive
+    z0Extent: 0,
+    // l0 z extent
+    zTotal: 0
+    // original z extent plus the l0 z extent times the channel count
+  };
+  PT.xExtent = 1;
+  PT.yExtent = 1;
+  PT.zExtent = 1;
+  const l0z = zarrStoreBrickLayout[0][0];
+  PT.z0Extent = l0z;
+  PT.lowestDataRes = zarrStoreBrickLayout.length - 1;
+  for (let i = zarrStoreBrickLayout.length - 1; i > 0; i--) {
+    PT.anchors.push([
+      PT.xExtent,
+      PT.yExtent,
+      PT.zExtent
+    ]);
+    PT.xExtent += zarrStoreBrickLayout[i][2];
+    PT.yExtent += zarrStoreBrickLayout[i][1];
+    PT.zExtent += zarrStoreBrickLayout[i][0];
+  }
+  PT.anchors.push([0, 0, PT.zExtent]);
+  PT.anchors.reverse();
+  PT.zTotal = PT.zExtent + channelsZarrMappingsLength * l0z;
+  const brickCacheData = new Uint8Array(BRICK_CACHE_SIZE_VOXELS_X * BRICK_CACHE_SIZE_VOXELS_Y * BRICK_CACHE_SIZE_VOXELS_Z);
+  brickCacheData.fill(0);
+  const pageTableData = new Uint32Array(PT.xExtent * PT.yExtent * PT.zTotal);
+  pageTableData.fill(0);
+  const bcTHREE = new Data3DTexture(brickCacheData, BRICK_CACHE_SIZE_VOXELS_X, BRICK_CACHE_SIZE_VOXELS_Y, BRICK_CACHE_SIZE_VOXELS_Z);
+  bcTHREE.format = RedFormat;
+  bcTHREE.type = UnsignedByteType;
+  bcTHREE.internalFormat = "R8";
+  bcTHREE.minFilter = LinearFilter;
+  bcTHREE.magFilter = LinearFilter;
+  bcTHREE.generateMipmaps = false;
+  bcTHREE.needsUpdate = true;
+  const ptTHREE = new Data3DTexture(pageTableData, PT.xExtent, PT.yExtent, PT.zTotal);
+  ptTHREE.format = RedIntegerFormat;
+  ptTHREE.type = UnsignedIntType;
+  ptTHREE.internalFormat = "R32UI";
+  ptTHREE.minFilter = NearestFilter;
+  ptTHREE.magFilter = NearestFilter;
+  ptTHREE.generateMipmaps = false;
+  ptTHREE.needsUpdate = true;
+  log.debug("_initMRMCPT", PT, ptTHREE, bcTHREE);
+  return {
+    PT,
+    ptTHREE,
+    bcTHREE
+  };
+}
+function _packPT(min, max, bcX, bcY, bcZ) {
+  const clamp7 = (v) => Math.max(0, Math.min(127, Math.floor(v / 2)));
+  return (1 << 31 | 1 << 30 | clamp7(min) << 23 | clamp7(max) << 16 | (bcX & 63) << 10 | (bcY & 63) << 4 | bcZ & 15) >>> 0;
+}
+function _ptToZarr(ptx, pty, ptz, ptInfo) {
+  const { PT_zExtent, PT_z0Extent, PT_anchors } = ptInfo;
+  let channel = -1;
+  let resolution = -1;
+  let x = -1;
+  let y = -1;
+  let z = -1;
+  if (ptz >= PT_zExtent) {
+    resolution = 0;
+    x = ptx;
+    y = pty;
+    z = (ptz - PT_zExtent) % PT_z0Extent;
+    channel = Math.floor((ptz - PT_zExtent) / PT_z0Extent);
+  } else {
+    for (let i = 1; i < PT_anchors.length; i++) {
+      if (ptx < PT_anchors[i][0] && pty < PT_anchors[i][1] && ptz < PT_anchors[i][2]) ;
+      else {
+        resolution = i;
+        const channelMask = [0, 0, 0];
+        if (ptx >= PT_anchors[i][0]) {
+          channelMask[0] = 1;
+        }
+        if (pty >= PT_anchors[i][1]) {
+          channelMask[1] = 1;
+        }
+        if (ptz >= PT_anchors[i][2]) {
+          channelMask[2] = 1;
+        }
+        const binaryChannel = channelMask[0] << 2 | channelMask[1] << 1 | channelMask[2];
+        channel = Math.max(1, Math.min(7, binaryChannel)) - 1;
+        const thisOffset = channelMask.map((v, j) => v * PT_anchors[i][j]);
+        x = ptx - thisOffset[0];
+        y = pty - thisOffset[1];
+        z = ptz - thisOffset[2];
+        break;
+      }
+    }
+  }
+  return {
+    channel,
+    resolution,
+    x,
+    y,
+    z
+  };
+}
+const DEFAULT_SIGMA_NORMALIZED = 0.25;
+function _requestBufferToRequestObjects(buffer, k, optsForWeighting) {
+  const counts = /* @__PURE__ */ new Map();
+  const { width, height, sigmaNormalized } = optsForWeighting;
+  const useWeighting = Number.isInteger(width) && Number.isInteger(height) && width > 0 && height > 0 && typeof sigmaNormalized === "number";
+  if (!useWeighting) {
+    log.warn("_requestBufferToRequestObjects: proceeding without weighting");
+  }
+  const maxPixels = Math.floor(buffer.length / 4);
+  for (let pix = 0; pix < maxPixels; pix += 1) {
+    const i = pix * 4;
+    const r = buffer[i];
+    const g = buffer[i + 1];
+    const b = buffer[i + 2];
+    const a = buffer[i + 3];
+    if ((r | g | b | a) === 0) {
+      continue;
+    }
+    const packed = (r << 24 | g << 16 | b << 8 | a) >>> 0;
+    let weight = 1;
+    if (useWeighting) {
+      const x = pix % width;
+      const y = Math.floor(pix / width);
+      const dx = x - width / 2;
+      const dy = y - height / 2;
+      const nd = Math.sqrt(dx * dx / (width * width) + dy * dy / (height * height));
+      const norm = nd / sigmaNormalized;
+      weight = Math.exp(-0.5 * norm * norm);
+    }
+    counts.set(packed, (counts.get(packed) || 0) + weight);
+  }
+  const sorted = Array.from(counts.entries()).toSorted((a, b) => b[1] - a[1]);
+  const requests = sorted.slice(0, k).map(([packed]) => ({
+    x: packed >> 22 & 1023,
+    y: packed >> 12 & 1023,
+    z: packed & 4095
+  }));
+  return { requests, origRequestCount: counts.size };
+}
+class VolumeDataManager {
+  constructor(glParam) {
+    logWithColor$2("CLASS INITIALIZING");
+    log.debug("VolumeDataManager constructor", { glParam, glParamContext: glParam.getContext?.() });
+    const gl = glParam.getContext?.() || glParam;
+    const renderer = glParam;
+    if (gl.domElement && gl.getContext) {
+      this.gl = gl.getContext();
+    } else if (gl.isWebGLRenderer) {
+      this.gl = gl.getContext();
+    } else {
+      this.gl = gl;
+    }
+    this.renderer = renderer;
+    if (!this.gl || typeof this.gl.getParameter !== "function") {
+      log.debug("Unable to get WebGL context, using mock context");
+      this.gl = {
+        getParameter: (param) => {
+          const defaults = {
+            MAX_TEXTURE_SIZE: 4096,
+            MAX_3D_TEXTURE_SIZE: 256,
+            MAX_RENDERBUFFER_SIZE: 4096,
+            MAX_UNIFORM_BUFFER_BINDINGS: 16
+          };
+          return defaults[param] || 0;
+        },
+        isContextLost: () => false,
+        MAX_TEXTURE_SIZE: "MAX_TEXTURE_SIZE",
+        MAX_3D_TEXTURE_SIZE: "MAX_3D_TEXTURE_SIZE",
+        MAX_RENDERBUFFER_SIZE: "MAX_RENDERBUFFER_SIZE",
+        MAX_UNIFORM_BUFFER_BINDINGS: "MAX_UNIFORM_BUFFER_BINDINGS"
+      };
+    }
+    this._originalGlParam = glParam;
+    this._isContextLost = false;
+    this._contextRestoredCallbacks = [];
+    if (this.gl && this.gl.canvas) {
+      this.gl.canvas.addEventListener("webglcontextlost", this._handleContextLost.bind(this));
+      this.gl.canvas.addEventListener("webglcontextrestored", this._handleContextRestored.bind(this));
+    }
+    log.debug("GL CONSTANTS");
+    log.debug(this.gl);
+    log.debug(this.gl.TEXTURE0);
+    log.debug(this.gl.textures);
+    log.debug("RENDERER");
+    log.debug(this.renderer);
+    this.deviceLimits = {
+      maxTextureSize: this.gl.getParameter(this.gl.MAX_TEXTURE_SIZE),
+      max3DTextureSize: this.gl.getParameter(this.gl.MAX_3D_TEXTURE_SIZE),
+      maxRenderbufferSize: this.gl.getParameter(this.gl.MAX_RENDERBUFFER_SIZE),
+      maxUniformBufferBindings: this.gl.getParameter(this.gl.MAX_UNIFORM_BUFFER_BINDINGS)
+    };
+    this.zarrStore = {
+      resolutions: null,
+      // 6 (the number of resolutions aka. pyramid levels in the file)
+      chunkSize: [],
+      // [32, 32, 32]
+      shapes: [],
+      // [[795, 1024, 1024], ..., [64, 64, 64], [32, 32, 32]]
+      arrays: [],
+      // [array0, array1, array2, array3, array4, array5]
+      dtype: "",
+      // 'uint8'
+      physicalSizeTotal: [],
+      // [795 x 0.0688, 1024 x 0.03417, 1024 x 0.03417]
+      physicalSizeVoxel: [],
+      // [0.0688, 0.03417, 0.03417]
+      brickLayout: [],
+      // [[25, 32, 32],[13, 16, 16], ..., [2,2,2],[1,1,1]]
+      // store: '', // ref to this.store
+      // group: '', // ref to this.group
+      channelCount: 1,
+      // MAX 7 TODO: get from zarr metadata
+      scales: [],
+      // downsample ratios, [x,y,z] per resolution level
+      lowestDataRes: 0
+      // lowest resolution level with data
+    };
+    this.ptTHREE = null;
+    this.bcTHREE = null;
+    this.channels = {
+      maxChannels: 7,
+      // lower when dataset has fewer, dictates page table size
+      zarrMappings: [],
+      // stores the zarr channel index for every one of the up to 7 channels
+      colorMappings: [],
+      // stores the PT slot for every color
+      downsampleMin: [],
+      // stores the downsample min for every one of the up to 7 channels
+      downsampleMax: []
+      // stores the downsample max for every one of the up to 7 channels
+    };
+    this.PT = {
+      channelOffsets: [
+        [0, 0, 1],
+        [0, 1, 0],
+        [0, 1, 1],
+        [1, 0, 0],
+        [1, 0, 1],
+        [1, 1, 0],
+        [1, 1, 1]
+      ],
+      anchors: [],
+      offsets: [],
+      xExtent: 0,
+      // includes the offset inclusive
+      yExtent: 0,
+      // includes the offset inclusive
+      zExtent: 0,
+      // includes the offset inclusive
+      z0Extent: 0,
+      // l0 z extent
+      zTotal: 0
+      // original z extent plus the l0 z extent times the channel count
+    };
+    this.bricksEverLoaded = /* @__PURE__ */ new Set();
+    this.isBusy = false;
+    this.BCTimeStamps = new Array(TOTAL_NUM_BRICKS).fill(0);
+    this.BCMinMax = new Array(TOTAL_NUM_BRICKS).fill([0, 0]);
+    this.BCFull = false;
+    this.BCUnusedIndex = 0;
+    this.bc2pt = new Array(TOTAL_NUM_BRICKS).fill(null);
+    this.LRUStack = [];
+    this.triggerUsage = true;
+    this.triggerRequest = false;
+    this.timeStamp = 0;
+    this.k = 40;
+    this.noNewRequests = false;
+    this.manuallyStopped = false;
+    this.needsBailout = false;
+    this.initStatus = INIT_STATUS.NOT_STARTED;
+    this.initError = null;
+    this._lastChannelConfig = null;
+    this.currentRequestCount = 0;
+    this.totalBricksRequested = 0;
+    logWithColor$2("VolumeDataManager constructor complete");
+  }
+  /**
+   * Get loading progress information
+   * @returns {Object} Loading progress with bricksLoaded, totalBricks, isLoading, and percentage
+   */
+  getLoadingProgress() {
+    const bricksLoaded = this.bricksEverLoaded.size;
+    const isLoading = !this.noNewRequests && this.currentRequestCount > 0;
+    const percentage = this.totalBricksRequested > 0 ? (this.totalBricksRequested - this.currentRequestCount) / this.totalBricksRequested * 100 : 0;
+    return {
+      bricksLoaded,
+      currentRequestCount: this.currentRequestCount,
+      totalBricksRequested: this.totalBricksRequested,
+      isLoading,
+      percentage,
+      noNewRequests: this.noNewRequests
+    };
+  }
+  /**
+   * Manually stop loading and render at highest resolution
+   */
+  stopLoading() {
+    log.debug("Manually stopping data loading");
+    this.noNewRequests = true;
+    this.manuallyStopped = true;
+    this.needsBailout = true;
+    this.currentRequestCount = 0;
+    this.totalBricksRequested = 0;
+  }
+  /**
+   * Manually restart loading
+   */
+  restartLoading() {
+    log.debug("Manually restarting data loading");
+    this.noNewRequests = false;
+    this.manuallyStopped = false;
+    this.needsBailout = false;
+    this.triggerUsage = true;
+    this.currentRequestCount = 0;
+    this.totalBricksRequested = 0;
+  }
+  /**
+   * Handle WebGL context loss
+   */
+  _handleContextLost(event) {
+    logWithColor$2("CONTEXT LOST");
+    log.warn("WebGL context lost, preventing default and setting flag");
+    event.preventDefault();
+    this._isContextLost = true;
+    if (this.channels && this.channels.zarrMappings) {
+      this._lastChannelConfig = {
+        zarrMappings: [...this.channels.zarrMappings],
+        colorMappings: [...this.channels.colorMappings],
+        downsampleMin: [...this.channels.downsampleMin],
+        downsampleMax: [...this.channels.downsampleMax]
+      };
+    }
+  }
+  /**
+   * Handle WebGL context restoration
+   */
+  _handleContextRestored(event) {
+    logWithColor$2("CONTEXT RESTORED");
+    log.warn("WebGL context restored, reinitializing textures");
+    this._isContextLost = false;
+    if (this._originalGlParam && this._originalGlParam.getContext) {
+      this.gl = this._originalGlParam.getContext();
+    }
+    if (this._lastChannelConfig) {
+      this.channels.zarrMappings = [...this._lastChannelConfig.zarrMappings];
+      this.channels.colorMappings = [...this._lastChannelConfig.colorMappings];
+      this.channels.downsampleMin = [...this._lastChannelConfig.downsampleMin];
+      this.channels.downsampleMax = [...this._lastChannelConfig.downsampleMax];
+      log.debug("Restored channel configuration after context loss");
+    }
+    if (this.PT && this.zarrStore && this.zarrStore.brickLayout) {
+      try {
+        this.initMRMCPT();
+        log.debug("Successfully reinitialized MRMCPT after context restoration");
+      } catch (error) {
+        log.error("Failed to reinitialize MRMCPT after context restoration:", error);
+      }
+    }
+    this._contextRestoredCallbacks.forEach((callback) => {
+      try {
+        callback();
+      } catch (error) {
+        log.error("Error in context restored callback:", error);
+      }
+    });
+  }
+  /**
+   * Check if WebGL context is lost
+   */
+  isContextLost() {
+    if (this._isContextLost)
+      return true;
+    if (this.gl && typeof this.gl.isContextLost === "function") {
+      return this.gl.isContextLost();
+    }
+    return false;
+  }
+  /**
+   * Register a callback to be called when context is restored
+   */
+  onContextRestored(callback) {
+    if (typeof callback === "function") {
+      this._contextRestoredCallbacks.push(callback);
+    }
+  }
+  initImages(images, imageLayerScopes) {
+    logWithColor$2("INIT IMAGES");
+    this.images = images;
+    this.imageLayerScopes = imageLayerScopes;
+  }
+  /**
+   * Initialize the VolumeDataManager with Zarr store details and device limits
+   * This should be called ONCE at website initialization
+   * TODO(mark): merge this with the constructor?
+   * @returns {Promise<Object>} Object with Zarr store details and device limits
+   */
+  async init(config) {
+    logWithColor$2("INIT()");
+    if (this.initStatus !== INIT_STATUS.NOT_STARTED) {
+      log.debug("VolumeDataManager init() was called more than once!");
+      if (this.initStatus === INIT_STATUS.COMPLETE) {
+        return {
+          success: true,
+          deviceLimits: this.deviceLimits,
+          zarrStore: this.zarrStore,
+          // physicalScale: this.physicalScale,
+          physicalSizeTotal: this.zarrStore.physicalSizeTotal,
+          physicalSizeVoxel: this.zarrStore.physicalSizeVoxel,
+          error: null
+        };
+      }
+      if (this.initStatus === INIT_STATUS.FAILED) {
+        return {
+          success: false,
+          error: this.initError || "Unknown initialization error"
+        };
+      }
+      return {
+        success: false,
+        pending: true,
+        error: "Initialization in progress"
+      };
+    }
+    this.initStatus = INIT_STATUS.IN_PROGRESS;
+    logWithColor$2("INIT() IN PROGRESS");
+    try {
+      const imageWrapper = this.images?.[this.imageLayerScopes?.[0]]?.image?.instance;
+      this.ngffMetadata = imageWrapper.vivLoader.metadata;
+      log.debug("ngffMetadata", this.ngffMetadata);
+      if (!imageWrapper || imageWrapper.getType() !== "ome-zarr") {
+        throw new Error("Invalid imageWrapper or not an OME-Zarr image");
+      }
+      const multiResolutionStats = imageWrapper.getMultiResolutionStats();
+      const shapes = _resolutionStatsToShapes(multiResolutionStats);
+      const resolutions = multiResolutionStats.length;
+      this.zarrStore.resolutions = resolutions;
+      const vivData = imageWrapper.getData();
+      if (!Array.isArray(vivData) || vivData.length < 1) {
+        throw new Error("Not a multiresolution loader");
+      }
+      if (!isEqual(vivData[0].labels, ["t", "c", "z", "y", "x"])) {
+        throw new Error("Expected OME-Zarr data with dimensions [t, c, z, y, x]");
+      }
+      log.debug("vivData", vivData);
+      const arrays = vivData.map((resolutionData) => resolutionData._data);
+      const scales = new Array(resolutions).fill(null);
+      if (arrays.length > 0) {
+        const array0 = arrays[0];
+        this.zarrStore = {
+          resolutions,
+          chunkSize: array0.chunks,
+          shapes,
+          arrays,
+          dtype: array0.dtype,
+          physicalSizeTotal: [],
+          // Will be populated if metadata exists
+          physicalSizeVoxel: [],
+          // Will be populated if metadata exists
+          brickLayout: [],
+          // Calculate from shapes and chunk sizes
+          // store: this.store,
+          // group: this.group,
+          channelCount: shapes[0][1],
+          scales
+        };
+        this.channels.colorMappings = new Array(Math.min(this.zarrStore.channelCount, 7)).fill(-1);
+        this.channels.zarrMappings = new Array(Math.min(this.zarrStore.channelCount, 7)).fill(void 0);
+        this.channels.downsampleMin = new Array(Math.min(this.zarrStore.channelCount, 7)).fill(void 0);
+        this.channels.downsampleMax = new Array(Math.min(this.zarrStore.channelCount, 7)).fill(void 0);
+        if (array0.meta && array0.meta.physicalSizes) {
+          const { x, y, z } = array0.meta.physicalSizes;
+          const zSize = z?.size || 1;
+          const ySize = y?.size || 1;
+          const xSize = x?.size || 1;
+          this.zarrStore.physicalSizeVoxel = [zSize, ySize, xSize];
+          if (array0.shape && array0.shape.length >= 5) {
+            this.zarrStore.physicalSizeTotal = [
+              (array0.shape[2] || 1) * zSize,
+              (array0.shape[3] || 1) * ySize,
+              (array0.shape[4] || 1) * xSize
+            ];
+          }
+        } else {
+          this.zarrStore.physicalSizeVoxel = [1, 1, 1];
+          this.zarrStore.physicalSizeTotal = [
+            array0.shape[2] || 1,
+            array0.shape[3] || 1,
+            array0.shape[4] || 1
+          ];
+        }
+        const { multiscales } = this.ngffMetadata;
+        if (!multiscales) {
+          throw new Error("Expected multiscales metadata in group.attrs");
+        }
+        if (multiscales?.[0]?.datasets?.[0]?.coordinateTransformations) {
+          for (let i = 0; i < resolutions; i++) {
+            if (multiscales?.[0]?.datasets?.[i]?.coordinateTransformations?.[0]?.scale) {
+              const { scale } = multiscales[0].datasets[i].coordinateTransformations[0];
+              scales[i] = [scale[4], scale[3], scale[2]];
+            }
+          }
+        } else {
+          log.error("no coordinateTransformations available, assuming downsampling ratio of 2 per dimension");
+          for (let i = 0; i < resolutions; i++) {
+            const scale = 2 ** i;
+            scales[i] = [scale, scale, scale];
+          }
+        }
+        this.zarrStore.scales = scales;
+        const { coordinateTransformations } = this.ngffMetadata;
+        if (coordinateTransformations?.[0]?.scale) {
+          const { scale } = coordinateTransformations[0];
+          const scaleLength = scale.length;
+          if (scaleLength >= 3) {
+            const zScale = scale[scaleLength - 3];
+            const yScale = scale[scaleLength - 2];
+            const xScale = scale[scaleLength - 1];
+            this.zarrStore.physicalSizeVoxel = [zScale, yScale, xScale];
+            if (array0.shape && array0.shape.length >= 5) {
+              this.zarrStore.physicalSizeTotal = [
+                (array0.shape[2] || 1) * zScale,
+                (array0.shape[3] || 1) * yScale,
+                (array0.shape[4] || 1) * xScale
+              ];
+            }
+          }
+        }
+        this.zarrStore.brickLayout = _resolutionStatsToBrickLayout(imageWrapper.getMultiResolutionStats());
+        log.debug("config", config);
+        const { omero } = this.ngffMetadata || {};
+        if (!omero) {
+          throw new Error("Expected omero metadata in ngffMetadata");
+        }
+        log.debug("omero", omero);
+        Object.keys(config).forEach((key, i) => {
+          const configChannel = config[key].spatialTargetC;
+          this.channels.zarrMappings[i] = configChannel;
+          this.channels.colorMappings[i] = i;
+          this.channels.downsampleMin[i] = omero?.channels?.[configChannel]?.window?.min || 0;
+          this.channels.downsampleMax[i] = omero?.channels?.[configChannel]?.window?.max || 65535;
+        });
+        log.debug("zarrMappings after init", this.channels.zarrMappings);
+        log.debug("colorMappings after init", this.channels.colorMappings);
+        log.debug("downsampleMin after init", this.channels.downsampleMin);
+        log.debug("downsampleMax after init", this.channels.downsampleMax);
+        this.initMRMCPT();
+      }
+      this.initStatus = INIT_STATUS.COMPLETE;
+      logWithColor$2("INIT() COMPLETE");
+      return {
+        success: true,
+        deviceLimits: this.deviceLimits,
+        zarrStore: this.zarrStore,
+        // physicalScale: this.physicalScale,
+        physicalSizeTotal: this.zarrStore.physicalSizeTotal,
+        physicalSizeVoxel: this.zarrStore.physicalSizeVoxel,
+        error: null
+      };
+    } catch (error) {
+      logWithColor$2("INIT() FAILED");
+      log.error("Error initializing VolumeDataManager:", error);
+      this.initStatus = INIT_STATUS.FAILED;
+      this.initError = error.message || "Unknown error";
+      return {
+        success: false,
+        error: this.initError
+      };
+    }
+  }
+  /**
+   * Initialize the BrickCache and PageTable
+   * MRMCPT: multi-resolution multi-channel page table
+   *
+   * Depends on:
+   *   - zarrStore.brickLayout
+   *   - zarrMappings.length (zarrMappings: the zarr channel index for every one of the up to 7 channels)
+   *   -
+   */
+  initMRMCPT() {
+    logWithColor$2("initMRMCPT");
+    const { PT, ptTHREE, bcTHREE } = _initMRMCPT(this.zarrStore.brickLayout, this.channels.zarrMappings.length);
+    this.PT = PT;
+    this.ptTHREE = ptTHREE;
+    this.bcTHREE = bcTHREE;
+    logWithColor$2("initMRMCPT() COMPLETE");
+  }
+  async initTexture() {
+    const requests = [
+      { x: 0, y: 0, z: 1 }
+    ];
+    logWithColor$2("initTexture - loading first brick");
+    await this.handleBrickRequests(requests);
+  }
+  updateChannels(channelProps) {
+    logWithColor$2("updateChannels");
+    log.debug("channelProps", channelProps);
+    log.debug("this.channels.zarrMappings", this.channels.zarrMappings);
+    log.debug("this.channels.colorMappings", this.channels.colorMappings);
+    log.debug("this.channels.downsampleMin", this.channels.downsampleMin);
+    log.debug("this.channels.downsampleMax", this.channels.downsampleMax);
+    if (this.channels.zarrMappings.length === 0) {
+      log.debug("channels not initialized yet");
+      return;
+    }
+    const requestedZarrChannels = Object.values(channelProps).map((channelData) => channelData.spatialTargetC).filter((targetC) => targetC !== void 0);
+    const currentZarrChannels = this.channels.zarrMappings.filter((mapping) => mapping !== void 0);
+    const requestedSorted = [...new Set(requestedZarrChannels)].sort((a, b) => a - b);
+    const currentSorted = [...new Set(currentZarrChannels)].sort((a, b) => a - b);
+    if (requestedSorted.length === currentSorted.length && requestedSorted.every((val, index) => val === currentSorted[index])) {
+      log.debug("Channel mappings unchanged, skipping update");
+    }
+    log.debug("Channel mappings changed:", {
+      current: currentSorted,
+      requested: requestedSorted
+    });
+    Object.entries(channelProps).forEach(([uiChannelKey, channelData]) => {
+      const targetZarrChannel = channelData.spatialTargetC;
+      log.debug(`UI channel "${uiChannelKey}" wants zarr channel ${targetZarrChannel}`);
+      const existingSlotIndex = this.channels.zarrMappings.indexOf(targetZarrChannel);
+      if (existingSlotIndex === -1) {
+        const nextFreeSlot = this.channels.zarrMappings.findIndex((slot) => slot === void 0);
+        if (nextFreeSlot !== -1) {
+          this.channels.zarrMappings[nextFreeSlot] = targetZarrChannel;
+          log.debug("channelData", channelData);
+          log.debug("this.ngffMetadata?.omero?.channels", this.ngffMetadata?.omero?.channels);
+          log.debug("targetZarrChannel", targetZarrChannel);
+          this.channels.downsampleMin[nextFreeSlot] = this.ngffMetadata?.omero?.channels?.[targetZarrChannel]?.window?.min || 0;
+          this.channels.downsampleMax[nextFreeSlot] = this.ngffMetadata?.omero?.channels?.[targetZarrChannel]?.window?.max || 65535;
+          log.debug(`Mapped zarr channel ${targetZarrChannel} to slot ${nextFreeSlot}`);
+          log.debug("channels", this.channels);
+        } else {
+          log.debug("No free slots found, looking for unused mapped channels");
+          const currentlyMapped = this.channels.zarrMappings.filter((mapping) => mapping !== void 0);
+          const stillRequested = requestedZarrChannels;
+          const unusedMappedChannels = currentlyMapped.filter((mappedChannel) => !stillRequested.includes(mappedChannel));
+          log.debug("Currently mapped:", currentlyMapped);
+          log.debug("Still requested:", stillRequested);
+          log.debug("Unused mapped channels:", unusedMappedChannels);
+          if (unusedMappedChannels.length > 0) {
+            const slotToReuse = this.channels.zarrMappings.findIndex((mapping) => unusedMappedChannels.includes(mapping));
+            if (slotToReuse !== -1) {
+              const oldZarrChannel = this.channels.zarrMappings[slotToReuse];
+              this.channels.zarrMappings[slotToReuse] = targetZarrChannel;
+              this.channels.downsampleMin[slotToReuse] = this.ngffMetadata?.omero?.channels?.[targetZarrChannel]?.window?.min || 0;
+              this.channels.downsampleMax[slotToReuse] = this.ngffMetadata?.omero?.channels?.[targetZarrChannel]?.window?.max || 65535;
+              log.debug(`Reused slot ${slotToReuse}: ${oldZarrChannel} -> ${targetZarrChannel}`);
+              this._purgeChannel(slotToReuse);
+            } else {
+              log.error("Could not find slot to reuse - this should not happen");
+            }
+          } else {
+            log.error("All slots are full and all mapped channels are still in use");
+          }
+        }
+      } else {
+        log.debug(`Zarr channel ${targetZarrChannel} already mapped to slot ${existingSlotIndex}`);
+      }
+    });
+    const newColorMappings = Object.values(channelProps).map((ch) => {
+      const slot = this.channels.zarrMappings.indexOf(ch.spatialTargetC);
+      return slot !== -1 ? slot : -1;
+    });
+    while (newColorMappings.length < 7) {
+      newColorMappings.push(-1);
+    }
+    log.debug("newColorMappings", newColorMappings);
+    this.channels.colorMappings = newColorMappings;
+    log.debug("updatedChannels", this.channels);
+    this._lastChannelConfig = {
+      zarrMappings: [...this.channels.zarrMappings],
+      colorMappings: [...this.channels.colorMappings],
+      downsampleMin: [...this.channels.downsampleMin],
+      downsampleMax: [...this.channels.downsampleMax]
+    };
+  }
+  /**
+   * Try to load a resolution level
+   * @param {number} resolutionIndex - The resolution level to load
+   * @param {Array} arrays - Array to store the loaded arrays
+   * @returns {Promise} Promise resolving when the resolution is loaded or rejected
+   */
+  /*
+  async tryLoadResolution(resolutionIndex, arrays) {
+    logWithColor('tryLoadResolution');
+    log.debug(resolutionIndex, arrays);
+    try {
+      const array = await zarrita.open(this.group.resolve(String(resolutionIndex)));
+      // Create new arrays to avoid modifying parameters directly
+      const newArrays = [...arrays];
+      newArrays[resolutionIndex] = array;
+      // Update the original arrays
+      Object.assign(arrays, newArrays);
+      logWithColor('tryLoadResolution() COMPLETE');
+      return { success: true, level: resolutionIndex };
+    } catch (err) {
+      log.error(`Failed to load resolution ${resolutionIndex}:`, err);
+      return { success: false, level: resolutionIndex, error: err.message };
+    }
+  }
+  */
+  /**
+   * Get physical dimensions
+   * @returns {Array} Physical dimensions [X, Y, Z]
+   */
+  getPhysicalDimensionsXYZ() {
+    log.debug("getPhysicalDimensionsXYZ");
+    log.debug("this.zarrStore.physicalSizeTotal", this.zarrStore.physicalSizeTotal);
+    const out = [
+      this.zarrStore.physicalSizeTotal[2],
+      this.zarrStore.physicalSizeTotal[1],
+      this.zarrStore.physicalSizeTotal[0]
+    ];
+    log.debug("out", out);
+    return out;
+  }
+  /**
+   * Get the maximum resolution
+   * @returns {number} Maximum resolution
+   */
+  getMaxResolutionXYZ() {
+    log.debug("getMaxResolutionXYZ");
+    log.debug("this.zarrStore.shapes", this.zarrStore.shapes);
+    const out = [
+      this.zarrStore.shapes[0][4],
+      this.zarrStore.shapes[0][3],
+      this.zarrStore.shapes[0][2]
+    ];
+    log.debug("out", out);
+    return out;
+  }
+  getOriginalScaleXYZ() {
+    logWithColor$2("getOriginalScaleXYZ");
+    log.debug("this.zarrStore.physicalSizeVoxel", this.zarrStore.physicalSizeVoxel);
+    const out = [
+      this.zarrStore.physicalSizeVoxel[2],
+      this.zarrStore.physicalSizeVoxel[1],
+      this.zarrStore.physicalSizeVoxel[0]
+    ];
+    log.debug("out", out);
+    return out;
+  }
+  getNormalizedScaleXYZ() {
+    log.debug("getNormalizedScaleXYZ");
+    const out = [
+      1,
+      this.zarrStore.physicalSizeVoxel[1] / this.zarrStore.physicalSizeVoxel[2],
+      this.zarrStore.physicalSizeVoxel[0] / this.zarrStore.physicalSizeVoxel[0]
+    ];
+    log.debug("out", out);
+    return out;
+  }
+  getBoxDimensionsXYZ() {
+    log.debug("getBoxDimensionsXYZ");
+    log.debug("this.zarrStore.shapes", this.zarrStore.shapes);
+    const out = [
+      1,
+      this.zarrStore.shapes[0][3] / this.zarrStore.shapes[0][4],
+      this.zarrStore.shapes[0][2] / this.zarrStore.shapes[0][4]
+    ];
+    log.debug("out", out);
+    return out;
+  }
+  /**
+   * Load a specific Zarr chunk based on [t,c,z,y,x] coordinates
+   * @param {number} t - Time point (default 0)
+   * @param {number} c - Channel (default 0)
+   * @param {number} z - Z coordinate
+   * @param {number} y - Y coordinate
+   * @param {number} x - X coordinate
+   * @param {number} resolution - Resolution level
+   * @returns {Promise<Uint8Array>} 32x32x32 chunk data
+   */
+  async loadZarrChunk(t = 0, c = 0, z, y, x, resolution) {
+    if (!this.zarrStore || !this.zarrStore.arrays[resolution]) {
+      throw new Error("Zarr store or resolution not initialized");
+    }
+    log.debug("loadZarrChunk", { t, c, z, y, x, resolution });
+    const array = this.zarrStore.arrays[resolution];
+    const chunkEntry = await array.getChunk([t, c, z, y, x]);
+    if (!chunkEntry) {
+      throw new Error(`No chunk found at coordinates [${t},${c},${z},${y},${x}]`);
+    }
+    if (chunkEntry.data.length !== BRICK_SIZE * BRICK_SIZE * BRICK_SIZE) {
+      throw new Error(`Unexpected chunk size: ${chunkEntry.data.length}`);
+    }
+    return chunkEntry.data;
+  }
+  /**
+   * Process the buffer of brick requests from the shader, turning them into
+   * actual Promises for Zarr chunks on the JS side.
+   * @param {Uint8Array} buffer The bufRequest (of length width*height*4)
+   * containing the brick requests from the shader.
+   * @param {object} optsForWeighting
+   * @param {number} optsForWeighting.width The width of the render target.
+   * @param {number} optsForWeighting.height The height of the render target.
+   * @param {number} optsForWeighting.sigmaNormalized The normalized sigma value
+   * to use for weighting the brick requests based on their distance from
+   * the center of the render target.
+   */
+  async processRequestData(buffer, optsForWeighting) {
+    if (this.initStatus !== INIT_STATUS.COMPLETE) {
+      log.debug("processRequestData: not yet initialized, skipping");
+      return;
+    }
+    if (this.isBusy) {
+      log.debug("processRequestData: already busy, skipping");
+      return;
+    }
+    if (this.noNewRequests) {
+      log.debug("processRequestData: loading stopped by user, skipping");
+      return;
+    }
+    if (this.isContextLost()) {
+      log.debug("processRequestData: WebGL context is lost, skipping");
+      return;
+    }
+    this.isBusy = true;
+    this.triggerRequest = false;
+    const { requests, origRequestCount } = _requestBufferToRequestObjects(buffer, this.k, optsForWeighting);
+    if (requests.length === 0) {
+      this.noNewRequests = true;
+    }
+    log.debug(`processRequestData: handling ${requests.length} requests of ${origRequestCount}`);
+    await this.handleBrickRequests(requests);
+    this.triggerUsage = true;
+    this.isBusy = false;
+  }
+  async processUsageData(buffer) {
+    if (this.isBusy) {
+      log.debug("processUsageData: already busy, skipping");
+      this.needsBailout = true;
+      return;
+    }
+    if (this.isContextLost()) {
+      log.debug("processUsageData: WebGL context is lost, skipping");
+      return;
+    }
+    this.isBusy = true;
+    this.triggerUsage = false;
+    const now = ++this.timeStamp;
+    const usedBricks = /* @__PURE__ */ new Set();
+    for (let i = 0; i < buffer.length; i += 4) {
+      const x = buffer[i];
+      const y = buffer[i + 1];
+      const z = buffer[i + 2];
+      if ((x | y | z) === 0) {
+        continue;
+      }
+      const bcIndex = z * BRICK_CACHE_SIZE_X * BRICK_CACHE_SIZE_Y + y * BRICK_CACHE_SIZE_X + x;
+      if (bcIndex < this.BCTimeStamps.length) {
+        usedBricks.add(bcIndex);
+      }
+    }
+    Array.from(usedBricks).forEach((bcIndex) => {
+      this.BCTimeStamps[bcIndex] = now;
+    });
+    if (this.BCFull)
+      this._buildLRU();
+    this.triggerRequest = true;
+    this.isBusy = false;
+  }
+  // Helper method to update PT entries for evicted bricks
+  _evictBrick(bcIndex) {
+    const pt = this.bc2pt[bcIndex];
+    if (!pt)
+      return;
+    const [min, max] = this.BCMinMax[bcIndex] || [0, 0];
+    const ptVal = (0 << 31 | 1 << 30 | Math.min(127, min >> 1) << 23 | Math.min(127, max >> 1) << 16) >>> 0;
+    this._updatePTEntry(pt.x, pt.y, pt.z, ptVal);
+    this.bc2pt[bcIndex] = null;
+  }
+  _purgeChannel(ptChannelIndex) {
+    log.debug("purging channel", ptChannelIndex);
+    log.debug("corresponding zarr channel", this.channels.zarrMappings[ptChannelIndex]);
+    if (!this.ptTHREE) {
+      log.error("pagetable texture not initialized");
+      return;
+    }
+    if (this.isContextLost()) {
+      log.warn("WebGL context is lost, skipping channel purge");
+      return;
+    }
+    this.channels.downsampleMin[ptChannelIndex] = void 0;
+    this.channels.downsampleMax[ptChannelIndex] = void 0;
+    this.channels.zarrMappings[ptChannelIndex] = void 0;
+    const channelMask = this.PT.channelOffsets[ptChannelIndex];
+    log.debug("channelMask", channelMask);
+    log.error("TODO: not tested yet");
+    const { gl } = this;
+    const texPT = this.renderer.properties.get(this.ptTHREE).__webglTexture;
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_3D, texPT);
+    for (let r = 0; r < this.zarrStore.resolutions; r++) {
+      const anchor = [
+        this.PT.anchors[r][2] * channelMask[2],
+        this.PT.anchors[r][1] * channelMask[1],
+        this.PT.anchors[r][0] * channelMask[0]
+      ];
+      log.debug("anchor", anchor);
+      const extents = this.zarrStore.brickLayout[r];
+      const size = extents[0] * extents[1] * extents[2];
+      log.debug("extents", extents);
+      log.debug("size", size);
+      gl.texSubImage3D(gl.TEXTURE_3D, 0, anchor[0], anchor[1], anchor[2], extents[0], extents[1], extents[2], gl.RED_INTEGER, gl.UNSIGNED_INT, new Uint32Array(size));
+    }
+    gl.bindTexture(gl.TEXTURE_3D, null);
+  }
+  // Update a PT entry
+  _updatePTEntry(ptX, ptY, ptZ, ptVal) {
+    if (!this.ptTHREE)
+      return;
+    if (this.isContextLost()) {
+      log.warn("WebGL context is lost, skipping PT entry update");
+      return;
+    }
+    const { gl } = this;
+    const texPT = this.renderer.properties.get(this.ptTHREE).__webglTexture;
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_3D, texPT);
+    gl.texSubImage3D(gl.TEXTURE_3D, 0, ptX, ptY, ptZ, 1, 1, 1, gl.RED_INTEGER, gl.UNSIGNED_INT, new Uint32Array([ptVal]));
+    gl.bindTexture(gl.TEXTURE_3D, null);
+  }
+  /* ------------------------------------------------------------- *
+  * 2. Allocate the next n free bricks in the brick cache         *
+  * ------------------------------------------------------------- */
+  /**
+   *
+   * @param {number} n The number of slots to allocate
+   * @returns {{ bcIndex, x, y, z }[]} Array of brick cache coordinates for the allocated slots.
+   */
+  _allocateBCSlots(n) {
+    let slots = [];
+    const total = BRICK_CACHE_SIZE_X * BRICK_CACHE_SIZE_Y * BRICK_CACHE_SIZE_Z;
+    if (!this.BCFull && this.BCUnusedIndex + n > total) {
+      this.BCFull = true;
+      log.debug("BRICK CACHE FULL");
+    }
+    if (!this.BCFull) {
+      for (let i = 0; i < n; ++i) {
+        const bcIndex = (this.BCUnusedIndex + i) % total;
+        const z = Math.floor(bcIndex / (BRICK_CACHE_SIZE_X * BRICK_CACHE_SIZE_Y));
+        const rem = bcIndex - z * BRICK_CACHE_SIZE_X * BRICK_CACHE_SIZE_Y;
+        const y = Math.floor(rem / BRICK_CACHE_SIZE_X);
+        const x = rem % BRICK_CACHE_SIZE_X;
+        slots.push({ bcIndex, x, y, z });
+      }
+      this.BCUnusedIndex += n;
+    } else {
+      if (this.LRUStack.length < n)
+        this._buildLRU();
+      slots = this.LRUStack.splice(0, n).map((bcIndex) => {
+        this._evictBrick(bcIndex);
+        const z = Math.floor(bcIndex / (BRICK_CACHE_SIZE_X * BRICK_CACHE_SIZE_Y));
+        const rem = bcIndex - z * BRICK_CACHE_SIZE_X * BRICK_CACHE_SIZE_Y;
+        const y = Math.floor(rem / BRICK_CACHE_SIZE_X);
+        const x = rem % BRICK_CACHE_SIZE_X;
+        return { bcIndex, x, y, z };
+      });
+    }
+    return slots;
+  }
+  /* ------------------------------------------------------------- *
+  * 4. Upload one brick + PT entry                                *
+  * ------------------------------------------------------------- */
+  async _uploadBrick(ptCoord, bcSlot) {
+    log.debug("uploading brick", ptCoord, bcSlot);
+    if (this.isContextLost()) {
+      log.warn("WebGL context is lost, skipping brick upload");
+      return;
+    }
+    if (ptCoord.x >= this.PT.xExtent || ptCoord.y >= this.PT.yExtent || ptCoord.z >= this.PT.zTotal || ptCoord.x < 0 || ptCoord.y < 0 || ptCoord.z < 0) {
+      log.error("this.PT", this.PT);
+      log.error("ptCoord out of bounds", ptCoord);
+      return;
+    }
+    const { channel, resolution, x, y, z } = _ptToZarr(ptCoord.x, ptCoord.y, ptCoord.z, { PT_zExtent: this.PT.zExtent, PT_z0Extent: this.PT.z0Extent, PT_anchors: this.PT.anchors });
+    if (!this.channels || !this.channels.zarrMappings || this.channels.zarrMappings.length === 0) {
+      log.error("Channel mappings not initialized, skipping brick upload");
+      return;
+    }
+    if (channel < 0 || channel >= this.channels.zarrMappings.length) {
+      log.error("Channel index out of bounds", { channel, mappingsLength: this.channels.zarrMappings.length });
+      return;
+    }
+    const zarrChannel = this.channels.zarrMappings[channel];
+    if (zarrChannel === void 0 || zarrChannel === -1) {
+      log.warn("zarrChannel is undefined or -1", {
+        zarrChannel,
+        channel,
+        ptCoord,
+        channelMappings: this.channels.zarrMappings,
+        contextLost: this.isContextLost()
+      });
+      if (this._lastChannelConfig && this._lastChannelConfig.zarrMappings[channel] !== void 0) {
+        log.warn("Attempting to use last known channel config");
+        this.channels.zarrMappings = [...this._lastChannelConfig.zarrMappings];
+        this.channels.colorMappings = [...this._lastChannelConfig.colorMappings];
+        this.channels.downsampleMin = [...this._lastChannelConfig.downsampleMin];
+        this.channels.downsampleMax = [...this._lastChannelConfig.downsampleMax];
+        const restoredZarrChannel = this.channels.zarrMappings[channel];
+        if (restoredZarrChannel !== void 0 && restoredZarrChannel !== -1) {
+          log.debug("Successfully restored channel mapping, continuing with upload");
+        } else {
+          log.error("Could not restore valid channel mapping, aborting brick upload");
+          return;
+        }
+      } else {
+        log.error("No fallback channel config available, aborting brick upload");
+        return;
+      }
+    }
+    log.debug("starting to load zarr chunk", { resolution, z, y, x, zarrChannel });
+    let chunk = await this.loadZarrChunk(0, zarrChannel, z, y, x, resolution);
+    log.debug("chunk", chunk);
+    if (chunk instanceof Uint16Array) {
+      log.debug("chunk is Uint16Array, converting to Uint8Array");
+      if (this.channels.downsampleMin[channel] === void 0) {
+        const channelId = this.channels.zarrMappings[channel];
+        log.debug("channelId was not found in this.channels.downsampleMin[channel]", channelId);
+        this.channels.downsampleMin[channel] = this.ngffMetadata?.omero?.channels?.[channelId]?.window?.min || 0;
+        this.channels.downsampleMax[channel] = this.ngffMetadata?.omero?.channels?.[channelId]?.window?.max || 65535;
+        log.debug("this.channels.downsampleMin[channel]", this.channels.downsampleMin[channel]);
+        log.debug("this.channels.downsampleMax[channel]", this.channels.downsampleMax[channel]);
+      }
+      const uint16View = new Uint16Array(chunk.buffer);
+      const uint8Chunk = new Uint8Array(chunk.length);
+      const minVal = this.channels.downsampleMin[channel];
+      const maxVal = this.channels.downsampleMax[channel];
+      const range = maxVal - minVal;
+      for (let i = 0; i < uint16View.length; i++) {
+        const val = uint16View[i];
+        const clamped = Math.max(minVal, Math.min(maxVal, val));
+        uint8Chunk[i] = (clamped - minVal) * 255 / range | 0;
+      }
+      chunk = uint8Chunk;
+    }
+    if (!(chunk instanceof Uint8Array)) {
+      throw new Error(`Unsupported chunk type: ${chunk.constructor.name}. Expected Uint8Array.`);
+    }
+    let min = 255;
+    let max = 0;
+    for (let i = 0; i < chunk.length; ++i) {
+      const v = chunk[i];
+      if (v < min)
+        min = v;
+      if (v > max)
+        max = v;
+    }
+    const { gl } = this;
+    const texBC = this.renderer.properties.get(this.bcTHREE).__webglTexture;
+    gl.activeTexture(gl.TEXTURE2);
+    gl.bindTexture(gl.TEXTURE_3D, texBC);
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+    gl.texSubImage3D(gl.TEXTURE_3D, 0, bcSlot.x * BRICK_SIZE, bcSlot.y * BRICK_SIZE, bcSlot.z * BRICK_SIZE, BRICK_SIZE, BRICK_SIZE, BRICK_SIZE, gl.RED, gl.UNSIGNED_BYTE, chunk);
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
+    gl.bindTexture(gl.TEXTURE_3D, null);
+    const error = gl.getError();
+    if (error !== gl.NO_ERROR) {
+      log.error("WebGL error during brick upload:", error, chunk);
+    }
+    if (channel >= this.channels.zarrMappings.length) {
+      log.debug("channel is out of bounds", channel);
+      min = 255;
+      max = 255;
+    }
+    const ptVal = _packPT(min, max, bcSlot.x, bcSlot.y, bcSlot.z);
+    const texPT = this.renderer.properties.get(this.ptTHREE).__webglTexture;
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_3D, texPT);
+    gl.texSubImage3D(gl.TEXTURE_3D, 0, ptCoord.x, ptCoord.y, ptCoord.z, 1, 1, 1, gl.RED_INTEGER, gl.UNSIGNED_INT, new Uint32Array([ptVal]));
+    gl.bindTexture(gl.TEXTURE_3D, null);
+    const error2 = gl.getError();
+    if (error2 !== gl.NO_ERROR) {
+      log.error("WebGL error during pagetable upload:", error2, chunk);
+    }
+    this.BCTimeStamps[bcSlot.bcIndex] = this.timeStamp;
+    this.BCMinMax[bcSlot.bcIndex] = [min, max];
+    this.bc2pt[bcSlot.bcIndex] = ptCoord;
+  }
+  /* ------------------------------------------------------------- *
+  * 5. Public: handle a batch of PT requests (array of {x,y,z})   *
+  * ------------------------------------------------------------- */
+  async handleBrickRequests(ptRequests) {
+    if (ptRequests.length === 0)
+      return;
+    this.totalBricksRequested = ptRequests.length;
+    this.currentRequestCount = ptRequests.length;
+    const slots = this._allocateBCSlots(ptRequests.length);
+    log.debug("Handling brick requests:", { requestCount: ptRequests.length, slotCount: slots.length });
+    log.debug("handleBrickRequests: starting for loop");
+    for (let i = 0; i < ptRequests.length; ++i) {
+      await this._uploadBrick(ptRequests[i], slots[i]);
+      this.currentRequestCount = ptRequests.length - i - 1;
+      const rlength = this.bricksEverLoaded.size;
+      this.bricksEverLoaded.add(`${ptRequests[i].x},${ptRequests[i].y},${ptRequests[i].z}`);
+      if (rlength === this.bricksEverLoaded.size) {
+        log.debug("DUPLICATE BRICK LOADED", ptRequests[i]);
+      }
+      if (this.needsBailout) {
+        log.debug("Bailing out of handleBrickRequests early due to needsBailout flag");
+        this.needsBailout = false;
+        this.currentRequestCount = 0;
+        break;
+      }
+    }
+    this.currentRequestCount = 0;
+    log.debug("this.bricksEverLoaded", this.bricksEverLoaded);
+  }
+  /* --------------------------------------------------------- *
+   * Rebuild the LRUStack with the k least-recently-used bricks *
+   * --------------------------------------------------------- */
+  _buildLRU() {
+    const brickIndicesWithTimes = this.BCTimeStamps.map((time, index) => ({ index, time }));
+    this.LRUStack = brickIndicesWithTimes.sort((a, b) => a.time - b.time).slice(0, this.k).map((item) => item.index);
+  }
+}
+const volumeVertexShader = `//
+// Output: Unnormalized ray direction from camera to each vertex
+// Used by fragment shader for ray marching through the volume
+out vec3 rayDirUnnorm;
+
+// Output: Camera position transformed into volume's local coordinate system
+// Used to calculate ray origins in the fragment shader
+out vec3 cameraCorrected;
+
+// Volume scale uniform (likely for anisotropic voxels)
+uniform vec3 u_vol_scale;
+
+// Volume size uniform
+uniform vec3 u_size;
+
+// Output: Vertex positions normalized to [0,1] range within volume bounds
+// Standard coordinate system for volume sampling
+varying vec3 worldSpaceCoords;
+
+// Output: Texture coordinates for sampling volume data
+varying vec2 vUv;
+
+// Output: Final clip-space position (stored for fragment shader access)
+varying vec4 glPosition;
+
+// Volume bounding box size uniform
+uniform highp vec3 boxSize;
+
+void main()
+{
+   // Transform vertex positions from [-0.5, 0.5] range to [0, 1] range
+   // This is the standard coordinate system for volume sampling
+   //
+   // Mathematical transformation:
+   // worldSpaceCoords = (position / boxSize) + 0.5
+   // 
+   // Example:
+   // position = (-0.5, -0.5, -0.5) → worldSpaceCoords = (0, 0, 0)
+   // position = ( 0.0,  0.0,  0.0) → worldSpaceCoords = (0.5, 0.5, 0.5)
+   // position = ( 0.5,  0.5,  0.5) → worldSpaceCoords = (1, 1, 1)
+   worldSpaceCoords = position / boxSize + vec3(0.5, 0.5, 0.5); //move it from [-0.5;0.5] to [0,1]
+   
+   // Transform camera position into volume's local coordinate system
+   // This gives us the ray origin in volume space
+   cameraCorrected = (inverse(modelMatrix) * vec4(cameraPosition, 1.)).xyz;
+   
+   // Calculate unnormalized ray direction from camera to each vertex
+   // Used by fragment shader for ray marching through the volume
+   rayDirUnnorm = position - cameraCorrected;
+   
+   // Apply standard MVP transformation to get clip-space coordinates
+   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+   
+   // Store clip-space position for fragment shader access
+   glPosition = gl_Position;
+   
+   // Pass through texture coordinates for volume sampling
+   vUv = uv;
+}
+`;
+const volumeFragmentShader = `//
+// #include <packing>
+precision highp float;
+precision highp int;
+precision highp sampler3D;
+precision highp usampler3D;
+
+// ========================================
+// INPUT VARIABLES (from vertex shader)
+// ========================================
+// Unnormalized ray direction from camera
+in vec3 rayDirUnnorm;
+// Camera position in world space
+in vec3 cameraCorrected;
+
+// ========================================
+// TEXTURE SAMPLERS
+// ========================================
+// 3D texture containing cached brick data (2048x2048x128)
+// (2048*2048*128)/(32*32*32) = 16,384 bricks can be stored?
+uniform sampler3D brickCacheTex;
+// 3D texture containing page table entries (brick metadata)
+uniform usampler3D pageTableTex;
+
+// ========================================
+// RENDERING PARAMETERS/CONSTANTS
+// ========================================
+// Rendering style: 0=MIP, 1=MinIP, 2=standard volume rendering, 3=DEBUG
+uniform int u_renderstyle;
+// Global opacity multiplier for volume rendering
+uniform float opacity;
+
+// ========================================
+// CONTRAST LIMITS (per channel)
+// per channel min/max values for value normalization
+// ========================================
+uniform vec2 clim0;
+uniform vec2 clim1;
+uniform vec2 clim2;
+uniform vec2 clim3;
+uniform vec2 clim4;
+uniform vec2 clim5;
+uniform vec2 clim6;
+
+// ========================================
+// CLIPPING PLANES
+// e.g., for X-axis clipping: (min_x, max_x) or (-1, -1) if disabled
+// ========================================
+uniform vec2 xClip;
+uniform vec2 yClip;
+uniform vec2 zClip;
+
+// ========================================
+// CHANNEL COLORS AND OPACITIES
+// rgb -- color values, a -- visibility (boolean)
+// ========================================
+uniform vec4 color0;
+uniform vec4 color1;
+uniform vec4 color2;
+uniform vec4 color3;
+uniform vec4 color4;
+uniform vec4 color5;
+uniform vec4 color6;
+
+// maps colors to physical spaces
+uniform int channelMapping[7];
+
+// ========================================
+// VOLUME AND RESOLUTION PARAMETERS
+// ========================================
+// Volume bounding box size in world space
+uniform highp vec3 boxSize;
+// Rendering resolution level (affects step size)
+// stepsize, correlates with resolution
+uniform int renderRes;
+// Volume dimensions in voxels (x, y, z)
+// resolution 0 voxel extents
+uniform uvec3 voxelExtents;
+// Global resolution range: (min_res, max_res)
+// global range of requested resolutions
+uniform ivec2 resGlobal;
+// Maximum number of active channels
+// max number of channels (relevant for the cache statistics)
+// between 1 and 7
+uniform int maxChannels;
+
+// ========================================
+// PER-CHANNEL RESOLUTION RANGES
+// per color channel resolution range
+// Each channel can have different available resolution levels
+// e.g., for Channel 0: (min_res, max_res)
+// ========================================
+uniform ivec2 res0;
+uniform ivec2 res1;
+uniform ivec2 res2;
+uniform ivec2 res3;
+uniform ivec2 res4;
+uniform ivec2 res5;
+uniform ivec2 res6;
+// Channel 7: unused
+uniform ivec2 res7;
+
+// ========================================
+// LEVEL-OF-DETAIL PARAMETERS
+// controls how fast we decrease the resolution
+// ========================================
+// LOD factor for distance-based resolution selection
+uniform float lodFactor;
+
+// ========================================
+// ANCHOR POINTS (per resolution level)
+// per resolution anchor point for pagetable
+// ========================================
+// Anchor points define the origin of page table for each resolution level
+// Resolution 0 anchor point (highest detail)
+uniform uvec3 anchor0;
+uniform uvec3 anchor1;
+uniform uvec3 anchor2;
+uniform uvec3 anchor3;
+uniform uvec3 anchor4;
+uniform uvec3 anchor5;
+uniform uvec3 anchor6;
+uniform uvec3 anchor7;
+uniform uvec3 anchor8;
+uniform uvec3 anchor9;
+// Resolution 9 anchor point (lowest detail)
+
+// ========================================
+// SCALE FACTORS (per resolution level)
+// per resolution downsample factor
+// ========================================
+// Scale factors determine voxel size at each resolution level
+// Resolution 0 scale factors (should be 1,1,1)
+uniform vec3 scale0;
+uniform vec3 scale1;
+uniform vec3 scale2;
+uniform vec3 scale3;
+uniform vec3 scale4;
+uniform vec3 scale5;
+uniform vec3 scale6;
+uniform vec3 scale7;
+uniform vec3 scale8;
+uniform vec3 scale9;
+// Resolution 9 scale factors
+
+// ========================================
+// VARYING VARIABLES (unused but required)
+// ========================================
+// Fragment position (unused)
+varying vec4 glPosition;
+// World space coordinates (used for depth only)
+varying vec3 worldSpaceCoords;
+
+// ========================================
+// OUTPUT VARIABLES (multiple render targets)
+// output buffers
+// ========================================
+// Final rendered color (sRGB)
+layout(location = 0) out vec4 gColor;
+// Brick loading requests (packed coordinates)
+layout(location = 1) out vec4 gRequest;
+// Brick usage tracking (for cache management)
+layout(location = 2) out vec4 gUsage;
+
+// ========================================
+// CONSTANTS
+// ========================================
+// Size of each brick in voxels (32x32x32)
+const float BRICK_SIZE = 32.0;
+// Brick cache texture width
+const float BRICK_CACHE_SIZE_X = 2048.0;
+// Brick cache texture height
+const float BRICK_CACHE_SIZE_Y = 2048.0;
+// Brick cache texture depth
+const float BRICK_CACHE_SIZE_Z = 128.0;
+// Number of bricks in X (64)
+const float BRICK_CACHE_BRICKS_X = BRICK_CACHE_SIZE_X / BRICK_SIZE;
+// Number of bricks in Y (64)
+const float BRICK_CACHE_BRICKS_Y = BRICK_CACHE_SIZE_Y / BRICK_SIZE;
+// Number of bricks in Z (4)
+const float BRICK_CACHE_BRICKS_Z = BRICK_CACHE_SIZE_Z / BRICK_SIZE;
+
+// ========================================
+// RAY-VOLUME INTERSECTION
+// calculating the intersection of the ray with the bounding box
+// ========================================
+// Calculates the intersection of a ray with the volume's bounding box
+// Returns (entry_time, exit_time) for the ray-box intersection
+// Handles clipping planes by adjusting the bounding box
+//
+// Parameters:
+//   orig - vec3: Ray origin point in world space
+//   dir - vec3: Ray direction vector (should be normalized)
+//
+// Returns:
+//   vec2: (entry_time, exit_time) where:
+//     - entry_time: Distance along ray to enter the volume
+//     - exit_time: Distance along ray to exit the volume
+//     - If no intersection: entry_time > exit_time
+vec2 intersect_hit(vec3 orig, vec3 dir) {
+    // Start with full volume bounds
+    vec3 boxMin = vec3(-0.5) * boxSize;
+    vec3 boxMax = vec3(0.5) * boxSize;
+    
+    // Apply clipping planes if they're active (xClip.x > -1.0 means active)
+    if (xClip.x > -1.0) {
+        boxMin.x = xClip.x - (boxSize.x / 2.0);
+        if (xClip.y < boxSize.x)
+        boxMax.x = xClip.y - (boxSize.x / 2.0);
+    }
+    if (yClip.x > -1.0) {
+        boxMin.y = yClip.x - (boxSize.y / 2.0);
+        if (yClip.y < boxSize.y)
+        boxMax.y = yClip.y - (boxSize.y / 2.0);
+    }
+    if (zClip.x > -1.0) {
+        boxMin.z = zClip.x - (boxSize.z / 2.0);
+        if (zClip.y < boxSize.z)
+        boxMax.z = zClip.y - (boxSize.z / 2.0);
+    }
+    
+    // Standard ray-box intersection algorithm
+    vec3 invDir = 1.0 / dir;
+    vec3 tmin0 = (boxMin - orig) * invDir;
+    vec3 tmax0 = (boxMax - orig) * invDir;
+    vec3 tmin = min(tmin0, tmax0);
+    vec3 tmax = max(tmin0, tmax0);
+    float t0 = max(tmin.x, max(tmin.y, tmin.z));  // Entry time
+    float t1 = min(tmax.x, min(tmax.y, tmax.z));  // Exit time
+    return vec2(t0, t1);
+}
+
+// ========================================
+// UTILITY FUNCTIONS
+// ========================================
+
+// Pseudo-random number generator for jittered sampling
+// random number generator based on the uv coordinate
+// Author @patriciogv - 2015
+// http://patriciogonzalezvivo.com
+//
+// Parameters:
+//   None (uses gl_FragCoord.xy as input)
+//
+// Returns:
+//   float: Random value between 0.0 and 1.0 based on fragment coordinates
+float random() {
+    return fract(sin(dot(gl_FragCoord.xy, vec2(12.9898,78.233)))* 43758.5453123);
+}
+
+// Convert from linear RGB to sRGB color space
+// Implements the standard sRGB transfer function for gamma correction
+//
+// Parameters:
+//   x - float: Linear RGB value between 0.0 and 1.0
+//
+// Returns:
+//   float: sRGB value between 0.0 and 1.0
+float linear_to_srgb(float x) {
+    if (x <= 0.0031308f) {
+        return 12.92f * x;
+    }
+    return 1.055f * pow(x, 1.f / 2.4f) - 0.055f;
+}
+
+// Convert from linear RGB to sRGB color space (vector version)
+// Applies sRGB conversion to each RGB component while preserving alpha
+//
+// Parameters:
+//   x - vec4: Linear RGBA color with components between 0.0 and 1.0
+//
+// Returns:
+//   vec4: sRGB RGBA color with components between 0.0 and 1.0
+vec4 linear_to_srgb(vec4 x) {
+    return vec4(linear_to_srgb(x.r), linear_to_srgb(x.g), linear_to_srgb(x.b), x.a);
+}
+
+// ========================================
+// PAGE TABLE COORDINATE PACKING
+// transform the pagetable coordinate into a RGBA8 value
+// ========================================
+// Packs 3D page table coordinates into RGBA8 texture format
+// Uses 10 bits for X, 10 bits for Y, 12 bits for Z
+//
+// Parameters:
+//   coord - uvec3: 3D coordinates to pack (X, Y, Z components)
+//     - X coordinate: 10-bit unsigned integer (0-1023)
+//     - Y coordinate: 10-bit unsigned integer (0-1023) 
+//     - Z coordinate: 12-bit unsigned integer (0-4095)
+//
+// Returns:
+//   vec4: RGBA8 encoded coordinates with components between 0.0 and 1.0
+//     - R: Upper 8 bits of packed 32-bit value
+//     - G: Middle-upper 8 bits of packed 32-bit value
+//     - B: Middle-lower 8 bits of packed 32-bit value
+//     - A: Lower 8 bits of packed 32-bit value
+vec4 packPTCoordToRGBA8(uvec3 coord) {
+
+    uint x = coord.x & 0x3FFu; // 10 bits for X coordinate
+    uint y = coord.y & 0x3FFu; // 10 bits for Y coordinate
+    uint z = coord.z & 0xFFFu; // 12 bits for Z coordinate
+
+    // Pack into 32-bit integer
+    uint packed =
+        (x << 22u) |
+        (y << 12u) |
+        (z);
+
+    // Decompose into RGBA8 format
+    return vec4(
+        float((packed >> 24u) & 0xFFu) / 255.0,
+        float((packed >> 16u) & 0xFFu) / 255.0,
+        float((packed >> 8u) & 0xFFu) / 255.0,
+        float(packed & 0xFFu) / 255.0
+    );
+}
+
+// ========================================
+// RESOLUTION AND ANCHOR POINT ACCESSORS
+// ========================================
+
+// Get anchor point for a specific resolution level
+// Anchor points define the origin of the page table for each resolution
+//
+// Parameters:
+//   index - int: Resolution level index (0-9, where 0 is highest resolution)
+//
+// Returns:
+//   uvec3: 3D anchor point coordinates in the page table, or (-1, -1, -1) if invalid
+uvec3 getAnchorPoint(int index) {
+    if (index == 0) return anchor0;
+    if (index == 1) return anchor1;
+    if (index == 2) return anchor2;
+    if (index == 3) return anchor3;
+    if (index == 4) return anchor4;
+    if (index == 5) return anchor5;
+    if (index == 6) return anchor6;
+    if (index == 7) return anchor7;
+    if (index == 8) return anchor8;
+    if (index == 9) return anchor9;
+    return uvec3(-1, -1, -1);
+}
+
+// Find the lowest available resolution level
+// Returns the highest resolution index that has valid data
+//
+// Parameters:
+//   None
+//
+// Returns:
+//   int: Highest resolution level index (0-9) that has valid anchor point data
+//        Returns 9 if no valid resolution levels are found
+int getLowestRes() {
+    for (int i = 0; i < 10; i++) {
+        if (getAnchorPoint(i) == uvec3(0,0,0)) {
+            return i - 1;
+        }
+    }
+    return 9;
+}
+
+// Get the downsample factor for a resolution level
+// Scale factors determine the voxel size at each resolution
+//
+// Parameters:
+//   index - int: Resolution level index (0-9, where 0 is highest resolution)
+//
+// Returns:
+//   vec3: Scale factors (x, y, z) for the resolution level, or (-1, -1, -1) if invalid
+//         Higher scale factors indicate larger voxels (lower resolution)
+vec3 getScale(int index) {
+    if (index == 0) return scale0;
+    if (index == 1) return scale1;
+    if (index == 2) return scale2;
+    if (index == 3) return scale3;
+    if (index == 4) return scale4;
+    if (index == 5) return scale5;
+    if (index == 6) return scale6;
+    if (index == 7) return scale7;
+    if (index == 8) return scale8;
+    if (index == 9) return scale9;
+    return vec3(-1.0, -1.0, -1.0);
+}
+
+// Get the resolution range for a color channel
+// Returns (min_res, max_res) for the channel
+//
+// Parameters:
+//   index - int: Channel index (0-6)
+//
+// Returns:
+//   ivec2: Resolution range as (min_resolution_level, max_resolution_level)
+//          Returns (-1, -1) if channel index is invalid
+ivec2 getRes(int index) {
+    if (index == 0) return res0;
+    if (index == 1) return res1;
+    if (index == 2) return res2;
+    if (index == 3) return res3;
+    if (index == 4) return res4;
+    if (index == 5) return res5;
+    if (index == 6) return res6;
+    return ivec2(-1, -1);
+}
+
+// Get the min/max values (contrast limits) for a color channel
+// Returns (min_value, max_value) for normalization
+//
+// Parameters:
+//   index - int: Channel index (0-6)
+//
+// Returns:
+//   vec2: Contrast limits as (min_value, max_value) for data normalization
+//         Returns (-1.0, -1.0) if channel index is invalid
+vec2 getClim(int index) {
+    if (index == 0) return clim0;
+    if (index == 1) return clim1;
+    if (index == 2) return clim2;
+    if (index == 3) return clim3;
+    if (index == 4) return clim4;
+    if (index == 5) return clim5;
+    if (index == 6) return clim6;
+    return vec2(-1.0, -1.0);
+}
+
+// ========================================
+// COORDINATE TRANSFORMATIONS
+// ========================================
+
+// Convert normalized coordinates (0-1) to voxel coordinates.
+// get the voxel coordinate in the specified resolution from the normalized coordinate
+//
+// Parameters:
+//   normalized - vec3: Normalized coordinates in range [0,1] for each axis
+//   res - int: Resolution level (0=highest detail, 9=lowest detail)
+//
+// Returns:
+//   vec3: Voxel coordinates in the volume space at the specified resolution
+vec3 getVoxelFromNormalized(vec3 normalized, int res) {
+    vec3 extents = (vec3(voxelExtents) / getScale(res)); // Voxel extents at this resolution
+    vec3 voxel = normalized * extents;
+    return voxel;
+}
+
+// Convert voxel coordinates to normalized coordinates (0-1)
+// get the normalized coordinate based on the voxel coordinate in the specified resolution
+//
+// Parameters:
+//   voxel - vec3: Voxel coordinates in the volume space
+//   res - int: Resolution level (0=highest detail, 9=lowest detail)
+//
+// Returns:
+//   vec3: Normalized coordinates in range [0,1] for each axis
+vec3 getNormalizedFromVoxel(vec3 voxel, int res) {
+    vec3 extents = (vec3(voxelExtents) / getScale(res)); // Voxel extents at this resolution
+    vec3 normalized = voxel / extents;
+    return normalized;
+}
+
+// Convert normalized coordinates to brick coordinates.
+// get the brick coordinate in the specified resolution based on the normalized coordinate
+// needed for pagetable calculations
+//
+// Parameters:
+//   normalized - vec3: Normalized coordinates in range [0,1] for each axis
+//   res - int: Resolution level (0=highest detail, 9=lowest detail)
+//
+// Returns:
+//   vec3: Brick coordinates (each brick is 32x32x32 voxels)
+vec3 getBrickFromNormalized(vec3 normalized, int res) {
+    vec3 voxel = getVoxelFromNormalized(normalized, res);
+    vec3 brick = floor(voxel / 32.0);  // Each brick is 32x32x32 voxels
+    return brick;
+}
+
+// Convert voxel coordinates to brick coordinates.
+// get the brick coordinate in the specified resolution based on the voxel coordinate
+//
+// Parameters:
+//   voxel - vec3: Voxel coordinates in the volume space
+//   res - int: Resolution level (0=highest detail, 9=lowest detail)
+//
+// Returns:
+//   vec3: Brick coordinates (each brick is 32x32x32 voxels)
+vec3 getBrickFromVoxel(vec3 voxel, int res) {
+    vec3 brick = floor(voxel / 32.0);  // Each brick is 32x32x32 voxels
+    return brick;
+}
+
+// ========================================
+// CHANNEL-SPECIFIC ACCESSORS
+// ========================================
+
+// Get channel offset in page table.
+// get the vector for the specified channel slot in the pagetable
+// Different channels are stored at different Z-offsets in the page table
+//
+// Parameters:
+//   index - int: Channel index (0-6)
+//
+// Returns:
+//   uvec3: 3D offset coordinates for the channel in the page table
+uvec3 getChannelOffset(int index) {
+    if (index == 0) return uvec3(0, 0, 1);
+    if (index == 1) return uvec3(0, 1, 0);
+    if (index == 2) return uvec3(0, 1, 1);
+    if (index == 3) return uvec3(1, 0, 0);
+    if (index == 4) return uvec3(1, 0, 1);
+    if (index == 5) return uvec3(1, 1, 0);
+    if (index == 6) return uvec3(1, 1, 1);
+    return uvec3(0, 0, 0);
+}
+
+// Get color for a channel.
+// get the color per color channel
+//
+// Parameters:
+//   index - int: Channel index (0-6)
+//
+// Returns:
+//   vec3: RGB color values for the specified channel
+vec3 getChannelColor(int index) {
+    if (index == 0) return color0.xyz;
+    if (index == 1) return color1.xyz;
+    if (index == 2) return color2.xyz;
+    if (index == 3) return color3.xyz;
+    if (index == 4) return color4.xyz;
+    if (index == 5) return color5.xyz;
+    if (index == 6) return color6.xyz;
+    return vec3(0.0, 0.0, 0.0);
+}
+
+// Get opacity for a channel
+// get the opacity (used as visibility) per color channel
+//
+// Parameters:
+//   index - int: Channel index (0-6)
+//
+// Returns:
+//   float: Opacity value (0.0-1.0) for the specified channel
+float getChannelOpacity(int index) {
+    if (index == 0) return color0.w;
+    if (index == 1) return color1.w;
+    if (index == 2) return color2.w;
+    if (index == 3) return color3.w;
+    if (index == 4) return color4.w;
+    if (index == 5) return color5.w;
+    if (index == 6) return color6.w;
+    return 0.0;
+}
+
+// ========================================
+// PAGE TABLE DECODING
+// ========================================
+
+/**
+ * retrieving the brick based on:
+ * location   -- normalized coordinate
+ * targetRes  -- target resolution
+ * channel    -- physical channel slot
+ * rnd        -- random number for jittering requests 
+ * query      -- whether to query the brick (we dont query for interblock interpolation)
+ * colorIndex -- color index for querying the min max values
+ * 
+ * returns:
+ * w >= 0 -- xyz contains brick cache coordinate, w stores resolution
+ * w == -1 -- not resident in any resolution, should be treated as empty
+ * w == -2 -- empty (with respect to current transfer function)
+ * w == -3 -- constant full (with respect to current transfer function)
+ * w == -4 -- constant value within range, x stores that value
+ *
+ * bit layout:
+ * [1] 31    | 0 — flag resident
+ * [1] 30    | 1 — flag init
+ * [7] 23…29 | 2…8 — min → 128
+ * [7] 16…22 | 9…15 — max → 128
+ * [6] 10…15 | 16…21 — x offset in brick cache → max 64
+ * [6] 4…9   | 22…27 — y offset in brick cache →  max 64
+ * [4] 0…3   | 28…31 — z offset in brick cache → max 16, effectively 4
+*/
+
+/*
+Page table entry format (32 bits):
+[31]    | 0 — flag resident (1=loaded in cache)
+[30]    | 1 — flag init (1=initialized)
+[29:23] | 2…8 — min value (7 bits) → 128 levels
+[22:16] | 9…15 — max value (7 bits) → 128 levels  
+[15:10] | 16…21 — x offset in brick cache (6 bits) → 64 bricks
+[9:4]   | 22…27 — y offset in brick cache (6 bits) → 64 bricks
+[3:0]   | 28…31 — z offset in brick cache (4 bits) → 16 bricks
+*/
+
+// Query page table to find brick location and status
+// Searches for a brick at the specified location across multiple resolution levels
+// and returns its cache coordinates and status information
+//
+// Parameters:
+//   location - vec3: Normalized coordinates (0-1) within the volume
+//   targetRes - int: Target resolution level to start searching from
+//   channel - int: Channel index (0-6) to query
+//   rnd - float: Random value (0-1) used for brick loading request selection
+//   query - bool: Whether to allow brick loading requests (true) or just query (false)
+//   colorIndex - int
+//
+// Returns:
+//   ivec4: (x_offset, y_offset, z_offset, status) where:
+//     - x_offset, y_offset, z_offset: Brick cache coordinates if found
+//     - status: Resolution level (>=0) if found, or status code:
+//       * -1: Not found at any resolution level
+//       * -2: Empty brick (all values below threshold)
+//       * -3: Constant full brick (all values above threshold)
+//       * -4: Constant value brick (uniform value)
+// add maxres here
+ivec4 getBrickLocation(vec3 location, int targetRes, int channel, float rnd, bool query, int colorIndex) {
+
+    // min max for current color 
+    vec2 clim = getClim(colorIndex);
+
+    // resolution ranges, TODO: connect this back to color
+    int channelMin = getRes(channel).x;
+    int channelMax = getRes(channel).y;
+
+    // Clamp resolution to channel's available range
+    int currentRes = clamp(targetRes, channelMin, channelMax);
+    currentRes = clamp(currentRes, resGlobal.x, resGlobal.y);
+    int lowestRes = clamp(resGlobal.y, channelMin, channelMax);
+
+    // Determine if this channel should request brick loading.
+    // request the current channel based on probability
+    bool requestChannel = false;
+    if (int(floor(rnd * float(maxChannels))) == colorIndex) {
+        requestChannel = true;
+    }
+
+    // Try progressively lower resolutions until we find data.
+    // loop through resolutions
+    while (currentRes <= lowestRes) {
+
+        // Calculate page table coordinates for this brick
+        uvec3 anchorPoint = getAnchorPoint(currentRes);
+        vec3 brickLocation = getBrickFromNormalized(location, currentRes);
+        uvec3 channelOffset = getChannelOffset(channel);
+        vec3 coordinate = floor(vec3(anchorPoint * channelOffset)) + brickLocation;
+        
+        // Special handling for resolution 0 (highest detail)
+        if (currentRes == 0) {
+            int zExtent = int(ceil(float(voxelExtents.z) / 32.0));
+            coordinate = vec3(anchorPoint) + vec3(0.0, 0.0, zExtent * channel) + brickLocation;
+        }
+
+        // Query the page table.
+        // get PT entry
+        uint ptEntry = texelFetch(pageTableTex, ivec3(coordinate), 0).r;
+
+        // Check if brick is initialized.
+        // check if the PT entry is initialized
+        uint isInit = (ptEntry >> 30u) & 1u;
+        if (isInit == 0u) { 
+            currentRes++; 
+            // Request brick loading if needed
+            if (requestChannel == true && (gRequest.a + gRequest.b + gRequest.g + gRequest.r == 0.0) && query == true) {
+                gRequest = packPTCoordToRGBA8(uvec3(coordinate));
+            }
+            continue;
+        }
+        
+        // Extract min/max values from page table entry.
+        // get the min max values of the brick
+        uint umin = ((ptEntry >> 23u) & 0x7Fu);
+        uint umax = ((ptEntry >> 16u) & 0x7Fu);
+        float min = float(int(umin)) / 127.0;
+        float max = float(int(umax)) / 127.0;
+        
+        // Check if brick is empty (all values below threshold).
+        // exit early if brick is constant
+        if (float(max) <= clim.x) {
+            return ivec4(0,0,0,-2);
+            // EMPTY
+        } else if (float(min) >= clim.y) {
+            return ivec4(0,0,0,-3);  // CONSTANT FULL
+        } else if ((umax - umin) < 2u) {
+            return ivec4(min,0,0,-4);  // CONSTANT OTHER VALUE
+        }
+        
+        // Check if brick is resident in cache.
+        // return brick cache location if resident
+        // continue to next resolution if not resident
+        uint isResident = (ptEntry >> 31u) & 1u;
+        if (isResident == 0u) {
+            currentRes++;
+            // Request brick loading if needed
+            if (requestChannel == true && (gRequest.a + gRequest.b + gRequest.g + gRequest.r == 0.0) && query == true) {
+                gRequest = packPTCoordToRGBA8(uvec3(coordinate));
+            }
+            continue;
+        } else {
+            // Extract brick cache coordinates
+            uint xBrickCache = (ptEntry >> 10u) & 0x3Fu;
+            uint yBrickCache = (ptEntry >> 4u) & 0x3Fu;
+            uint zBrickCache = ptEntry & 0xFu;
+            uvec3 brickCacheCoord = uvec3(xBrickCache, yBrickCache, zBrickCache);
+
+            return ivec4(brickCacheCoord, currentRes);
+        }
+    }
+
+    // not resident in any resolution, should be treated as empty
+    return ivec4(0,0,0,-1);  // Not found
+}
+
+// Request brick loading for a specific location and resolution.
+// Initiates a request to load a brick from disk into the brick cache.
+// set the brick request for the specified slot channel
+//
+// Parameters:
+//   location - vec3: Normalized world space coordinates (0.0 to 1.0) where the brick is needed
+//   targetRes - int: Target resolution level (0-9, where 0 is highest resolution)
+//   channel - int: Channel index (0-6) for multi-channel datasets
+//   rnd - float: Random value between 0.0 and 1.0 used for load balancing across channels
+//
+// Returns:
+//   void: No return value, but sets gRequest output variable if conditions are met
+void setBrickRequest(vec3 location, int targetRes, int channel, float rnd) {
+    uvec3 anchorPoint = getAnchorPoint(targetRes);
+    vec3 brickLocation = getBrickFromNormalized(location, targetRes);
+    uvec3 channelOffset = getChannelOffset(channel);
+    vec3 coordinate = floor(vec3(anchorPoint * channelOffset)) + brickLocation;
+    
+    // Special handling for resolution 0
+    if (targetRes == 0) {
+        int zExtent = int(ceil(float(voxelExtents.z) / 32.0));
+        coordinate = vec3(anchorPoint) + vec3(0.0, 0.0, zExtent * channel) + brickLocation;
+    }
+    
+    // Pack coordinates and set request
+    if (int(floor(rnd * float(maxChannels))) == channel) {
+        gRequest = packPTCoordToRGBA8(uvec3(coordinate));
+    }
+}
+
+// Track brick usage for cache management.
+// Records which brick in the cache is being accessed for LRU (Least Recently Used) eviction.
+// set the usage for the specified brick
+//
+// Parameters:
+//   brickCacheOffset - ivec3: 3D coordinates of the brick within the brick cache texture
+//   t_hit_min_os - float: Ray entry time in object space (start of ray-volume intersection)
+//   t_hit_max_os - float: Ray exit time in object space (end of ray-volume intersection)
+//   t_os - float: Current sampling position along the ray in object space
+//   rnd - float: Random value between 0.0 and 1.0 used for probabilistic usage tracking
+//
+// Returns:
+//   void: No return value, but sets gUsage output variable to track cache access patterns
+void setUsage(ivec3 brickCacheOffset, float t_hit_min_os, float t_hit_max_os, float t_os, float rnd) {
+    float normalized_t_os = (t_os - t_hit_min_os) / (t_hit_max_os - t_hit_min_os); // Normalize to 0-1
+    if (normalized_t_os <= rnd || gUsage == vec4(0.0, 0.0, 0.0, 0.0)) {
+        gUsage = vec4(vec3(brickCacheOffset) / 255.0, 1.0);
+    }
+}
+
+// ========================================
+// UTILITY FUNCTIONS
+// ========================================
+
+// Get maximum component of a 3D vector.
+// get the max value of a vec3
+//
+// Parameters:
+//   v - vec3: Input 3D vector
+//
+// Returns:
+//   float: The maximum value among the x, y, and z components
+float vec3_max(vec3 v) {
+    return max(v.x, max(v.y, v.z));
+}
+
+// Get minimum component of a 3D vector.
+// get the min value of a vec3
+//
+// Parameters:
+//   v - vec3: Input 3D vector
+//
+// Returns:
+//   float: The minimum value among the x, y, and z components
+float vec3_min(vec3 v) {
+    return min(v.x, min(v.y, v.z));
+}
+
+// Calculate level-of-detail based on distance.
+// Uses logarithmic scaling to determine appropriate resolution level.
+// get the LOD based on the distance to the camera
+//
+// Parameters:
+//   distance - float: Distance from camera to sampling point
+//   highestRes - int: Highest available resolution level (typically 0)
+//   lowestRes - int: Lowest available resolution level (typically 9)
+//   lodFactor - float: Scaling factor that controls LOD sensitivity
+//
+// Returns:
+//   int: Resolution level index (0-9) where 0 is highest resolution
+int getLOD(float distance, int highestRes, int lowestRes, float lodFactor) {
+    int lod = int(log2(distance * lodFactor));
+    return clamp(lod, highestRes, lowestRes);
+}
+
+// Calculate step size for ray marching at a given resolution.
+// Determines optimal sampling step size based on voxel dimensions and ray direction.
+// get the voxel step in object space
+//
+// Parameters:
+//   res - int: Resolution level index (0-9, where 0 is highest resolution)
+//   osDir - vec3: Ray direction vector in object space (should be normalized)
+//
+// Returns:
+//   float: Optimal step size in object space units for stable ray marching
+float voxelStepOS(int res, vec3 osDir) {
+    vec3 voxelSize = getScale(res) / vec3(voxelExtents);
+    vec3 dt_vec = voxelSize / abs(osDir);
+    return min(dt_vec.x, min(dt_vec.y, dt_vec.z));
+}
+
+// ========================================
+// INTERPOLATION FUNCTIONS
+// ========================================
+
+// Linear interpolation between two values.
+// Performs smooth interpolation between two scalar values.
+//
+// Parameters:
+//   v0 - float: First value to interpolate from
+//   v1 - float: Second value to interpolate to
+//   fx - float: Interpolation factor between 0.0 and 1.0
+//
+// Returns:
+//   float: Interpolated value between v0 and v1 based on fx
+float lerp(float v0, float v1, float fx) {
+    return mix(v0, v1, fx); // (1-fx)·v0 + fx·v1
+}
+
+// Bilinear interpolation between four values
+// Performs 2D interpolation using four corner values arranged in a square
+//
+// Parameters:
+//   v00 - float: Bottom-left corner value
+//   v10 - float: Bottom-right corner value
+//   v01 - float: Top-left corner value
+//   v11 - float: Top-right corner value
+//   f - vec2: 2D interpolation factors (x, y) between 0.0 and 1.0
+//
+// Returns:
+//   float: Interpolated value from the four corner values
+float bilerp(float v00, float v10, float v01, float v11, vec2 f) {
+    float c0 = mix(v00, v10, f.x); // Interpolate in X on bottom row
+    float c1 = mix(v01, v11, f.x); // Interpolate in X on top row
+    return mix(c0, c1, f.y); // Now interpolate those in Y
+}
+
+// Trilinear interpolation between eight values
+// Performs 3D interpolation using eight corner values arranged in a cube
+//
+// Parameters:
+//   v000 - float: Bottom-left-back corner value
+//   v100 - float: Bottom-right-back corner value
+//   v010 - float: Bottom-left-front corner value
+//   v110 - float: Bottom-right-front corner value
+//   v001 - float: Top-left-back corner value
+//   v101 - float: Top-right-back corner value
+//   v011 - float: Top-left-front corner value
+//   v111 - float: Top-right-front corner value
+//   f - vec3: 3D interpolation factors (x, y, z) between 0.0 and 1.0
+//
+// Returns:
+//   float: Interpolated value from the eight corner values
+float trilerp(
+    float v000, float v100, float v010, float v110,
+    float v001, float v101, float v011, float v111,
+    vec3 f) { // f = fract(coord)
+    // Interpolate along X for each of the four bottom-face voxels
+    float c00 = mix(v000, v100, f.x);
+    float c10 = mix(v010, v110, f.x);
+    float c01 = mix(v001, v101, f.x);
+    float c11 = mix(v011, v111, f.x);
+
+    // Interpolate those along Y
+    float c0 = mix(c00, c10, f.y);
+    float c1 = mix(c01, c11, f.y);
+
+    // Final interpolation along Z
+    return mix(c0, c1, f.z);
+}
+
+// ========================================
+// BRICK CACHE SAMPLING
+// ========================================
+
+// Sample a value from the brick cache texture.
+// Converts brick coordinates and voxel position to texture coordinates for sampling.
+// sample the brick cache based on the brick cache coordinate and the in-brick coordinate
+//
+// Parameters:
+//   brickCacheCoord - vec3: 3D coordinates of the brick within the brick cache
+//   voxelInBrick - vec3: 3D coordinates of the voxel within the brick (0-31 in each dimension)
+//
+// Returns:
+//   float: Sampled voxel value from the brick cache texture (typically normalized 0.0-1.0)
+float sampleBrick(vec3 brickCacheCoord, vec3 voxelInBrick) {
+    vec3 brickCacheCoordNormalized = vec3(
+        (float(brickCacheCoord.x) * BRICK_SIZE + float(voxelInBrick.x)) / BRICK_CACHE_SIZE_X,
+        (float(brickCacheCoord.y) * BRICK_SIZE + float(voxelInBrick.y)) / BRICK_CACHE_SIZE_Y,
+        (float(brickCacheCoord.z) * BRICK_SIZE + float(voxelInBrick.z)) / BRICK_CACHE_SIZE_Z
+    );
+    return texture(brickCacheTex, brickCacheCoordNormalized).r;
+}
+
+/**
+ * main renderloop
+*/
+void main(void) {
+
+    // ========================================
+    // INITIALIZATION
+    // ========================================
+    
+    // Initialize all render targets (multiple output textures)
+    gRequest = vec4(0,0,0,0);  // Brick loading requests
+    gUsage = vec4(0,0,0,0);    // Brick usage tracking
+    gColor = vec4(0.0, 0.0, 0.0, 0.0);  // Final color output
+
+    // out color sums up our accumulated value before writing it into the gColor buffer
+    vec4 outColor = vec4(0.0, 0.0, 0.0, 0.0);  // Accumulated color
+
+    // Generate random number for jittered sampling (reduces artifacts)
+    float rnd = random();
+
+    // Get the lowest available resolution level
+    int lowestDataRes = getLowestRes();
+
+    // ========================================
+    // RAY-VOLUME INTERSECTION
+    // ========================================
+    
+    // Normalize the view ray direction
+    vec3 ws_rayDir = normalize(rayDirUnnorm);
+    
+    // Calculate intersection with volume bounding box
+    // Returns (entry_time, exit_time) for the ray-box intersection
+    vec2 t_hit = intersect_hit(cameraCorrected, ws_rayDir);
+    if (t_hit.x >= t_hit.y) { discard; }  // Ray misses volume entirely
+    
+    t_hit.x = max(t_hit.x, 0.0); // Clamp entry to 0 (no negative distances)
+    float t = t_hit.x;
+    
+    // Calculate distance from camera for LOD selection
+    float distance = abs((cameraCorrected / boxSize).z + (ws_rayDir / boxSize).z * t );
+
+    // ========================================
+    // COORDINATE SPACE CONVERSION
+    // ========================================
+    
+    // Convert from world space to object space (normalized 0-1 coordinates)
+    float ws2os = length(ws_rayDir / boxSize);  // Scale factor for conversion
+    float t_hit_min_os = t_hit.x * ws2os;       // Entry point in object space
+    float t_hit_max_os = t_hit.y * ws2os;       // Exit point in object space
+    float t_os = t_hit_min_os;                  // Current position in object space
+
+    // Calculate effective LOD factor based on volume size.
+    // voxel edge is the max extent of the volume
+    float voxelEdge = float(max(voxelExtents.x, max(voxelExtents.y, voxelExtents.z)));
+
+    // calculate LOD factor based on the voxel edge
+    float lodFactorEffective = lodFactor * voxelEdge / 256.0;
+
+    // ========================================
+    // RESOLUTION AND SAMPLING SETUP
+    // ========================================
+    
+    // Determine target resolution based on distance (LOD)
+    int targetRes = getLOD(t, 0, 9, lodFactorEffective);
+    
+    // Set adaptive stepping resolution
+    int stepResAdaptive = renderRes;
+    int stepResEffective = clamp(stepResAdaptive, 0, lowestDataRes);
+
+    // Convert ray to object space coordinates
+    vec3 os_rayDir = normalize(ws_rayDir / boxSize);
+    vec3 os_rayOrigin = cameraCorrected / boxSize + vec3(0.5);
+    
+    // Calculate step size based on current resolution
+    float dt = voxelStepOS(stepResEffective, os_rayDir);
+
+    // ========================================
+    // SAMPLING POSITION INITIALIZATION
+    // ========================================
+    
+    // Convert to normalized sampling coordinates (0-1 range)
+    vec3 p = cameraCorrected + t_hit.x * ws_rayDir;
+    p = p / boxSize + vec3(0.5); // Transform to 0-1 range
+    
+    // Calculate step vector in normalized space
+    vec3 dp = (os_rayDir * dt);
+    
+    // Apply jittered sampling to reduce artifacts
+    p += dp * (rnd);
+    // Avoid boundary issues
+    p = clamp(p, 0.0 + 0.0000028, 1.0 - 0.0000028);
+
+    // ========================================
+    // RENDERING VARIABLES
+    // ========================================
+    
+    // Color accumulation for front-to-back compositing.
+    // color accumulation variables, are calculated per 'slice'
+    vec3 rgbCombo = vec3(0.0);
+    float total = 0.0;
+
+    // For alpha blending.
+    // alpha accumulation variable runs globally
+    float alphaMultiplicator = 1.0;
+
+    // Request tracking (for brick loading).
+    // if we have a request for a brick which not visible in lower
+    // resolutions, we can overwrite it once
+    bool overWrittenRequest = false;
+
+    // Current state tracking
+    vec3 currentTargetResPTCoord = vec3(0,0,0);
+    int currentLOD = targetRes;
+
+    // ========================================
+    // CHANNEL-SPECIFIC CONSTANTS
+    // ========================================
+    
+    // Pre-compute channel properties for efficiency.
+    // constants per color channel
+    vec3 [] c_color = vec3[7](getChannelColor(0), getChannelColor(1), getChannelColor(2), getChannelColor(3), getChannelColor(4), getChannelColor(5), getChannelColor(6));
+    float [] c_opacity = float[7](getChannelOpacity(0), getChannelOpacity(1), getChannelOpacity(2), getChannelOpacity(3), getChannelOpacity(4), getChannelOpacity(5), getChannelOpacity(6));
+    // resolution ranges (currently) per color channel
+    // TODO: figure out how to hook it up with frontend
+    int [] c_res_min = int[7](getRes(0).x, getRes(1).x, getRes(2).x, getRes(3).x, getRes(4).x, getRes(5).x, getRes(6).x);
+    int [] c_res_max = int[7](getRes(0).y, getRes(1).y, getRes(2).y, getRes(3).y, getRes(4).y, getRes(5).y, getRes(6).y);
+    vec3 [] res_color = vec3[10](
+        vec3(1.0, 0.0, 0.0), 
+        vec3(0.0, 0.0, 1.0), 
+        vec3(0.0, 1.0, 0.0), 
+        vec3(1.0, 0.0, 1.0), 
+        vec3(0.0, 1.0, 1.0),
+        vec3(1.0, 1.0, 0.0),
+        vec3(1.0, 0.5, 0.5), 
+        vec3(0.5, 0.5, 1.0), 
+        vec3(0.5, 1.0, 0.5), 
+        vec3(0.5, 0.5, 0.5)
+    );
+
+    // ========================================
+    // PER-CHANNEL STATE ARRAYS
+    // ========================================
+    
+    // Current state for each channel.
+    // current state variables per color channel
+    
+    // current resolution
+    int []   c_res_current =             int[7](0,0,0,0,0,0,0);
+    // current value
+    float [] c_val_current =             float[7](0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0);
+    // current brick cache coordinate
+    vec3 []  c_brickCacheCoord_current = vec3[7](vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0));
+    // current voxel in current resolution
+    vec3 []  c_voxel_current =           vec3[7](vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0));
+    // current pagetable coordinate
+    vec3 []  c_ptCoord_current =         vec3[7](vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0));
+    // current render mode -- 0: empty (add 0), 1: constant (add current val), 2: voxel (query new voxel)
+    // upon change of PT we re-query anyways
+    int []   c_renderMode_current =      int[7](-1, -1, -1, -1, -1, -1, -1);
+    
+    // Adjacent brick caching for interpolation
+    // current pagetable coordinate of the adjacent bricks in X, Y, Z or diagonal direction
+    vec3 []  c_PT_X_adjacent =           vec3[7](vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0));
+    vec3 []  c_PT_Y_adjacent =           vec3[7](vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0));
+    vec3 []  c_PT_Z_adjacent =           vec3[7](vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0));
+    vec3 []  c_PT_XYZ_adjacent =         vec3[7](vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0));
+    // corresponding brick coordinates of the adjacent bricks in X, Y, Z or diagonal direction
+    vec4 []  c_brick_X_adjacent =        vec4[7](vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0));
+    vec4 []  c_brick_Y_adjacent =        vec4[7](vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0));
+    vec4 []  c_brick_Z_adjacent =        vec4[7](vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0));
+    vec4 []  c_brick_XYZ_adjacent =      vec4[7](vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0), vec4(-1.0));
+
+    // Min/max tracking for MIP/MinIP rendering.
+    // min and max values of the current color
+    // used for minimum/maximum intensity projection
+    float [] c_minVal = float[7](-1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0);
+    float [] c_maxVal = float[7](0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0);
+
+    // Per-resolution coordinate tracking
+    vec3 [] r_ptCoord = vec3[10](vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0));
+    vec3 [] r_voxel = vec3[10](vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0));
+    vec3 [] r_prevPTCoord = vec3[10](vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0));
+    vec3 [] r_prevVoxel = vec3[10](vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0), vec3(-1.0));
+
+    // resolution changed flag
+    bool resolutionChanged = false;
+    // number of repetitions (for debugging purposes)
+    int reps = 0;
+
+    // ========================================
+    // MAIN RAY-MARCHING LOOP
+    // ========================================
+    
+    // while we are 'in' the volume.
+    // Continue marching until we exit the volume or reach maximum opacity.
+    while (t_os < t_hit_max_os && t_os >= t_hit_min_os
+        && vec3_max(p) < 1.0 && vec3_min(p) >= 0.0
+    ) {
+
+        // Reset per-sample accumulation.
+        // initialize slice values
+        vec3 rgbCombo = vec3(0.0);
+        float total   = 0.0;
+
+        // Update target resolution based on current distance (with jitter).
+        // calculate target resolution based on distance and lod factor
+        targetRes = getLOD(t, 0, 9, lodFactorEffective * (0.999 + 0.002 * rnd));
+
+        // ========================================
+        // RESOLUTION CHANGE HANDLING
+        // ========================================
+        
+        // if target resolution changed, update the current resolution and stepsize
+        if (targetRes != currentLOD) {
+            currentLOD = targetRes;
+            stepResAdaptive++;
+            stepResEffective = clamp(stepResAdaptive, 0, lowestDataRes);
+            
+            // Adjust sampling position for new resolution
+            p -= dp * rnd;
+            dt = voxelStepOS(stepResEffective, os_rayDir);
+            dp = os_rayDir * dt;
+            p += dp * rnd;
+            resolutionChanged = true;
+
+            // Check bounds after resolution change
+            if (p.x < 0.0 || p.x >= 1.0 || p.y < 0.0 || p.y >= 1.0 || p.z < 0.0 || p.z >= 1.0) {
+                break;
+            }
+        } else {
+            resolutionChanged = false;
+        }
+
+        // ========================================
+        // UPDATE COORDINATES FOR ALL RESOLUTIONS
+        // ========================================
+        
+        // Calculate page table coordinates and voxel positions for all resolution levels
+        for (int r = 0; r < 10; r++) {
+            r_prevPTCoord[r] = r_ptCoord[r];
+            r_prevVoxel[r] = r_voxel[r];
+            r_ptCoord[r] = getBrickFromNormalized(p, r);
+            r_voxel[r] = getVoxelFromNormalized(p, r);
+        }
+
+        // ========================================
+        // RENDER MODE DEFINITIONS
+        // ========================================
+        // 0: empty brick (no data)
+        // 1: constant brick (uniform value)
+        // 2: voxel brick (variable data)
+
+        // initialize the per channel slice values
+        vec3 sliceColor = vec3(0.0);
+        float sliceAlpha = 0.0;
+
+        // ========================================
+        // MULTI-CHANNEL SAMPLING
+        // ========================================
+        
+        // Process each channel independently.
+        // iterate over up to 7 channels by color
+        for (int c = 0; c < 7; c++) {
+            // Skip channels with zero opacity.
+            // skip if opacity is 0 or if color is not mapped to a physical slot
+            if (c_opacity[c] <= 0.000001) {
+                continue;
+            } else if (channelMapping[c] == -1) {
+                continue;
+            }
+
+            // physical slot in pagetable
+            int slot = channelMapping[c];
+
+            // keep track of status
+            bool newBrick = false;
+            bool newVoxel = false;
+            // best possible resolution
+            int bestRes = clamp(targetRes, c_res_min[c], c_res_max[c]);
+
+            // Check if we need to load a new brick at a better resolution.
+            // check if any new better resolution could be available, if so, we need to re-query the brick
+            bool betterResChanged = false;
+            for (int r = bestRes; r <= c_res_current[c]; r++ ) {
+                if (r_ptCoord[r] != r_prevPTCoord[r]) {
+                    betterResChanged = true;
+                    break;
+                }
+            }
+
+            // Determine if we need to load new brick data.
+            // check if we need to re-query the brick / voxel or reuse past 'val'
+            if (r_ptCoord[bestRes] != r_prevPTCoord[bestRes]
+                || c_renderMode_current[c] == -1
+                || resolutionChanged == true
+                || betterResChanged
+                ) {
+                newBrick = true;
+                newVoxel = true;
+            } else if (c_renderMode_current[c] == 2) {
+                newVoxel = true;
+            } else if (c_renderMode_current[c] == 0) {
+                continue;  // Skip empty bricks
+            }
+
+            // ========================================
+            // BRICK LOADING AND CACHING
+            // ========================================
+            
+            // check if a new brick is available in the best possible resolution
+            if (newBrick) {
+                // Query page table for brick location and status
+                ivec4 brickCacheInfo = getBrickLocation(p, bestRes, slot, rnd, true, c);
+                // check information about the newly queried brick
+                // if the res is not at best res, possibly the same as previous brick
+                if (brickCacheInfo.w == -1 || brickCacheInfo.w == -2) {
+                    // Empty brick - no data available.
+                    // we can skip the rest of the loop
+                    c_val_current[c] = 0.0;
+                    c_renderMode_current[c] = 0;
+                    c_minVal[c] = 0.0;
+                    continue;
+                } else if (brickCacheInfo.w == -3) {
+                    // Solid brick - constant maximum value.
+                    // we set the value and do not need to query a voxel
+                    c_val_current[c] = 1.0;
+                    c_renderMode_current[c] = 1;
+                    c_maxVal[c] = 1.0;
+                    newVoxel = false;
+                } else if (brickCacheInfo.w == -4) {
+                    // Constant brick - uniform value.
+                    // static value -- we set the value and do not need to query a voxel
+                    float val = float(brickCacheInfo.x);
+                    c_val_current[c] = max(0.0, (val - getClim(c).x) / (getClim(c).y - getClim(c).x));
+                    c_renderMode_current[c] = 1;
+                    newVoxel = false;
+                } else if (brickCacheInfo.w >= 0) {
+                    // Voxel brick - variable data, load from cache.
+                    // new brick -- we set the coordinate and resolution and need to query a voxel
+                    c_res_current[c] = brickCacheInfo.w;
+                    c_ptCoord_current[c] = r_ptCoord[c_res_current[c]];
+                    c_brickCacheCoord_current[c] = vec3(brickCacheInfo.xyz);
+                    c_renderMode_current[c] = 2;
+                    newVoxel = true;
+                    
+                    // Track brick usage for cache management.
+                    // we set the usage of the brick based on the channel and the relative distance into the cube
+                    if (int(floor(rnd * float(maxChannels))) == c) {
+                        setUsage(brickCacheInfo.xyz, t_hit_min_os, t_hit_max_os, t_os, rnd);
+                    }
+                }
+            }
+            
+            // ========================================
+            // VOXEL SAMPLING WITH INTERPOLATION
+            // ========================================
+            
+            // we need to query a new voxel e.g. sample the brick cache
+            if (newVoxel) {
+                c_voxel_current[c] = r_voxel[c_res_current[c]];
+
+                // we clamp the coordinate to be inside the brick and sample the volume
+                reps++;
+                
+                // Calculate position within the brick (0-31 range)
+                vec3 voxelInBrick = mod(c_voxel_current[c], 32.0);
+                vec3 clampedVoxelInBrick = clamp(voxelInBrick, 0.5, 31.5);
+                // Sample the brick cache texture
+                float val = sampleBrick(c_brickCacheCoord_current[c].xyz, clampedVoxelInBrick);
+
+                // ========================================
+                // HIGH-QUALITY INTERPOLATION (renderRes == 0)
+                // ========================================
+                
+                // interblock interpolation
+                if (renderRes == 0) {
+                    // calculate what axis we need to interpolate
+                    
+                    // Check if we're near brick boundaries (need interpolation)
+                    bvec3 clampedMin = lessThan(voxelInBrick, clampedVoxelInBrick);
+                    bvec3 clampedMax = greaterThan(voxelInBrick, clampedVoxelInBrick);
+                    bvec3 clamped = bvec3(clampedMin.x || clampedMax.x, clampedMin.y || clampedMax.y, clampedMin.z || clampedMax.z);
+                    vec3 diff = voxelInBrick - clampedVoxelInBrick;
+                    
+                    if (any(clampedMin) || any(clampedMax)) {                       
+                        int boundaryAxes = int(clamped.x) + int(clamped.y) + int(clamped.z);
+                        float f = 0.0;
+                                                
+                        if (boundaryAxes == 1) {
+                            // Linear interpolation across one boundary
+                            vec3 otherGlobalVoxelPos = vec3(0,0,0);
+                            vec3 otherP = vec3(0,0,0);
+                            float otherVoxelVal = 0.0;
+
+                            // Determine which axis we're interpolating across
+                            if (clampedMin.x) {
+                                otherGlobalVoxelPos = c_voxel_current[c] - vec3(1.0, 0.0, 0.0);
+                                otherP = getNormalizedFromVoxel(otherGlobalVoxelPos, c_res_current[c]);
+                                f = abs(diff.x);
+                            } else if (clampedMax.x) {
+                                otherGlobalVoxelPos = c_voxel_current[c] + vec3(1.0, 0.0, 0.0);
+                                otherP = getNormalizedFromVoxel(otherGlobalVoxelPos, c_res_current[c]);
+                                f = abs(diff.x);
+                            } else if (clampedMin.y) {
+                                otherGlobalVoxelPos = c_voxel_current[c] - vec3(0.0, 1.0, 0.0);
+                                otherP = getNormalizedFromVoxel(otherGlobalVoxelPos, c_res_current[c]);
+                                f = abs(diff.y);
+                            } else if (clampedMax.y) {
+                                otherGlobalVoxelPos = c_voxel_current[c] + vec3(0.0, 1.0, 0.0);
+                                otherP = getNormalizedFromVoxel(otherGlobalVoxelPos, c_res_current[c]);
+                                f = abs(diff.y);
+                            } else if (clampedMin.z) {
+                                otherGlobalVoxelPos = c_voxel_current[c] - vec3(0.0, 0.0, 1.0);
+                                otherP = getNormalizedFromVoxel(otherGlobalVoxelPos, c_res_current[c]);
+                                f = abs(diff.z);
+                            } else if (clampedMax.z) {
+                                otherGlobalVoxelPos = c_voxel_current[c] + vec3(0.0, 0.0, 1.0); 
+                                otherP = getNormalizedFromVoxel(otherGlobalVoxelPos, c_res_current[c]);
+                                f = abs(diff.z);
+                            }
+
+                            // Sample the neighboring voxel
+                            vec3 otherPTcoord = getBrickFromNormalized(otherP, c_res_current[c]);
+                            otherPTcoord = getBrickFromVoxel(otherGlobalVoxelPos, c_res_current[c]);
+                            vec3 otherVoxelInBrick = mod(otherGlobalVoxelPos, 32.0);
+                            otherVoxelInBrick -= diff;
+
+                            // Check if neighbor is outside volume bounds
+                            if (otherP.x < 0.0 || otherP.x >= 1.0 || otherP.y < 0.0 || otherP.y >= 1.0 || otherP.z < 0.0 || otherP.z >= 1.0) {
+                                otherVoxelVal = val;
+                            } else if (otherPTcoord == c_PT_XYZ_adjacent[c].xyz && c_brick_XYZ_adjacent[c].w >= 0.0) {
+                                // Use cached adjacent brick
+                                otherVoxelVal = sampleBrick(c_brick_XYZ_adjacent[c].xyz, otherVoxelInBrick);
+                            } else {
+                                // Load new adjacent brick
+                                ivec4 otherBrickCacheInfo = ivec4(-1);
+                                if (otherPTcoord == c_PT_XYZ_adjacent[c].xyz) {
+                                    otherBrickCacheInfo = ivec4(c_brick_XYZ_adjacent[c]);
+                                } else {
+                                    otherBrickCacheInfo = getBrickLocation(otherP, c_res_current[c], slot, rnd, false, c); 
+                                }
+                                if (otherBrickCacheInfo.w == -1 || otherBrickCacheInfo.w == -2) {
+                                    otherVoxelVal = val;
+                                } else if (otherBrickCacheInfo.w == -3) {
+                                    otherVoxelVal = 1.0;
+                                } else if (otherBrickCacheInfo.w == -4) {
+                                    otherVoxelVal = float(otherBrickCacheInfo.x);
+                                } else {
+                                    // TODO: we do not recalculate the voxelInBrick based on the resolution
+                                    otherVoxelVal = sampleBrick(vec3(otherBrickCacheInfo.xyz), otherVoxelInBrick);
+                                }
+                                c_PT_XYZ_adjacent[c] = getBrickFromVoxel(otherGlobalVoxelPos, c_res_current[c]); 
+                                c_brick_XYZ_adjacent[c] = vec4(otherBrickCacheInfo);
+                            }
+                            
+                            // Perform linear interpolation
+                            float originalVal = val;
+                            val = lerp(originalVal, otherVoxelVal, f);                            
+                        } else if (boundaryAxes == 2) {
+                            // Bilinear interpolation across two boundaries
+                            vec3 offA = vec3(0.0);
+                            vec3 offB = vec3(0.0);
+                            vec2 f = vec2(0.0);
+
+                            // Determine which two axes we're interpolating across
+                            if (clamped.x && clamped.y) {
+                                offA.x = clampedMin.x ? -1.0 : 1.0;
+                                offB.y = clampedMin.y ? -1.0 : 1.0;
+                                f = vec2(abs(diff.x), abs(diff.y));
+                            } else if (clamped.x && clamped.z) {
+                                offA.x = clampedMin.x ? -1.0 : 1.0;
+                                offB.z = clampedMin.z ? -1.0 : 1.0;
+                                f = vec2(abs(diff.x), abs(diff.z));
+                            } else if (clamped.y && clamped.z) {
+                                offA.y = clampedMin.y ? -1.0 : 1.0;
+                                offB.z = clampedMin.z ? -1.0 : 1.0;
+                                f = vec2(abs(diff.y), abs(diff.z));
+                            }
+
+                            // Macro for sampling at offset positions
+                            #define SAMPLE_AT_OFFSET(OFF, DEST)                                                                     {                                                                                                           vec3 otherGlobalVoxelPos = c_voxel_current[c] + (OFF);                                                  vec3 otherP              = getNormalizedFromVoxel(                                                                                   otherGlobalVoxelPos, c_res_current[c]);                                                                                                                                            if ( any(lessThan(otherP, vec3(0.0)))                                                                     || any(greaterThanEqual(otherP, vec3(1.0))) ) {                                                           DEST = val;                                                                                         } else {                                                                                                    vec3 otherPTcoord      = getBrickFromNormalized(                                                                                    otherP, c_res_current[c]);                                                 vec3 otherVoxelInBrick = mod(otherGlobalVoxelPos, 32.0) - diff;                                                                                                                                                 bool matched = false;                                                                                   if (otherPTcoord == c_PT_X_adjacent[c].xyz && c_brick_X_adjacent[c].w >= 0.0)   {                                                                 DEST = sampleBrick(c_brick_X_adjacent[c].xyz, otherVoxelInBrick);                                           matched = true;                                                                                     } else if (otherPTcoord == c_PT_Y_adjacent[c].xyz && c_brick_Y_adjacent[c].w >= 0.0) {                                                            DEST = sampleBrick(c_brick_Y_adjacent[c].xyz, otherVoxelInBrick);                                           matched = true;                                                                                     } else if (otherPTcoord == c_PT_Z_adjacent[c].xyz && c_brick_Z_adjacent[c].w >= 0.0) {                                                            DEST = sampleBrick(c_brick_Z_adjacent[c].xyz, otherVoxelInBrick);                                           matched = true;                                                                                     } else if (otherPTcoord == c_PT_XYZ_adjacent[c].xyz && c_brick_XYZ_adjacent[c].w >= 0.0) {                                                          DEST = sampleBrick(c_brick_XYZ_adjacent[c].xyz, otherVoxelInBrick);                                         matched = true;                                                                                     }                                                 ivec4 info = ivec4(-1);                                     if (otherPTcoord == c_PT_X_adjacent[c].xyz) { info = ivec4(c_brick_X_adjacent[c]); }                                     else if (otherPTcoord == c_PT_Y_adjacent[c].xyz) { info = ivec4(c_brick_Y_adjacent[c]); }                                     else if (otherPTcoord == c_PT_Z_adjacent[c].xyz) { info = ivec4(c_brick_Z_adjacent[c]); }                                     else if (otherPTcoord == c_PT_XYZ_adjacent[c].xyz) { info = ivec4(c_brick_XYZ_adjacent[c]); }                                     else { info = getBrickLocation(otherP, c_res_current[c], slot, rnd, false, c); }                                                                         if (!matched) {                                                                                             if (info.w == -1 || info.w == -2) {                                                                        DEST = val;                                                                                         } else if (info.w == -3) {                                                                                  DEST = 1.0;                                                                                         } else if (info.w == -4) {                                                                                  DEST = float(info.x);                                                                               } else {                                                                                                    DEST = sampleBrick(vec3(info.xyz), otherVoxelInBrick);                                              }                                                                                                       if (abs((OFF).x) > 0.5 && abs((OFF).y) < 0.5 && abs((OFF).z) < 0.5) {                                                         c_PT_X_adjacent[c]  = otherPTcoord;                                                                                 c_brick_X_adjacent[c] = vec4(info);                                                                         } else if (abs((OFF).y) > 0.5 && abs((OFF).x) < 0.5 && abs((OFF).z) < 0.5) {                                                  c_PT_Y_adjacent[c]  = otherPTcoord;                                                                                 c_brick_Y_adjacent[c] = vec4(info);                                                                         } else if (abs((OFF).z) > 0.5 && abs((OFF).x) < 0.5 && abs((OFF).y) < 0.5) {                                                  c_PT_Z_adjacent[c]  = otherPTcoord;                                                                                 c_brick_Z_adjacent[c] = vec4(info);                                                                         } else {                                                                                                              c_PT_XYZ_adjacent[c]     = otherPTcoord;                                                                    c_brick_XYZ_adjacent[c]  = vec4(info);                                                              }                                                                                                           }                                                                                                   }                                                                                                   }
+                            
+                            // Sample the four corners for bilinear interpolation
+                            float v00 = val;
+                            float v10; float v01; float v11;
+                            SAMPLE_AT_OFFSET(offA, v10);
+                            SAMPLE_AT_OFFSET(offB, v01);
+                            SAMPLE_AT_OFFSET(offA + offB, v11);
+
+                            val = bilerp(v00, v10, v01, v11, f);
+
+                            #undef SAMPLE_AT_OFFSET
+
+                        } else if (boundaryAxes == 3) {
+                            // Trilinear interpolation across all three boundaries
+                            
+                            vec3 offA = vec3(0.0);
+                            vec3 offB = vec3(0.0);
+                            vec3 offC = vec3(0.0);
+                            vec3 f = vec3(0.0);
+
+                            offA.x = clampedMin.x ? -1.0 : 1.0;
+                            offB.y = clampedMin.y ? -1.0 : 1.0;
+                            offC.z = clampedMin.z ? -1.0 : 1.0;
+
+                            f = vec3(abs(diff.x), abs(diff.y), abs(diff.z));
+
+                            // Macro for sampling at offset positions
+                            #define SAMPLE_AT_OFFSET(OFF, DEST)                                 {                                     vec3 otherGlobalVoxelPos = c_voxel_current[c] + (OFF);                                     vec3 otherP = getNormalizedFromVoxel(otherGlobalVoxelPos, c_res_current[c]);                                     if (any(lessThan(otherP, vec3(0.0))) || any(greaterThanEqual(otherP, vec3(1.0)))) {                                         DEST = val;                                     } else {                                         vec3 otherPTcoord      = getBrickFromNormalized(otherP, c_res_current[c]);                                                     vec3 otherVoxelInBrick = mod(otherGlobalVoxelPos, 32.0) - diff;                                             if (otherPTcoord == c_PT_X_adjacent[c] && c_brick_X_adjacent[c].w >= 0.0)   {                                                                     DEST = sampleBrick(c_brick_X_adjacent[c].xyz, otherVoxelInBrick);                                           } else if (otherPTcoord == c_PT_Y_adjacent[c].xyz && c_brick_Y_adjacent[c].w >= 0.0) {                                                                DEST = sampleBrick(c_brick_Y_adjacent[c].xyz, otherVoxelInBrick);                                           } else if (otherPTcoord == c_PT_Z_adjacent[c].xyz && c_brick_Z_adjacent[c].w >= 0.0) {                                                                DEST = sampleBrick(c_brick_Z_adjacent[c].xyz, otherVoxelInBrick);                                           } else if (otherPTcoord == c_PT_XYZ_adjacent[c].xyz && c_brick_XYZ_adjacent[c].w >= 0.0) {                                                              DEST = sampleBrick(c_brick_XYZ_adjacent[c].xyz, otherVoxelInBrick);                                         } else {                                                                                                           ivec4 otherBrickCacheInfo = getBrickLocation(otherP, c_res_current[c], slot, rnd, false, c);                                             vec3 otherVoxelInBrick = mod(otherGlobalVoxelPos, 32.0) - diff;                                             if (otherBrickCacheInfo.w == -1 || otherBrickCacheInfo.w == -2) {                                                 DEST = val;                                             } else if (otherBrickCacheInfo.w == -3) {                                                 DEST = 1.0;                                             } else if (otherBrickCacheInfo.w == -4) {                                                 DEST = float(otherBrickCacheInfo.x);                                             } else {                                                 DEST = sampleBrick(vec3(otherBrickCacheInfo.xyz), otherVoxelInBrick);                                             }                                         }                                     }                                 }
+                            
+                            // Sample all eight corners for trilinear interpolation
+                            float v000 = val;
+                            float v100; float v010; float v001; float v110; float v101; float v011; float v111;
+                            SAMPLE_AT_OFFSET(offA, v100);
+                            SAMPLE_AT_OFFSET(offB, v010);
+                            SAMPLE_AT_OFFSET(offC, v001);
+                            SAMPLE_AT_OFFSET(offA + offB, v110);
+                            SAMPLE_AT_OFFSET(offA + offC, v101);
+                            SAMPLE_AT_OFFSET(offB + offC, v011);
+                            SAMPLE_AT_OFFSET(offA + offB + offC, v111);
+
+                            val = trilerp(v000, v100, v010, v001, v110, v101, v011, v111, f);
+
+                            #undef SAMPLE_AT_OFFSET
+                            
+                        }
+
+                    } else {
+                        // No boundary interpolation needed - clear adjacent brick cache.
+                        // no adjacent bricks -> reset the adjacent trackers
+                        c_PT_X_adjacent[c] = c_PT_Y_adjacent[c] = c_PT_Z_adjacent[c] = c_PT_XYZ_adjacent[c] = vec3(-1.0);
+                        c_brick_X_adjacent[c] = c_brick_Y_adjacent[c] = c_brick_Z_adjacent[c] = c_brick_XYZ_adjacent[c] = vec4(-1.0);
+                    }
+                }
+
+                // ========================================
+                // VALUE NORMALIZATION AND TRACKING
+                // ========================================
+                
+                // Normalize value to 0-1 range using channel-specific contrast limits.
+                // we normalize the (accumulated) value to the range of the color channel
+                c_val_current[c] = max(0.0, (val - getClim(c).x) / (getClim(c).y - getClim(c).x));
+
+                // Track min/max values for MIP/MinIP rendering.
+                // update the min and max values for the min/max projection
+                if (c_minVal[c] == -1.0) {
+                    c_minVal[c] = c_val_current[c];
+                } else {
+                    c_minVal[c] = min(c_minVal[c], c_val_current[c]);
+                }
+                c_maxVal[c] = max(c_maxVal[c], c_val_current[c]);
+
+            }
+
+            // ========================================
+            // BRICK REQUEST GENERATION
+            // ========================================
+            
+            // Request higher resolution bricks if we're using lower resolution than optimal.
+            // potentially overwrite brick request
+            if (!overWrittenRequest 
+                && c_res_current[c] != bestRes
+                && c_val_current[c] > 0.0
+                && c_renderMode_current[c] == 2
+                && int(floor(rnd * float(maxChannels))) == c) {
+                setBrickRequest(p, bestRes, slot, rnd);
+                overWrittenRequest = true;
+            }
+
+            // ========================================
+            // CHANNEL COMPOSITING
+            // ========================================
+            
+            // Accumulate this channel's contribution.
+            // sum up the values onto the slice values
+            total += c_val_current[c];
+            if (u_renderstyle == 3) {
+                rgbCombo += c_val_current[c] * res_color[targetRes];
+            } else if (u_renderstyle == 4) {
+                rgbCombo += c_val_current[c] * res_color[c_res_current[c]];
+            } else {
+                rgbCombo += c_val_current[c] * c_color[c];
+            }
+
+        }
+
+        // ========================================
+        // FRONT-TO-BACK COMPOSITING
+        // ========================================
+        
+        // Clamp total intensity and calculate alpha.
+        // add the calculated slice to the total color
+        total = clamp(total, 0.0, 1.0);
+        sliceAlpha = total * opacity * dt * 32.0;  // Scale by step size and brick size
+        sliceColor = rgbCombo;
+
+        // Front-to-back alpha blending
+        outColor.rgb += sliceAlpha * alphaMultiplicator * sliceColor;
+        outColor.a += sliceAlpha * alphaMultiplicator;
+        alphaMultiplicator *= (1.0 - sliceAlpha);
+
+        // Early termination for opaque regions (standard rendering only).
+        // check if we can exit early
+        if (outColor.a > 0.99 && u_renderstyle == 0) { break; }
+
+        // ========================================
+        // ADVANCE RAY POSITION
+        // ========================================
+        
+        // Move to next sample position
+        t += dt;
+        p += dp;
+        t_os += dt;
+    }
+
+    // ========================================
+    // RENDERING STYLE POST-PROCESSING
+    // ========================================
+    
+    if (u_renderstyle == 1) { 
+        // Minimum Intensity Projection (MinIP)
+        // Shows the minimum value encountered along each ray
+        outColor = vec4(0.0);
+        for (int c = 0; c < 7; c++) {
+            if (c_color[c] != vec3(0.0, 0.0, 0.0)) {
+                outColor.rgb += c_minVal[c] * c_color[c];
+                outColor.a += c_minVal[c];
+            }
+        }
+    } else if (u_renderstyle == 0) { 
+        // Maximum Intensity Projection (MIP)
+        // Shows the maximum value encountered along each ray
+        outColor = vec4(0.0);
+        for (int c = 0; c < 7; c++) {
+            if (c_color[c] != vec3(0.0, 0.0, 0.0)) {
+                outColor.rgb += c_maxVal[c] * c_color[c];
+            }
+        }
+        outColor.a = 1.0;
+    }
+
+    // ========================================
+    // FINAL OUTPUT
+    // ========================================
+    
+    // Convert from linear to sRGB color space and set all render targets
+    gColor = vec4(linear_to_srgb(outColor.r), 
+                  linear_to_srgb(outColor.g), 
+                  linear_to_srgb(outColor.b), 
+                  outColor.a);
+    
+}
+`;
+const VolumeShader = {
+  uniforms: {
+    u_size: { value: new Vector3(1, 1, 1) },
+    clim0: { value: new Vector2(0.2, 0.8) },
+    clim1: { value: new Vector2(0.2, 0.8) },
+    clim2: { value: new Vector2(0.2, 0.8) },
+    clim3: { value: new Vector2(0.2, 0.8) },
+    clim4: { value: new Vector2(0.2, 0.8) },
+    clim5: { value: new Vector2(0.2, 0.8) },
+    clim6: { value: new Vector2(0.2, 0.8) },
+    clim7: { value: new Vector2(0.2, 0.8) },
+    xClip: { value: new Vector2(0, 1e6) },
+    yClip: { value: new Vector2(0, 1e6) },
+    zClip: { value: new Vector2(0, 1e6) },
+    u_window_size: { value: new Vector2(1, 1) },
+    u_vol_scale: { value: new Vector3(1, 1, 1) },
+    // Set renderstyle to 3 or 4 for debugging modes
+    u_renderstyle: { value: 2 },
+    brickCacheTex: { type: "sampler3D", value: null },
+    pageTableTex: { type: "usampler3D", value: null },
+    color0: { value: new Vector4(0, 0, 0) },
+    color1: { value: new Vector4(0, 0, 0) },
+    color2: { value: new Vector4(0, 0, 0) },
+    color3: { value: new Vector4(0, 0, 0) },
+    color4: { value: new Vector4(0, 0, 0) },
+    color5: { value: new Vector4(0, 0, 0) },
+    color6: { value: new Vector4(0, 0, 0) },
+    channelMapping: {
+      value: [-1, -1, -1, -1, -1, -1, -1]
+    },
+    resGlobal: { value: new Vector2(0, 9) },
+    res0: { value: new Vector2(0, 9) },
+    res1: { value: new Vector2(0, 9) },
+    res2: { value: new Vector2(0, 9) },
+    res3: { value: new Vector2(0, 9) },
+    res4: { value: new Vector2(0, 9) },
+    res5: { value: new Vector2(0, 9) },
+    res6: { value: new Vector2(0, 9) },
+    maxChannels: { value: 0 },
+    lodFactor: { value: 1 },
+    near: { value: 0.1 },
+    far: { value: 1e4 },
+    opacity: { value: 1 },
+    volumeCount: { value: 0 },
+    boxSize: { value: new Vector3(1, 1, 1) },
+    renderRes: { value: 1e3 },
+    voxelExtents: { value: new Vector3(1, 1, 1) },
+    anchor0: { value: new Vector3(0, 0, 0) },
+    anchor1: { value: new Vector3(0, 0, 0) },
+    anchor2: { value: new Vector3(0, 0, 0) },
+    anchor3: { value: new Vector3(0, 0, 0) },
+    anchor4: { value: new Vector3(0, 0, 0) },
+    anchor5: { value: new Vector3(0, 0, 0) },
+    anchor6: { value: new Vector3(0, 0, 0) },
+    anchor7: { value: new Vector3(0, 0, 0) },
+    anchor8: { value: new Vector3(0, 0, 0) },
+    anchor9: { value: new Vector3(0, 0, 0) },
+    scale0: { value: new Vector3(1, 1, 1) },
+    scale1: { value: new Vector3(2, 2, 2) },
+    scale2: { value: new Vector3(4, 4, 4) },
+    scale3: { value: new Vector3(8, 8, 8) },
+    scale4: { value: new Vector3(16, 16, 16) },
+    scale5: { value: new Vector3(32, 32, 32) },
+    scale6: { value: new Vector3(64, 64, 64) },
+    scale7: { value: new Vector3(128, 128, 128) },
+    scale8: { value: new Vector3(256, 256, 256) },
+    scale9: { value: new Vector3(512, 512, 512) }
+  },
+  vertexShader: volumeVertexShader,
+  fragmentShader: volumeFragmentShader
+};
+function logWithColor$1(message) {
+  if (atLeastLogLevel(LogLevel.DEBUG)) {
+    console.warn(`%cRM: ${message}`, "background: orange; color: white; padding: 2px; border-radius: 3px;");
+  }
+}
+function normalizeValue(value, minMax) {
+  return value / minMax[1];
+}
+class VolumeRenderManager {
+  constructor() {
+    logWithColor$1("Initializing VolumeRenderManager");
+    this.uniforms = null;
+    this.shader = null;
+    this.meshScale = [1, 1, 1];
+    this.geometrySize = [1, 1, 1];
+    this.boxSize = [1, 1, 1];
+    this.zarrInit = false;
+    this.channelsVisible = [];
+    this.channelTargetC = [];
+    this.zarrStoreNumResolutions = null;
+    this.channelMaxResolutionIndex = [];
+    this.colors = [];
+    this.contrastLimits = [];
+    this.layerTransparency = 1;
+    this.xSlice = new Vector2(-1, 1e5);
+    this.ySlice = new Vector2(-1, 1e5);
+    this.zSlice = new Vector2(-1, 1e5);
+    this.originalScale = [1, 1, 1];
+    this.physicalDimensions = [1, 1, 1];
+    this.maxResolution = [1, 1, 1];
+    this.maxRange = 255;
+    this.maxRangeSet = false;
+    this.initializeShader();
+  }
+  /**
+   * Initialize shader and uniform objects
+   */
+  initializeShader() {
+    logWithColor$1("Initializing shader");
+    this.shader = VolumeShader;
+    this.uniforms = UniformsUtils.clone(this.shader.uniforms);
+  }
+  /**
+   * Extract rendering settings from coordination props
+   * @param {Object} props - Component props
+   * @returns {Object} Extracted rendering settings
+   */
+  extractRenderingSettingsFromProps(props) {
+    const { images = {}, imageLayerScopes = [], imageLayerCoordination = [{}], imageChannelScopesByLayer = {}, imageChannelCoordination = [{}], spatialRenderingMode } = props;
+    const layerScope = imageLayerScopes[0];
+    if (!layerScope) {
+      logWithColor$1("Extracting rendering settings from props - no layer scope");
+      return {
+        valid: false
+      };
+    }
+    const channelScopes = imageChannelScopesByLayer[layerScope];
+    const layerCoordination = imageLayerCoordination[0][layerScope];
+    const channelCoordination = imageChannelCoordination[0][layerScope];
+    const data = images[layerScope]?.image?.instance?.getData();
+    if (!data) {
+      logWithColor$1("Extracting rendering settings from props - no image data");
+      return {
+        valid: false
+      };
+    }
+    if (!channelCoordination[channelScopes?.[0]][CoordinationType.SPATIAL_CHANNEL_WINDOW]) {
+      logWithColor$1("Extracting rendering settings from props - no channel window set");
+      return {
+        valid: false
+      };
+    }
+    const imageWrapperInstance = images[layerScope].image.instance;
+    const is3dMode = spatialRenderingMode === "3D";
+    const isRgb = layerCoordination[CoordinationType.PHOTOMETRIC_INTERPRETATION] === "RGB";
+    const visible = layerCoordination[CoordinationType.SPATIAL_LAYER_VISIBLE];
+    const layerTransparency = layerCoordination[CoordinationType.SPATIAL_LAYER_OPACITY];
+    const colors = isRgb ? [
+      [255, 0, 0],
+      [0, 255, 0],
+      [0, 0, 255]
+    ] : channelScopes.map((cScope) => channelCoordination[cScope][CoordinationType.SPATIAL_CHANNEL_COLOR]);
+    const contrastLimits = isRgb ? [
+      [0, 255],
+      [0, 255],
+      [0, 255]
+    ] : channelScopes.map((cScope) => channelCoordination[cScope][CoordinationType.SPATIAL_CHANNEL_WINDOW] || [0, 255]);
+    if (!this.maxRangeSet) {
+      this.maxRange = Math.max(...contrastLimits.map((limit) => limit[1]));
+      this.maxRangeSet = true;
+    }
+    const channelsVisible = isRgb ? [
+      visible && true,
+      visible && true,
+      visible && true
+    ] : channelScopes.map((cScope) => visible && channelCoordination[cScope][CoordinationType.SPATIAL_CHANNEL_VISIBLE]);
+    const channelTargetC = isRgb ? [
+      visible && true,
+      visible && true,
+      visible && true
+    ] : channelScopes.map((cScope) => visible && imageWrapperInstance.getChannelIndex(channelCoordination[cScope][CoordinationType.SPATIAL_TARGET_C]));
+    const channelMaxResolutionIndex = isRgb ? [
+      visible && null,
+      visible && null,
+      visible && null
+    ] : channelScopes.map((cScope) => channelCoordination[cScope][CoordinationType.SPATIAL_MAX_RESOLUTION]);
+    let xSlice = layerCoordination[CoordinationType.SPATIAL_SLICE_X];
+    let ySlice = layerCoordination[CoordinationType.SPATIAL_SLICE_Y];
+    let zSlice = layerCoordination[CoordinationType.SPATIAL_SLICE_Z];
+    const lodFactor = layerCoordination[CoordinationType.SPATIAL_LOD_FACTOR] ?? 1;
+    xSlice = xSlice !== null ? xSlice : new Vector2(-1, 1e5);
+    ySlice = ySlice !== null ? ySlice : new Vector2(-1, 1e5);
+    zSlice = zSlice !== null ? zSlice : new Vector2(-1, 1e5);
+    const allChannels = images[layerScope].image.loaders[0].channels;
+    logWithColor$1("Extracting rendering settings from props - success");
+    return {
+      valid: true,
+      channelsVisible,
+      allChannels,
+      channelTargetC,
+      channelMaxResolutionIndex,
+      data,
+      colors,
+      contrastLimits,
+      is3dMode,
+      layerTransparency,
+      xSlice,
+      ySlice,
+      zSlice,
+      lodFactor
+    };
+  }
+  /**
+   * Update the render settings from the given props
+   * @param {Object} props - Component props
+   * @returns {boolean} True if settings were successfully updated
+   */
+  updateFromProps(props) {
+    const settings = this.extractRenderingSettingsFromProps(props);
+    if (!settings.valid) {
+      logWithColor$1("Updating from props - invalid settings");
+      return false;
+    }
+    this.channelsVisible = settings.channelsVisible;
+    this.channelTargetC = settings.channelTargetC;
+    this.channelMaxResolutionIndex = settings.channelMaxResolutionIndex;
+    this.colors = settings.colors;
+    this.contrastLimits = settings.contrastLimits;
+    this.renderingMode = settings.renderingMode;
+    this.layerTransparency = settings.layerTransparency;
+    this.xSlice = settings.xSlice;
+    this.ySlice = settings.ySlice;
+    this.zSlice = settings.zSlice;
+    this.uniforms.lodFactor.value = settings.lodFactor;
+    logWithColor$1(`lodFactor ${settings.lodFactor}`);
+    this.shader.uniforms.lodFactor.value = settings.lodFactor;
+    logWithColor$1("Updating from props - success");
+    return true;
+  }
+  /**
+   * Update the rendering based on the current volume data from the data manager
+   * @param {object} volumeDataManagerProps - Params derived from the volume data manager
+   * @returns {Object|null} Updated rendering settings or null if rendering is not possible
+   */
+  updateRendering({ zarrStoreShapes, originalScaleXYZ, physicalDimensionsXYZ, maxResolutionXYZ, boxDimensionsXYZ, normalizedScaleXYZ, bcTHREE, ptTHREE }) {
+    logWithColor$1("Updating rendering");
+    this.channelTargetC.findIndex((channel, idx) => this.channelsVisible[idx]);
+    if (!Array.isArray(zarrStoreShapes) || zarrStoreShapes.length === 0) {
+      return null;
+    }
+    const shape = zarrStoreShapes[0];
+    const dimensions = {
+      xLength: shape[4] || 1,
+      yLength: shape[3] || 1,
+      zLength: shape[2] || 1
+    };
+    const texturesList = [];
+    const colorsSave = [];
+    const contrastLimitsList = [];
+    this.channelTargetC.forEach((channel, id) => {
+      if (this.channelsVisible[id] || true) {
+        const max = this.maxRange ? this.maxRange : 255;
+        const minMax = [0, max];
+        colorsSave.push([
+          this.colors[id][0] / 255,
+          this.colors[id][1] / 255,
+          this.colors[id][2] / 255,
+          this.channelsVisible[id] ? 1 : 0
+        ]);
+        log.debug("colorsSave", colorsSave);
+        if (this.contrastLimits[id][0] === 0 && this.contrastLimits[id][1] === 255) {
+          contrastLimitsList.push([
+            normalizeValue(minMax[0], minMax),
+            normalizeValue(minMax[1], minMax)
+          ]);
+        } else {
+          contrastLimitsList.push([
+            normalizeValue(this.contrastLimits[id][0], minMax),
+            normalizeValue(this.contrastLimits[id][1], minMax)
+          ]);
+        }
+      }
+    });
+    if (!this.zarrInit) {
+      this.originalScale = originalScaleXYZ;
+      this.physicalDimensions = physicalDimensionsXYZ;
+      this.maxResolution = maxResolutionXYZ;
+      const scaledResolution = boxDimensionsXYZ;
+      this.normalizedScale = normalizedScaleXYZ;
+      this.meshScale = [
+        this.originalScale[0] / this.originalScale[0],
+        this.originalScale[1] / this.originalScale[0],
+        this.originalScale[2] / this.originalScale[0]
+      ];
+      this.geometrySize = scaledResolution;
+      this.boxSize = scaledResolution;
+      log.debug("this.boxSize", this.boxSize);
+      log.debug("this.geometrySize", this.geometrySize);
+      log.debug("this.meshScale", this.meshScale);
+      log.debug("this.originalScale", this.originalScale);
+      log.debug("this.physicalDimensions", this.physicalDimensions);
+      log.debug("this.maxResolution", this.maxResolution);
+      log.debug("scaledResolution", scaledResolution);
+      this.zarrInit = true;
+    }
+    this.updateUniforms(
+      texturesList,
+      dimensions,
+      // Pass dimensions object instead of volume
+      this.renderingMode,
+      contrastLimitsList,
+      colorsSave,
+      this.layerTransparency,
+      this.xSlice,
+      this.ySlice,
+      this.zSlice,
+      bcTHREE,
+      ptTHREE
+    );
+    return {
+      uniforms: this.uniforms,
+      shader: this.shader,
+      meshScale: this.meshScale,
+      geometrySize: this.geometrySize,
+      boxSize: this.boxSize
+    };
+  }
+  /**
+   * Update shader uniforms with current rendering values
+   * @param {Array} textures - List of 3D textures
+   * @param {Object} dimensions - Dimensions object
+   * @param {number} renderstyle - Rendering mode value
+   * @param {Array} contrastLimits - List of contrast limits for each channel
+   * @param {Array} colors - List of colors for each channel
+   * @param {number} layerTransparency - Overall transparency value
+   * @param {Vector2} xSlice - X clipping plane
+   * @param {Vector2} ySlice - Y clipping plane
+   * @param {Vector2} zSlice - Z clipping plane
+   */
+  updateUniforms(textures, dimensions, renderstyle, contrastLimits, colors, layerTransparency, xSlice, ySlice, zSlice, brickCacheTexture, pageTableTexture) {
+    logWithColor$1("Updating uniforms");
+    this.uniforms.boxSize.value.set(this.boxSize[0], this.boxSize[1], this.boxSize[2]);
+    this.uniforms.brickCacheTex.value = brickCacheTexture;
+    this.uniforms.pageTableTex.value = pageTableTexture;
+    this.uniforms.near.value = 0.1;
+    this.uniforms.far.value = 3e3;
+    this.uniforms.opacity.value = layerTransparency;
+    this.uniforms.volumeCount.value = textures.length;
+    this.uniforms.u_size.value.set(dimensions.xLength, dimensions.yLength, dimensions.zLength);
+    this.uniforms.u_window_size.value.set(0, 0);
+    this.uniforms.u_vol_scale.value.set(1 / dimensions.xLength, 1 / dimensions.yLength, 1 / dimensions.zLength * 2);
+    this.uniforms.clim0.value.set(contrastLimits.length > 0 ? contrastLimits[0][0] : null, contrastLimits.length > 0 ? contrastLimits[0][1] : null);
+    this.uniforms.clim1.value.set(contrastLimits.length > 1 ? contrastLimits[1][0] : null, contrastLimits.length > 1 ? contrastLimits[1][1] : null);
+    this.uniforms.clim2.value.set(contrastLimits.length > 2 ? contrastLimits[2][0] : null, contrastLimits.length > 2 ? contrastLimits[2][1] : null);
+    this.uniforms.clim3.value.set(contrastLimits.length > 3 ? contrastLimits[3][0] : null, contrastLimits.length > 3 ? contrastLimits[3][1] : null);
+    this.uniforms.clim4.value.set(contrastLimits.length > 4 ? contrastLimits[4][0] : null, contrastLimits.length > 4 ? contrastLimits[4][1] : null);
+    this.uniforms.clim5.value.set(contrastLimits.length > 5 ? contrastLimits[5][0] : null, contrastLimits.length > 5 ? contrastLimits[5][1] : null);
+    this.uniforms.clim6.value.set(contrastLimits.length > 6 ? contrastLimits[6][0] : null, contrastLimits.length > 6 ? contrastLimits[6][1] : null);
+    this.uniforms.xClip.value.set(xSlice[0] * (1 / this.maxResolution[0]) * this.boxSize[0], xSlice[1] * (1 / this.maxResolution[0]) * this.boxSize[0]);
+    this.uniforms.yClip.value.set(ySlice[0] * (1 / this.maxResolution[1]) * this.boxSize[1], ySlice[1] * (1 / this.maxResolution[1]) * this.boxSize[1]);
+    this.uniforms.zClip.value.set(zSlice[0] * (1 / this.maxResolution[2]) * this.boxSize[2], zSlice[1] * (1 / this.maxResolution[2]) * this.boxSize[2]);
+    this.uniforms.color0.value.set(colors.length > 0 ? colors[0][0] : null, colors.length > 0 ? colors[0][1] : null, colors.length > 0 ? colors[0][2] : null, colors.length > 0 ? colors[0][3] : null);
+    this.uniforms.color1.value.set(colors.length > 1 ? colors[1][0] : null, colors.length > 1 ? colors[1][1] : null, colors.length > 1 ? colors[1][2] : null, colors.length > 1 ? colors[1][3] : null);
+    this.uniforms.color2.value.set(colors.length > 2 ? colors[2][0] : null, colors.length > 2 ? colors[2][1] : null, colors.length > 2 ? colors[2][2] : null, colors.length > 2 ? colors[2][3] : null);
+    this.uniforms.color3.value.set(colors.length > 3 ? colors[3][0] : null, colors.length > 3 ? colors[3][1] : null, colors.length > 3 ? colors[3][2] : null, colors.length > 3 ? colors[3][3] : null);
+    this.uniforms.color4.value.set(colors.length > 4 ? colors[4][0] : null, colors.length > 4 ? colors[4][1] : null, colors.length > 4 ? colors[4][2] : null, colors.length > 4 ? colors[4][3] : null);
+    this.uniforms.color5.value.set(colors.length > 5 ? colors[5][0] : null, colors.length > 5 ? colors[5][1] : null, colors.length > 5 ? colors[5][2] : null, colors.length > 5 ? colors[5][3] : null);
+    this.uniforms.color6.value.set(colors.length > 6 ? colors[6][0] : null, colors.length > 6 ? colors[6][1] : null, colors.length > 6 ? colors[6][2] : null, colors.length > 6 ? colors[6][3] : null);
+    for (let i = 0; i < 7; i++) {
+      if (typeof this.channelMaxResolutionIndex[i] === "number") {
+        this.uniforms[`res${i}`].value.set(Math.max(1, this.channelMaxResolutionIndex[i]), this.zarrStoreNumResolutions - 1);
+      }
+    }
+  }
+  /**
+   * Sets the processing render target
+   * @param {WebGLMultipleRenderTargets} mrt - Multiple render targets object with 3 attachments
+   */
+  /*
+  setProcessingTargets(mrt) {
+    logWithColor('setting processing targets');
+    this.mrt = mrt;
+  }
+  */
+  setChannelMapping(channelMapping) {
+    logWithColor$1("setting channel mapping");
+    log.debug("channelMapping", channelMapping);
+    this.uniforms.channelMapping.value = channelMapping;
+  }
+  // Only called on initialization of the
+  // VolumeDataManager and VolumeRenderManager for a particular image.
+  setZarrUniforms(zarrStore, PT) {
+    logWithColor$1("setting zarr uniforms");
+    log.debug("zarrStore", zarrStore);
+    log.debug("PT", PT);
+    for (let i = 0; i <= 9; i++) {
+      if (PT.anchors && PT.anchors[i]) {
+        this.uniforms[`anchor${i}`].value.set(PT.anchors[i][0] || 0, PT.anchors[i][1] || 0, PT.anchors[i][2] || 0);
+      } else {
+        log.debug("anchor", i, "does not exist");
+        this.uniforms[`anchor${i}`].value.set(0, 0, 0);
+      }
+      if (zarrStore.scales && zarrStore.scales[i]) {
+        this.uniforms[`scale${i}`].value.set(zarrStore.scales[i][0] || 1, zarrStore.scales[i][1] || 1, zarrStore.scales[i][2] || 1);
+      } else {
+        log.debug("scale", i, "does not exist");
+      }
+    }
+    log.debug("zarrStore.brickLayout", zarrStore.brickLayout);
+    this.zarrStoreNumResolutions = zarrStore.brickLayout.length;
+    for (let i = 0; i < 7; i++) {
+      this.uniforms[`res${i}`].value.set(
+        // TODO(mark) make this dependent on the per-channel maxResolution slider value.
+        1,
+        zarrStore.brickLayout.length - 1
+      );
+    }
+    this.uniforms.resGlobal.value.set(1, zarrStore.brickLayout.length - 1);
+    this.uniforms.voxelExtents.value.set(zarrStore.shapes[0][4], zarrStore.shapes[0][3], zarrStore.shapes[0][2]);
+    this.uniforms.maxChannels.value = Math.min(zarrStore.channelCount, 7);
+    log.debug("this.channelsVisible", this.channelsVisible);
+    log.debug("zarrStore.shapes[0]", zarrStore.shapes[0]);
+    log.debug("PT", PT);
+    log.debug("uniforms", this.uniforms);
+  }
+}
+const gaussianVertexShader = `//
+varying vec2 vUv;
+void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 1.0);
+}
+`;
+const gaussianFragmentShader = `//
+// Input texture to blur
+uniform sampler2D tDiffuse;
+// Resolution of the texture (width, height)
+uniform vec2 resolution;
+// Blur strength: 1=no blur, 2-3=3x3 kernel, 4-5=5x5 kernel, 6+=7x7 kernel
+uniform int gaussian;
+// Texture coordinates for current pixel
+varying vec2 vUv;
+
+/**
+ * No blur - returns the original pixel color
+ */
+vec4 noGaussian() {
+    vec4 color = texture2D(tDiffuse, vUv);
+    return color;
+}
+
+/**
+ * Applies 3x3 Gaussian blur kernel
+ * Samples 9 pixels in a 3x3 grid around the current pixel
+ * Weights are based on 2D Gaussian distribution
+ */
+vec4 gaussian3(vec2 texel) {
+    vec4 color = vec4(0.0);
+
+    // Top row: weights [0.0625, 0.125, 0.0625]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0, -1.0)) * 0.0625;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0, -1.0)) * 0.125;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0, -1.0)) * 0.0625;
+
+    // Middle row: weights [0.125, 0.25, 0.125] (center pixel gets highest weight)
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0,  0.0)) * 0.125;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0,  0.0)) * 0.25;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0,  0.0)) * 0.125;
+
+    // Bottom row: weights [0.0625, 0.125, 0.0625]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0,  1.0)) * 0.0625;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0,  1.0)) * 0.125;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0,  1.0)) * 0.0625;
+
+    return color;
+}
+
+/**
+ * Applies 5x5 Gaussian blur kernel
+ * Samples 25 pixels in a 5x5 grid around the current pixel
+ * Weights sum to 1.0 (273/273) for proper normalization
+ */
+vec4 gaussian5(vec2 texel) {
+    vec4 color = vec4(0.0);
+
+    // Row 1: weights [1/273, 4/273, 7/273, 4/273, 1/273]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-2.0, -2.0)) * 1.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0, -2.0)) * 4.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0, -2.0)) * 7.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0, -2.0)) * 4.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 2.0, -2.0)) * 1.0/273.0;
+    
+    // Row 2: weights [4/273, 16/273, 26/273, 16/273, 4/273]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-2.0, -1.0)) * 4.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0, -1.0)) * 16.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0, -1.0)) * 26.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0, -1.0)) * 16.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 2.0, -1.0)) * 4.0/273.0;
+
+    // Row 3 (center): weights [7/273, 26/273, 41/273, 26/273, 7/273]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-2.0,  0.0)) * 7.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0,  0.0)) * 26.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0,  0.0)) * 41.0/273.0; // Center pixel
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0,  0.0)) * 26.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 2.0,  0.0)) * 7.0/273.0;
+    
+    // Row 4: weights [4/273, 16/273, 26/273, 16/273, 4/273]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-2.0,  1.0)) * 4.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0,  1.0)) * 16.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0,  1.0)) * 26.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0,  1.0)) * 16.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 2.0,  1.0)) * 4.0/273.0;
+    
+    // Row 5: weights [1/273, 4/273, 7/273, 4/273, 1/273]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-2.0,  2.0)) * 1.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0,  2.0)) * 4.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0,  2.0)) * 7.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0,  2.0)) * 4.0/273.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 2.0,  2.0)) * 1.0/273.0;
+
+    return color;
+}
+
+/**
+ * Applies 7x7 Gaussian blur kernel
+ * Samples 49 pixels in a 7x7 grid around the current pixel
+ * Weights sum to 1.0 (1003/1003) for proper normalization
+ * Creates the strongest blur effect
+ */
+vec4 gaussian7(vec2 texel) {
+    vec4 color = vec4(0.0);
+
+    // Row 1: weights [0, 0, 1/1003, 2/1003, 1/1003, 0, 0]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0, -3.0)) * 1.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0, -3.0)) * 2.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0, -3.0)) * 1.0/1003.0;
+
+    // Row 2: weights [0, 3/1003, 13/1003, 22/1003, 13/1003, 3/1003, 0]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-2.0, -2.0)) * 3.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0, -2.0)) * 13.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0, -2.0)) * 22.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0, -2.0)) * 13.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 2.0, -2.0)) * 3.0/1003.0;
+
+    // Row 3: weights [1/1003, 13/1003, 59/1003, 97/1003, 59/1003, 13/1003, 1/1003]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-3.0, -1.0)) * 1.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-2.0, -1.0)) * 13.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0, -1.0)) * 59.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0, -1.0)) * 97.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0, -1.0)) * 59.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 2.0, -1.0)) * 13.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 3.0, -1.0)) * 1.0/1003.0;
+    
+    // Row 4 (center): weights [2/1003, 22/1003, 97/1003, 159/1003, 97/1003, 22/1003, 2/1003]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-3.0,  0.0)) * 2.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-2.0,  0.0)) * 22.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0,  0.0)) * 97.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0,  0.0)) * 159.0/1003.0; // Center pixel
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0,  0.0)) * 97.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 2.0,  0.0)) * 22.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 3.0,  0.0)) * 2.0/1003.0;
+    
+    // Row 5: weights [1/1003, 13/1003, 59/1003, 97/1003, 59/1003, 13/1003, 1/1003]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-3.0,  1.0)) * 1.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-2.0,  1.0)) * 13.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0,  1.0)) * 59.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0,  1.0)) * 97.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0,  1.0)) * 59.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 2.0,  1.0)) * 13.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 3.0,  1.0)) * 1.0/1003.0;
+    
+    // Row 6: weights [0, 3/1003, 13/1003, 22/1003, 13/1003, 3/1003, 0]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-2.0,  2.0)) * 3.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0,  2.0)) * 13.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0,  2.0)) * 22.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0,  2.0)) * 13.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 2.0,  2.0)) * 3.0/1003.0;
+
+    // Row 7: weights [0, 0, 1/1003, 2/1003, 1/1003, 0, 0]
+    color += texture2D(tDiffuse, vUv + texel * vec2(-1.0,  3.0)) * 1.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 0.0,  3.0)) * 2.0/1003.0;
+    color += texture2D(tDiffuse, vUv + texel * vec2( 1.0,  3.0)) * 1.0/1003.0;
+
+    return color;
+}
+
+/**
+ * Main fragment shader function
+ * Determines which blur kernel to apply based on the 'gaussian' uniform
+ */
+void main() {
+    // Calculate the size of one texel (pixel) in texture coordinates
+    vec2 texel = 1.0 / resolution;
+    
+    // Initialize output color (this line appears to be unused/debug code)
+    vec4 color = vec4(1.0, 0.0, 0.0, 0.0);
+
+    // TODO: remove these variables since not used
+    bool left = vUv.x < 0.5;
+    bool top = vUv.y < 0.5;
+
+    if (gaussian > 1 && gaussian <= 3) {
+        // Apply 3x3 Gaussian blur for values 2-3
+        color = gaussian3(texel);
+    } else if (gaussian > 3 && gaussian <= 5) {
+        // Apply 5x5 Gaussian blur for values 4-5
+        color = gaussian5(texel);
+    } else if (gaussian > 5) {
+        // Apply 7x7 Gaussian blur for values 6 and above
+        color = gaussian7(texel);
+    } else {
+        // No blur for value 1 or less
+        color = noGaussian();
+    }
+
+    // Output the final blurred color
+    gl_FragColor = color;
+}
+`;
+function framebufferFor(renderer, rt) {
+  const p = renderer.properties?.get(rt);
+  return p?.framebuffer || p?.__webglFramebuffer || rt.__webglFramebuffer;
+}
+function logWithColor(msg) {
+  if (atLeastLogLevel(LogLevel.DEBUG)) {
+    console.warn(`%cV: ${msg}`, "background: deeppink; color: white; padding: 2px; border-radius: 3px;");
+  }
+}
+function performGeometryPass(_gl, _camera, _scene, { mrtRef }) {
+  _gl.setRenderTarget(mrtRef.current);
+  _gl.clear(true, true, true);
+  _gl.render(_scene, _camera);
+}
+function performBlitPass(_gl, { screenSceneRef, screenCameraRef }) {
+  _gl.setRenderTarget(null);
+  _gl.clear(true, true, true);
+  _gl.render(screenSceneRef.current, screenCameraRef.current);
+}
+function handleRequests(_gl, { frameRef, dataManager, mrtRef, bufRequest, bufUsage }) {
+  const ctx = _gl.getContext();
+  const f = frameRef.current;
+  if (dataManager.noNewRequests === true && !dataManager.manuallyStopped && f % 100 === 0 && f < 500) {
+    dataManager.noNewRequests = false;
+  }
+  if (dataManager.triggerRequest === true && dataManager.noNewRequests === false) {
+    ctx.bindFramebuffer(ctx.READ_FRAMEBUFFER, framebufferFor(_gl, mrtRef.current));
+    ctx.readBuffer(ctx.COLOR_ATTACHMENT1);
+    ctx.readPixels(0, 0, mrtRef.current.width, mrtRef.current.height, ctx.RGBA, ctx.UNSIGNED_BYTE, bufRequest.current);
+    dataManager.processRequestData(bufRequest.current, {
+      // If width/height are not yet available,
+      // processRequestData will proceed without weighting.
+      width: mrtRef?.current?.width,
+      height: mrtRef?.current?.height,
+      // Default sigmaNormalized = 0.25; can be tuned
+      sigmaNormalized: DEFAULT_SIGMA_NORMALIZED
+    });
+  } else if (dataManager.triggerUsage === true && dataManager.noNewRequests === false) {
+    ctx.bindFramebuffer(ctx.READ_FRAMEBUFFER, framebufferFor(_gl, mrtRef.current));
+    ctx.readBuffer(ctx.COLOR_ATTACHMENT2);
+    ctx.readPixels(0, 0, mrtRef.current.width, mrtRef.current.height, ctx.RGBA, ctx.UNSIGNED_BYTE, bufUsage.current);
+    dataManager.processUsageData(bufUsage.current);
+  }
+}
+function handleAdaptiveQuality(clock, params) {
+  const { invalidate, isInteracting, dataManager, spatialRenderingModeChanging, meshRef, stillRef, screenQuadRef, lastSampleRef, frameRef, lastFrameCountRef } = params;
+  if (screenQuadRef.current) {
+    if (!stillRef.current) {
+      screenQuadRef.current.material.uniforms.gaussian.value = 7;
+    } else {
+      screenQuadRef.current.material.uniforms.gaussian.value = 0;
+    }
+  }
+  if (isInteracting) {
+    if (!dataManager.manuallyStopped) {
+      dataManager.noNewRequests = false;
+      dataManager.triggerUsage = true;
+    }
+    return;
+  }
+  if (spatialRenderingModeChanging)
+    return;
+  const meshRefUniforms = meshRef.current?.material?.uniforms;
+  const renderSpeed = meshRefUniforms?.renderRes?.value ?? dataManager?.PT?.lowestDataRes;
+  if (dataManager.noNewRequests) {
+    if (renderSpeed !== 0) {
+      if (meshRefUniforms) {
+        meshRefUniforms.renderRes.value = 0;
+      }
+      log.debug("Adaptive Quality: No new requests. Setting renderSpeed to 0 (best quality).");
+      stillRef.current = false;
+      screenQuadRef.current.material.uniforms.gaussian.value = 7;
+      invalidate();
+    } else if (!stillRef.current) {
+      log.debug("Adaptive Quality: No new requests and already at best quality. Setting stillRef to true.");
+      stillRef.current = true;
+      screenQuadRef.current.material.uniforms.gaussian.value = 0;
+    }
+    return;
+  }
+  if (stillRef.current) {
+    stillRef.current = false;
+    invalidate();
+  }
+  const t = clock.getElapsedTime();
+  if (t - lastSampleRef.current < 1) {
+    return;
+  }
+  const timeElapsedDuringSample = t - lastSampleRef.current;
+  const framesRenderedDuringSample = frameRef.current - lastFrameCountRef.current;
+  let fps = 0;
+  if (timeElapsedDuringSample > 0) {
+    fps = framesRenderedDuringSample / timeElapsedDuringSample;
+  }
+  lastSampleRef.current = t;
+  lastFrameCountRef.current = frameRef.current;
+  const upscale = fps > 100 && renderSpeed > 0;
+  const downscale = fps < 30 && renderSpeed < dataManager.PT.lowestDataRes;
+  if (upscale || downscale) {
+    const newSpeed = renderSpeed + (downscale ? 1 : -1);
+    if (meshRefUniforms) {
+      meshRefUniforms.renderRes.value = newSpeed;
+    }
+    invalidate();
+  }
+}
+function VolumeView(props) {
+  const {
+    images,
+    imageLayerScopes,
+    imageLayerCoordination,
+    imageChannelScopesByLayer,
+    imageChannelCoordination,
+    // onInitComplete,
+    spatialRenderingMode,
+    spatialRenderingModeChanging,
+    onVolumeLoadingUpdate
+  } = props;
+  const {
+    gl
+    // scene,
+    // camera
+  } = useThree();
+  const invalidate = useThree((state) => state.invalidate);
+  const orbitRef = useRef(null);
+  const meshRef = useRef(null);
+  const bufRequest = useRef(null);
+  const bufUsage = useRef(null);
+  const mrtRef = useRef(null);
+  const [renderState, setRenderState] = useState({
+    uniforms: null,
+    shader: null,
+    meshScale: [1, 1, 1],
+    geometrySize: [1, 1, 1]
+  });
+  const is3D = spatialRenderingMode === "3D";
+  const [dmInitComplete, setDmInitComplete] = useState(false);
+  const screenSceneRef = useRef(null);
+  const screenCameraRef = useRef(null);
+  const screenQuadRef = useRef(null);
+  const [isInteracting, _setIsInteracting] = useState(false);
+  const interactionTimeoutRef = useRef(null);
+  const stillRef = useRef(false);
+  const frameRef = useRef(0);
+  const lastSampleRef = useRef(0);
+  const lastFrameCountRef = useRef(0);
+  const dataManager = useMemo(() => new VolumeDataManager(gl), [gl]);
+  const renderManager = useMemo(() => new VolumeRenderManager(), []);
+  useEffect(() => {
+    logWithColor("useEffect MRT target matching canvas");
+    const { width, height } = gl.domElement;
+    const mrt = new WebGLMultipleRenderTargets(width, height, 3);
+    mrt.texture.forEach((tex) => {
+      tex.format = THREE.RGBAFormat;
+      tex.type = THREE.UnsignedByteType;
+      tex.minFilter = THREE.NearestFilter;
+      tex.magFilter = THREE.NearestFilter;
+      tex.generateMipmaps = false;
+    });
+    const screenScene = new THREE.Scene();
+    const screenCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
+    screenCamera.position.z = 1;
+    const screenMaterial = new THREE.ShaderMaterial({
+      uniforms: {
+        // Bind the first render target texture as the input of the gaussian blur shader.
+        tDiffuse: { value: mrt.texture[0] },
+        resolution: { value: new THREE.Vector2(width, height) },
+        gaussian: { value: 7 }
+      },
+      vertexShader: gaussianVertexShader,
+      fragmentShader: gaussianFragmentShader,
+      transparent: true
+    });
+    const screenQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), screenMaterial);
+    screenScene.add(screenQuad);
+    screenSceneRef.current = screenScene;
+    screenCameraRef.current = screenCamera;
+    screenQuadRef.current = screenQuad;
+    bufRequest.current = new Uint8Array(width * height * 4);
+    bufUsage.current = new Uint8Array(width * height * 4);
+    mrtRef.current = mrt;
+    return () => {
+      mrt.dispose();
+      screenMaterial.dispose();
+      screenQuad.geometry.dispose();
+    };
+  }, [gl]);
+  const firstImageLayerScope = imageLayerScopes?.[0];
+  const firstImage = images?.[firstImageLayerScope];
+  imageChannelScopesByLayer?.[firstImageLayerScope];
+  const firstImageLayerChannelCoordination = imageChannelCoordination?.[0]?.[firstImageLayerScope];
+  useEffect(() => {
+    logWithColor("useEffect INIT");
+    let hasRerun = false;
+    if (!dataManager || !renderManager) {
+      log.debug("dataManager or renderManager not initialized yet");
+      return;
+    }
+    if (!firstImage) {
+      log.debug("no first image layer yet");
+      return;
+    }
+    if (!firstImageLayerChannelCoordination) {
+      log.debug("no firstImageLayerChannelCoordination yet");
+      return;
+    }
+    const initializeDataManager = async () => {
+      if (dataManager.initStatus === INIT_STATUS.COMPLETE) {
+        log.debug("dataManager already initialized, skipping");
+        setDmInitComplete(true);
+        return;
+      }
+      dataManager.initImages(images, imageLayerScopes);
+      await dataManager.init(firstImageLayerChannelCoordination);
+      if (hasRerun) {
+        log.debug("Initialization useEffect has rerun, aborting remaining initialization");
+        return;
+      }
+      log.debug("dataManager initialized");
+      renderManager.setZarrUniforms(dataManager.zarrStore, dataManager.PT);
+      renderManager.setChannelMapping(dataManager.channels.colorMappings);
+      log.debug("rm.uniforms", renderManager.uniforms);
+      setDmInitComplete(true);
+      invalidate();
+    };
+    initializeDataManager();
+    return () => {
+      hasRerun = true;
+    };
+  }, [dataManager, renderManager, images, imageLayerScopes]);
+  useEffect(() => {
+    const on3D = spatialRenderingMode === "3D";
+    if (on3D && dataManager && renderManager && dmInitComplete) {
+      logWithColor("useEffect spatialRenderingMode");
+      const propsForRenderManager = {
+        images,
+        imageLayerScopes,
+        imageLayerCoordination,
+        imageChannelScopesByLayer,
+        imageChannelCoordination,
+        spatialRenderingMode
+      };
+      if (renderManager.updateFromProps(propsForRenderManager)) {
+        const { zarrInit } = renderManager;
+        if (!zarrInit) {
+          dataManager.ptTHREE.needsUpdate = false;
+          dataManager.bcTHREE.needsUpdate = false;
+          dataManager.renderer.initTexture(dataManager.bcTHREE);
+          dataManager.renderer.initTexture(dataManager.ptTHREE);
+          dataManager.initTexture();
+        }
+        const nextRenderState = renderManager.updateRendering({
+          zarrStoreShapes: dataManager.zarrStore.shapes,
+          originalScaleXYZ: dataManager.getOriginalScaleXYZ(),
+          physicalDimensionsXYZ: dataManager.getPhysicalDimensionsXYZ(),
+          maxResolutionXYZ: dataManager.getMaxResolutionXYZ(),
+          boxDimensionsXYZ: dataManager.getBoxDimensionsXYZ(),
+          normalizedScaleXYZ: dataManager.getNormalizedScaleXYZ(),
+          bcTHREE: dataManager.bcTHREE,
+          ptTHREE: dataManager.ptTHREE
+        });
+        if (nextRenderState) {
+          setRenderState(nextRenderState);
+        }
+      }
+    }
+  }, [dataManager, renderManager, images, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination, spatialRenderingMode, dmInitComplete]);
+  const RENDER_PRIORITY = 1;
+  useFrame((state, delta, xrFrame) => {
+    if (!mrtRef.current || !dataManager || !renderManager) {
+      return;
+    }
+    if (!renderState.shader) {
+      return;
+    }
+    const { gl: frameGl, camera: frameCamera, scene: frameScene, clock } = state;
+    if (!stillRef.current) {
+      performGeometryPass(frameGl, frameCamera, frameScene, { mrtRef });
+    }
+    performBlitPass(frameGl, { screenSceneRef, screenCameraRef });
+    handleRequests(frameGl, { frameRef, dataManager, mrtRef, bufRequest, bufUsage });
+    handleAdaptiveQuality(clock, {
+      invalidate,
+      isInteracting,
+      dataManager,
+      spatialRenderingModeChanging,
+      meshRef,
+      stillRef,
+      screenQuadRef,
+      lastSampleRef,
+      frameRef,
+      lastFrameCountRef
+    });
+    frameRef.current += 1;
+  }, RENDER_PRIORITY);
+  const setIsInteracting = useEventCallback((interacting) => {
+    logWithColor("invalidateOnInteraction callback");
+    _setIsInteracting(interacting);
+    if (interacting) {
+      const meshRefUniforms = meshRef.current?.material?.uniforms;
+      if (meshRefUniforms) {
+        meshRefUniforms.renderRes.value = dataManager.PT.lowestDataRes;
+      }
+      stillRef.current = false;
+      invalidate();
+    }
+  });
+  const onOrbitControlsStart = useEventCallback((e) => {
+    setIsInteracting(true);
+  });
+  const onOrbitControlsEnd = useEventCallback((e) => {
+    clearTimeout(interactionTimeoutRef.current);
+    interactionTimeoutRef.current = setTimeout(() => {
+      setIsInteracting(false);
+    }, 300);
+  });
+  useEffect(() => {
+    if (!dmInitComplete)
+      return;
+    logWithColor("useEffect firstImageLayerChannelCoordination");
+    setIsInteracting(true);
+    log.debug("something about channels changed");
+    dataManager.updateChannels(firstImageLayerChannelCoordination);
+    renderManager.setChannelMapping(dataManager.channels.colorMappings);
+    clearTimeout(interactionTimeoutRef.current);
+    interactionTimeoutRef.current = setTimeout(() => {
+      setIsInteracting(false);
+    }, 300);
+  }, [dataManager, firstImageLayerChannelCoordination, renderManager, setIsInteracting, dmInitComplete]);
+  const stopLoading = useEventCallback(() => {
+    if (dataManager) {
+      dataManager.stopLoading();
+    }
+  });
+  const restartLoading = useEventCallback(() => {
+    if (dataManager) {
+      dataManager.restartLoading();
+    }
+  });
+  const getLoadingProgress = useEventCallback(() => {
+    if (dataManager) {
+      return dataManager.getLoadingProgress();
+    }
+    return null;
+  });
+  useEffect(() => {
+    if (!onVolumeLoadingUpdate)
+      return void 0;
+    const intervalId = setInterval(() => {
+      const loadingProgress = getLoadingProgress();
+      onVolumeLoadingUpdate({
+        loadingProgress,
+        stillRef,
+        onStopLoading: stopLoading,
+        onRestartLoading: restartLoading
+      });
+    }, 1e3);
+    return () => clearInterval(intervalId);
+  }, [onVolumeLoadingUpdate, stillRef]);
+  if (!is3D || !dataManager || !renderManager)
+    return null;
+  if (!renderState.shader) {
+    return jsxs("group", { children: [jsxs("mesh", { children: [jsx("boxGeometry", { args: [1, 1, 1] }), jsx("meshBasicMaterial", { color: "#444", wireframe: true })] }), jsx(OrbitControls, { ref: orbitRef })] });
+  }
+  return jsxs("group", { children: [jsx(
+    OrbitControls,
+    {
+      // ref={mainOrbitControlsRef}
+      enableDamping: false,
+      onStart: onOrbitControlsStart,
+      onEnd: onOrbitControlsEnd
+    }
+  ), jsxs("mesh", { ref: meshRef, scale: renderState.meshScale, children: [jsx("boxGeometry", { args: renderState.geometrySize }), jsx("shaderMaterial", { uniforms: renderState.uniforms, vertexShader: renderState.shader.vertexShader, fragmentShader: renderState.shader.fragmentShader, side: THREE.BackSide, transparent: false, glslVersion: THREE.GLSL3 })] })] });
+}
+function SpatialWrapper(props) {
+  return jsx(Canvas, { frameloop: "always", style: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    padding: 0,
+    margin: 0
+    // backgroundColor: 'white',
+  }, camera: {
+    fov: 50,
+    up: [0, 1, 0],
+    position: [0, 0, 4],
+    near: 0.01,
+    far: 15
+  }, gl: {
+    antialias: true,
+    logarithmicDepthBuffer: false,
+    preserveDrawingBuffer: false,
+    autoClear: false
+  }, children: jsx(Suspense, { fallback: "Initializing Volume View...", children: jsx(VolumeView, { ...props }) }) });
+}
+export {
+  SpatialWrapper
+};