@mapcatch/util 2.0.3-b → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcatch/util",
-  "version": "2.0.3-b",
+  "version": "2.0.4",
   "main": "./dist/catchUtil.min.esm.js",
   "repository": "",
   "author": "wanyanyan",

package/src/constants/default_layers.js

@@ -5,7 +5,10 @@ export default [
     group: 'output',
     visible: true,
     opacity: 1,
-    class: 'image2d'
+    class: 'image2d',
+    metadata: {
+      folder: 'dom_tiles'
+    }
   },
   {
     type: 'tmp',
@@ -13,7 +16,10 @@ export default [
     group: 'output',
     visible: true,
     opacity: 1,
-    class: 'tmp'
+    class: 'tmp',
+    metadata: {
+      folder: 'tem_tiles'
+    }
   },
   {
     type: 'dsm',
@@ -21,7 +27,12 @@ export default [
     group: 'output',
     visible: false,
     opacity: 0.5,
-    class: 'image2d'
+    class: 'image2d',
+    metadata: {
+      folder: 'dsm_tiles',
+      borderStyle: 'transparent',
+      colorType: 'turbo'
+    }
   },
   {
     type: 'mesh3d',
@@ -39,20 +50,152 @@ export default [
     opacity: 1,
     class: 'pnts'
   },
+  {
+    type: 'photos',
+    name: '照片',
+    group: 'dataset',
+    visible: false,
+    opacity: 1,
+    class: 'photos'
+  },
+  {
+    type: 'bndvi',
+    name: '植被指数（BNDVI）',
+    group: 'index',
+    visible: true,
+    opacity: 1,
+    class: 'bndvi',
+    metadata: {
+      folder: 'bndvi_tiles',
+      borderStyle: 'transparent',
+      colorType: 'red-green',
+      bands: ['NIR', 'Blue']
+    }
+  },
+  {
+    type: 'gndvi',
+    name: '植被指数（GNDVI）',
+    group: 'index',
+    visible: true,
+    opacity: 1,
+    class: 'gndvi',
+    metadata: {
+      folder: 'gndvi_tiles',
+      borderStyle: 'transparent',
+      colorType: 'red-green',
+      bands: ['NIR', 'Green']
+    }
+  },
+  {
+    type: 'lci',
+    name: '植被指数（LCI）',
+    group: 'index',
+    visible: true,
+    opacity: 1,
+    class: 'lci',
+    metadata: {
+      folder: 'lci_tiles',
+      borderStyle: 'transparent',
+      colorType: 'glow',
+      bands: ['NIR', 'RedEdge', 'Red']
+    }
+  },
+  {
+    type: 'mcari',
+    name: '植被指数（MCARI）',
+    group: 'index',
+    visible: true,
+    opacity: 1,
+    class: 'mcari',
+    metadata: {
+      folder: 'mcari_tiles',
+      borderStyle: 'transparent',
+      colorType: 'turbo',
+      bands: ['NIR', 'Red', 'Green']
+    }
+  },
+  {
+    type: 'ndre',
+    name: '植被指数（NDRE）',
+    group: 'index',
+    visible: true,
+    opacity: 1,
+    class: 'ndre',
+    metadata: {
+      folder: 'ndre_tiles',
+      borderStyle: 'transparent',
+      colorType: 'red-green',
+      bands: ['NIR', 'RedEdge']
+    }
+  },
   {
     type: 'ndvi',
     name: '植被指数（NDVI）',
-    group: 'output',
+    group: 'index',
     visible: true,
     opacity: 1,
-    class: 'ndvi'
+    class: 'ndvi',
+    metadata: {
+      folder: 'ndvi_tiles',
+      borderStyle: 'transparent',
+      colorType: 'red-green',
+      bands: ['NIR', 'Red']
+    }
   },
   {
-    type: 'photos',
-    name: '照片',
-    group: 'dataset',
-    visible: false,
+    type: 'sipi2',
+    name: '植被指数（SIPI2）',
+    group: 'index',
+    visible: true,
     opacity: 1,
-    class: 'photos'
+    class: 'sipi2',
+    metadata: {
+      folder: 'sipi2_tiles',
+      borderStyle: 'transparent',
+      colorType: 'glow',
+      bands: ['NIR', 'Green']
+    }
+  },
+  {
+    type: 'tgi',
+    name: '植被指数（TGI）',
+    group: 'index',
+    visible: true,
+    opacity: 1,
+    class: 'tgi',
+    metadata: {
+      folder: 'tgi_tiles',
+      borderStyle: 'transparent',
+      colorType: 'turbo',
+      bands: ['Red', 'Green', 'Blue']
+    }
+  },
+  {
+    type: 'vari',
+    name: '植被指数（VARI）',
+    group: 'index',
+    visible: true,
+    opacity: 1,
+    class: 'vari',
+    metadata: {
+      folder: 'vari_tiles',
+      borderStyle: 'transparent',
+      colorType: 'red-green',
+      bands: ['Red', 'Green', 'Blue']
+    }
+  },
+  {
+    type: 'ndmi',
+    name: '植被指数（NDMI）',
+    group: 'index',
+    visible: true,
+    opacity: 1,
+    class: 'ndmi',
+    metadata: {
+      folder: 'ndmi_tiles',
+      borderStyle: 'transparent',
+      colorType: 'glow',
+      bands: ['NIR', 'SWIR_1613', 'Blue']
+    }
   }
 ]

package/src/constants/index.js

@@ -1,5 +1,6 @@
 export {default as cameras} from './cameras'
 export {default as layerGroups} from './layer_groups'
+export {default as layerGroupsMultispectral} from './layer_groups_multispectral'
 export {default as bmapTypes} from './bmap_types'
 export {default as dsmColors} from './dsm_colors'
 export {default as defaultLayers} from './default_layers'

package/src/constants/layer_groups_multispectral.js

@@ -0,0 +1,34 @@
+export default [
+  {
+    id: 'output',
+    type: 'output',
+    name: '基础成果',
+    collapsed: false,
+    visible: true,
+    opacity: 1
+  },
+  {
+    id: 'index',
+    type: 'index',
+    name: '植被指数',
+    collapsed: false,
+    visible: true,
+    opacity: 1
+  },
+  {
+    id: 'dataset',
+    type: 'dataset',
+    name: '数据集',
+    collapsed: false,
+    visible: true,
+    opacity: 1
+  },
+  {
+    id: 'overlay',
+    type: 'overlay',
+    name: '覆盖物',
+    collapsed: false,
+    visible: true,
+    opacity: 1
+  }
+]

package/src/constants/layer_icons.js

@@ -9,6 +9,7 @@ export default {
   dom: 'icon-tuxiang',
   dsm: 'icon-moxing',
   ndvi: 'icon-zhishu',
+  index: 'icon-zhishu',
   mesh3d: 'icon-mesh',
   point_cloud: 'icon-dianyun',
   photos: 'icon-24gf-photoAlbum',

package/src/gl-operations/index.js

@@ -20,7 +20,9 @@ export default class GLOperations {
       this.options.colorScale,
       this.options.sentinelValues,
       this.options.colorscaleMaxLength,
-      this.options.sentinelMaxLength
+      this.options.sentinelMaxLength,
+      this.options.aboveColor,
+      this.options.belowColor
     )
 
     this._renderer.generateAmbientDirections(this.options.hsAdvAmbientIterations)
@@ -30,6 +32,11 @@ export default class GLOperations {
     )
   }
 
+  destroy () {
+    if (this._renderer) this._renderer.destroy()
+    this._renderer = null
+  }
+
   updateOptions (options) {
     const {
       url: prevUrl,
@@ -45,7 +52,9 @@ export default class GLOperations {
       hsAdvSunRadiusMultiplier: prevHsAdvSunRadiusMultiplier,
       hsAdvBaselayerUrl: prevHsAdvBaselayerUrl,
       colorscaleMaxLength: prevScaleMaxLength,
-      sentinelMaxLength: prevSentinelMaxLength
+      sentinelMaxLength: prevSentinelMaxLength,
+      aboveColor: prevAboveColor,
+      belowColor: prevBelowColor
     } = this.options
     Object.assign(this.options, options)
     // create new renderer if max length of sentinels or colorscale changes
@@ -73,6 +82,9 @@ export default class GLOperations {
     if (this.options.colorScale !== prevColorScale) {
       this._renderer.updateColorscale(this.options.colorScale)
     }
+    if (this.options.aboveColor !== prevAboveColor || this.options.belowColor !== prevBelowColor) {
+      this._renderer.updateOuteRangeColor(this.options.aboveColor, this.options.belowColor)
+    }
     if (this.options.sentinelValues !== prevSentinelValues) {
       this._renderer.updateSentinels(this.options.sentinelValues)
     }

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

@@ -24,6 +24,8 @@ export function createDrawTileCommand (regl, commonConfig, fragMacros) {
       sentinelLength: regl.prop('sentinelLength'),
       scaleColormap: regl.prop('scaleColormap'),
       sentinelColormap: regl.prop('sentinelColormap'),
+      aboveColor: regl.prop('aboveColor'),
+      belowColor: regl.prop('belowColor'),
       texture: (_, { texture }) => texture,
       enableSimpleHillshade: (_, { enableSimpleHillshade }) => enableSimpleHillshade,
       offset: 0,

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

@@ -38,6 +38,8 @@ export function createDrawTileHsSimpleCommand (regl, commonConfig, fragMacros) {
       sentinelLength: regl.prop('sentinelLength'),
       scaleColormap: regl.prop('scaleColormap'),
       sentinelColormap: regl.prop('sentinelColormap'),
+      aboveColor: regl.prop('aboveColor'),
+      belowColor: regl.prop('belowColor'),
       texture: (_, { texture }) => texture,
       enableSimpleHillshade: (_, { enableSimpleHillshade }) => enableSimpleHillshade,
       azimuth: (_, { azimuth }) => azimuth,
@@ -80,6 +82,8 @@ export function createDrawTileHsPregenCommand (regl, commonConfig, fragMacros) {
       sentinelLength: regl.prop('sentinelLength'),
       scaleColormap: regl.prop('scaleColormap'),
       sentinelColormap: regl.prop('sentinelColormap'),
+      aboveColor: regl.prop('aboveColor'),
+      belowColor: regl.prop('belowColor'),
       texture: (_, { texture }) => texture,
       hillshadePregenTexture: (_, { hillshadePregenTexture }) => hillshadePregenTexture
     },
@@ -203,7 +207,9 @@ export function createHsAdvDirectLightning (
       tInput: regl.prop('tInput'),
       tNormal: regl.prop('tNormal'),
       floatScale: regl.prop('floatScale'),
-      sunDirection: regl.prop('sunDirection')
+      sunDirection: regl.prop('sunDirection'),
+      aboveColor: regl.prop('aboveColor'),
+      belowColor: regl.prop('belowColor')
     },
     attributes: {
       position: [[-1, 1], [1, 1], [-1, -1], [1, -1]],
@@ -293,7 +299,9 @@ export function createHsAdvFinalColorscale (
       tAmbient: regl.prop('tAmbient'),
       floatScale: regl.prop('floatScale'),
       finalSoftMultiplier: regl.prop('finalSoftMultiplier'),
-      finalAmbientMultiplier: regl.prop('finalAmbientMultiplier')
+      finalAmbientMultiplier: regl.prop('finalAmbientMultiplier'),
+      aboveColor: regl.prop('aboveColor'),
+      belowColor: regl.prop('belowColor')
     },
     attributes: {
       ...commonConfig.attributes,

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

@@ -291,7 +291,9 @@ export function createDrawResultCommand (
       sentinelLength: regl.prop('sentinelLength'),
       scaleColormap: regl.prop('scaleColormap'),
       sentinelColormap: regl.prop('sentinelColormap'),
-      texture: regl.prop('texture')
+      texture: regl.prop('texture'),
+      aboveColor: regl.prop('aboveColor'),
+      belowColor: regl.prop('belowColor')
     },
     attributes: {
       ...commonConfig.attributes,

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

@@ -27,6 +27,8 @@ export function createDrawTileInterpolateValueCommand (
       sentinelLength: regl.prop('sentinelLength'),
       scaleColormap: regl.prop('scaleColormap'),
       sentinelColormap: regl.prop('sentinelColormap'),
+      aboveColor: regl.prop('aboveColor'),
+      belowColor: regl.prop('belowColor'),
       textureA: (_, { textureA }) => textureA,
       textureB: (_, { textureB }) => textureB,
       interpolationFraction: (_, { interpolationFraction }) => interpolationFraction

package/src/gl-operations/renderer.js

@@ -13,7 +13,7 @@ import * as reglCommands from './reglCommands'
 
 
 export default class Renderer {
-  constructor (gloperations, tileSize, nodataValue, scaleInput, sentinelInput, colorscaleMaxLength, sentinelMaxLength) {
+  constructor (gloperations, tileSize, nodataValue, scaleInput, sentinelInput, colorscaleMaxLength, sentinelMaxLength, aboveColor, belowColor) {
     const canvas = document.createElement('canvas')
     let maxTextureDimension = MAX_TEXTURE_DIMENSION
     let normalTextureDimension = 1024
@@ -73,10 +73,17 @@ export default class Renderer {
       scaleColormap: util.createColormapTexture(scaleInput, regl),
       sentinelColormap: util.createColormapTexture(sentinelInput, regl),
       textureManager: new TextureManager(regl, tileSize, normalTextureDimension, false),
-      drawTile: reglCommands.createDrawTileCommand(regl, commonDrawConfig, fragMacros)
+      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,
@@ -104,7 +111,9 @@ export default class Renderer {
         sentinelLength: this.sentinelInput.length,
         scaleColormap: this.scaleColormap,
         sentinelColormap: this.sentinelColormap,
-        enableSimpleHillshade: false
+        enableSimpleHillshade: false,
+        aboveColor: this.aboveColor,
+        belowColor: this.belowColor
       })
     } else if (_hillshadeOptions.hillshadeType === 'simple') {
       this.drawTileHsSimple({
@@ -123,7 +132,9 @@ export default class Renderer {
         // elevationScale: _hillshadeOptions.hsElevationScale,
         azimuth: _hillshadeOptions.hsSimpleAzimuth,
         altitude: _hillshadeOptions.hsSimpleAltitude,
-        slopescale: _hillshadeOptions.hsSimpleSlopescale
+        slopescale: _hillshadeOptions.hsSimpleSlopescale,
+        aboveColor: this.aboveColor,
+        belowColor: this.belowColor 
       })
     }
 
@@ -170,6 +181,12 @@ export default class Renderer {
     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

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

@@ -21,6 +21,9 @@ uniform float nodataValue;
 uniform sampler2D texture;
 uniform bool littleEndian;
 
+uniform vec4 aboveColor;
+uniform vec4 belowColor;
+
 varying vec2 vTexCoord;
 
 void main() {
@@ -35,7 +38,9 @@ void main() {
       sentinelColormap,
       scaleLength,
       sentinelLength,
-      littleEndian
+      littleEndian,
+      aboveColor,
+      belowColor
     );
   }
 }

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

@@ -17,6 +17,9 @@ uniform float nodataValue;
 uniform bool littleEndian;
 varying vec2 vTexCoord;
 
+uniform vec4 aboveColor;
+uniform vec4 belowColor;
+
 uniform int scaleLength;
 uniform int sentinelLength;
 uniform sampler2D scaleColormap;
@@ -35,7 +38,9 @@ void main() {
       sentinelColormap,
       scaleLength,
       sentinelLength,
-      littleEndian
+      littleEndian,
+      aboveColor,
+      belowColor
     );
 
     vec3 n = texture2D(tNormal, vTexCoord).rgb;

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

@@ -24,6 +24,9 @@ uniform sampler2D sentinelColormap;
 varying vec2 vTexCoordA;
 varying vec2 vTexCoordB;
 
+uniform vec4 aboveColor;
+uniform vec4 belowColor;
+
 void main() {
   float f = texture2D(tInput, vTexCoordA).r;
 
@@ -37,7 +40,9 @@ void main() {
       sentinelColormap,
       scaleLength,
       sentinelLength,
-      littleEndian
+      littleEndian,
+      aboveColor,
+      belowColor
     );
 
     float softShadow = texture2D(tSoftShadow, vTexCoordB).r;

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

@@ -15,6 +15,9 @@ uniform int sentinelLength;
 uniform sampler2D scaleColormap;
 uniform sampler2D sentinelColormap;
 
+uniform vec4 aboveColor;
+uniform vec4 belowColor;
+
 uniform float nodataValue;
 uniform sampler2D texture;
 uniform bool littleEndian;
@@ -36,7 +39,9 @@ void main() {
     sentinelColormap,
     scaleLength,
     sentinelLength,
-    littleEndian
+    littleEndian,
+    aboveColor,
+    belowColor
   );
 
   // Hillshade

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

@@ -29,6 +29,9 @@ uniform float nodataValue;
 uniform bool littleEndian;
 uniform float interpolationFraction;
 
+uniform vec4 aboveColor;
+uniform vec4 belowColor;
+
 varying vec2 vTexCoordA;
 varying vec2 vTexCoordB;
 
@@ -38,25 +41,25 @@ void main() {
     if (isCloseEnough(texelFloat, nodataValue)) {
       discard;
     }
-    gl_FragColor = computeColor(texelFloat, scaleColormapA, sentinelColormapA, scaleLengthA, sentinelLengthA, littleEndian);
+    gl_FragColor = computeColor(texelFloat, scaleColormapA, sentinelColormapA, scaleLengthA, sentinelLengthA, littleEndian, aboveColor, belowColor);
   } else if (interpolationFraction >= 1.0) {
     float texelFloat = getTexelValue(textureB, vTexCoordB, littleEndian);
     if (isCloseEnough(texelFloat, nodataValue)) {
       discard;
     }
-    gl_FragColor = computeColor(texelFloat, scaleColormapB, sentinelColormapB, scaleLengthB, sentinelLengthB, littleEndian);
+    gl_FragColor = computeColor(texelFloat, scaleColormapB, sentinelColormapB, scaleLengthB, sentinelLengthB, littleEndian, aboveColor, belowColor);
   } else {
     float texelFloatA = getTexelValue(textureA, vTexCoordA, littleEndian);
     float texelFloatB = getTexelValue(textureB, vTexCoordB, littleEndian);
     vec4 colorA = (
       isCloseEnough(texelFloatA, nodataValue)
       ? TRANSPARENT
-      : computeColor(texelFloatA, scaleColormapA, sentinelColormapA, scaleLengthA, sentinelLengthA, littleEndian)
+      : computeColor(texelFloatA, scaleColormapA, sentinelColormapA, scaleLengthA, sentinelLengthA, littleEndian, aboveColor, belowColor)
     );
     vec4 colorB = (
       isCloseEnough(texelFloatB, nodataValue)
       ? TRANSPARENT
-      : computeColor(texelFloatB, scaleColormapB, sentinelColormapB, scaleLengthB, sentinelLengthB, littleEndian)
+      : computeColor(texelFloatB, scaleColormapB, sentinelColormapB, scaleLengthB, sentinelLengthB, littleEndian, aboveColor, belowColor)
     );
     gl_FragColor = mix(colorA, colorB, interpolationFraction);
   }

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

@@ -26,6 +26,9 @@ uniform float nodataValue;
 uniform bool littleEndian;
 uniform float interpolationFraction;
 
+uniform vec4 aboveColor;
+uniform vec4 belowColor;
+
 varying vec2 vTexCoord;
 
 void main() {
@@ -36,12 +39,12 @@ void main() {
   }
 
   if (interpolationFraction <= 0.0) {
-    gl_FragColor = computeColor(texelFloat, scaleColormapA, sentinelColormapA, scaleLengthA, sentinelLengthA, littleEndian);
+    gl_FragColor = computeColor(texelFloat, scaleColormapA, sentinelColormapA, scaleLengthA, sentinelLengthA, littleEndian, aboveColor, belowColor);
   } else if (interpolationFraction >= 1.0) {
-    gl_FragColor = computeColor(texelFloat, scaleColormapB, sentinelColormapB, scaleLengthB, sentinelLengthB, littleEndian);
+    gl_FragColor = computeColor(texelFloat, scaleColormapB, sentinelColormapB, scaleLengthB, sentinelLengthB, littleEndian, aboveColor, belowColor);
   } else {
-    vec4 colorA = computeColor(texelFloat, scaleColormapA, sentinelColormapA, scaleLengthA, sentinelLengthA, littleEndian);
-    vec4 colorB = computeColor(texelFloat, scaleColormapB, sentinelColormapB, scaleLengthB, sentinelLengthB, littleEndian);
+    vec4 colorA = computeColor(texelFloat, scaleColormapA, sentinelColormapA, scaleLengthA, sentinelLengthA, littleEndian, aboveColor, belowColor);
+    vec4 colorB = computeColor(texelFloat, scaleColormapB, sentinelColormapB, scaleLengthB, sentinelLengthB, littleEndian, aboveColor, belowColor);
     gl_FragColor = mix(colorA, colorB, interpolationFraction);
   }
 }`

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

@@ -23,6 +23,9 @@ uniform sampler2D textureB;
 uniform bool littleEndian;
 uniform float interpolationFraction;
 
+uniform vec4 aboveColor;
+uniform vec4 belowColor;
+
 varying vec2 vTexCoordA;
 varying vec2 vTexCoordB;
 
@@ -53,7 +56,9 @@ void main() {
       sentinelColormap,
       scaleLength,
       sentinelLength,
-      littleEndian
+      littleEndian,
+      aboveColor,
+      belowColor
     );
   } else if (interpolationFraction >= 1.0) {
     float texelFloat = getTexelValue(textureB, vTexCoordB, littleEndian);
@@ -66,7 +71,9 @@ void main() {
       sentinelColormap,
       scaleLength,
       sentinelLength,
-      littleEndian
+      littleEndian,
+      aboveColor,
+      belowColor
     );
   } else {
     // retrieve and decode pixel value from both tiles
@@ -92,7 +99,9 @@ void main() {
             sentinelColormap,
             scaleLength,
             sentinelLength,
-            littleEndian
+            littleEndian,
+            aboveColor,
+            belowColor
           )
       );
       vec4 colorB = (
@@ -104,7 +113,9 @@ void main() {
             sentinelColormap,
             scaleLength,
             sentinelLength,
-            littleEndian
+            littleEndian,
+            aboveColor,
+            belowColor
           )
       );
       gl_FragColor = mix(colorA, colorB, interpolationFraction);
@@ -116,7 +127,9 @@ void main() {
         sentinelColormap,
         scaleLength,
         sentinelLength,
-        littleEndian
+        littleEndian,
+        aboveColor,
+        belowColor
       );
     }
   }

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

@@ -32,6 +32,9 @@ uniform float deg2rad;
 uniform float azimuth;
 uniform float altitude;
 
+uniform vec4 aboveColor;
+uniform vec4 belowColor;
+
 float getRelativeHeight(vec2 pos, float v, vec4 textureBounds) {
   float pixelFloatValue = getTexelValue(texture, pos, littleEndian);
   float test = step(0.0, pixelFloatValue);
@@ -76,7 +79,9 @@ void main() {
     sentinelColormap,
     scaleLength,
     sentinelLength,
-    littleEndian
+    littleEndian,
+    aboveColor,
+    belowColor
   );
 
   if (enableSimpleHillshade) {