@aics/vole-core 3.12.4

package/LICENSE.txt

@@ -0,0 +1,26 @@
+Allen Institute Software License – This software license is the 2-clause BSD license 
+plus clause a third clause that prohibits redistribution for commercial purposes without further permission.
+
+Copyright © 2017. Allen Institute. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the
+following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the 
+following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the 
+following disclaimer in the documentation and/or other materials provided with the distribution.
+
+3. Redistributions for commercial purposes are not permitted without the Allen Institute’s written permission.
+For purposes of this license, commercial purposes is the incorporation of the Allen Institute's software into
+anything for which you will charge fees or other compensation. Contact terms@alleninstitute.org for commercial
+licensing opportunities.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
+INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
+USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,119 @@
+# Vol-E core
+
+This is a WebGL canvas-based volume viewer. It can display multichannel volume data with high channel counts, and is optimized for OME-Zarr files. With OME-Zarr, the viewer can prefetch and cache Zarr chunks in browser memory for optimized performance.
+
+The Vol-E core package exposes several key modules:
+
+- `View3d` is the viewing component that contains a canvas and supports zoom/pan/rotate interaction with the volume via `VolumeDrawable`.
+- `Volume` is the class that holds the volume dimensions and a collection of `Channel`s that contain the volume pixel data. After initialization, this is generally a read-only holder for raw data.
+- `VolumeLoaderContext` is an interface that lets you initialize asynchronous data loading of different formats via its `createLoader` method.
+- `IVolumeLoader` is an interface for requesting volume dimensions and data.
+- `LoadSpec` is a small bundle of information to guide the IVolumeLoader on exactly what to load.
+
+There are several ways to deliver volume data to the viewer:
+
+- Load OME-Zarr from publicly accessible web links. Authentication is not explicitly supported in Vol-E.
+- Load raw TypedArrays of 3d volume data ( see `RawArrayLoader` and `Volume.setChannelDataFromVolume` ).
+- (legacy) Load texture atlases as .png files or Uint8Arrays containing volume slices tiled across a 2d image ( see `JsonImageInfoLoader` and `Volume.setChannelDataFromAtlas` ).
+
+# Example
+
+See [`public/index.ts`](./public/index.ts) for a working example. (`npm install; npm run dev` will run that code)
+
+The basic code to get the viewer up and running is as follows:
+
+```javascript
+// find a div that will hold the viewer
+const el = document.getElementById("vol-e");
+
+// create the loaderContext
+const loaderContext = new VolumeLoaderContext(CACHE_MAX_SIZE, CONCURRENCY_LIMIT, PREFETCH_CONCURRENCY_LIMIT);
+
+// create the viewer.  it will try to fill the parent element.
+const view3D = new View3d(el);
+view3D.loaderContext = loaderContext;
+
+// ensure the loader worker is ready
+await loaderContext.onOpen();
+// get the actual loader.  In most cases this will create a WorkerLoader that uses a OmeZarrLoader internally.
+const loader = await loaderContext.createLoader(path);
+
+const loadSpec = new LoadSpec();
+// give the loader a callback to call when it receives channel data asynchronously
+const volume = await loader.createVolume(loadSpec, (v: Volume, channelIndex: number) => {
+  const currentVol = v;
+
+  // currently, this must be called when channel data arrives (here in this callback)
+  view3D.onVolumeData(currentVol, [channelIndex]);
+
+  view3D.setVolumeChannelEnabled(currentVol, channelIndex, true);
+
+  // these calls tell the viewer that things are out of date
+  view3D.updateActiveChannels(currentVol);
+  view3D.updateLuts(currentVol);
+  view3D.redraw();
+});
+// tell the viewer about the image
+view3D.addVolume(volume);
+// start requesting volume data
+loader.loadVolumeData(volume);
+```
+
+# React example
+
+See [vole-app](https://github.com/allen-cell-animated/website-3d-cell-viewer) for a complete application that wraps View3D in a React component.
+
+# Acknowledgements
+
+The ray marched volume shader is a heavily modified version of one that has its origins in [Bisque](http://bioimage.ucsb.edu/bisque).
+The core path tracing implementation was adapted from ExposureRender.
+
+## BisQue license
+
+Center for Bio-Image Informatics, University of California at Santa Barbara
+
+Copyright (c) 2007-2017 by the Regents of the University of California
+All rights reserved
+
+Redistribution and use in source and binary forms, in whole or in parts, with or without
+modification, are permitted provided that the following conditions are met:
+
+    Redistributions of source code must retain the above copyright
+    notice, this list of conditions, and the following disclaimer.
+
+    Redistributions in binary form must reproduce the above copyright
+    notice, this list of conditions, and the following disclaimer in
+    the documentation and/or other materials provided with the
+    distribution.
+
+    Use or redistribution must display the attribution with the logo
+    or project name and the project URL link in a location commonly
+    visible by the end users, unless specifically permitted by the
+    license holders.
+
+THIS SOFTWARE IS PROVIDED BY THE REGENTS OF THE UNIVERSITY OF CALIFORNIA ''AS IS'' AND ANY
+EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE REGENTS OF THE UNIVERSITY OF CALIFORNIA OR
+CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+The views and conclusions contained in the software and documentation
+are those of the authors and should not be interpreted as representing
+official policies, either expressed or implied, of the Regents of the University of California.
+
+## Exposure Render license
+
+    Copyright (c) 2011, T. Kroes <t.kroes@tudelft.nl>
+    All rights reserved.
+    Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+    - Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+    - Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+    - Neither the name of the TU Delft nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+    THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/es/Atlas2DSlice.js

@@ -0,0 +1,224 @@
+import { Box3, Box3Helper, Color, Group, Matrix4, Mesh, PlaneGeometry, ShaderMaterial, Vector2, Vector3 } from "three";
+import { sliceFragmentShaderSrc, sliceShaderUniforms, sliceVertexShaderSrc } from "./constants/volumeSliceShader.js";
+import { SettingsFlags, VolumeRenderSettings } from "./VolumeRenderSettings.js";
+import FusedChannelData from "./FusedChannelData.js";
+const BOUNDING_BOX_DEFAULT_COLOR = new Color(0xffff00);
+
+/**
+ * Creates a plane that renders a 2D XY slice of volume atlas data.
+ */
+export default class Atlas2DSlice {
+  sliceUpdateWaiting = false;
+
+  /**
+   * Creates a new Atlas2DSlice.
+   * @param volume The volume that this renderer should render data from.
+   * @param settings Optional settings object. If set, updates the renderer with
+   * the given settings. Otherwise, uses the default VolumeRenderSettings.
+   */
+  constructor(volume, settings = new VolumeRenderSettings(volume)) {
+    this.volume = volume;
+    this.uniforms = sliceShaderUniforms();
+    [this.geometry, this.geometryMesh] = this.createGeometry(this.uniforms);
+    this.boxHelper = new Box3Helper(new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5)), BOUNDING_BOX_DEFAULT_COLOR);
+    this.boxHelper.updateMatrixWorld();
+    this.boxHelper.visible = false;
+    this.geometryTransformNode = new Group();
+    this.geometryTransformNode.name = "VolumeContainerNode";
+    this.geometryTransformNode.add(this.boxHelper, this.geometryMesh);
+    this.setUniform("Z_SLICE", Math.floor(volume.imageInfo.volumeSize.z / 2));
+    this.settings = settings;
+    this.updateVolumeDimensions();
+    this.updateSettings(settings, SettingsFlags.ALL);
+  }
+
+  /**
+   * Syncs `this.settings.zSlice` with the corresponding shader uniform, or defers syncing until the slice is loaded.
+   * @returns a boolean indicating whether the slice is out of bounds of the volume entirely.
+   */
+  updateSlice() {
+    const slice = Math.floor(this.settings.zSlice);
+    const sizez = this.volume.imageInfo.volumeSize.z;
+    if (slice < 0 || slice >= sizez) {
+      return false;
+    }
+    const regionMinZ = this.volume.imageInfo.subregionOffset.z;
+    const regionMaxZ = regionMinZ + this.volume.imageInfo.subregionSize.z;
+    if (slice < regionMinZ || slice >= regionMaxZ) {
+      // If the slice is outside the current loaded subregion, defer until the subregion is updated
+      this.sliceUpdateWaiting = true;
+    } else {
+      this.setUniform("Z_SLICE", slice);
+      this.sliceUpdateWaiting = false;
+    }
+    return true;
+  }
+  updateVolumeDimensions() {
+    const volumeScale = this.volume.normPhysicalSize.clone().multiply(this.settings.scale);
+    const regionScale = volumeScale.clone().multiply(this.volume.normRegionSize);
+    const volumeOffset = this.volume.getContentCenter().clone().multiply(this.settings.scale);
+    this.geometryMesh.position.copy(volumeOffset);
+    // set scale
+    this.geometryMesh.scale.copy(regionScale);
+    this.setUniform("volumeScale", regionScale);
+    this.boxHelper.box.set(volumeScale.clone().multiplyScalar(-0.5), volumeScale.clone().multiplyScalar(0.5));
+    const {
+      atlasTileDims,
+      subregionSize,
+      volumeSize
+    } = this.volume.imageInfo;
+    const atlasSize = new Vector2(subregionSize.x, subregionSize.y).multiply(atlasTileDims);
+
+    // set lots of dimension uniforms
+    this.setUniform("ATLAS_DIMS", atlasTileDims);
+    this.setUniform("textureRes", atlasSize);
+    this.setUniform("SLICES", volumeSize.z);
+    if (this.sliceUpdateWaiting) {
+      this.updateSlice();
+    }
+
+    // (re)create channel data
+    if (!this.channelData || this.channelData.width !== atlasSize.x || this.channelData.height !== atlasSize.y) {
+      this.channelData?.cleanup();
+      this.channelData = new FusedChannelData(atlasSize.x, atlasSize.y);
+    }
+  }
+  updateSettings(newSettings, dirtyFlags) {
+    if (dirtyFlags === undefined) {
+      dirtyFlags = SettingsFlags.ALL;
+    }
+    this.settings = newSettings;
+    if (dirtyFlags & SettingsFlags.VIEW) {
+      this.geometryMesh.visible = this.settings.visible;
+      // Configure ortho
+      this.setUniform("orthoScale", this.settings.orthoScale);
+      this.setUniform("isOrtho", this.settings.isOrtho ? 1.0 : 0.0);
+      // Ortho line thickness
+      const axis = this.settings.viewAxis;
+      if (this.settings.isOrtho && axis !== null) {
+        const maxVal = this.settings.bounds.bmax[axis];
+        const minVal = this.settings.bounds.bmin[axis];
+        const thicknessPct = maxVal - minVal;
+        this.setUniform("orthoThickness", thicknessPct);
+      } else {
+        this.setUniform("orthoThickness", 1.0);
+      }
+    }
+    if (dirtyFlags & SettingsFlags.BOUNDING_BOX) {
+      // Configure bounding box
+      this.boxHelper.visible = this.settings.showBoundingBox;
+      const colorVector = this.settings.boundingBoxColor;
+      const newBoxColor = new Color(colorVector[0], colorVector[1], colorVector[2]);
+      this.boxHelper.material.color = newBoxColor;
+    }
+    if (dirtyFlags & SettingsFlags.TRANSFORM) {
+      // Set rotation and translation
+      this.geometryTransformNode.position.copy(this.settings.translation);
+      this.geometryTransformNode.rotation.copy(this.settings.rotation);
+      this.setUniform("flipVolume", this.settings.flipAxes);
+    }
+    if (dirtyFlags & SettingsFlags.MATERIAL) {
+      this.setUniform("DENSITY", this.settings.density);
+    }
+    if (dirtyFlags & SettingsFlags.CAMERA) {
+      this.setUniform("BRIGHTNESS", this.settings.brightness * 2.0);
+      // Gamma
+      this.setUniform("GAMMA_MIN", this.settings.gammaMin);
+      this.setUniform("GAMMA_MAX", this.settings.gammaMax);
+      this.setUniform("GAMMA_SCALE", this.settings.gammaLevel);
+    }
+    if (dirtyFlags & SettingsFlags.ROI) {
+      // Normalize and set bounds
+      const bounds = this.settings.bounds;
+      const {
+        normRegionSize,
+        normRegionOffset
+      } = this.volume;
+      const offsetToCenter = normRegionSize.clone().divideScalar(2).add(normRegionOffset).subScalar(0.5);
+      const bmin = bounds.bmin.clone().sub(offsetToCenter).divide(normRegionSize).clampScalar(-0.5, 0.5);
+      const bmax = bounds.bmax.clone().sub(offsetToCenter).divide(normRegionSize).clampScalar(-0.5, 0.5);
+      this.setUniform("AABB_CLIP_MIN", bmin);
+      this.setUniform("AABB_CLIP_MAX", bmax);
+      const sliceInBounds = this.updateSlice();
+      if (sliceInBounds) {
+        const sliceLowerBound = Math.floor(this.settings.zSlice) / this.volume.imageInfo.volumeSize.z;
+        const sliceUpperBound = (Math.floor(this.settings.zSlice) + 1) / this.volume.imageInfo.volumeSize.z;
+        this.volume.updateRequiredData({
+          subregion: new Box3(new Vector3(0, 0, sliceLowerBound), new Vector3(1, 1, sliceUpperBound))
+        });
+      }
+    }
+    if (dirtyFlags & SettingsFlags.SAMPLING) {
+      this.setUniform("interpolationEnabled", this.settings.useInterpolation);
+      this.setUniform("iResolution", this.settings.resolution);
+    }
+    if (dirtyFlags & SettingsFlags.MASK_ALPHA) {
+      this.setUniform("maskAlpha", this.settings.maskChannelIndex < 0 ? 1.0 : this.settings.maskAlpha);
+    }
+    if (dirtyFlags & SettingsFlags.MASK_DATA) {
+      this.channelData.setChannelAsMask(this.settings.maskChannelIndex, this.volume.getChannel(this.settings.maskChannelIndex));
+    }
+  }
+  createGeometry(uniforms) {
+    const geom = new PlaneGeometry(1.0, 1.0);
+    const mesh = new Mesh(geom);
+    mesh.name = "Plane";
+
+    // shader,vtx and frag.
+    const vtxsrc = sliceVertexShaderSrc;
+    const fgmtsrc = sliceFragmentShaderSrc;
+    const threeMaterial = new ShaderMaterial({
+      uniforms: uniforms,
+      vertexShader: vtxsrc,
+      fragmentShader: fgmtsrc,
+      transparent: true,
+      depthTest: true,
+      depthWrite: false
+    });
+    mesh.material = threeMaterial;
+    return [geom, mesh];
+  }
+  cleanup() {
+    this.geometry.dispose();
+    this.geometryMesh.material.dispose();
+    this.channelData.cleanup();
+  }
+  viewpointMoved() {
+    return;
+  }
+  doRender(renderer, camera) {
+    if (!this.geometryMesh.visible) {
+      return;
+    }
+    this.channelData.gpuFuse(renderer);
+    this.setUniform("textureAtlas", this.channelData.getFusedTexture());
+    this.setUniform("textureAtlasMask", this.channelData.maskTexture);
+    this.geometryTransformNode.updateMatrixWorld(true);
+    const mvm = new Matrix4();
+    mvm.multiplyMatrices(camera.matrixWorldInverse, this.geometryMesh.matrixWorld);
+    const mi = new Matrix4();
+    mi.copy(mvm).invert();
+    this.setUniform("inverseModelViewMatrix", mi);
+  }
+  get3dObject() {
+    return this.geometryTransformNode;
+  }
+
+  // channelcolors is array of {rgbColor, lut} and channeldata is volume.channels
+  updateActiveChannels(channelcolors, channeldata) {
+    this.channelData.fuse(channelcolors, channeldata);
+
+    // update to fused texture
+    this.setUniform("textureAtlas", this.channelData.getFusedTexture());
+    this.setUniform("textureAtlasMask", this.channelData.maskTexture);
+  }
+  setUniform(name, value) {
+    if (!this.uniforms[name]) {
+      return;
+    }
+    this.uniforms[name].value = value;
+  }
+  setRenderUpdateListener(_listener) {
+    return;
+  }
+}

package/es/Channel.js

@@ -0,0 +1,264 @@
+import { DataTexture, LuminanceFormat, RedFormat, RedIntegerFormat, UnsignedByteType, ByteType, FloatType, IntType, UnsignedIntType, ShortType, UnsignedShortType, RGBAFormat, LinearFilter, NearestFilter, UVMapping, ClampToEdgeWrapping } from "three";
+import Histogram from "./Histogram.js";
+import { Lut, LUT_ARRAY_LENGTH } from "./Lut.js";
+import { ARRAY_CONSTRUCTORS } from "./types.js";
+// Data and processing for a single channel
+export default class Channel {
+  constructor(name) {
+    this.loaded = false;
+    this.dtype = "uint8";
+    this.imgData = {
+      data: new Uint8Array(),
+      width: 0,
+      height: 0
+    };
+    this.rawMin = 0;
+    this.rawMax = 255;
+
+    // on gpu
+    this.dataTexture = new DataTexture(new Uint8Array(), 0, 0);
+    this.lutTexture = new DataTexture(new Uint8Array(LUT_ARRAY_LENGTH), 256, 1, RGBAFormat, UnsignedByteType);
+    this.lutTexture.minFilter = this.lutTexture.magFilter = LinearFilter;
+    this.lutTexture.generateMipmaps = false;
+    this.volumeData = new Uint8Array();
+    this.name = name;
+    this.histogram = new Histogram(new Uint8Array());
+    this.dims = [0, 0, 0];
+
+    // intensity remapping lookup table
+    this.lut = new Lut().createFromMinMax(0, 255);
+
+    // per-intensity color labeling (disabled initially)
+    this.colorPalette = new Uint8Array(LUT_ARRAY_LENGTH).fill(0);
+    // store in 0..1 range. 1 means fully colorPalette, 0 means fully lut.
+    this.colorPaletteAlpha = 0.0;
+  }
+
+  // rgbColor is [0..255, 0..255, 0..255]
+  combineLuts(rgbColor, out) {
+    const ret = out ? out : new Uint8Array(LUT_ARRAY_LENGTH);
+    if (!rgbColor) {
+      return ret;
+    }
+    const rgb = [rgbColor[0] / 255.0, rgbColor[1] / 255.0, rgbColor[2] / 255.0];
+    // colorPalette*alpha + rgb*lut*(1-alpha)
+    // a tiny bit faster for the edge cases
+    if (this.colorPaletteAlpha === 1.0) {
+      ret.set(this.colorPalette);
+    } else if (this.colorPaletteAlpha === 0.0) {
+      ret.set(this.lut.lut);
+      for (let i = 0; i < LUT_ARRAY_LENGTH / 4; ++i) {
+        ret[i * 4 + 0] *= rgb[0];
+        ret[i * 4 + 1] *= rgb[1];
+        ret[i * 4 + 2] *= rgb[2];
+      }
+    } else {
+      for (let i = 0; i < LUT_ARRAY_LENGTH / 4; ++i) {
+        ret[i * 4 + 0] = this.colorPalette[i * 4 + 0] * this.colorPaletteAlpha + this.lut.lut[i * 4 + 0] * (1.0 - this.colorPaletteAlpha) * rgb[0];
+        ret[i * 4 + 1] = this.colorPalette[i * 4 + 1] * this.colorPaletteAlpha + this.lut.lut[i * 4 + 1] * (1.0 - this.colorPaletteAlpha) * rgb[1];
+        ret[i * 4 + 2] = this.colorPalette[i * 4 + 2] * this.colorPaletteAlpha + this.lut.lut[i * 4 + 2] * (1.0 - this.colorPaletteAlpha) * rgb[2];
+        ret[i * 4 + 3] = this.colorPalette[i * 4 + 3] * this.colorPaletteAlpha + this.lut.lut[i * 4 + 3] * (1.0 - this.colorPaletteAlpha);
+      }
+    }
+    this.lutTexture.image.data.set(ret);
+    this.lutTexture.needsUpdate = true;
+    return ret;
+  }
+  setRawDataRange(min, max) {
+    // remap the lut which was based on rawMin and rawMax to new min and max
+    // If either of the min/max ranges are both zero, then we have undefined behavior and should
+    // not remap the lut.  This situation can happen at first load, for example,
+    // when one channel has arrived but others haven't.
+    if (!(this.rawMin === 0 && this.rawMax === 0) && !(min === 0 && max === 0)) {
+      this.lut.remapDomains(this.rawMin, this.rawMax, min, max);
+      this.rawMin = min;
+      this.rawMax = max;
+    }
+  }
+  getHistogram() {
+    return this.histogram;
+  }
+  getIntensity(x, y, z) {
+    return this.volumeData[x + y * this.dims[0] + z * (this.dims[0] * this.dims[1])];
+  }
+  normalizeRaw(val) {
+    return (val - this.rawMin) / (this.rawMax - this.rawMin);
+  }
+
+  // how to index into tiled texture atlas
+  getIntensityFromAtlas(x, y, z) {
+    const numXtiles = this.imgData.width / this.dims[0];
+    const tilex = z % numXtiles;
+    const tiley = Math.floor(z / numXtiles);
+    const offset = tilex * this.dims[0] + x + (tiley * this.dims[1] + y) * this.imgData.width;
+    return this.imgData.data[offset];
+  }
+  rebuildDataTexture(data, w, h) {
+    if (this.dataTexture) {
+      this.dataTexture.dispose();
+    }
+    let format = LuminanceFormat;
+    let dataType = UnsignedByteType;
+    let internalFormat = "LUMINANCE";
+    switch (this.dtype) {
+      case "uint8":
+        dataType = UnsignedByteType;
+        format = RedIntegerFormat;
+        internalFormat = "R8UI";
+        break;
+      case "int8":
+        dataType = ByteType;
+        format = RedIntegerFormat;
+        internalFormat = "R8I";
+        break;
+      case "uint16":
+        dataType = UnsignedShortType;
+        format = RedIntegerFormat;
+        internalFormat = "R16UI";
+        break;
+      case "int16":
+        dataType = ShortType;
+        format = RedIntegerFormat;
+        internalFormat = "R16I";
+        break;
+      case "uint32":
+        dataType = UnsignedIntType;
+        format = RedIntegerFormat;
+        internalFormat = "R32UI";
+        break;
+      case "int32":
+        dataType = IntType;
+        format = RedIntegerFormat;
+        internalFormat = "R32I";
+        break;
+      case "float32":
+        dataType = FloatType;
+        format = RedFormat;
+        internalFormat = "R32F";
+        break;
+      default:
+        console.warn("unsupported dtype for channel data", this.dtype);
+        break;
+    }
+    this.dataTexture = new DataTexture(data, w, h, format, dataType, UVMapping, ClampToEdgeWrapping, ClampToEdgeWrapping, NearestFilter, NearestFilter);
+    this.dataTexture.internalFormat = internalFormat;
+    this.dataTexture.needsUpdate = true;
+  }
+
+  // give the channel fresh data and initialize from that data
+  // data is formatted as a texture atlas where each tile is a z slice of the volume
+  setFromAtlas(bitsArray, w, h, dtype, rawMin, rawMax, subregionSize) {
+    this.dtype = dtype;
+    this.imgData = {
+      data: bitsArray,
+      width: w,
+      height: h
+    };
+    this.rebuildDataTexture(this.imgData.data, w, h);
+    this.loaded = true;
+    this.histogram = new Histogram(bitsArray);
+
+    // reuse old lut but auto-remap it to new data range
+    this.setRawDataRange(rawMin, rawMax);
+    this.unpackFromAtlas(subregionSize.x, subregionSize.y, subregionSize.z);
+  }
+
+  // let's rearrange this.imgData.data into a 3d array.
+  // it is assumed to be coming in as a flat Uint8Array of size x*y*z
+  // with x*y*z layout (first row of first plane is the first data in the layout,
+  // then second row of first plane, etc)
+  unpackFromAtlas(x, y, z) {
+    const volimgdata = this.imgData.data;
+    this.dims = [x, y, z];
+    const ctor = ARRAY_CONSTRUCTORS[this.dtype];
+    this.volumeData = new ctor(x * y * z);
+    const numXtiles = this.imgData.width / x;
+    const atlasrow = this.imgData.width;
+    let tilex = 0,
+      tiley = 0,
+      tileoffset = 0,
+      tilerowoffset = 0,
+      destOffset = 0;
+    for (let i = 0; i < z; ++i) {
+      // tile offset
+      tilex = i % numXtiles;
+      tiley = Math.floor(i / numXtiles);
+      tileoffset = tilex * x + tiley * y * atlasrow;
+      for (let j = 0; j < y; ++j) {
+        tilerowoffset = j * atlasrow;
+        destOffset = i * (x * y) + j * x;
+        this.volumeData.set(volimgdata.subarray(tileoffset + tilerowoffset, tileoffset + tilerowoffset + x), destOffset);
+      }
+    }
+  }
+
+  // give the channel fresh volume data and initialize from that data
+  setFromVolumeData(bitsArray, vx, vy, vz, ax, ay, rawMin, rawMax, dtype) {
+    this.dims = [vx, vy, vz];
+    this.volumeData = bitsArray;
+    this.dtype = dtype;
+    // TODO FIXME performance hit for shuffling the data and storing 2 versions of it (could do this in worker at least?)
+    this.packToAtlas(vx, vy, vz, ax, ay);
+    this.loaded = true;
+    // update from current histogram?
+    this.setRawDataRange(rawMin, rawMax);
+    this.histogram = new Histogram(this.volumeData);
+  }
+
+  // given this.volumeData, let's unpack it into a flat textureatlas and fill up this.imgData.
+  packToAtlas(vx, vy, vz, ax, ay) {
+    // big assumptions:
+    // atlassize is a perfect multiple of volumesize in both x and y
+    // ax % vx == 0
+    // ay % vy == 0
+    // and num slices <= num possible slices in atlas.
+    // (ax/vx) * (ay/vy) >= vz
+    if (ax % vx !== 0 || ay % vy !== 0 || ax / vx * (ay / vy) < vz) {
+      console.log("ERROR - atlas and volume dims are inconsistent");
+      console.log(ax, ay, vx, vy, vz);
+    }
+    const ctor = ARRAY_CONSTRUCTORS[this.dtype];
+    this.imgData = {
+      width: ax,
+      height: ay,
+      data: new ctor(ax * ay)
+    };
+    this.imgData.data.fill(0);
+
+    // deposit slices one by one into the imgData.data from volData.
+    const volimgdata = this.imgData.data;
+    const x = vx,
+      y = vy,
+      z = vz;
+    const numXtiles = this.imgData.width / x;
+    const atlasrow = this.imgData.width;
+    let tilex = 0,
+      tiley = 0,
+      tileoffset = 0,
+      tilerowoffset = 0,
+      sourceOffset = 0;
+    for (let i = 0; i < z; ++i) {
+      // tile offset
+      tilex = i % numXtiles;
+      tiley = Math.floor(i / numXtiles);
+      tileoffset = tilex * x + tiley * y * atlasrow;
+      for (let j = 0; j < y; ++j) {
+        tilerowoffset = j * atlasrow;
+        sourceOffset = i * (x * y) + j * x;
+        volimgdata.set(this.volumeData.subarray(sourceOffset, sourceOffset + x), tileoffset + tilerowoffset);
+      }
+    }
+    this.rebuildDataTexture(this.imgData.data, ax, ay);
+  }
+  setLut(lut) {
+    this.lut = lut;
+  }
+
+  // palette should be an uint8array of 256*4 elements (256 rgba8 values)
+  setColorPalette(palette) {
+    this.colorPalette = palette;
+  }
+  setColorPaletteAlpha(alpha) {
+    this.colorPaletteAlpha = alpha;
+  }
+}

package/es/FileSaver.js

@@ -0,0 +1,31 @@
+export default class FileSaver {
+  static save(blob, fname) {
+    const url = window.URL.createObjectURL(blob);
+    const anch = document.createElement("a");
+    anch.href = url;
+    anch.download = fname;
+    anch.style.display = "none";
+    document.body.appendChild(anch);
+    anch.click();
+    document.body.removeChild(anch);
+    window.URL.revokeObjectURL(url);
+  }
+  static saveString(s, fname) {
+    const blob = new Blob([s], {
+      type: "text/plain;charset=utf-8"
+    });
+    FileSaver.save(blob, fname);
+  }
+  static saveBinary(s, fname) {
+    const blob = new Blob([new Uint8Array(s)], {
+      type: "application/octet-stream"
+    });
+    FileSaver.save(blob, fname);
+  }
+  static saveArrayBuffer(buffer, filename) {
+    const blob = new Blob([buffer], {
+      type: "application/octet-stream"
+    });
+    FileSaver.save(blob, filename);
+  }
+}