geojs 1.6.5 → 1.7.2

package/src/webgl/lookupTable2D.js

@@ -0,0 +1,122 @@
+var inherit = require('../inherit');
+var timestamp = require('../timestamp');
+var vgl = require('vgl');
+
+/**
+ * Switch to a specific texture unit.
+ *
+ * @param {vgl.renderState} renderState An object that contains the context
+ *   used for drawing.
+ * @param {number} textureUnit The number of the texture unit [0-15].
+ */
+function activateTextureUnit(renderState, textureUnit) {
+  if (textureUnit >= 0 && textureUnit <= 31) {
+    renderState.m_context.activeTexture(vgl.GL.TEXTURE0 + textureUnit);
+  } else {
+    throw Error('[error] Texture unit ' + textureUnit + ' is not supported');
+  }
+}
+
+/**
+ * Create a new instance of class webgl_lookupTable2D.
+ *
+ * @class
+ * @alias geo.webgl.lookupTable2D
+ * @param {object} arg Options object.
+ * @param {number} [arg.maxWidth] Maximum width to use for the texture.  If the
+ *   number of colors set is less than this, the texture is 1D.  If greater, it
+ *   will be a rectangle of maxWidth x whatever height is necessary.
+ * @param {number[]} [arg.colorTable] Initial color table for the texture.
+ *   This is of the form RGBARGBA... where each value is an integer on the
+ *   scale [0,255].
+ * @extends vgl.texture
+ * @returns {geo.webgl.lookupTable2D}
+ */
+var webgl_lookupTable2D = function (arg) {
+  'use strict';
+
+  if (!(this instanceof webgl_lookupTable2D)) {
+    return new webgl_lookupTable2D(arg);
+  }
+  arg = arg || {};
+  vgl.texture.call(this);
+
+  var m_setupTimestamp = timestamp(),
+      m_maxWidth = arg.maxWidth || 4096,
+      m_colorTable = new Uint8Array([0, 0, 0, 0]),
+      m_colorTableOrig,
+      m_this = this;
+
+  /**
+   * Create lookup table, initialize parameters, and bind data to it.
+   *
+   * @param {vgl.renderState} renderState An object that contains the context
+   *   used for drawing.
+   */
+  this.setup = function (renderState) {
+    activateTextureUnit(renderState, m_this.textureUnit());
+
+    renderState.m_context.deleteTexture(m_this.m_textureHandle);
+    m_this.m_textureHandle = renderState.m_context.createTexture();
+    renderState.m_context.bindTexture(vgl.GL.TEXTURE_2D, m_this.m_textureHandle);
+    renderState.m_context.texParameteri(vgl.GL.TEXTURE_2D, vgl.GL.TEXTURE_MIN_FILTER, vgl.GL.NEAREST);
+    renderState.m_context.texParameteri(vgl.GL.TEXTURE_2D, vgl.GL.TEXTURE_MAG_FILTER, vgl.GL.NEAREST);
+    renderState.m_context.texParameteri(vgl.GL.TEXTURE_2D, vgl.GL.TEXTURE_WRAP_S, vgl.GL.CLAMP_TO_EDGE);
+    renderState.m_context.texParameteri(vgl.GL.TEXTURE_2D, vgl.GL.TEXTURE_WRAP_T, vgl.GL.CLAMP_TO_EDGE);
+    renderState.m_context.pixelStorei(vgl.GL.UNPACK_ALIGNMENT, 1);
+    renderState.m_context.pixelStorei(vgl.GL.UNPACK_FLIP_Y_WEBGL, true);
+
+    renderState.m_context.texImage2D(
+      vgl.GL.TEXTURE_2D, 0, vgl.GL.RGBA, m_this.width, m_this.height, 0,
+      vgl.GL.RGBA, vgl.GL.UNSIGNED_BYTE, m_colorTable);
+
+    renderState.m_context.bindTexture(vgl.GL.TEXTURE_2D, null);
+    m_setupTimestamp.modified();
+  };
+
+  /**
+   * Get/set color table.
+   *
+   * @param {number[]} [val] An array of RGBARGBA... integers on a scale
+   *   of [0, 255].  `undefined` to get the current value.
+   * @returns {number[]|this}
+   */
+  this.colorTable = function (val) {
+    if (val === undefined) {
+      return m_colorTableOrig;
+    }
+    m_colorTableOrig = val;
+    if (val.length < 4) {
+      val = [0, 0, 0, 0];
+    }
+    m_this.width = Math.min(m_maxWidth, val.length / 4);
+    m_this.height = Math.ceil(val.length / 4 / m_maxWidth);
+    if (!(val instanceof Uint8Array) || val.length !== m_this.width * m_this.height * 4) {
+      if (val.length < m_this.width * m_this.height * 4) {
+        val = val.concat(new Array(m_this.width * m_this.height * 4 - val.length).fill(0));
+      }
+      m_colorTable = new Uint8Array(val);
+    } else {
+      m_colorTable = val;
+    }
+    m_this.modified();
+    return m_this;
+  };
+
+  /**
+   * Get maxWidth value.
+   *
+   * @returns {number} The maxWidth of the texture used.
+   */
+  this.maxWidth = function () {
+    return m_maxWidth;
+  };
+
+  this.colorTable(arg.colorTable || []);
+
+  return this;
+};
+
+inherit(webgl_lookupTable2D, vgl.texture);
+
+module.exports = webgl_lookupTable2D;

package/src/webgl/pixelmapFeature.frag

@@ -0,0 +1,47 @@
+/* pixelmapFeature fragment shader */
+
+varying highp vec2 iTextureCoord;
+uniform sampler2D sampler2d;
+uniform sampler2D lutSampler;
+uniform int lutWidth;
+uniform int lutHeight;
+uniform mediump float opacity;
+uniform highp vec2 crop;
+
+void main(void) {
+  if ((crop.s < 1.0 && iTextureCoord.s > crop.s) || (crop.t < 1.0 && 1.0 - iTextureCoord.t > crop.t)) {
+    discard;
+  }
+  // to add anti-aliasing, we would need to know the current pixel size
+  // (probably computed in the vertex shader) and then sample the base image at
+  // multiple points, then average the output color.
+  highp vec4 lutValue = texture2D(sampler2d, iTextureCoord);
+  highp vec2 lutCoord;
+  lutCoord.s = (
+    mod(
+      // add 0.5 to handle float imprecision
+      floor(lutValue.r * 255.0 + 0.5) +
+      floor(lutValue.g * 255.0 + 0.5) * 256.0,
+      float(lutWidth)
+    // center in pixel
+    ) + 0.5) / float(lutWidth);
+  // Our image is top-down, so invert the coordinate
+  lutCoord.t = 1.0 - (
+    floor(
+      (
+        // add 0.5 to handle float imprecision
+        floor(lutValue.r * 255.0 + 0.5) +
+        floor(lutValue.g * 255.0 + 0.5) * 256.0 +
+        floor(lutValue.b * 255.0 + 0.5) * 256.0 * 256.0
+        // We may want an option to use the alpha channel to allow more indices
+      ) / float(lutWidth)
+    // center in pixel
+    ) + 0.5) / float(lutHeight);
+  if (lutCoord.t < 0.0) {
+    discard;
+  }
+  mediump vec4 color = texture2D(lutSampler, lutCoord);
+
+  color.a *= opacity;
+  gl_FragColor = color;
+}

package/src/webgl/pixelmapFeature.js

@@ -0,0 +1,203 @@
+var inherit = require('../inherit');
+var registerFeature = require('../registry').registerFeature;
+var pixelmapFeature = require('../pixelmapFeature');
+var lookupTable2D = require('./lookupTable2D');
+var util = require('../util');
+
+/**
+ * Create a new instance of class webgl.pixelmapFeature.
+ *
+ * @class
+ * @alias geo.webgl.pixelmapFeature
+ * @extends geo.pixelmapFeature
+ * @param {geo.pixelmapFeature.spec} arg
+ * @returns {geo.webgl.pixelmapFeature}
+ */
+var webgl_pixelmapFeature = function (arg) {
+  'use strict';
+
+  if (!(this instanceof webgl_pixelmapFeature)) {
+    return new webgl_pixelmapFeature(arg);
+  }
+  pixelmapFeature.call(this, arg);
+
+  var object = require('./object');
+  object.call(this);
+
+  const vgl = require('vgl');
+  const fragmentShader = require('./pixelmapFeature.frag');
+
+  var m_quadFeature,
+      m_quadFeatureInit,
+      s_exit = this._exit,
+      m_lookupTable,
+      m_this = this;
+
+  /**
+   * If the specified coordinates are in the rendered quad, use the basis
+   * information from the quad to determine the pixelmap index value so that it
+   * can be included in the `found` results.
+   *
+   * @param {geo.geoPosition} geo Coordinate.
+   * @param {string|geo.transform|null} [gcs] Input gcs.  `undefined` to use
+   *    the interface gcs, `null` to use the map gcs, or any other transform.
+   * @returns {geo.feature.searchResult} An object with a list of features and
+   *    feature indices that are located at the specified point.
+   */
+  this.pointSearch = function (geo, gcs) {
+    if (m_quadFeature && m_this.m_info) {
+      let result = m_quadFeature.pointSearch(geo, gcs);
+      // use the last index by preference, since for tile layers, this is the
+      // topmosttile
+      let idxIdx = result.index.length - 1;
+      for (; idxIdx >= 0; idxIdx -= 1) {
+        if (result.extra[result.index[idxIdx]]._quad &&
+            result.extra[result.index[idxIdx]]._quad.image) {
+          const img = result.extra[result.index[idxIdx]]._quad.image;
+          const basis = result.extra[result.index[idxIdx]].basis;
+          const x = Math.floor(basis.x * img.width);
+          const y = Math.floor(basis.y * img.height);
+          const canvas = document.createElement('canvas');
+          canvas.width = canvas.height = 1;
+          const context = canvas.getContext('2d');
+          context.drawImage(img, x, y, 1, 1, 0, 0, 1, 1);
+          const pixel = context.getImageData(0, 0, 1, 1).data;
+          const idx = pixel[0] + pixel[1] * 256 + pixel[2] * 256 * 256;
+          result = {
+            index: [idx],
+            found: [m_this.data()[idx]]
+          };
+          return result;
+        }
+      }
+    }
+    return {index: [], found: []};
+  };
+
+  /**
+   * Given the loaded pixelmap image, create a texture for the colors and a
+   * quad that will use it.
+   */
+  this._computePixelmap = function () {
+    var data = m_this.data() || [],
+        colorFunc = m_this.style.get('color');
+
+    let indexRange = m_this.indexModified(undefined, 'clear');
+    let fullUpdate = m_this.dataTime().timestamp() >= m_this.buildTime().timestamp() || indexRange === undefined;
+    if (!m_lookupTable) {
+      m_lookupTable = lookupTable2D();
+      m_lookupTable.setTextureUnit(1);
+      fullUpdate = true;
+    }
+    let clrLen = Math.max(1, data.length);
+    const maxWidth = m_lookupTable.maxWidth();
+    if (clrLen > maxWidth && clrLen % maxWidth) {
+      clrLen += maxWidth - (clrLen % maxWidth);
+    }
+
+    let colors;
+    if (!fullUpdate) {
+      colors = m_lookupTable.colorTable();
+      fullUpdate = colors.length !== clrLen * 4;
+      indexRange[0] = Math.max(0, indexRange[0]);
+      indexRange[1] = Math.min(data.length, indexRange[1] + 1);
+    }
+    if (fullUpdate) {
+      colors = new Uint8Array(clrLen * 4);
+      indexRange = [0, data.length];
+    }
+    for (let i = indexRange[0]; i < indexRange[1]; i += 1) {
+      const d = data[i];
+      const color = util.convertColor(colorFunc.call(m_this, d, i));
+      colors[i * 4] = color.r * 255;
+      colors[i * 4 + 1] = color.g * 255;
+      colors[i * 4 + 2] = color.b * 255;
+      colors[i * 4 + 3] = color.a === undefined ? 255 : (color.a * 255);
+    }
+    m_this.m_info = {colors: colors};
+    // check if colors haven't changed
+    var oldcolors = m_lookupTable.colorTable();
+    if (oldcolors && oldcolors.length === colors.length) {
+      let idx = indexRange[0] * 4;
+      for (; idx < indexRange[1] * 4; idx += 1) {
+        if (colors[idx] !== oldcolors[idx]) {
+          break;
+        }
+      }
+      if (idx === indexRange[1] * 4) {
+        return;
+      }
+    }
+    m_lookupTable.colorTable(colors);
+    /* If we haven't made a quad feature, make one now */
+    if (!m_quadFeature) {
+      m_quadFeature = m_this.layer().createFeature('quad', {
+        selectionAPI: false,
+        gcs: m_this.gcs(),
+        visible: m_this.visible(undefined, true)
+      });
+      m_quadFeatureInit = false;
+    }
+    if (!m_quadFeatureInit) {
+      m_this.dependentFeatures([m_quadFeature]);
+      m_quadFeature.setShader('image_fragment', fragmentShader);
+      m_quadFeature._hookBuild = (prog) => {
+        const lutSampler = new vgl.uniform(vgl.GL.INT, 'lutSampler');
+        lutSampler.set(m_lookupTable.textureUnit());
+        prog.addUniform(lutSampler);
+        const lutWidth = new vgl.uniform(vgl.GL.INT, 'lutWidth');
+        lutWidth.set(m_lookupTable.width);
+        prog.addUniform(lutWidth);
+        const lutHeight = new vgl.uniform(vgl.GL.INT, 'lutHeight');
+        lutHeight.set(m_lookupTable.height);
+        prog.addUniform(lutHeight);
+      };
+      m_quadFeature._hookRenderImageQuads = (renderState, quads) => {
+        quads.forEach((quad) => {
+          if (quad.image && quad.texture && !quad.texture.nearestPixel()) {
+            quad.texture.setNearestPixel(true);
+          }
+        });
+        m_lookupTable.bind(renderState, quads);
+      };
+      if (m_quadFeatureInit === false) {
+        m_quadFeature.style({
+          image: m_this.m_srcImage,
+          position: m_this.style.get('position')})
+        .data([{}])
+        .draw();
+      }
+      m_quadFeatureInit = true;
+    }
+  };
+
+  /**
+   * Destroy.  Deletes the associated quadFeature.
+   *
+   * @returns {this}
+   */
+  this._exit = function () {
+    if (m_quadFeature && m_this.layer()) {
+      m_this.layer().deleteFeature(m_quadFeature);
+      m_quadFeature = null;
+      m_this.dependentFeatures([]);
+    }
+    s_exit();
+    return m_this;
+  };
+
+  if (arg.quadFeature) {
+    m_quadFeature = arg.quadFeature;
+  }
+  this._init(arg);
+  return this;
+};
+
+inherit(webgl_pixelmapFeature, pixelmapFeature);
+
+// Now register it
+var capabilities = {};
+capabilities[pixelmapFeature.capabilities.lookup] = true;
+
+registerFeature('webgl', 'pixelmap', webgl_pixelmapFeature, capabilities);
+module.exports = webgl_pixelmapFeature;

package/src/webgl/quadFeature.js

@@ -3,6 +3,8 @@ var registerFeature = require('../registry').registerFeature;
 var quadFeature = require('../quadFeature');
 var timestamp = require('../timestamp');
 
+let _memoryCheckLargestTested = 4096 * 4096;
+
 /**
  * Create a new instance of class quadFeature.
  *
@@ -158,7 +160,7 @@ var webgl_quadFeature = function (arg) {
    * Build this feature.
    */
   this._build = function () {
-    var mapper, mat, prog, srctex, unicrop, unicropsource, geom, context;
+    var mapper, mat, prog, srctex, unicrop, unicropsource, geom, context, sampler2d;
 
     if (!m_this.position()) {
       return;
@@ -183,6 +185,10 @@ var webgl_quadFeature = function (arg) {
       prog.addUniform(new vgl.projectionUniform('projectionMatrix'));
       prog.addUniform(new vgl.floatUniform('opacity', 1.0));
       prog.addUniform(new vgl.floatUniform('zOffset', 0.0));
+      /* Use texture unit 0 */
+      sampler2d = new vgl.uniform(vgl.GL.INT, 'sampler2d');
+      sampler2d.set(0);
+      prog.addUniform(sampler2d);
       context = m_this.renderer()._glContext();
       unicrop = new vgl.uniform(context.FLOAT_VEC2, 'crop');
       unicrop.set([1.0, 1.0]);
@@ -194,6 +200,9 @@ var webgl_quadFeature = function (arg) {
         context.VERTEX_SHADER, context, vertexShaderImage));
       prog.addShader(vgl.getCachedShader(
         context.FRAGMENT_SHADER, context, fragmentShaderImage));
+      if (m_this._hookBuild) {
+        m_this._hookBuild(prog);
+      }
       mat.addAttribute(prog);
       mat.addAttribute(new vgl.blend());
       /* This is similar to vgl.planeSource */
@@ -355,14 +364,22 @@ var webgl_quadFeature = function (arg) {
         cropsrc = {x0: 0, y0: 0, x1: 1, y1: 1}, quadcropsrc,
         w, h, quadw, quadh;
 
+    if (m_this._hookRenderImageQuads) {
+      m_this._hookRenderImageQuads(renderState, m_quads.imgQuads);
+    }
     context.bindBuffer(context.ARRAY_BUFFER, m_glBuffers.imgQuadsPosition);
     $.each(m_quads.imgQuads, function (idx, quad) {
       if (!quad.image) {
         return;
       }
       quad.texture.bind(renderState);
-      if (context.getError() === context.OUT_OF_MEMORY) {
-        console.log('Insufficient GPU memory for texture');
+      // only check if the context is out of memory when using modestly large
+      // textures.  The check is slow.
+      if (quad.image.width * quad.image.height > _memoryCheckLargestTested) {
+        _memoryCheckLargestTested = quad.image.width * quad.image.height;
+        if (context.getError() === context.OUT_OF_MEMORY) {
+          console.log('Insufficient GPU memory for texture');
+        }
       }
       if (quad.opacity !== opacity) {
         opacity = quad.opacity;
@@ -450,6 +467,27 @@ var webgl_quadFeature = function (arg) {
     m_this.modified();
   };
 
+  /**
+   * Set the image or color vertex or fragment shader.
+   *
+   * @param {string} shaderType One of `image_vertex`, `image_fragment`,
+   *   `color_vertex`, or `color_fragment`.
+   * @param {string} shaderCode The shader program.
+   * @returns {this} The class instance on success, undefined in an unknown
+   *    shaderType was specified.
+   */
+  this.setShader = function (shaderType, shaderCode) {
+    switch (shaderType) {
+      case 'image_vertex': vertexShaderImage = shaderCode; break;
+      case 'image_fragment': fragmentShaderImage = shaderCode; break;
+      case 'color_vertex': vertexShaderColor = shaderCode; break;
+      case 'color_fragment': fragmentShaderColor = shaderCode; break;
+      default:
+        return;
+    }
+    return m_this;
+  };
+
   /**
    * Destroy.
    */