@aics/vole-core 3.12.4

package/es/FusedChannelData.js

@@ -0,0 +1,192 @@
+import { Color, DataTexture, RedFormat, UnsignedByteType, ClampToEdgeWrapping, Scene, OrthographicCamera, WebGLRenderTarget, RGBAFormat, ShaderMaterial, Mesh, PlaneGeometry, OneFactor, CustomBlending, MaxEquation, LinearFilter, Vector2 } from "three";
+import { renderToBufferVertShader } from "./constants/basicShaders.js";
+/* babel-plugin-inline-import './constants/shaders/fuseUI.frag' */
+const fuseShaderSrcUI = "precision highp float;\nprecision highp int;\nprecision highp usampler2D;\nprecision highp sampler3D;\n\n// the lut texture is a 256x1 rgba texture for each channel\nuniform sampler2D lutSampler;\n\nuniform vec2 lutMinMax;\n\n// src texture is the raw volume intensity data\nuniform usampler2D srcTexture;\n\nvoid main()\n{\n    ivec2 vUv = ivec2(int(gl_FragCoord.x), int(gl_FragCoord.y));\n    uint intensity = texelFetch(srcTexture, vUv, 0).r;\n    float ilookup = float(float(intensity) - lutMinMax.x) / float(lutMinMax.y - lutMinMax.x);\n    // apply lut to intensity:\n    vec4 pix = texture(lutSampler, vec2(ilookup, 0.5));\n    gl_FragColor = vec4(pix.xyz*pix.w, pix.w);\n}\n";
+/* babel-plugin-inline-import './constants/shaders/fuseF.frag' */
+const fuseShaderSrcF = "precision highp float;\nprecision highp int;\nprecision highp sampler2D;\nprecision highp sampler3D;\n\n// the lut texture is a 256x1 rgba texture for each channel\nuniform sampler2D lutSampler;\n\nuniform vec2 lutMinMax;\n\n// src texture is the raw volume intensity data\nuniform sampler2D srcTexture;\n\nvoid main()\n{\n    ivec2 vUv = ivec2(int(gl_FragCoord.x), int(gl_FragCoord.y));\n\n    // load from channel\n    float intensity = texelFetch(srcTexture, vUv, 0).r;\n\n    float ilookup = float(float(intensity) - lutMinMax.x) / float(lutMinMax.y - lutMinMax.x);\n    // apply lut to intensity:\n    vec4 pix = texture(lutSampler, vec2(ilookup, 0.5));\n    gl_FragColor = vec4(pix.xyz*pix.w, pix.w);\n}\n";
+/* babel-plugin-inline-import './constants/shaders/fuseI.frag' */
+const fuseShaderSrcI = "precision highp float;\nprecision highp int;\nprecision highp sampler2D;\nprecision highp sampler3D;\n\n// the lut texture is a 256x1 rgba texture for each channel\nuniform sampler2D lutSampler;\n\nuniform vec2 lutMinMax;\n\n// src texture is the raw volume intensity data\nuniform isampler2D srcTexture;\n\nvoid main()\n{\n    ivec2 vUv = ivec2(int(gl_FragCoord.x), int(gl_FragCoord.y));\n    int intensity = texelFetch(srcTexture, vUv, 0).r;\n    float ilookup = float(float(intensity) - lutMinMax.x) / float(lutMinMax.y - lutMinMax.x);\n    // apply lut to intensity:\n    vec4 pix = texture(lutSampler, vec2(ilookup, 0.5));\n    gl_FragColor = vec4(pix.xyz*pix.w, pix.w);\n}\n";
+// This is the owner of the fused RGBA volume texture atlas, and the mask texture atlas.
+// This module is responsible for updating the fused texture, given the read-only volume channel data.
+export default class FusedChannelData {
+  constructor(atlasX, atlasY) {
+    // allow for resizing
+    this.width = atlasX;
+    this.height = atlasY;
+    this.maskTexture = new DataTexture(new Uint8ClampedArray(this.width * this.height).fill(255), this.width, this.height, RedFormat, UnsignedByteType);
+    this.maskTexture.generateMipmaps = false;
+    this.maskTexture.magFilter = LinearFilter;
+    this.maskTexture.minFilter = LinearFilter;
+    this.maskTexture.wrapS = ClampToEdgeWrapping;
+    this.maskTexture.wrapT = ClampToEdgeWrapping;
+    // for single-channel tightly packed array data:
+    this.maskTexture.unpackAlignment = 1;
+    this.fuseRequested = null;
+    this.channelsDataToFuse = [];
+    this.fuseScene = new Scene();
+    this.quadCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    this.fuseRenderTarget = new WebGLRenderTarget(this.width, this.height, {
+      minFilter: LinearFilter,
+      magFilter: LinearFilter,
+      format: RGBAFormat,
+      type: UnsignedByteType,
+      // FloatType ?
+      depthBuffer: false,
+      stencilBuffer: false,
+      generateMipmaps: false,
+      wrapS: ClampToEdgeWrapping,
+      wrapT: ClampToEdgeWrapping
+    });
+    this.fuseMaterialProps = {
+      vertexShader: renderToBufferVertShader,
+      depthTest: false,
+      depthWrite: false,
+      blending: CustomBlending,
+      blendSrc: OneFactor,
+      blendDst: OneFactor,
+      blendEquation: MaxEquation
+    };
+    // this exists to keep one reference alive
+    // to make sure we do not fully delete and re-create
+    // a shader every time.
+    this.fuseMaterialF = this.setupFuseMaterial(fuseShaderSrcF);
+    this.fuseMaterialUI = this.setupFuseMaterial(fuseShaderSrcUI);
+    this.fuseMaterialI = this.setupFuseMaterial(fuseShaderSrcI);
+    this.fuseMaterialF.needsUpdate = true;
+    this.fuseMaterialUI.needsUpdate = true;
+    this.fuseMaterialI.needsUpdate = true;
+    this.fuseGeometry = new PlaneGeometry(2, 2);
+  }
+  setupFuseMaterial(fragShaderSrc) {
+    return new ShaderMaterial({
+      uniforms: {
+        lutSampler: {
+          value: null
+        },
+        lutMinMax: {
+          value: new Vector2(0, 255)
+        },
+        srcTexture: {
+          value: null
+        }
+      },
+      fragmentShader: fragShaderSrc,
+      ...this.fuseMaterialProps
+    });
+  }
+  getFusedTexture() {
+    return this.fuseRenderTarget.texture;
+  }
+  cleanup() {
+    this.fuseScene.clear();
+    this.maskTexture.dispose();
+  }
+  getShader(dtype) {
+    switch (dtype) {
+      case "float32":
+        return this.fuseMaterialF;
+      case "uint8":
+      case "uint16":
+      case "uint32":
+        return this.fuseMaterialUI;
+      case "int8":
+      case "int16":
+      case "int32":
+        return this.fuseMaterialI;
+      default:
+        throw new Error("Unsupported data type for fuse shader");
+    }
+  }
+  fuse(combination, channels) {
+    // we can fuse if we have any loaded channels that are showing.
+    // actually, we can fuse if no channels are showing (but they are loaded), too.
+    let canFuse = false;
+    for (let i = 0; i < combination.length; ++i) {
+      const c = combination[i];
+      const idx = c.chIndex;
+      if (channels[idx].loaded) {
+        // set the lut in this fuse combination.
+        // can optimize by calling combineLuts more lazily
+        c.lut = channels[idx].combineLuts(c.rgbColor, c.lut);
+        canFuse = true;
+        //break;
+      }
+    }
+    if (!canFuse) {
+      this.channelsDataToFuse = [];
+      this.fuseRequested = [];
+      return;
+    }
+    this.fuseRequested = combination;
+    this.channelsDataToFuse = channels;
+  }
+  gpuFuse(renderer) {
+    const combination = this.fuseRequested;
+    const channels = this.channelsDataToFuse;
+    if (!combination) {
+      return;
+    }
+
+    // webgl draw one mesh per channel to fuse.  clear texture to 0,0,0,0
+
+    this.fuseScene.traverse(node => {
+      if (node instanceof Mesh) {
+        // materials were holding references to the channel data textures
+        // causing mem leak so we must dispose before clearing the scene
+        node.material.dispose();
+      }
+    });
+    this.fuseScene.clear();
+    for (let i = 0; i < combination.length; ++i) {
+      if (combination[i].rgbColor) {
+        const chIndex = combination[i].chIndex;
+        if (!channels[chIndex].loaded) {
+          continue;
+        }
+        // add a draw call per channel here.
+        // must clone the material to keep a unique set of uniforms
+        const mat = this.getShader(channels[chIndex].dtype).clone();
+        mat.uniforms.lutSampler.value = channels[chIndex].lutTexture;
+        // the lut texture is spanning only the data range of the channel, not the datatype range
+        mat.uniforms.lutMinMax.value = new Vector2(channels[chIndex].rawMin, channels[chIndex].rawMax);
+        mat.uniforms.srcTexture.value = channels[chIndex].dataTexture;
+        this.fuseScene.add(new Mesh(this.fuseGeometry, mat));
+      }
+    }
+    if (this.fuseScene.children.length > 0) {
+      renderer.setRenderTarget(this.fuseRenderTarget);
+      renderer.autoClearColor = true;
+      const prevClearColor = new Color();
+      renderer.getClearColor(prevClearColor);
+      const prevClearAlpha = renderer.getClearAlpha();
+      renderer.setClearColor(0x000000, 0);
+      renderer.render(this.fuseScene, this.quadCamera);
+      renderer.setRenderTarget(null);
+      renderer.setClearColor(prevClearColor, prevClearAlpha);
+    }
+    // "dirty flag"
+    this.fuseRequested = null;
+  }
+
+  // currently only one channel can be selected to participate as a mask
+  setChannelAsMask(idx, channel) {
+    if (!channel || !channel.loaded) {
+      return false;
+    }
+    // binarize the data
+    // (TODO consider whether it should be binarized or not?)
+    const datacopy = new Uint8ClampedArray(channel.imgData.data.length);
+    for (let i = 0; i < channel.imgData.data.length; i++) {
+      datacopy[i] = channel.imgData.data[i] > 0 ? 255 : 0;
+    }
+    const maskData = {
+      data: datacopy,
+      width: this.width,
+      height: this.height,
+      colorSpace: "srgb"
+    };
+    this.maskTexture.image = maskData;
+    this.maskTexture.needsUpdate = true;
+    return true;
+  }
+}

package/es/Histogram.js

@@ -0,0 +1,250 @@
+const NBINS = 256;
+/**
+ * Builds a histogram with 256 bins from a data array. Assume data is 8 bit single channel grayscale.
+ * @class
+ * @param {Array.<number>} data
+ */
+export default class Histogram {
+  // no more than 2^32 pixels of any one intensity in the data!?!?!
+
+  /** Min value in the original raw data. */
+
+  /** Max value in the original raw data. */
+
+  /** Size of each histogram bin in the scale of the original data. */
+
+  /** Index of the first bin (other than 0) with at least 1 value. */
+
+  /** Index of the last bin (other than 0) with at least 1 value. */
+
+  constructor(data) {
+    this.dataMinBin = 0;
+    this.dataMaxBin = 0;
+    this.maxBin = 0;
+    this.bins = new Uint32Array();
+    this.min = 0;
+    this.max = 0;
+    this.binSize = 0;
+
+    // build up the histogram
+    const hinfo = Histogram.calculateHistogram(data, NBINS);
+    this.bins = hinfo.bins;
+    this.min = hinfo.min;
+    this.max = hinfo.max;
+    this.binSize = hinfo.binSize;
+
+    // TODO: These should always return 0 and NBINS - 1, respectively. Test if these
+    // can be removed.
+    for (let i = 0; i < this.bins.length; i++) {
+      if (this.bins[i] > 0) {
+        this.dataMinBin = i;
+        break;
+      }
+    }
+    for (let i = this.bins.length - 1; i >= 0; i--) {
+      if (this.bins[i] > 0) {
+        this.dataMaxBin = i;
+        break;
+      }
+    }
+    this.pixelCount = data.length;
+
+    // get the bin with the most frequently occurring NONZERO value
+    this.maxBin = 1;
+    let max = this.bins[1];
+    for (let i = 1; i < this.bins.length; i++) {
+      if (this.bins[i] > max) {
+        this.maxBin = i;
+        max = this.bins[i];
+      }
+    }
+  }
+
+  // return the bin index of the given data value
+  static findBin(dataValue, dataMin, binSize, numBins) {
+    let binIndex = Math.floor((dataValue - dataMin) / binSize);
+    // for values that lie exactly on last bin we need to subtract one
+    if (binIndex === numBins) {
+      binIndex--;
+    }
+    return binIndex;
+  }
+
+  // return the bin index of the given data value
+  findBinOfValue(value) {
+    return Histogram.findBin(value, this.min, this.binSize, NBINS);
+  }
+
+  /**
+   * Return the min data value
+   * @return {number}
+   */
+  getDataMin() {
+    return this.min;
+  }
+
+  /**
+   * Return the max data value
+   * @return {number}
+   */
+  getDataMax() {
+    return this.max;
+  }
+
+  /**
+   * Returns the first bin index with at least 1 value, other than the 0th bin.
+   * @return {number}
+   */
+  getMin() {
+    return this.dataMinBin;
+  }
+
+  /**
+   * Returns the last bin index with at least 1 value, other than the 0th bin.
+   * @return {number}
+   */
+  getMax() {
+    // Note that this will always return `NBINS - 1`.
+    return this.dataMaxBin;
+  }
+  getNumBins() {
+    return this.bins.length;
+  }
+  getBin(i) {
+    return this.bins[i];
+  }
+  getBinRange(i) {
+    return [this.min + i * this.binSize, this.min + (i + 1) * this.binSize];
+  }
+
+  /**
+   * Find the bin that contains the percentage of pixels below it
+   * @return {number}
+   * @param {number} pct
+   */
+  findBinOfPercentile(pct) {
+    const limit = this.pixelCount * pct;
+    let i = 0;
+    let count = 0;
+    for (i = 0; i < this.bins.length; ++i) {
+      count += this.bins[i];
+      if (count > limit) {
+        break;
+      }
+    }
+    return i;
+  }
+
+  // Find bins at 10th / 90th percentile
+  findBestFitBins() {
+    const pixcount = this.pixelCount;
+    //const pixcount = this.imgData.data.length;
+    const limit = pixcount / 10;
+    let i = 0;
+    let count = 0;
+    for (i = 1; i < this.bins.length; ++i) {
+      count += this.bins[i];
+      if (count > limit) {
+        break;
+      }
+    }
+    const hmin = i;
+    count = 0;
+    for (i = this.bins.length - 1; i >= 1; --i) {
+      count += this.bins[i];
+      if (count > limit) {
+        break;
+      }
+    }
+    const hmax = i;
+    return [hmin, hmax];
+  }
+
+  // Find min and max bins attempting to replicate ImageJ's "Auto" button
+  findAutoIJBins() {
+    // note that consecutive applications of this should modify the auto threshold. see:
+    // https://github.com/imagej/ImageJ/blob/7746fcb0f5744a7a7758244c5dcd2193459e6e0e/ij/plugin/frame/ContrastAdjuster.java#L816
+    const AUTO_THRESHOLD = 5000;
+    const pixcount = this.pixelCount;
+    //  const pixcount = this.imgData.data.length;
+    const limit = pixcount / 10;
+    const threshold = pixcount / AUTO_THRESHOLD;
+
+    // this will skip the "zero" bin which contains pixels of zero intensity.
+    let hmin = this.bins.length - 1;
+    let hmax = 1;
+    for (let i = 1; i < this.bins.length; ++i) {
+      if (this.bins[i] > threshold && this.bins[i] <= limit) {
+        hmin = i;
+        break;
+      }
+    }
+    for (let i = this.bins.length - 1; i >= 1; --i) {
+      if (this.bins[i] > threshold && this.bins[i] <= limit) {
+        hmax = i;
+        break;
+      }
+    }
+    if (hmax < hmin) {
+      hmin = 0;
+      hmax = 255;
+    }
+    return [hmin, hmax];
+  }
+
+  // Find min and max bins using a percentile of the most commonly occurring value
+  findAutoMinMax() {
+    // simple linear mapping cutting elements with small appearence
+    // get 10% threshold
+    const PERCENTAGE = 0.1;
+    const th = Math.floor(this.bins[this.maxBin] * PERCENTAGE);
+    let b = 0;
+    let e = this.bins.length - 1;
+    for (let x = 1; x < this.bins.length; ++x) {
+      if (this.bins[x] > th) {
+        b = x;
+        break;
+      }
+    }
+    for (let x = this.bins.length - 1; x >= 1; --x) {
+      if (this.bins[x] > th) {
+        e = x;
+        break;
+      }
+    }
+    return [b, e];
+  }
+  static calculateHistogram(arr, numBins = 1) {
+    if (numBins < 1) {
+      numBins = 1;
+    }
+
+    // calculate min and max of arr
+    // TODO See convertChannel, which will also compute min and max!
+    // We could save a whole extra loop over the data, or have convertChannel compute the whole histogram.
+    // need to be careful about computing over chunks or whole ready-to-display volume
+
+    let min = arr[0];
+    let max = arr[0];
+    for (let i = 1; i < arr.length; i++) {
+      if (arr[i] < min) {
+        min = arr[i];
+      } else if (arr[i] > max) {
+        max = arr[i];
+      }
+    }
+    const bins = new Uint32Array(numBins).fill(0);
+    const binSize = (max - min) / numBins === 0 ? 1 : (max - min) / numBins;
+    for (let i = 0; i < arr.length; i++) {
+      const item = arr[i];
+      const binIndex = Histogram.findBin(item, min, binSize, numBins);
+      bins[binIndex]++;
+    }
+    return {
+      bins,
+      min,
+      max,
+      binSize
+    };
+  }
+}

package/es/ImageInfo.js

@@ -0,0 +1,127 @@
+import { volumeSize, physicalPixelSize } from "./VolumeDims.js";
+import { Vector3, Vector2 } from "three";
+export function defaultImageInfo() {
+  return {
+    name: "",
+    atlasTileDims: [1, 1],
+    subregionSize: [1, 1, 1],
+    subregionOffset: [0, 0, 0],
+    combinedNumChannels: 1,
+    channelNames: ["0"],
+    channelColors: [[255, 255, 255]],
+    multiscaleLevel: 0,
+    multiscaleLevelDims: [{
+      shape: [1, 1, 1, 1, 1],
+      spacing: [1, 1, 1, 1, 1],
+      spaceUnit: "",
+      timeUnit: "",
+      dataType: "uint8"
+    }],
+    transform: {
+      translation: [0, 0, 0],
+      rotation: [0, 0, 0],
+      scale: [1, 1, 1]
+    }
+  };
+}
+export class CImageInfo {
+  constructor(imageInfo) {
+    this.imageInfo = imageInfo || defaultImageInfo();
+  }
+  get currentLevelDims() {
+    return this.imageInfo.multiscaleLevelDims[this.imageInfo.multiscaleLevel];
+  }
+
+  /** Number of channels in the image */
+  get numChannels() {
+    return this.imageInfo.combinedNumChannels;
+  }
+
+  /** XYZ size of the *original* (not downsampled) volume, in pixels */
+  get originalSize() {
+    return volumeSize(this.imageInfo.multiscaleLevelDims[0]);
+  }
+
+  /** Size of the volume, in pixels */
+  get volumeSize() {
+    return volumeSize(this.currentLevelDims);
+  }
+
+  /** Size of a single *original* (not downsampled) pixel, in spatial units */
+  get physicalPixelSize() {
+    return physicalPixelSize(this.imageInfo.multiscaleLevelDims[0]);
+  }
+
+  /** Symbol of physical spatial unit used by `physicalPixelSize` */
+  get spatialUnit() {
+    return this.imageInfo.multiscaleLevelDims[0].spaceUnit;
+  }
+
+  /** Number of timesteps in the time series, or 1 if the image is not a time series */
+  get times() {
+    // 0 is T
+    return this.currentLevelDims.shape[0];
+  }
+
+  /** Size of each timestep in temporal units */
+  get timeScale() {
+    // 0 is T
+    return this.currentLevelDims.spacing[0];
+  }
+
+  /** Symbol of physical time unit used by `timeScale` */
+  get timeUnit() {
+    return this.currentLevelDims.timeUnit;
+  }
+
+  /** Number of scale levels available for this volume */
+  get numMultiscaleLevels() {
+    return this.imageInfo.multiscaleLevelDims.length;
+  }
+
+  /** The names of each channel */
+  get channelNames() {
+    return this.imageInfo.channelNames;
+  }
+
+  /** Optional overrides to default channel colors, in 0-255 range */
+  get channelColors() {
+    return this.imageInfo.channelColors;
+  }
+
+  /** Size of the currently loaded subregion, in pixels */
+  get subregionSize() {
+    return new Vector3(...this.imageInfo.subregionSize);
+  }
+
+  /** Offset of the loaded subregion into the total volume, in pixels */
+  get subregionOffset() {
+    return new Vector3(...this.imageInfo.subregionOffset);
+  }
+  get multiscaleLevel() {
+    return this.imageInfo.multiscaleLevel;
+  }
+
+  /**
+   * XY dimensions of the texture atlas used by `RayMarchedAtlasVolume` and `Atlas2DSlice`, in number of z-slice
+   * tiles (not pixels). Chosen by the loader to lay out the 3D volume in the squarest possible 2D texture atlas.
+   */
+  get atlasTileDims() {
+    return new Vector2(...this.imageInfo.atlasTileDims);
+  }
+  get transform() {
+    return {
+      translation: new Vector3(...this.imageInfo.transform.translation),
+      rotation: new Vector3(...this.imageInfo.transform.rotation),
+      scale: new Vector3(...this.imageInfo.transform.scale)
+    };
+  }
+}
+export function computeAtlasSize(imageInfo) {
+  const {
+    atlasTileDims
+  } = imageInfo;
+  const volDims = imageInfo.multiscaleLevelDims[imageInfo.multiscaleLevel];
+  // TCZYX: 4 = x, 3 = y
+  return [atlasTileDims[0] * volDims.shape[4], atlasTileDims[1] * volDims.shape[3]];
+}

package/es/Light.js

@@ -0,0 +1,74 @@
+import { Vector3 } from "three";
+export const AREA_LIGHT = 0;
+export const SKY_LIGHT = 1;
+export class Light {
+  // type = 1 for sky light, 0 for area light
+  constructor(type) {
+    this.mTheta = 14 * Math.PI / 180.0;
+    this.mPhi = 54 * Math.PI / 180.0;
+    this.mWidth = 1.0;
+    this.mHeight = 1.0;
+    this.mHalfWidth = 0.5 * this.mWidth;
+    this.mHalfHeight = 0.5 * this.mHeight;
+    this.mDistance = 4.0;
+    this.mSkyRadius = 1000.0;
+    this.mP = new Vector3();
+    this.mTarget = new Vector3();
+    this.mArea = 1.0;
+    this.mAreaPdf = 1.0 / this.mArea;
+    this.mColor = new Vector3(75, 75, 75);
+    this.mColorTop = new Vector3(0.3, 0.3, 0.3);
+    this.mColorMiddle = new Vector3(0.3, 0.3, 0.3);
+    this.mColorBottom = new Vector3(0.3, 0.3, 0.3);
+
+    // type = 1 for sky light, 0 for area light
+    this.mT = type;
+
+    // secondary properties:
+    this.mN = new Vector3(0, 0, 1);
+    this.mU = new Vector3(1, 0, 0);
+    this.mV = new Vector3(0, 1, 0);
+    this.update(new Vector3(0, 0, 0));
+  }
+  update(targetPoint, cameraMatrix) {
+    this.mHalfWidth = 0.5 * this.mWidth;
+    this.mHalfHeight = 0.5 * this.mHeight;
+    this.mTarget.copy(targetPoint);
+
+    // Determine light position
+    this.mP.x = this.mDistance * Math.sin(this.mPhi) * Math.sin(this.mTheta);
+    this.mP.z = this.mDistance * Math.sin(this.mPhi) * Math.cos(this.mTheta);
+    this.mP.y = this.mDistance * Math.cos(this.mPhi);
+    this.mP.add(this.mTarget);
+    if (cameraMatrix) {
+      // We want to treat the lights as positioned relative to the camera, so camera rotations should not move them.
+      // In other words, when we rotate the camera, it should seem like we are tumbling the volume under fixed lighting.
+      this.mP.applyMatrix4(cameraMatrix);
+      this.mTarget.applyMatrix4(cameraMatrix);
+    }
+
+    // Determine area
+    if (this.mT === AREA_LIGHT) {
+      this.mArea = this.mWidth * this.mHeight;
+      this.mAreaPdf = 1.0 / this.mArea;
+    } else if (this.mT === SKY_LIGHT) {
+      this.mP.copy(targetPoint);
+      // shift by nonzero amount
+      this.mTarget.addVectors(this.mP, new Vector3(0.0, 0.0, 1.0));
+      this.mSkyRadius = 1000.0 * targetPoint.length() * 2.0;
+      this.mArea = 4.0 * Math.PI * Math.pow(this.mSkyRadius, 2.0);
+      this.mAreaPdf = 1.0 / this.mArea;
+    }
+
+    // Compute orthogonal basis frame
+    this.mN.subVectors(this.mTarget, this.mP).normalize();
+    // if N and "up" are parallel, then just choose a different "up"
+    if (this.mN.y === 1.0 || this.mN.y === -1.0) {
+      this.mU.crossVectors(this.mN, new Vector3(1.0, 0.0, 0.0)).normalize();
+    } else {
+      // standard "up" vector
+      this.mU.crossVectors(this.mN, new Vector3(0.0, 1.0, 0.0)).normalize();
+    }
+    this.mV.crossVectors(this.mN, this.mU).normalize();
+  }
+}