Load 16-bit PNG depth map using PngToy

depthmap-loader.js

class DepthmapLoader {
  /**
   * load 16-bit PNG depthmap from URL and return
   * the normalized bitmap as a Canvas ImageData
   *
   * @param  {string} url - URL of PNG image
   * @return {Promise} -> {width,height,imageData}
   */
  fetch(url) {
    let pngtoy = new PngToy();
    return pngtoy.fetch(url)
      .then(()  => pngtoy.decode())
      .then(bmp => {
        const width  = bmp.width
            , height = bmp.height
            , data   = bmp.bitmap;
        return { width, height, imageData:
          this._convert(data, width, height)
        };
      });
  }

  /**
   * @param  {Uint16Array} data
   * @param  {number} w
   * @param  {number} h
   * @return {ImageData}
   * @private
   */
  _convert(data, w, h) {
    let canvas = document.createElement('canvas')
      , ctx    = canvas.getContext('2d')
      , id     = ctx.createImageData(w, h)
      , d      = id.data;

    // workaround for pngtoy decoding 16-bit
    // values using the incorrect? endianness
    for (let i = 0, j = data.length; i < j; i++) {
      let val = data[i]
        , lb  = val & 0xff
        , ub  = val >> 8;
      data[i] = lb  << 8 | ub;
    }
    this._normalize(data);

    for (let i = 0, j = 0, k = d.length; j < k; i++, j += 4) {
      let val = data[i];
      // reverse shade so darker is farther away, and
      // boost brightness by 32 for better visibility,
      // but only if the value doesn't indicate a hole
      d[j+2] = d[j+1] = d[j] = val && (288 - val);
      d[j+3] = 255; // opaque
    }
    return id;
  }

  /**
   * @param {Uint16Array} data
   * @private
   */
  _normalize(data) {
    var hist   = new Uint32Array(65536)
      // min percent of total depthmap pixels
      // for determining min/max depth values
      , thresh = 0.075
      , min    = 65535
      , max    = 0
      , len    = data.length
      , val,  pcnt
      , norm, prev
      , i, j, spread;

    // get min/max depth values
    for (i = 0; i < len; i++) {
      ++hist[val = data[i]];
      if (val > max) {max = val;}
      if (val < min) {min = val;}
    }
    // discard min/max outliers
    for (i = min; i < max; i++) {
      pcnt = hist[i] / len * 100;
      if (thresh <= pcnt) {break;}
    }
    for (j = max; j > min; j--) {
      pcnt = hist[j] / len * 100;
      if (thresh <= pcnt) {break;}
    }
    if (0 < j - i) {
      min = i; max = j;
    }
    // scale 16-bit values to 8-bit
    spread = 255 / (max - min + 1);

    for (i = 0; i < len; i++) {
      if (prev !== (val = data[i])) {
        prev = val;
        // clamp val between adjusted min/max first
        val  = Math.max(0, Math.min(val, max) - min);
        norm = val * spread;
      }
      data[i] = norm;
    }
  }
}

Was strugling with bytes and bits, to read grayscale 16bit PNG until I found this:
https://gist.github.com/erhhung/766766d761f1ef0b807e275fc8ed70f9#file-depthmap-loader-js-L38

Don't know why it works, but it works! 👍 :)

Was strugling with bytes and bits, to read grayscale 16bit PNG until I found this:
https://gist.github.com/erhhung/766766d761f1ef0b807e275fc8ed70f9#file-depthmap-loader-js-L38

Don't know why it works, but it works! 👍 :)

That gets me close to what I need for RGBA but not quite. Can someone help me get 16bit data from pngtoy into little endian 16bit (if that's even the right term)?