@mapcatch/util 1.0.0

package/src/gl-operations/reglCommands/transitions.js

@@ -0,0 +1,109 @@
+import vertSingle from '../shaders/vertex/single.js';
+import vertDouble from '../shaders/vertex/double.js';
+
+import fragInterpolateColor from '../shaders/fragment/interpolateColor.js';
+import fragInterpolateColorOnly from '../shaders/fragment/interpolateColorOnly.js';
+import fragInterpolateValue from '../shaders/fragment/interpolateValue.js';
+
+import * as util from '../util';
+
+/**
+ * The DrawCommand output by this function interpolates, for each pixel, between two values, one
+ * from `textureA` and one from `textureB`. The same color scale / sentinel values are applied to
+ * both.
+ */
+export function createDrawTileInterpolateValueCommand(
+  regl,
+  commonConfig,
+  fragMacros,
+) {
+  return regl({
+    ...commonConfig,
+    vert: vertDouble,
+    frag: util.defineMacros(fragInterpolateValue, fragMacros),
+    uniforms: {
+      ...commonConfig.uniforms,
+      scaleLength: regl.prop('scaleLength'),
+      sentinelLength: regl.prop('sentinelLength'),
+      scaleColormap: regl.prop('scaleColormap'),
+      sentinelColormap: regl.prop('sentinelColormap'),
+      textureA: (_, { textureA }) => textureA,
+      textureB: (_, { textureB }) => textureB,
+      interpolationFraction: (_, { interpolationFraction }) => interpolationFraction,
+    },
+    attributes: {
+      ...commonConfig.attributes,
+      texCoordA: (_, { textureBoundsA }) => util.getTexCoordVerticesTriangleStripQuad(textureBoundsA),
+      texCoordB: (_, { textureBoundsB }) => util.getTexCoordVerticesTriangleStripQuad(textureBoundsB),
+    },
+  });
+}
+
+/**
+ * The behavior of this DrawCommand is similar to the one above, except that pixels from `textureA`
+ * are colorized with one color scale / set of sentinel values, while pixels from `textureB` use a
+ * different color scale / set of sentinel values.
+ */
+export function createDrawTileInterpolateColorCommand(
+  regl,
+  commonConfig,
+  fragMacros,
+) {
+  return regl({
+    ...commonConfig,
+    vert: vertDouble,
+    frag: util.defineMacros(fragInterpolateColor, fragMacros),
+    uniforms: {
+      ...commonConfig.uniforms,
+      scaleLengthA: regl.prop('scaleLengthA'),
+      sentinelLengthA: regl.prop('sentinelLengthA'),
+      scaleColormapA: regl.prop('scaleColormapA'),
+      sentinelColormapA: regl.prop('sentinelColormapA'),
+      scaleLengthB: regl.prop('scaleLengthB'),
+      sentinelLengthB: regl.prop('sentinelLengthB'),
+      scaleColormapB: regl.prop('scaleColormapB'),
+      sentinelColormapB: regl.prop('sentinelColormapB'),
+      textureA: (_, { textureA }) => textureA,
+      textureB: (_, { textureB }) => textureB,
+      interpolationFraction: (_, { interpolationFraction }) => interpolationFraction,
+    },
+    attributes: {
+      ...commonConfig.attributes,
+      texCoordA: (_, { textureBoundsA }) => util.getTexCoordVerticesTriangleStripQuad(textureBoundsA),
+      texCoordB: (_, { textureBoundsB }) => util.getTexCoordVerticesTriangleStripQuad(textureBoundsB),
+    },
+  });
+}
+
+/**
+ * The behavior of this DrawCommand is similar to the one above, except that the pixel values
+ * are the same. Only the colorscale changes.
+ */
+export function createDrawTileInterpolateColorOnlyCommand(
+  regl,
+  commonConfig,
+  fragMacros,
+) {
+  return regl({
+    ...commonConfig,
+    vert: vertSingle,
+    frag: util.defineMacros(fragInterpolateColorOnly, fragMacros),
+    uniforms: {
+      ...commonConfig.uniforms,
+      scaleLengthA: regl.prop('scaleLengthA'),
+      sentinelLengthA: regl.prop('sentinelLengthA'),
+      scaleColormapA: regl.prop('scaleColormapA'),
+      sentinelColormapA: regl.prop('sentinelColormapA'),
+      scaleLengthB: regl.prop('scaleLengthB'),
+      sentinelLengthB: regl.prop('sentinelLengthB'),
+      scaleColormapB: regl.prop('scaleColormapB'),
+      sentinelColormapB: regl.prop('sentinelColormapB'),
+      texture: (_, { texture }) => texture,
+      interpolationFraction: (_, { interpolationFraction }) => interpolationFraction,
+    },
+    attributes: {
+      ...commonConfig.attributes,
+      texCoord: (_, { textureBounds }) => util.getTexCoordVerticesTriangleStripQuad(textureBounds),
+    },
+  });
+}

package/src/gl-operations/reglCommands/util.js

@@ -0,0 +1,71 @@
+import vertSingle from '../shaders/vertex/single.js';
+
+import fragConvertDem from '../shaders/fragment/convertDem.js';
+
+import * as util from '../util';
+
+const littleEndian = util.machineIsLittleEndian();
+
+/**
+ * The object generated by this function should be merged into the DrawConfig for each Regl
+ * command in the application.
+ */
+export function getCommonDrawConfiguration(
+	tileSize,
+	nodataValue,
+) {
+	return {
+	  uniforms: {
+		nodataValue,
+		littleEndian,
+		transformMatrix: ({ viewportWidth, viewportHeight }) => (
+		  util.getTransformMatrix(viewportWidth, viewportHeight)
+		),
+	  },
+	  attributes: {
+		position: (_, { canvasCoordinates }) => {
+		  const [left, top] = canvasCoordinates;
+		  const [right, bottom] = [left + tileSize, top + tileSize];
+		  return [
+			[left,  top   ],
+			[right, top   ],
+			[left,  bottom],
+			[right, bottom],
+		  ];
+		},
+	  },
+	  // We don't need the depth buffer for 2D drawing. Leaving it enabled (and failing to clear it
+	  // between draw calls) results in visual artifacts.
+	  depth: { enable: false },
+	  primitive: 'triangle strip',
+	  count: 4,
+	  viewport: (_, { canvasSize: [width, height] }) => ({ width, height }),
+	};
+}
+
+/**
+ * The command output by this function converts a tile in DEM format
+ * to float32 packed as rgba.
+ */
+export function createConvertDemCommand(
+	regl,
+	commonConfig
+) {
+	return regl({
+	  ...commonConfig,
+	  vert: vertSingle,
+	  frag: fragConvertDem,
+	  depth:  {
+		enable: false
+	  },
+	  uniforms: {
+		...commonConfig.uniforms,
+		texture: (_, { texture }) => texture,
+	  },
+	  attributes: {
+		...commonConfig.attributes,
+		texCoord: [[0, 1], [1, 1], [0, 0], [1, 0]],
+	  },
+	  framebuffer: regl.prop("fbo"),
+	});
+}

package/src/gl-operations/renderer.js

@@ -0,0 +1,193 @@
+import REGL, { Framebuffer2D } 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) {
+    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.log(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)
+    });
+  }
+
+  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,
+      });
+    } 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,
+      });
+    }
+
+    // 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);
+  }
+  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

@@ -0,0 +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);
+}
+`

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

@@ -0,0 +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);
+  }
+}
+`

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

@@ -0,0 +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);
+  }
+}
+`

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

@@ -0,0 +1,42 @@
+import glsl from 'glslify'
+
+export default glsl`#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+
+#define TRANSPARENT vec4(0.0)
+
+#pragma glslify: computeColor = require(../util/computeColor.glsl)
+#pragma glslify: isCloseEnough = require(../util/isCloseEnough.glsl)
+#pragma glslify: getTexelValue = require(../util/getTexelValue.glsl)
+
+uniform int scaleLength;
+uniform int sentinelLength;
+uniform sampler2D scaleColormap;
+uniform sampler2D sentinelColormap;
+
+uniform float nodataValue;
+uniform sampler2D texture;
+uniform bool littleEndian;
+
+varying vec2 vTexCoord;
+
+void main() {
+  float f = getTexelValue(texture, vTexCoord, littleEndian);
+
+  if (isCloseEnough(f, nodataValue)) {
+    gl_FragColor = TRANSPARENT;
+  } else {
+    gl_FragColor = computeColor(
+      f,
+      scaleColormap,
+      sentinelColormap,
+      scaleLength,
+      sentinelLength,
+      littleEndian
+    );
+  }
+}
+`

package/src/gl-operations/shaders/fragment/hillshading/hsAdvAmbientShadows.js

@@ -0,0 +1,79 @@
+import glsl from 'glslify'
+
+export default glsl`#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+
+uniform sampler2D tInput;
+uniform sampler2D tNormal;
+uniform sampler2D tSrc;
+uniform vec3 direction;
+uniform vec2 resolution;
+uniform float pixelScale;
+uniform float ambientIterations;
+varying vec2 vTexCoord;
+
+void main() {
+  vec2 ires = 1.0 / resolution;
+  vec3 src = texture2D(tSrc, gl_FragCoord.xy * ires).rgb;
+  vec4 e0 = texture2D(tInput, vTexCoord);
+  vec3 n0 = texture2D(tNormal, vTexCoord).rgb;
+
+  vec3 sr3d = normalize(n0 + direction); // ray direction
+  vec2 sr = normalize(sr3d.xy); // get 2D ray direction
+
+  // initialize pixel traversal algorithm
+  vec2 p0 = vTexCoord * resolution;
+  vec2 p = floor(p0); // pixel we are starting in
+  vec2 stp = sign(sr);
+
+  // how far we need to travel in our ray direction to intersect the next pixel
+  // in the x- and y- directions
+  vec2 tMax = step(0.0, sr) * (1.0 - fract(p0)) + (1.0 - step(0.0, sr)) * fract(p0);
+  tMax /= abs(sr);
+  // how far must we travel along our ray to cover the width and height of a pixel
+  vec2 tDelta = 1.0 / abs(sr);
+
+  // pixel traversal routine
+  for (int i = 0; i < 65536; i++) {
+    if (tMax.x < tMax.y) {
+      tMax.x += tDelta.x;
+      p.x += stp.x;
+    } else {
+      tMax.y += tDelta.y;
+      p.y += stp.y;
+    }
+
+    // normalized texture coordinate for the center of the current pixel
+    vec2 ptex = ires * (p + 0.5);
+
+    // If we left the tile: add some illumination to the pixel for this iteration and stop traversing
+    if (ptex.x < 0.0 || ptex.x > 1.0 || ptex.y < 0.0 || ptex.y > 1.0) {
+      // illumination of this single ray
+      vec3 illumination = vec3(1.0/ambientIterations);
+      // add illumination of this ray to result of previous iteration
+      gl_FragColor = vec4(src + illumination, 1.0);
+      return;
+    }
+
+    // elevation/value at current pixel
+    vec4 e = texture2D(tInput, ptex);
+    // time we have traveled along the 2D ray
+    float time = distance(p + 0.5, p0);
+    // elevation along our original 3D ray at the current point
+    float z = e0.r + time * pixelScale * sr3d.z;
+    // If we did not exit tile, have we hit the terrain?
+    if (e.r > z) {
+      // We hit terrain. Do not add illumination for this iteration
+      gl_FragColor = vec4(src, 1.0);
+      return;
+    }
+  }
+
+  // Should have hit terrain or left the tile by this point, so should never need this
+  // If we finish the loop somehow, let’s pretend it’s been illuminated
+  vec3 illumination = vec3(1.0/ambientIterations);
+  gl_FragColor = vec4(src + illumination, 1.0);
+}`

package/src/gl-operations/shaders/fragment/hillshading/hsAdvDirect.js

@@ -0,0 +1,55 @@
+import glsl from 'glslify'
+
+export default glsl`#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+
+#pragma glslify: computeColor = require(../../util/computeColor.glsl)
+#pragma glslify: isCloseEnough = require(../../util/isCloseEnough.glsl)
+
+uniform sampler2D tInput;
+uniform sampler2D tNormal;
+uniform float floatScale;
+uniform vec3 sunDirection;
+uniform float nodataValue;
+uniform bool littleEndian;
+varying vec2 vTexCoord;
+
+uniform int scaleLength;
+uniform int sentinelLength;
+uniform sampler2D scaleColormap;
+uniform sampler2D sentinelColormap;
+
+void main() {
+  float f = texture2D(tInput, vTexCoord).r;
+
+  if (isCloseEnough(f, nodataValue)) {
+    // discard;
+    gl_FragColor = vec4(0.0);
+  } else {
+    vec4 clr = computeColor(
+      f / floatScale,
+      scaleColormap,
+      sentinelColormap,
+      scaleLength,
+      sentinelLength,
+      littleEndian
+    );
+
+    vec3 n = texture2D(tNormal, vTexCoord).rgb;
+
+    // light intensity that varies on the range  [−1..1]
+    float light = dot(n, sunDirection);
+    // transform the light intensity to the range [0..1]
+    light = 0.5 * light + 0.5;
+
+    // gl_FragColor = vec4(l, l, l, 1.0); // to show light
+
+    vec3 color = light * pow(clr.rgb, vec3(2.0));
+    color = pow(color, vec3(1.0/2.2));
+    gl_FragColor = vec4(color, 1.0);
+  }
+}
+`

package/src/gl-operations/shaders/fragment/hillshading/hsAdvFinalBaselayer.js

@@ -0,0 +1,31 @@
+import glsl from 'glslify'
+
+export default glsl`#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+
+uniform sampler2D tBase;
+uniform sampler2D tSoftShadow;
+uniform sampler2D tAmbient;
+uniform float finalSoftMultiplier;
+uniform float finalAmbientMultiplier;
+uniform float nodataValue;
+uniform bool littleEndian;
+varying vec2 vTexCoordA;
+varying vec2 vTexCoordB;
+
+void main() {
+  vec3 baselayer = texture2D(tBase, vTexCoordA).rgb;
+
+  float softShadow = texture2D(tSoftShadow, vTexCoordB).r;
+  float ambient = texture2D(tAmbient, vTexCoordB).r;
+  // Add up the lighting
+  float light = finalSoftMultiplier * softShadow + finalAmbientMultiplier * ambient;
+  //Deepen the original color a bit by applying a curve, and multiply it by the light
+  vec3 color = light * pow(baselayer.rgb, vec3(2.0));
+  // apply gamma correction
+  color = pow(color, vec3(1.0/2.2));
+  gl_FragColor = vec4(color, 1.0);
+}`