@mapcatch/util 1.0.15-a → 2.0.0

package/src/gl-operations/renderer.js

@@ -1,63 +1,63 @@
-import REGL, { Framebuffer2D } from 'regl';
+import REGL from 'regl'
 import {
   CLEAR_COLOR,
   MAX_TEXTURE_DIMENSION,
   EARTH_SUN_DISTANCE,
-  SUN_RADIUS,
-} from './constants';
+  SUN_RADIUS
+} from './constants'
 
-import TextureManager from './texture_manager';
-import * as util from './util';
-import { vec3 } from "gl-matrix";
-import * as reglCommands from './reglCommands';
+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) {
-    const canvas = document.createElement('canvas');
-    let maxTextureDimension = MAX_TEXTURE_DIMENSION;
-    let normalTextureDimension = 1024;
+  constructor (gloperations, tileSize, nodataValue, scaleInput, sentinelInput, colorscaleMaxLength, sentinelMaxLength) {
+    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"],
+      optionalExtensions: ['OES_texture_float', 'WEBGL_color_buffer_float'],
       onDone: function (err, regl) {
         if (err) {
-          console.log(err);
-          return;
+          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;
+            maxTextureDimension = 2048
           }
           if (regl.limits.maxTextureSize > 4096) {
-            maxTextureDimension = 4096;
+            maxTextureDimension = 4096
           }
           if (regl.limits.maxTextureSize > 8192) {
-            maxTextureDimension = 8192;
+            maxTextureDimension = 8192
           }
 
           // TODO: use lower normal dimension where relevant
           // Currently set to same due to a bug
-          normalTextureDimension = maxTextureDimension;
+          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?");
+          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 commonDrawConfig = reglCommands.getCommonDrawConfiguration(tileSize, nodataValue)
     const fragMacros = {
       SCALE_MAX_LENGTH: colorscaleMaxLength,
-      SENTINEL_MAX_LENGTH: sentinelMaxLength,
-    };
+      SENTINEL_MAX_LENGTH: sentinelMaxLength
+    }
 
     // Assign object "instance" properties.
     Object.assign(this, {
@@ -74,27 +74,27 @@ export default class Renderer {
       sentinelColormap: util.createColormapTexture(sentinelInput, regl),
       textureManager: new TextureManager(regl, tileSize, normalTextureDimension, false),
       drawTile: reglCommands.createDrawTileCommand(regl, commonDrawConfig, fragMacros)
-    });
+    })
   }
 
-  renderTile({ coords, pixelData }, _hillshadeOptions, zoom) {
+  renderTile ({ coords, pixelData }, _hillshadeOptions, zoom) {
     const {
       regl,
       textureManager,
-      tileSize,
-    } = this;
-    this.setCanvasSize(tileSize, tileSize);
+      tileSize
+    } = this
+    this.setCanvasSize(tileSize, tileSize)
     // Add image to the texture and retrieve its texture coordinates.
-    const textureBounds = textureManager.addTile(coords, pixelData);
+    const textureBounds = textureManager.addTile(coords, pixelData)
 
-    regl.clear({ color: CLEAR_COLOR });
+    regl.clear({ color: CLEAR_COLOR })
 
-    const zoomdelta = _hillshadeOptions.hsSimpleZoomdelta || 0;
+    const zoomdelta = _hillshadeOptions.hsSimpleZoomdelta || 0
 
-    const offset_pixels = Math.max(0.5, 2 ** (zoom + zoomdelta) / 2048);
-    const offset_texcoords = offset_pixels / textureManager.texture.width;
+    const offset_pixels = Math.max(0.5, 2 ** (zoom + zoomdelta) / 2048)
+    const offset_texcoords = offset_pixels / textureManager.texture.width
 
-    if (_hillshadeOptions.hillshadeType === "none") {
+    if (_hillshadeOptions.hillshadeType === 'none') {
       this.drawTile({
         canvasSize: [tileSize, tileSize],
         canvasCoordinates: [0, 0],
@@ -104,9 +104,9 @@ export default class Renderer {
         sentinelLength: this.sentinelInput.length,
         scaleColormap: this.scaleColormap,
         sentinelColormap: this.sentinelColormap,
-        enableSimpleHillshade: false,
-      });
-    } else if (_hillshadeOptions.hillshadeType === "simple") {
+        enableSimpleHillshade: false
+      })
+    } else if (_hillshadeOptions.hillshadeType === 'simple') {
       this.drawTileHsSimple({
         scaleLength: this.scaleInput.length,
         sentinelLength: this.sentinelInput.length,
@@ -123,29 +123,29 @@ export default class Renderer {
         // elevationScale: _hillshadeOptions.hsElevationScale,
         azimuth: _hillshadeOptions.hsSimpleAzimuth,
         altitude: _hillshadeOptions.hsSimpleAltitude,
-        slopescale: _hillshadeOptions.hsSimpleSlopescale,
-      });
+        slopescale: _hillshadeOptions.hsSimpleSlopescale
+      })
     }
 
     // Since the tile will fill the whole canvas, the offset is simply [0, 0].
-    return [0, 0];
+    return [0, 0]
   }
 
-  setCanvasSize(width, height) {
-    Object.assign(this.canvas, { width, height });
+  setCanvasSize (width, height) {
+    Object.assign(this.canvas, { width, height })
   }
 
-  generateAmbientDirections(iterations) {
-    const ambientDirections = [];
+  generateAmbientDirections (iterations) {
+    const ambientDirections = []
     for (let i = 0; i < iterations; i++) {
-      const direction = vec3.random(vec3.create(), Math.random());
-      ambientDirections.push(direction);
+      const direction = vec3.random(vec3.create(), Math.random())
+      ambientDirections.push(direction)
     }
-    this.ambientDirections = ambientDirections;
+    this.ambientDirections = ambientDirections
   }
 
-  generateSunDirections(iterations, sunRadiusMultiplier) {
-    const sunDirections = [];
+  generateSunDirections (iterations, sunRadiusMultiplier) {
+    const sunDirections = []
     for (let i = 0; i < iterations; i++) {
       const direction = vec3.normalize(
         vec3.create(),
@@ -158,36 +158,36 @@ export default class Renderer {
           ),
           vec3.random(vec3.create(), SUN_RADIUS * sunRadiusMultiplier)
         )
-      );
-      sunDirections.push(direction);
+      )
+      sunDirections.push(direction)
     }
-    this.sunDirections = sunDirections;
+    this.sunDirections = sunDirections
   }
 
-  updateColorscale(scaleInput) {
-    this.scaleInputPrevious = this.scaleInput;
-    this.scaleInput = scaleInput;
-    this.scaleColormapPrevious = this.scaleColormap;
-    this.scaleColormap = util.createColormapTexture(scaleInput, this.regl);
+  updateColorscale (scaleInput) {
+    this.scaleInputPrevious = this.scaleInput
+    this.scaleInput = scaleInput
+    this.scaleColormapPrevious = this.scaleColormap
+    this.scaleColormap = util.createColormapTexture(scaleInput, this.regl)
   }
-  updateSentinels(sentinelInput) {
-    this.sentinelInputPrevious = this.sentinelInput;
-    this.sentinelInput = sentinelInput;
-    this.sentinelColormapPrevious = this.sentinelColormap;
-    this.sentinelColormap = util.createColormapTexture(sentinelInput, this.regl);
+  updateSentinels (sentinelInput) {
+    this.sentinelInputPrevious = this.sentinelInput
+    this.sentinelInput = sentinelInput
+    this.sentinelColormapPrevious = this.sentinelColormap
+    this.sentinelColormap = util.createColormapTexture(sentinelInput, this.regl)
   }
-  setMaxTextureDimension(newMaxTextureDimension) {
+  setMaxTextureDimension (newMaxTextureDimension) {
     const {
       textureManager,
       tileSize,
-      regl,
-    } = this;
+      regl
+    } = this
 
-    textureManager.destroy();
+    textureManager.destroy()
 
     Object.assign(this, {
       maxTextureDimension: newMaxTextureDimension,
-      textureManager: new TextureManager(regl, tileSize, newMaxTextureDimension, false),
-    });
+      textureManager: new TextureManager(regl, tileSize, newMaxTextureDimension, false)
+    })
   }
 }

package/src/gl-operations/shaders/transform.js

@@ -1,13 +1,13 @@
 var fs = require('fs')
 
-function transform(file) {
+function transform (file) {
   let extension = file.split('.').pop()
   let content = fs.readFileSync(file, 'utf-8')
   content = `import glsl from 'glslify'\n\nexport default glsl\`${content}\``
   fs.writeFileSync(file.replace(`.${extension}`, '.js'), content)
 }
 
-function readDir(dir) {
+function readDir (dir) {
   let list = fs.readdirSync(dir)
   list.forEach(item => {
     let stats = fs.statSync(`${dir}/${item}`)

package/src/gl-operations/shaders/util/rgbaToFloat.glsl

@@ -2,17 +2,17 @@
 
 // note: the 0.1s here and there are voodoo related to precision
 float rgbaToFloat(vec4 v, bool littleEndian) {
-	if (!littleEndian) {
-		v = v.abgr;
-	}
-	vec4 bits = v * 255.0;
-	float sign = mix(-1.0, 1.0, step(bits[3], 128.0));
-	float expo = floor(mod(bits[3] + 0.1, 128.0)) * 2.0 +
-				floor((bits[2] + 0.1) / 128.0) - 127.0;
-	float sig = bits[0] +
-				bits[1] * 256.0 +
-				floor(mod(bits[2] + 0.1, 128.0)) * 256.0 * 256.0;
-	return sign * (1.0 + sig / 8388607.0) * pow(2.0, expo);
+  if (!littleEndian) {
+    v = v.abgr;
+  }
+  vec4 bits = v * 255.0;
+  float sign = mix(-1.0, 1.0, step(bits[3], 128.0));
+  float expo = floor(mod(bits[3] + 0.1, 128.0)) * 2.0 +
+        floor((bits[2] + 0.1) / 128.0) - 127.0;
+  float sig = bits[0] +
+        bits[1] * 256.0 +
+        floor(mod(bits[2] + 0.1, 128.0)) * 256.0 * 256.0;
+  return sign * (1.0 + sig / 8388607.0) * pow(2.0, expo);
 }
 
 #pragma glslify: export(rgbaToFloat)

package/src/gl-operations/texture_manager.js

@@ -1,32 +1,32 @@
 import {
   flatMap,
-  isEmpty,
-} from 'lodash';
-import * as util from './util';
+  isEmpty
+} from 'lodash'
+import * as util from './util'
 
 export default class TextureManager {
-  constructor(
+  constructor (
     regl,
     tileSize = 256,
     maxTextureDimension,
     flipY = false,
     textureFormat = 'rgba',
-    textureType = 'uint8',
+    textureType = 'uint8'
   ) {
-    const tilesAcross = Math.floor(maxTextureDimension / tileSize);
-    const pixelsAcross = tilesAcross * tileSize;
-    const tileCapacity = tilesAcross * tilesAcross;
+    const tilesAcross = Math.floor(maxTextureDimension / tileSize)
+    const pixelsAcross = tilesAcross * tileSize
+    const tileCapacity = tilesAcross * tilesAcross
 
     const texture = regl.texture({
       width: pixelsAcross,
       height: pixelsAcross,
       flipY: flipY,
       format: textureFormat,
-      type: textureType,
-    });
+      type: textureType
+    })
 
-    const contents = new Map();
-    const available = this.allTextureCoordinates(tilesAcross, tileSize);
+    const contents = new Map()
+    const available = this.allTextureCoordinates(tilesAcross, tileSize)
 
     Object.assign(this, {
       tileSize,
@@ -35,107 +35,107 @@ export default class TextureManager {
       tileCapacity,
       texture,
       contents,
-      available,
-    });
+      available
+    })
   }
 
-  addTile(
+  addTile (
     tileCoordinates,
-    data,
+    data
   ) {
     const {
       available,
       contents,
       texture,
-      tileSize,
-    } = this;
+      tileSize
+    } = this
 
-    const hashKey = this.hashTileCoordinates(tileCoordinates);
+    const hashKey = this.hashTileCoordinates(tileCoordinates)
     if (contents.has(hashKey)) {
-      const textureCoordinates = contents.get(hashKey);
+      const textureCoordinates = contents.get(hashKey)
       // We use a least-recently-used eviction policy for the tile cache. Map iterators are
       // convenient for this, because they return entries in insertion order. But for this to work
       // as expected, every time we access a tile, we need to reinsert it so that it moves to the
       // end of that insertion-order list.
-      contents.delete(hashKey);
-      contents.set(hashKey, textureCoordinates);
-      return this.formatOutputTextureCoordinates(textureCoordinates);
+      contents.delete(hashKey)
+      contents.set(hashKey, textureCoordinates)
+      return this.formatOutputTextureCoordinates(textureCoordinates)
     }
     if (isEmpty(available)) {
       // Get the first key inserted. Map.prototype.keys() produces an iterable iterator over the keys
       // in the order of insertion, so we can just use the iterator's first value.
-      const firstInsertedKey = contents.keys().next().value;
-      this.removeByHashKey(firstInsertedKey);
+      const firstInsertedKey = contents.keys().next().value
+      this.removeByHashKey(firstInsertedKey)
     }
     // remove from list of available positions
-    const textureCoordinates = available.pop();
+    const textureCoordinates = available.pop()
     // store mapping of tile to texture coordinates
-    contents.set(hashKey, textureCoordinates);
+    contents.set(hashKey, textureCoordinates)
 
-    const { x: textureX, y: textureY } = textureCoordinates;
+    const { x: textureX, y: textureY } = textureCoordinates
     texture.subimage({
       data,
       width: tileSize,
-      height: tileSize,
-    }, textureX, textureY);
+      height: tileSize
+    }, textureX, textureY)
 
-    return this.formatOutputTextureCoordinates(textureCoordinates);
+    return this.formatOutputTextureCoordinates(textureCoordinates)
   }
 
-  removeTile(tileCoordinates) {
-    this.removeByHashKey(this.hashTileCoordinates(tileCoordinates));
+  removeTile (tileCoordinates) {
+    this.removeByHashKey(this.hashTileCoordinates(tileCoordinates))
   }
 
-  clearTiles() {
+  clearTiles () {
     for (const hashKey of Array.from(this.contents.keys())) {
-      this.removeByHashKey(hashKey);
+      this.removeByHashKey(hashKey)
     }
   }
 
-  destroy() {
-    this.texture.destroy();
+  destroy () {
+    this.texture.destroy()
   }
 
-  removeByHashKey(hashKey) {
+  removeByHashKey (hashKey) {
     // This method only removes the key. The pixel data remains in the texture.
     if (this.contents.has(hashKey)) {
-      const textureCoordinates = this.contents.get(hashKey);
-      this.contents.delete(hashKey);
-      this.available.push(textureCoordinates);
+      const textureCoordinates = this.contents.get(hashKey)
+      this.contents.delete(hashKey)
+      this.available.push(textureCoordinates)
     }
   }
 
-  formatOutputTextureCoordinates(textureCoordinates) {
-    const { x, y } = textureCoordinates;
-    const { pixelsAcross, tileSize } = this;
+  formatOutputTextureCoordinates (textureCoordinates) {
+    const { x, y } = textureCoordinates
+    const { pixelsAcross, tileSize } = this
     return [
       {
         x: x / pixelsAcross,
-        y: y / pixelsAcross,
+        y: y / pixelsAcross
       },
       {
         x: (x + tileSize) / pixelsAcross,
-        y: (y + tileSize) / pixelsAcross,
-      },
-    ];
+        y: (y + tileSize) / pixelsAcross
+      }
+    ]
   }
 
-  hashTileCoordinates({ x, y, z }) {
-    return `${x}:${y}:${z}`;
+  hashTileCoordinates ({ x, y, z }) {
+    return `${x}:${y}:${z}`
   }
 
-  getTextureCoordinates(tileCoordinates) {
-    const hashKey = this.hashTileCoordinates(tileCoordinates);
-    const textureCoordinates = this.contents.get(hashKey);
-    return this.formatOutputTextureCoordinates(textureCoordinates);
+  getTextureCoordinates (tileCoordinates) {
+    const hashKey = this.hashTileCoordinates(tileCoordinates)
+    const textureCoordinates = this.contents.get(hashKey)
+    return this.formatOutputTextureCoordinates(textureCoordinates)
   }
 
-  allTextureCoordinates(tilesAcross, tileSize) {
+  allTextureCoordinates (tilesAcross, tileSize) {
     return flatMap(util.range(tilesAcross), x =>
       util.range(tilesAcross).map(y => ({
         x: x * tileSize,
-        y: y * tileSize,
-      })),
-    );
+        y: y * tileSize
+      }))
+    )
   }
 }