@mapcatch/util 2.0.4 → 2.0.5-a

package/src/gl-operations/renderer.js

@@ -1,210 +1,210 @@
-import REGL from 'regl'
-import {
-  CLEAR_COLOR,
-  MAX_TEXTURE_DIMENSION,
-  EARTH_SUN_DISTANCE,
-  SUN_RADIUS
-} from './constants'
-
-import TextureManager from './texture_manager'
-import * as util from './util'
-import { vec3 } from 'gl-matrix'
-import * as reglCommands from './reglCommands'
-
-
-export default class Renderer {
-  constructor (gloperations, tileSize, nodataValue, scaleInput, sentinelInput, colorscaleMaxLength, sentinelMaxLength, aboveColor, belowColor) {
-    const canvas = document.createElement('canvas')
-    let maxTextureDimension = MAX_TEXTURE_DIMENSION
-    let normalTextureDimension = 1024
-
-    const regl = REGL({
-      canvas: canvas,
-      // profile: true,
-      // extension only used for advanced hillshading
-      // TODO: add fallback to rgba if writing to float fails
-      optionalExtensions: ['OES_texture_float', 'WEBGL_color_buffer_float'],
-      onDone: function (err, regl) {
-        if (err) {
-          console.error(err)
-          return
-        } else {
-          // cannot use this directly as it seems to cause some issues
-          // maxTextureDimension = regl.limits.maxTextureSize;
-          if (regl.limits.maxTextureSize > 2048) {
-            maxTextureDimension = 2048
-          }
-          if (regl.limits.maxTextureSize > 4096) {
-            maxTextureDimension = 4096
-          }
-          if (regl.limits.maxTextureSize > 8192) {
-            maxTextureDimension = 8192
-          }
-
-          // TODO: use lower normal dimension where relevant
-          // Currently set to same due to a bug
-          normalTextureDimension = maxTextureDimension
-        }
-        // TODO: Improve software rendering detection
-        if (regl.limits.maxFragmentUniforms === 261) {
-          console.warn('Software rendering detected. Many features of this plugin will fail.\
-          If you have a GPU, check if drivers are installed ok?')
-        }
-      }
-    })
-
-    const commonDrawConfig = reglCommands.getCommonDrawConfiguration(tileSize, nodataValue)
-    const fragMacros = {
-      SCALE_MAX_LENGTH: colorscaleMaxLength,
-      SENTINEL_MAX_LENGTH: sentinelMaxLength
-    }
-
-    // Assign object "instance" properties.
-    Object.assign(this, {
-      gloperations: gloperations,
-      canvas: canvas,
-      regl: regl,
-      tileSize: tileSize,
-      nodataValue: nodataValue,
-      maxTextureDimension: maxTextureDimension,
-      normalTextureDimension: normalTextureDimension,
-      scaleInput: scaleInput,
-      sentinelInput: sentinelInput,
-      scaleColormap: util.createColormapTexture(scaleInput, regl),
-      sentinelColormap: util.createColormapTexture(sentinelInput, regl),
-      textureManager: new TextureManager(regl, tileSize, normalTextureDimension, false),
-      drawTile: reglCommands.createDrawTileCommand(regl, commonDrawConfig, fragMacros),
-      aboveColor: util.colorStringToInts(aboveColor || '#00000000').map(i => i / 255.0),
-      belowColor: util.colorStringToInts(belowColor || '#00000000').map(i => i / 255.0)
-    })
-  }
-
-  destroy () {
-    if (this.regl) this.regl.destroy()
-    this.regl = null
-  }
-
-  renderTile ({ coords, pixelData }, _hillshadeOptions, zoom) {
-    const {
-      regl,
-      textureManager,
-      tileSize
-    } = this
-    this.setCanvasSize(tileSize, tileSize)
-    // Add image to the texture and retrieve its texture coordinates.
-    const textureBounds = textureManager.addTile(coords, pixelData)
-
-    regl.clear({ color: CLEAR_COLOR })
-
-    const zoomdelta = _hillshadeOptions.hsSimpleZoomdelta || 0
-
-    const offset_pixels = Math.max(0.5, 2 ** (zoom + zoomdelta) / 2048)
-    const offset_texcoords = offset_pixels / textureManager.texture.width
-
-    if (_hillshadeOptions.hillshadeType === 'none') {
-      this.drawTile({
-        canvasSize: [tileSize, tileSize],
-        canvasCoordinates: [0, 0],
-        textureBounds,
-        texture: textureManager.texture,
-        scaleLength: this.scaleInput.length,
-        sentinelLength: this.sentinelInput.length,
-        scaleColormap: this.scaleColormap,
-        sentinelColormap: this.sentinelColormap,
-        enableSimpleHillshade: false,
-        aboveColor: this.aboveColor,
-        belowColor: this.belowColor
-      })
-    } else if (_hillshadeOptions.hillshadeType === 'simple') {
-      this.drawTileHsSimple({
-        scaleLength: this.scaleInput.length,
-        sentinelLength: this.sentinelInput.length,
-        scaleColormap: this.scaleColormap,
-        sentinelColormap: this.sentinelColormap,
-        canvasSize: [tileSize, tileSize],
-        canvasCoordinates: [0, 0],
-        textureBounds: textureBounds,
-        texture: textureManager.texture,
-        textureSize: textureManager.texture.width,
-        tileSize: tileSize,
-        offset: offset_texcoords,
-        enableSimpleHillshade: true,
-        // elevationScale: _hillshadeOptions.hsElevationScale,
-        azimuth: _hillshadeOptions.hsSimpleAzimuth,
-        altitude: _hillshadeOptions.hsSimpleAltitude,
-        slopescale: _hillshadeOptions.hsSimpleSlopescale,
-        aboveColor: this.aboveColor,
-        belowColor: this.belowColor 
-      })
-    }
-
-    // Since the tile will fill the whole canvas, the offset is simply [0, 0].
-    return [0, 0]
-  }
-
-  setCanvasSize (width, height) {
-    Object.assign(this.canvas, { width, height })
-  }
-
-  generateAmbientDirections (iterations) {
-    const ambientDirections = []
-    for (let i = 0; i < iterations; i++) {
-      const direction = vec3.random(vec3.create(), Math.random())
-      ambientDirections.push(direction)
-    }
-    this.ambientDirections = ambientDirections
-  }
-
-  generateSunDirections (iterations, sunRadiusMultiplier) {
-    const sunDirections = []
-    for (let i = 0; i < iterations; i++) {
-      const direction = vec3.normalize(
-        vec3.create(),
-        vec3.add(
-          vec3.create(),
-          vec3.scale(
-            vec3.create(),
-            vec3.normalize(vec3.create(), [1, 1, 1]),
-            EARTH_SUN_DISTANCE
-          ),
-          vec3.random(vec3.create(), SUN_RADIUS * sunRadiusMultiplier)
-        )
-      )
-      sunDirections.push(direction)
-    }
-    this.sunDirections = sunDirections
-  }
-
-  updateColorscale (scaleInput) {
-    this.scaleInputPrevious = this.scaleInput
-    this.scaleInput = scaleInput
-    this.scaleColormapPrevious = this.scaleColormap
-    this.scaleColormap = util.createColormapTexture(scaleInput, this.regl)
-  }
-  updateOuteRangeColor (aboveColor, belowColor) {
-    this.aboveColorPrevious = this.aboveColor
-    this.aboveColor = util.colorStringToInts(aboveColor || '#00000000').map(i => i / 255.0)
-    this.belowColorPrevious = this.belowColor
-    this.belowColor = util.colorStringToInts(belowColor || '#00000000').map(i => i / 255.0)
-  }
-  updateSentinels (sentinelInput) {
-    this.sentinelInputPrevious = this.sentinelInput
-    this.sentinelInput = sentinelInput
-    this.sentinelColormapPrevious = this.sentinelColormap
-    this.sentinelColormap = util.createColormapTexture(sentinelInput, this.regl)
-  }
-  setMaxTextureDimension (newMaxTextureDimension) {
-    const {
-      textureManager,
-      tileSize,
-      regl
-    } = this
-
-    textureManager.destroy()
-
-    Object.assign(this, {
-      maxTextureDimension: newMaxTextureDimension,
-      textureManager: new TextureManager(regl, tileSize, newMaxTextureDimension, false)
-    })
-  }
+import REGL from 'regl'
+import {
+  CLEAR_COLOR,
+  MAX_TEXTURE_DIMENSION,
+  EARTH_SUN_DISTANCE,
+  SUN_RADIUS
+} from './constants'
+
+import TextureManager from './texture_manager'
+import * as util from './util'
+import { vec3 } from 'gl-matrix'
+import * as reglCommands from './reglCommands'
+
+
+export default class Renderer {
+  constructor (gloperations, tileSize, nodataValue, scaleInput, sentinelInput, colorscaleMaxLength, sentinelMaxLength, aboveColor, belowColor) {
+    const canvas = document.createElement('canvas')
+    let maxTextureDimension = MAX_TEXTURE_DIMENSION
+    let normalTextureDimension = 1024
+
+    const regl = REGL({
+      canvas: canvas,
+      // profile: true,
+      // extension only used for advanced hillshading
+      // TODO: add fallback to rgba if writing to float fails
+      optionalExtensions: ['OES_texture_float', 'WEBGL_color_buffer_float'],
+      onDone: function (err, regl) {
+        if (err) {
+          console.error(err)
+          return
+        } else {
+          // cannot use this directly as it seems to cause some issues
+          // maxTextureDimension = regl.limits.maxTextureSize;
+          if (regl.limits.maxTextureSize > 2048) {
+            maxTextureDimension = 2048
+          }
+          if (regl.limits.maxTextureSize > 4096) {
+            maxTextureDimension = 4096
+          }
+          if (regl.limits.maxTextureSize > 8192) {
+            maxTextureDimension = 8192
+          }
+
+          // TODO: use lower normal dimension where relevant
+          // Currently set to same due to a bug
+          normalTextureDimension = maxTextureDimension
+        }
+        // TODO: Improve software rendering detection
+        if (regl.limits.maxFragmentUniforms === 261) {
+          console.warn('Software rendering detected. Many features of this plugin will fail.\
+          If you have a GPU, check if drivers are installed ok?')
+        }
+      }
+    })
+
+    const commonDrawConfig = reglCommands.getCommonDrawConfiguration(tileSize, nodataValue)
+    const fragMacros = {
+      SCALE_MAX_LENGTH: colorscaleMaxLength,
+      SENTINEL_MAX_LENGTH: sentinelMaxLength
+    }
+
+    // Assign object "instance" properties.
+    Object.assign(this, {
+      gloperations: gloperations,
+      canvas: canvas,
+      regl: regl,
+      tileSize: tileSize,
+      nodataValue: nodataValue,
+      maxTextureDimension: maxTextureDimension,
+      normalTextureDimension: normalTextureDimension,
+      scaleInput: scaleInput,
+      sentinelInput: sentinelInput,
+      scaleColormap: util.createColormapTexture(scaleInput, regl),
+      sentinelColormap: util.createColormapTexture(sentinelInput, regl),
+      textureManager: new TextureManager(regl, tileSize, normalTextureDimension, false),
+      drawTile: reglCommands.createDrawTileCommand(regl, commonDrawConfig, fragMacros),
+      aboveColor: util.colorStringToInts(aboveColor || '#00000000').map(i => i / 255.0),
+      belowColor: util.colorStringToInts(belowColor || '#00000000').map(i => i / 255.0)
+    })
+  }
+
+  destroy () {
+    if (this.regl) this.regl.destroy()
+    this.regl = null
+  }
+
+  renderTile ({ coords, pixelData }, _hillshadeOptions, zoom) {
+    const {
+      regl,
+      textureManager,
+      tileSize
+    } = this
+    this.setCanvasSize(tileSize, tileSize)
+    // Add image to the texture and retrieve its texture coordinates.
+    const textureBounds = textureManager.addTile(coords, pixelData)
+
+    regl.clear({ color: CLEAR_COLOR })
+
+    const zoomdelta = _hillshadeOptions.hsSimpleZoomdelta || 0
+
+    const offset_pixels = Math.max(0.5, 2 ** (zoom + zoomdelta) / 2048)
+    const offset_texcoords = offset_pixels / textureManager.texture.width
+
+    if (_hillshadeOptions.hillshadeType === 'none') {
+      this.drawTile({
+        canvasSize: [tileSize, tileSize],
+        canvasCoordinates: [0, 0],
+        textureBounds,
+        texture: textureManager.texture,
+        scaleLength: this.scaleInput.length,
+        sentinelLength: this.sentinelInput.length,
+        scaleColormap: this.scaleColormap,
+        sentinelColormap: this.sentinelColormap,
+        enableSimpleHillshade: false,
+        aboveColor: this.aboveColor,
+        belowColor: this.belowColor
+      })
+    } else if (_hillshadeOptions.hillshadeType === 'simple') {
+      this.drawTileHsSimple({
+        scaleLength: this.scaleInput.length,
+        sentinelLength: this.sentinelInput.length,
+        scaleColormap: this.scaleColormap,
+        sentinelColormap: this.sentinelColormap,
+        canvasSize: [tileSize, tileSize],
+        canvasCoordinates: [0, 0],
+        textureBounds: textureBounds,
+        texture: textureManager.texture,
+        textureSize: textureManager.texture.width,
+        tileSize: tileSize,
+        offset: offset_texcoords,
+        enableSimpleHillshade: true,
+        // elevationScale: _hillshadeOptions.hsElevationScale,
+        azimuth: _hillshadeOptions.hsSimpleAzimuth,
+        altitude: _hillshadeOptions.hsSimpleAltitude,
+        slopescale: _hillshadeOptions.hsSimpleSlopescale,
+        aboveColor: this.aboveColor,
+        belowColor: this.belowColor 
+      })
+    }
+
+    // Since the tile will fill the whole canvas, the offset is simply [0, 0].
+    return [0, 0]
+  }
+
+  setCanvasSize (width, height) {
+    Object.assign(this.canvas, { width, height })
+  }
+
+  generateAmbientDirections (iterations) {
+    const ambientDirections = []
+    for (let i = 0; i < iterations; i++) {
+      const direction = vec3.random(vec3.create(), Math.random())
+      ambientDirections.push(direction)
+    }
+    this.ambientDirections = ambientDirections
+  }
+
+  generateSunDirections (iterations, sunRadiusMultiplier) {
+    const sunDirections = []
+    for (let i = 0; i < iterations; i++) {
+      const direction = vec3.normalize(
+        vec3.create(),
+        vec3.add(
+          vec3.create(),
+          vec3.scale(
+            vec3.create(),
+            vec3.normalize(vec3.create(), [1, 1, 1]),
+            EARTH_SUN_DISTANCE
+          ),
+          vec3.random(vec3.create(), SUN_RADIUS * sunRadiusMultiplier)
+        )
+      )
+      sunDirections.push(direction)
+    }
+    this.sunDirections = sunDirections
+  }
+
+  updateColorscale (scaleInput) {
+    this.scaleInputPrevious = this.scaleInput
+    this.scaleInput = scaleInput
+    this.scaleColormapPrevious = this.scaleColormap
+    this.scaleColormap = util.createColormapTexture(scaleInput, this.regl)
+  }
+  updateOuteRangeColor (aboveColor, belowColor) {
+    this.aboveColorPrevious = this.aboveColor
+    this.aboveColor = util.colorStringToInts(aboveColor || '#00000000').map(i => i / 255.0)
+    this.belowColorPrevious = this.belowColor
+    this.belowColor = util.colorStringToInts(belowColor || '#00000000').map(i => i / 255.0)
+  }
+  updateSentinels (sentinelInput) {
+    this.sentinelInputPrevious = this.sentinelInput
+    this.sentinelInput = sentinelInput
+    this.sentinelColormapPrevious = this.sentinelColormap
+    this.sentinelColormap = util.createColormapTexture(sentinelInput, this.regl)
+  }
+  setMaxTextureDimension (newMaxTextureDimension) {
+    const {
+      textureManager,
+      tileSize,
+      regl
+    } = this
+
+    textureManager.destroy()
+
+    Object.assign(this, {
+      maxTextureDimension: newMaxTextureDimension,
+      textureManager: new TextureManager(regl, tileSize, newMaxTextureDimension, false)
+    })
+  }
 }

package/src/gl-operations/shaders/fragment/convertDem.js

@@ -1,26 +1,26 @@
-import glsl from 'glslify'
-
-export default glsl`#ifdef GL_FRAGMENT_PRECISION_HIGH
-precision highp float;
-#else
-precision mediump float;
-#endif
-
-#pragma glslify: floatToRgba = require(glsl-float-to-rgba)
-
-uniform float nodataValue;
-uniform bool littleEndian;
-uniform sampler2D texture;
-varying vec2 vTexCoord;
-
-void main() {
-  //sample the texture
-  vec3 rgb = texture2D(texture, vTexCoord).rgb;
-
-  // Convert the red, green, and blue channels into a float
-  float f = -10000.0 + ((rgb.r * 255.0 * 256.0 * 256.0 + rgb.g * 255.0 * 256.0 + rgb.b * 255.0) * 0.1);
-
-  // convert to rgba and write to framebuffer
-  gl_FragColor = floatToRgba(f, littleEndian);
-}
+import glsl from 'glslify'
+
+export default glsl`#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+
+#pragma glslify: floatToRgba = require(glsl-float-to-rgba)
+
+uniform float nodataValue;
+uniform bool littleEndian;
+uniform sampler2D texture;
+varying vec2 vTexCoord;
+
+void main() {
+  //sample the texture
+  vec3 rgb = texture2D(texture, vTexCoord).rgb;
+
+  // Convert the red, green, and blue channels into a float
+  float f = -10000.0 + ((rgb.r * 255.0 * 256.0 * 256.0 + rgb.g * 255.0 * 256.0 + rgb.b * 255.0) * 0.1);
+
+  // convert to rgba and write to framebuffer
+  gl_FragColor = floatToRgba(f, littleEndian);
+}
 `

package/src/gl-operations/shaders/fragment/convolutionSmooth.js

@@ -1,55 +1,55 @@
-import glsl from 'glslify'
-
-export default glsl`#ifdef GL_FRAGMENT_PRECISION_HIGH
-precision highp float;
-#else
-precision mediump float;
-#endif
-
-#pragma glslify: rgbaToFloat = require(glsl-rgba-to-float)
-#pragma glslify: floatToRgba = require(glsl-float-to-rgba)
-#pragma glslify: isCloseEnough = require(../util/isCloseEnough.glsl)
-#pragma glslify: getTexelValue = require(../util/getTexelValue.glsl)
-
-uniform sampler2D texture;
-uniform float textureSize;
-uniform bool littleEndian;
-uniform float nodataValue;
-varying vec2 vTexCoord;
-uniform int kernelSize;
-
-int kernelEnd = int(kernelSize/2);
-int kernelStart = kernelEnd * -1;
-
-float runConvKernel(vec2 pos, vec2 onePixel) {
-  float convKernelWeight = 0.0;
-  float sum = 0.0;
-
-  for (int i = -20; i < 20; i ++) {
-    if (i < kernelStart) continue;
-    if (i > kernelEnd) break;
-    for (int j = -20; j < 20; j ++) {
-      if (j < kernelStart) continue;
-      if (j > kernelEnd) break;
-      float texelValue = getTexelValue(texture, pos + onePixel * vec2(i, j), littleEndian);
-      if (!isCloseEnough(texelValue, nodataValue)) {
-        sum = sum + texelValue;
-        convKernelWeight = convKernelWeight + 1.0;
-      }
-    }
-  }
-  return (sum / convKernelWeight);
-}
-
-
-void main() {
-  float texelFloat = getTexelValue(texture, vTexCoord, littleEndian);
-  if (isCloseEnough(texelFloat, nodataValue)) {
-    gl_FragColor = floatToRgba(nodataValue, littleEndian);
-  } else {
-    vec2 onePixel = vec2(1.0, 1.0) / textureSize;
-    float texelFloatSmoothed = runConvKernel(vTexCoord, onePixel);
-    gl_FragColor = floatToRgba(texelFloatSmoothed, littleEndian);
-  }
-}
+import glsl from 'glslify'
+
+export default glsl`#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+
+#pragma glslify: rgbaToFloat = require(glsl-rgba-to-float)
+#pragma glslify: floatToRgba = require(glsl-float-to-rgba)
+#pragma glslify: isCloseEnough = require(../util/isCloseEnough.glsl)
+#pragma glslify: getTexelValue = require(../util/getTexelValue.glsl)
+
+uniform sampler2D texture;
+uniform float textureSize;
+uniform bool littleEndian;
+uniform float nodataValue;
+varying vec2 vTexCoord;
+uniform int kernelSize;
+
+int kernelEnd = int(kernelSize/2);
+int kernelStart = kernelEnd * -1;
+
+float runConvKernel(vec2 pos, vec2 onePixel) {
+  float convKernelWeight = 0.0;
+  float sum = 0.0;
+
+  for (int i = -20; i < 20; i ++) {
+    if (i < kernelStart) continue;
+    if (i > kernelEnd) break;
+    for (int j = -20; j < 20; j ++) {
+      if (j < kernelStart) continue;
+      if (j > kernelEnd) break;
+      float texelValue = getTexelValue(texture, pos + onePixel * vec2(i, j), littleEndian);
+      if (!isCloseEnough(texelValue, nodataValue)) {
+        sum = sum + texelValue;
+        convKernelWeight = convKernelWeight + 1.0;
+      }
+    }
+  }
+  return (sum / convKernelWeight);
+}
+
+
+void main() {
+  float texelFloat = getTexelValue(texture, vTexCoord, littleEndian);
+  if (isCloseEnough(texelFloat, nodataValue)) {
+    gl_FragColor = floatToRgba(nodataValue, littleEndian);
+  } else {
+    vec2 onePixel = vec2(1.0, 1.0) / textureSize;
+    float texelFloatSmoothed = runConvKernel(vTexCoord, onePixel);
+    gl_FragColor = floatToRgba(texelFloatSmoothed, littleEndian);
+  }
+}
 `

package/src/gl-operations/shaders/fragment/diffCalc.js

@@ -1,34 +1,34 @@
-import glsl from 'glslify'
-
-export default glsl`#ifdef GL_FRAGMENT_PRECISION_HIGH
-precision highp float;
-#else
-precision mediump float;
-#endif
-
-#pragma glslify: floatToRgba = require(glsl-float-to-rgba)
-#pragma glslify: isCloseEnough = require(../util/isCloseEnough.glsl)
-#pragma glslify: getTexelValue = require(../util/getTexelValue.glsl)
-
-uniform float nodataValue;
-uniform bool littleEndian;
-uniform sampler2D textureA;
-uniform sampler2D textureB;
-
-varying vec2 vTexCoordA;
-varying vec2 vTexCoordB;
-
-void main() {
-  float texelFloatA = getTexelValue(textureA, vTexCoordA, littleEndian);
-  float texelFloatB = getTexelValue(textureB, vTexCoordB, littleEndian);
-  bool aIsNodata = isCloseEnough(texelFloatA, nodataValue);
-  bool bIsNodata = isCloseEnough(texelFloatB, nodataValue);
-
-  if (aIsNodata || bIsNodata) {
-    gl_FragColor = floatToRgba(nodataValue, littleEndian);
-  } else {
-    float diff = texelFloatB - texelFloatA;
-    gl_FragColor = floatToRgba(diff, littleEndian);
-  }
-}
+import glsl from 'glslify'
+
+export default glsl`#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+
+#pragma glslify: floatToRgba = require(glsl-float-to-rgba)
+#pragma glslify: isCloseEnough = require(../util/isCloseEnough.glsl)
+#pragma glslify: getTexelValue = require(../util/getTexelValue.glsl)
+
+uniform float nodataValue;
+uniform bool littleEndian;
+uniform sampler2D textureA;
+uniform sampler2D textureB;
+
+varying vec2 vTexCoordA;
+varying vec2 vTexCoordB;
+
+void main() {
+  float texelFloatA = getTexelValue(textureA, vTexCoordA, littleEndian);
+  float texelFloatB = getTexelValue(textureB, vTexCoordB, littleEndian);
+  bool aIsNodata = isCloseEnough(texelFloatA, nodataValue);
+  bool bIsNodata = isCloseEnough(texelFloatB, nodataValue);
+
+  if (aIsNodata || bIsNodata) {
+    gl_FragColor = floatToRgba(nodataValue, littleEndian);
+  } else {
+    float diff = texelFloatB - texelFloatA;
+    gl_FragColor = floatToRgba(diff, littleEndian);
+  }
+}
 `