@openglobus/og 0.11.7 → 0.12.3

package/src/og/shaders/drawnode.js

@@ -5,17 +5,32 @@
 "use strict";
 
 import { Program } from "../webgl/Program.js";
-
-// REMEMBER!
+
+// REMEMBER!
 // src*(1)+dest*(1-src.alpha)
 // glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
 // src*(src.alpha)+dest*(1-src.alpha)
 // glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
 
-const CORNERS = `const vec2 BOTTOMLEFT = vec2(-0.01);
-                const vec2 TOPRIGHT = vec2(1.01);`;
-
+
 const NIGHT = `const vec3 nightStep = 10.0 * vec3(0.58, 0.48, 0.25);`;
+
+const DEF_BLEND = `#define blend(DEST, SAMPLER, OFFSET, OPACITY) \
+                    src = texture( SAMPLER, OFFSET.xy + vTextureCoord.xy * OFFSET.zw ); \
+                    DEST = DEST * (1.0 - src.a * OPACITY) + src * OPACITY;`;
+
+const DEF_BLEND_WEBGL1 = `#define blend(DEST, SAMPLER, OFFSET, OPACITY) \
+                            src = texture2D( SAMPLER, OFFSET.xy + vTextureCoord.xy * OFFSET.zw ); \
+                            DEST = DEST * (1.0 - src.a * OPACITY) + src * OPACITY;`;
+
+const DEF_BLEND_PICKING = `#define blendPicking(DEST, OFFSET, SAMPLER, MASK, COLOR, OPACITY) \
+    tc = OFFSET.xy + vTextureCoord.xy * OFFSET.zw; \
+    t = texture2D(SAMPLER, tc); \
+    p = texture2D(MASK, tc); \
+    DEST = mix(DEST, vec4(max(COLOR.rgb, p.rgb), OPACITY), (t.a == 0.0 ? 0.0 : 1.0) * COLOR.a);`
+
+
+const SLICE_SIZE = 4;
 
 export function drawnode_screen_nl() {
     return new Program("drawnode_screen_nl", {
@@ -26,9 +41,8 @@ export function drawnode_screen_nl() {
             eyePositionLow: "vec3",
             samplerCount: "int",
             tileOffsetArr: "vec4",
-            visibleExtentOffsetArr: "vec4",
+            layerOpacityArr: "float",
             samplerArr: "sampler2darray",
-            transparentColorArr: "vec4",
             defaultTexture: "sampler2d",
             height: "float"
         },
@@ -61,61 +75,38 @@ export function drawnode_screen_nl() {
                 viewMatrixRTE[3] = vec4(0.0, 0.0, 0.0, 1.0);
 
                 gl_Position = projectionMatrix * viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
-
-                /*vec3 cameraPosition = eyePositionHigh + eyePositionLow;*/
-                /*vec3 aVertexPosition = aVertexPositionHigh + aVertexPositionLow * (cameraPosition / cameraPosition);*/
-                /*gl_Position = projectionViewMatrix * vec4(aVertexPosition + normalize(aVertexPosition) * height, 1.0);*/
             }`,
 
         fragmentShader: `precision highp float;
-            uniform vec4 tileOffsetArr[5];
-            uniform vec4 visibleExtentOffsetArr[5];
-            uniform vec4 transparentColorArr[5];
+            #define SLICE_SIZE ${SLICE_SIZE + 1}
+            uniform vec4 tileOffsetArr[SLICE_SIZE];
+            uniform float layerOpacityArr[SLICE_SIZE];
             uniform sampler2D defaultTexture;
-            uniform sampler2D samplerArr[5];
+            uniform sampler2D samplerArr[SLICE_SIZE];
             uniform int samplerCount;
-            varying vec2 vTextureCoord;
-
-            /* return 1 if v inside the box, return 0 otherwise */
-            float insideBox(vec2 v, vec2 bottomLeft, vec2 topRight) {
-                vec2 s = step(bottomLeft, v) - step(topRight, v);
-                return s.x * s.y;
-            }
+            varying vec2 vTextureCoord;
 
-            ${CORNERS}
-
-            void blend(
-                out vec4 prevColor,
-                in sampler2D sampler,
-                in vec4 tileOffset,
-                in vec4 visibleExtentOffset,
-                in vec4 transparentColor)
-            {
-                vec4 t = texture2D( sampler, tileOffset.xy + vTextureCoord.xy * tileOffset.zw );
-
-                float emptiness = smoothstep(0.35, 0.5, distance( t.rgb, transparentColor.rgb )) *
-                    insideBox(visibleExtentOffset.xy + vTextureCoord.xy * visibleExtentOffset.zw, BOTTOMLEFT, TOPRIGHT);
-
-                prevColor = prevColor * (1.0 - t.a * transparentColor.a * emptiness) + vec4(t.rgb, t.a) * transparentColor.a * emptiness;
-            }
+            ${DEF_BLEND_WEBGL1}
 
             void main(void) {
                 gl_FragColor = texture2D( defaultTexture, vTextureCoord );
                 if( samplerCount == 0 ) return;
 
-                blend(gl_FragColor, samplerArr[0], tileOffsetArr[0], visibleExtentOffsetArr[0], transparentColorArr[0]);
-                if( samplerCount == 1 ) return;
-
-                blend(gl_FragColor, samplerArr[1], tileOffsetArr[1], visibleExtentOffsetArr[1], transparentColorArr[1]);
-                if( samplerCount == 2 ) return;
-
-                blend(gl_FragColor, samplerArr[2], tileOffsetArr[2], visibleExtentOffsetArr[2], transparentColorArr[2]);
-                if( samplerCount == 3 ) return;
-
-                blend(gl_FragColor, samplerArr[3], tileOffsetArr[3], visibleExtentOffsetArr[3], transparentColorArr[3]);
-                if( samplerCount == 4 ) return;
-
-                blend(gl_FragColor, samplerArr[4], tileOffsetArr[4], visibleExtentOffsetArr[4], transparentColorArr[4]);
+                vec4 src;
+
+                blend(gl_FragColor, samplerArr[0], tileOffsetArr[0], layerOpacityArr[0]);
+                if( samplerCount == 1 ) return;
+
+                blend(gl_FragColor, samplerArr[1], tileOffsetArr[1], layerOpacityArr[1]);
+                if( samplerCount == 2 ) return;
+
+                blend(gl_FragColor, samplerArr[2], tileOffsetArr[2], layerOpacityArr[2]);
+                if( samplerCount == 3 ) return;
+
+                blend(gl_FragColor, samplerArr[3], tileOffsetArr[3], layerOpacityArr[3]);
+                if( samplerCount == 4 ) return;
+
+                blend(gl_FragColor, samplerArr[4], tileOffsetArr[4], layerOpacityArr[4]);
             }`
     });
 }
@@ -134,18 +125,17 @@ export function drawnode_screen_wl() {
 
             samplerCount: "int",
             tileOffsetArr: "vec4",
-            visibleExtentOffsetArr: "vec4",
+            layerOpacityArr: "float",
             samplerArr: "sampler2darray",
-            transparentColorArr: "vec4",
             defaultTexture: "sampler2d",
             normalMatrix: "mat3",
             uNormalMap: "sampler2d",
             nightTexture: "sampler2d",
             specularTexture: "sampler2d",
             lightsPositions: "vec4",
-            diffuseMaterial: "vec3",
-            ambientMaterial: "vec3",
-            specularMaterial: "vec4"
+            diffuse: "vec3",
+            ambient: "vec3",
+            specular: "vec4"
         },
         attributes: {
             aVertexPositionHigh: "vec3",
@@ -191,12 +181,11 @@ export function drawnode_screen_wl() {
         fragmentShader: `precision highp float;
 
             #define MAX_POINT_LIGHTS 1
-            #define MAX_OVERLAYS 5
-            #define MAX_OVERLAYS_PLUS_ONE 6
+            #define SLICE_SIZE ${SLICE_SIZE + 1}
 
-            uniform vec3 diffuseMaterial[MAX_OVERLAYS_PLUS_ONE];
-            uniform vec3 ambientMaterial[MAX_OVERLAYS_PLUS_ONE];
-            uniform vec4 specularMaterial[MAX_OVERLAYS_PLUS_ONE];
+            uniform vec3 diffuse;
+            uniform vec3 ambient;
+            uniform vec4 specular;
 
             uniform sampler2D uNormalMap;
             uniform vec4 lightsPositions[MAX_POINT_LIGHTS];
@@ -204,12 +193,11 @@ export function drawnode_screen_wl() {
             uniform sampler2D nightTexture;
             uniform sampler2D specularTexture;
 
-            uniform vec4 tileOffsetArr[MAX_OVERLAYS];
-            uniform vec4 visibleExtentOffsetArr[MAX_OVERLAYS];
-            uniform vec4 transparentColorArr[MAX_OVERLAYS];
+            uniform vec4 tileOffsetArr[SLICE_SIZE];
+            uniform float layerOpacityArr[SLICE_SIZE];
 
             uniform sampler2D defaultTexture;
-            uniform sampler2D samplerArr[MAX_OVERLAYS];
+            uniform sampler2D samplerArr[SLICE_SIZE];
             uniform int samplerCount;
 
             varying vec4 vTextureCoord;
@@ -217,30 +205,10 @@ export function drawnode_screen_wl() {
             varying vec4 v_vertex;
             varying float v_height;
 
-            /* return 1 if v inside the box, return 0 otherwise */
-            float insideBox(vec2 v, vec2 bottomLeft, vec2 topRight) {
-                vec2 s = step(bottomLeft, v) - step(topRight, v);
-                return s.x * s.y;
-            }
-
-            ${CORNERS}
-
             ${NIGHT}
-
-            void blend(
-                out vec4 prevColor,
-                in sampler2D sampler,
-                in vec4 tileOffset,
-                in vec4 visibleExtentOffset,
-                in vec4 transparentColor)
-            {
-                vec4 t = texture2D( sampler, tileOffset.xy + vTextureCoord.xy * tileOffset.zw );
-
-                float emptiness = smoothstep(0.35, 0.5, distance( t.rgb, transparentColor.rgb )) *
-                    insideBox(visibleExtentOffset.xy + vTextureCoord.xy * visibleExtentOffset.zw, BOTTOMLEFT, TOPRIGHT);
-
-                prevColor = prevColor * (1.0 - t.a * transparentColor.a * emptiness) + vec4(t.rgb, t.a) * transparentColor.a * emptiness;
-            }
+
+            ${DEF_BLEND}
+
 
             void main(void) {
 
@@ -256,33 +224,43 @@ export function drawnode_screen_wl() {
                 vec3 night = nightStep * (0.3 - diffuseLightWeighting) * nightImageColor.rgb;
                 night *= overGround * step(0.0, night);
 
-
-
-                vec3 spec = specularMaterial[0].rgb * pow( reflection, specularMaterial[0].w) * shininess;
-                vec3 lightWeighting = ambientMaterial[0] + diffuseMaterial[0] * diffuseLightWeighting + spec;
-
-                vec4 t = texture2D( defaultTexture, vTextureCoord.xy );
-                gl_FragColor = vec4(t.rgb * lightWeighting + night + spec, t.a);
-                if( samplerCount == 0 ) return;
-
-                blend(gl_FragColor, samplerArr[0], tileOffsetArr[0], visibleExtentOffsetArr[0], transparentColorArr[0],
-                    specularMaterial[1], ambientMaterial[1], diffuseMaterial[1]);
-                if( samplerCount == 1 ) return;
-
-                blend(gl_FragColor, samplerArr[1], tileOffsetArr[1], visibleExtentOffsetArr[1], transparentColorArr[1],
-                    specularMaterial[2], ambientMaterial[2], diffuseMaterial[2]);
-                if( samplerCount == 2 ) return;
-
-                blend(gl_FragColor, samplerArr[2], tileOffsetArr[2], visibleExtentOffsetArr[2], transparentColorArr[2],
-                    specularMaterial[3], ambientMaterial[3], diffuseMaterial[3]);
-                if( samplerCount == 3 ) return;
-
-                blend(gl_FragColor, samplerArr[3], tileOffsetArr[3], visibleExtentOffsetArr[3], transparentColorArr[3],
-                    specularMaterial[4], ambientMaterial[4], diffuseMaterial[4]);
-                if( samplerCount == 4 ) return;
-
-                blend(gl_FragColor, samplerArr[4], tileOffsetArr[4], visibleExtentOffsetArr[4], transparentColorArr[4],
-                    specularMaterial[5], ambientMaterial[5], diffuseMaterial[5]);
+                vec3 spec = specular.rgb * pow( reflection, specular.w) * shininess;
+                vec3 lightWeighting = ambient + diffuse * diffuseLightWeighting + spec + night;
+
+                gl_FragColor = texture2D( defaultTexture, vTextureCoord.xy );
+                if( samplerCount == 0 ) {
+                    gl_FragColor *= lightWeighting;
+                    return;
+                }
+    
+                vec4 src;
+
+                blend(gl_FragColor, samplerArr[0], tileOffsetArr[0], layerOpacityArr[0]);
+                if( samplerCount == 1 ) {
+                    gl_FragColor *= lightWeighting;
+                    return;
+                }
+
+                blend(gl_FragColor, samplerArr[1], tileOffsetArr[1], layerOpacityArr[1]);
+                if( samplerCount == 2 ) {
+                    gl_FragColor *= lightWeighting;
+                    return;
+                }
+
+                blend(gl_FragColor, samplerArr[2], tileOffsetArr[2], layerOpacityArr[2]);
+                if( samplerCount == 3 ) {
+                    gl_FragColor *= lightWeighting;
+                    return;
+                }
+
+                blend(gl_FragColor, samplerArr[3], tileOffsetArr[3], layerOpacityArr[3]);
+                if( samplerCount == 4 ) {
+                    gl_FragColor *= lightWeighting;
+                    return;
+                }
+
+                blend(gl_FragColor, samplerArr[4], tileOffsetArr[4], layerOpacityArr[4]);
+                gl_FragColor *= lightWeighting;
             }`
     });
 }
@@ -301,18 +279,17 @@ export function drawnode_screen_wl_webgl2() {
 
             samplerCount: "int",
             tileOffsetArr: "vec4",
-            visibleExtentOffsetArr: "vec4",
+            layerOpacityArr: "float",
             samplerArr: "sampler2darray",
-            transparentColorArr: "vec4",
             defaultTexture: "sampler2d",
             normalMatrix: "mat3",
             uNormalMap: "sampler2d",
             nightTexture: "sampler2d",
             specularTexture: "sampler2d",
             lightsPositions: "vec4",
-            diffuseMaterial: "vec3",
-            ambientMaterial: "vec3",
-            specularMaterial: "vec4"
+            diffuse: "vec3",
+            ambient: "vec3",
+            specular: "vec4"
         },
         attributes: {
             aVertexPositionHigh: "vec3",
@@ -320,7 +297,7 @@ export function drawnode_screen_wl_webgl2() {
             aTextureCoord: "vec2"
         },
 
-        vertexShader: `#version 300 es
+        vertexShader: `#version 300 es
 
             in vec3 aVertexPositionHigh;
             in vec3 aVertexPositionLow;
@@ -362,12 +339,11 @@ export function drawnode_screen_wl_webgl2() {
             precision highp float;
 
             #define MAX_POINT_LIGHTS 1
-            #define MAX_OVERLAYS 5
-            #define MAX_OVERLAYS_PLUS_ONE 6
+            #define SLICE_SIZE ${SLICE_SIZE + 1}
 
-            uniform vec3 diffuseMaterial[MAX_OVERLAYS_PLUS_ONE];
-            uniform vec3 ambientMaterial[MAX_OVERLAYS_PLUS_ONE];
-            uniform vec4 specularMaterial[MAX_OVERLAYS_PLUS_ONE];
+            uniform vec3 diffuse;
+            uniform vec3 ambient;
+            uniform vec4 specular;
 
             uniform sampler2D uNormalMap;
             uniform vec4 lightsPositions[MAX_POINT_LIGHTS];
@@ -375,18 +351,17 @@ export function drawnode_screen_wl_webgl2() {
             uniform sampler2D nightTexture;
             uniform sampler2D specularTexture;
 
-            uniform vec4 tileOffsetArr[MAX_OVERLAYS];
-            uniform vec4 visibleExtentOffsetArr[MAX_OVERLAYS];
-            uniform vec4 transparentColorArr[MAX_OVERLAYS];
+            uniform vec4 tileOffsetArr[SLICE_SIZE];
+            uniform float layerOpacityArr[SLICE_SIZE];
 
             uniform sampler2D defaultTexture;
-            uniform sampler2D samplerArr[MAX_OVERLAYS];
+            uniform sampler2D samplerArr[SLICE_SIZE];
             uniform int samplerCount;
 
             in vec4 vTextureCoord;
             in vec2 vGlobalTextureCoord;
             in vec4 v_vertex;
-            in float v_height;
+            in float v_height;
 
             float shininess;
             float reflection;
@@ -395,76 +370,62 @@ export function drawnode_screen_wl_webgl2() {
 
             layout(location = 0) out vec4 fragColor;
 
-            /* return 1 if v inside the box, return 0 otherwise */
-            float insideBox(vec2 v, vec2 bottomLeft, vec2 topRight) {
-                vec2 s = step(bottomLeft, v) - step(topRight, v);
-                return s.x * s.y;
-            }
-
-            ${CORNERS}
+            ${NIGHT}
 
-            ${NIGHT}
-
-            void blend(
-                out vec4 dest,
-                in sampler2D sampler,
-                in vec4 tileOffset,
-                in vec4 visibleExtentOffset,
-                in vec4 transparentColor,
-                in vec4 specular,
-                in vec3 ambient,
-                in vec3 diffuse)
-            {
-                vec3 spec = specular.rgb * pow(reflection, specular.w) * (1.0 + shininess);
-                vec3 lightWeighting = ambient + diffuse * diffuseLightWeighting + spec;
-
-                vec4 src = texture( sampler, tileOffset.xy + vTextureCoord.xy * tileOffset.zw );
-
-                float emptiness = smoothstep(0.35, 0.5, distance( src.rgb, transparentColor.rgb )) *
-                    insideBox(visibleExtentOffset.xy + vTextureCoord.xy * visibleExtentOffset.zw, BOTTOMLEFT, TOPRIGHT);
-
-                dest = dest * (1.0 - src.a * transparentColor.a * emptiness) + vec4(src.rgb * lightWeighting + night + spec * src.a, src.a) * transparentColor.a * emptiness;
-            }
+            ${DEF_BLEND}
 
-            void main(void) {
+            void main(void) {
 
                 float overGround = 1.0 - step(0.1, v_height);
                 vec3 normal = normalize(normalMatrix * ((texture(uNormalMap, vTextureCoord.zw).rgb - 0.5) * 2.0));
                 vec3 lightDirection = normalize(lightsPositions[0].xyz - v_vertex.xyz * lightsPositions[0].w);
                 vec3 eyeDirection = normalize(-v_vertex.xyz);
                 vec3 reflectionDirection = reflect(-lightDirection, normal);
-                vec4 nightImageColor = texture( nightTexture, vGlobalTextureCoord.st );
+                vec4 nightImageColor = texture( nightTexture, vGlobalTextureCoord.st );
 
                 shininess = texture( specularTexture, vGlobalTextureCoord.st ).r * 255.0 * overGround;
                 reflection = max( dot(reflectionDirection, eyeDirection), 0.0);
                 diffuseLightWeighting = max(dot(normal, lightDirection), 0.0);
                 night = nightStep * (.18 - diffuseLightWeighting * 3.0) * nightImageColor.rgb;
                 night *= overGround * step(0.0, night);
+
+                vec3 spec = specular.rgb * pow( reflection, specular.w) * shininess;
+                vec4 lightWeighting = vec4(ambient + diffuse * diffuseLightWeighting + spec + night, 1.0);
+
+                fragColor = texture( defaultTexture, vTextureCoord.xy );
+                if( samplerCount == 0 ) {
+                    fragColor *= lightWeighting;
+                    return;
+                }
 
-                vec3 spec = specularMaterial[0].rgb * pow( reflection, specularMaterial[0].w) * shininess;
-                vec3 lightWeighting = ambientMaterial[0] + diffuseMaterial[0] * diffuseLightWeighting + spec;
-                vec4 t = texture( defaultTexture, vTextureCoord.xy );
-                fragColor = vec4(t.rgb * lightWeighting + night + spec, t.a);
-                if( samplerCount == 0 ) return;
-
-                blend(fragColor, samplerArr[0], tileOffsetArr[0], visibleExtentOffsetArr[0], transparentColorArr[0],
-                    specularMaterial[1], ambientMaterial[1], diffuseMaterial[1]);
-                if( samplerCount == 1 ) return;
-
-                blend(fragColor, samplerArr[1], tileOffsetArr[1], visibleExtentOffsetArr[1], transparentColorArr[1],
-                    specularMaterial[2], ambientMaterial[2], diffuseMaterial[2]);
-                if( samplerCount == 2 ) return;
-
-                blend(fragColor, samplerArr[2], tileOffsetArr[2], visibleExtentOffsetArr[2], transparentColorArr[2],
-                    specularMaterial[3], ambientMaterial[3], diffuseMaterial[3]);
-                if( samplerCount == 3 ) return;
-
-                blend(fragColor, samplerArr[3], tileOffsetArr[3], visibleExtentOffsetArr[3], transparentColorArr[3],
-                    specularMaterial[4], ambientMaterial[4], diffuseMaterial[4]);
-                if( samplerCount == 4 ) return;
-
-                blend(fragColor, samplerArr[4], tileOffsetArr[4], visibleExtentOffsetArr[4], transparentColorArr[4],
-                    specularMaterial[5], ambientMaterial[5], diffuseMaterial[5]);
+                vec4 src;
+
+                blend(fragColor, samplerArr[0], tileOffsetArr[0], layerOpacityArr[0]);
+                if( samplerCount == 1 ) {
+                    fragColor *= lightWeighting;
+                    return;
+                }
+
+                blend(fragColor, samplerArr[1], tileOffsetArr[1], layerOpacityArr[1]);
+                if( samplerCount == 2 ) {
+                    fragColor *= lightWeighting;
+                    return;
+                }
+
+                blend(fragColor, samplerArr[2], tileOffsetArr[2], layerOpacityArr[2]);
+                if( samplerCount == 3 ) {
+                    fragColor *= lightWeighting;
+                    return;
+                }
+
+                blend(fragColor, samplerArr[3], tileOffsetArr[3], layerOpacityArr[3]);
+                if( samplerCount == 4 ) {
+                    fragColor *= lightWeighting;
+                    return;
+                }
+
+                blend(fragColor, samplerArr[4], tileOffsetArr[4], layerOpacityArr[4]);
+                fragColor *= lightWeighting;
             }`
     });
 }
@@ -478,10 +439,8 @@ export function drawnode_colorPicking() {
             eyePositionLow: "vec3",
             samplerCount: "int",
             tileOffsetArr: "vec4",
-            visibleExtentOffsetArr: "vec4",
             samplerArr: "sampler2darray",
             pickingMaskArr: "sampler2darray",
-            transparentColorArr: "vec4",
             pickingColorArr: "vec4",
             height: "float"
         },
@@ -517,69 +476,37 @@ export function drawnode_colorPicking() {
             }`,
 
         fragmentShader: `precision highp float;
-            uniform vec4 tileOffsetArr[5];
-            uniform vec4 visibleExtentOffsetArr[5];
-            uniform vec4 transparentColorArr[5];
-            uniform vec4 pickingColorArr[5];
-            uniform sampler2D samplerArr[5];
-            uniform sampler2D pickingMaskArr[5];
+            #define SLICE_SIZE ${SLICE_SIZE + 1}
+            uniform vec4 tileOffsetArr[SLICE_SIZE];
+            uniform vec4 pickingColorArr[SLICE_SIZE];
+            uniform sampler2D samplerArr[SLICE_SIZE];
+            uniform sampler2D pickingMaskArr[SLICE_SIZE];
             uniform int samplerCount;
             varying vec2 vTextureCoord;
-            /* return 1 if v inside the box, return 0 otherwise */
-            float insideBox(vec2 v, vec2 bottomLeft, vec2 topRight) {
-                vec2 s = step(bottomLeft, v) - step(topRight, v);
-                return s.x * s.y;
-            }
 
-            ${CORNERS}
+            ${DEF_BLEND_PICKING}
 
             void main(void) {
                 gl_FragColor = vec4(0.0);
                 if( samplerCount == 0 ) return;
+
+                vec2 tc;
+                vec4 t;
+                vec4 p;
 
-                vec2 tc = tileOffsetArr[0].xy + vTextureCoord.xy * tileOffsetArr[0].zw;
-                float ins = insideBox(visibleExtentOffsetArr[0].xy + vTextureCoord.xy * visibleExtentOffsetArr[0].zw, BOTTOMLEFT, TOPRIGHT);
-                vec4 t = texture2D( samplerArr[0], tc ) * ins;
-                vec4 p = texture2D( pickingMaskArr[0], tc ) * ins;
-                float emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[0].rgb ));
-                emptiness = 1.0 - step(0.0, -emptiness);
-                gl_FragColor = mix( gl_FragColor, vec4(max(pickingColorArr[0].rgb, p.rgb), 1.0), emptiness * pickingColorArr[0].a);
+                blendPicking(gl_FragColor, tileOffsetArr[0], samplerArr[0], pickingMaskArr[0], pickingColorArr[0], 1.0);
                 if( samplerCount == 1 ) return;
 
-                tc = tileOffsetArr[1].xy + vTextureCoord.xy * tileOffsetArr[1].zw;
-                ins = insideBox(visibleExtentOffsetArr[1].xy + vTextureCoord.xy * visibleExtentOffsetArr[1].zw, BOTTOMLEFT, TOPRIGHT);
-                t = texture2D( samplerArr[1], tc ) * ins;
-                p = texture2D( pickingMaskArr[1], tc ) * ins;
-                emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[1].rgb ));
-                emptiness = 1.0 - step(0.0, -emptiness);
-                gl_FragColor = mix( gl_FragColor, vec4(max(pickingColorArr[1].rgb, p.rgb), 1.0), emptiness * pickingColorArr[1].a);
+                blendPicking(gl_FragColor, tileOffsetArr[1], samplerArr[1], pickingMaskArr[1], pickingColorArr[1], 1.0);
                 if( samplerCount == 2 ) return;
 
-                tc = tileOffsetArr[2].xy + vTextureCoord.xy * tileOffsetArr[2].zw;
-                ins = insideBox(visibleExtentOffsetArr[2].xy + vTextureCoord.xy * visibleExtentOffsetArr[2].zw, BOTTOMLEFT, TOPRIGHT);
-                t = texture2D( samplerArr[2], tc ) * ins;
-                p = texture2D( pickingMaskArr[2], tc ) * ins;
-                emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[2].rgb ));
-                emptiness = 1.0 - step(0.0, -emptiness);
-                gl_FragColor = mix( gl_FragColor, vec4(max(pickingColorArr[2].rgb, p.rgb), 1.0), emptiness * pickingColorArr[2].a);
+                blendPicking(gl_FragColor, tileOffsetArr[2], samplerArr[2], pickingMaskArr[2], pickingColorArr[2], 1.0);
                 if( samplerCount == 3 ) return;
 
-                tc = tileOffsetArr[3].xy + vTextureCoord.xy * tileOffsetArr[3].zw;
-                ins = insideBox(visibleExtentOffsetArr[3].xy + vTextureCoord.xy * visibleExtentOffsetArr[3].zw, BOTTOMLEFT, TOPRIGHT);
-                t = texture2D( samplerArr[3], tc ) * ins;
-                p = texture2D( pickingMaskArr[3], tc ) * ins;
-                emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[3].rgb ));
-                emptiness = 1.0 - step(0.0, -emptiness);
-                gl_FragColor = mix( gl_FragColor, vec4(max(pickingColorArr[3].rgb, p.rgb), 1.0), emptiness * pickingColorArr[3].a);
+                blendPicking(gl_FragColor, tileOffsetArr[3], samplerArr[3], pickingMaskArr[3], pickingColorArr[3], 1.0);
                 if( samplerCount == 4 ) return;
 
-                tc = tileOffsetArr[4].xy + vTextureCoord.xy * tileOffsetArr[4].zw;
-                ins = insideBox(visibleExtentOffsetArr[4].xy + vTextureCoord.xy * visibleExtentOffsetArr[4].zw, BOTTOMLEFT, TOPRIGHT);
-                t = texture2D( samplerArr[4], tc ) * ins;
-                p = texture2D( pickingMaskArr[4], tc ) * ins;
-                emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[4].rgb ));
-                emptiness = 1.0 - step(0.0, -emptiness);
-                gl_FragColor = mix( gl_FragColor, vec4(max(pickingColorArr[4].rgb, p.rgb), 1.0), emptiness * pickingColorArr[4].a);
+                blendPicking(gl_FragColor, tileOffsetArr[4], samplerArr[4], pickingMaskArr[4], pickingColorArr[4], 1.0);
             }`
     });
 }
@@ -589,25 +516,17 @@ export function drawnode_heightPicking() {
         uniforms: {
             projectionMatrix: "mat4",
             viewMatrix: "mat4",
-            samplerCount: "int",
-            tileOffsetArr: "vec4",
-            visibleExtentOffsetArr: "vec4",
-            samplerArr: "sampler2darray",
-            transparentColorArr: "vec4",
-            defaultTexture: "sampler2d",
             height: "float",
             eyePositionHigh: "vec3",
             eyePositionLow: "vec3"
         },
         attributes: {
             aVertexPositionHigh: "vec3",
-            aVertexPositionLow: "vec3",
-            aTextureCoord: "vec2"
+            aVertexPositionLow: "vec3"
         },
 
         vertexShader: `attribute vec3 aVertexPositionHigh;
             attribute vec3 aVertexPositionLow;
-            attribute vec2 aTextureCoord;
 
             uniform mat4 projectionMatrix;
             uniform mat4 viewMatrix;
@@ -615,7 +534,6 @@ export function drawnode_heightPicking() {
             uniform vec3 eyePositionHigh;
             uniform vec3 eyePositionLow;
 
-            varying vec2 vTextureCoord;
             varying float range;
 
             void main(void) {
@@ -630,25 +548,12 @@ export function drawnode_heightPicking() {
                 viewMatrixRTE[3] = vec4(0.0, 0.0, 0.0, 1.0);
 
                 range = distance(cameraPosition, aVertexPosition + normalize(aVertexPosition) * height);
-                vTextureCoord = aTextureCoord;
                 gl_Position = projectionMatrix * viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
             }`,
 
         fragmentShader: `precision highp float;
-            uniform sampler2D defaultTexture;
-            uniform vec4 tileOffsetArr[5];
-            uniform vec4 visibleExtentOffsetArr[5];
-            uniform vec4 transparentColorArr[5];
-            uniform sampler2D samplerArr[5];
-            uniform int samplerCount;
-            varying vec2 vTextureCoord;
-            varying float range;
 
-            /* return 1 if v inside the box, return 0 otherwise */
-            float insideBox(vec2 v, vec2 bottomLeft, vec2 topRight) {
-                vec2 s = step(bottomLeft, v) - step(topRight, v);
-                return s.x * s.y;
-            }
+            varying float range;
 
             vec3 encode24(highp float f) {
                 float F = abs(f);
@@ -662,35 +567,8 @@ export function drawnode_heightPicking() {
                     floor( mod( floor( m * exp2( 23.0 - 8.0) ), exp2(8.0) ) ) / 255.0);
             }
 
-            ${CORNERS}
-
             void main(void) {
-                gl_FragColor = vec4(encode24(range), texture2D( defaultTexture, vTextureCoord ).a);
-                if( samplerCount == 0 ) return;
-
-                vec4 t = texture2D( samplerArr[0], tileOffsetArr[0].xy + vTextureCoord * tileOffsetArr[0].zw ) * insideBox(visibleExtentOffsetArr[0].xy + vTextureCoord * visibleExtentOffsetArr[0].zw, BOTTOMLEFT, TOPRIGHT);
-                float emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[0].rgb ));
-                gl_FragColor = mix( gl_FragColor, vec4(encode24(range), 1.0), 1.0 - step(0.0, -emptiness));
-                if( samplerCount == 1 ) return;
-
-                t = texture2D( samplerArr[1], tileOffsetArr[1].xy + vTextureCoord * tileOffsetArr[1].zw ) * insideBox(visibleExtentOffsetArr[1].xy + vTextureCoord * visibleExtentOffsetArr[1].zw, BOTTOMLEFT, TOPRIGHT);
-                emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[1].rgb ));
-                gl_FragColor = mix( gl_FragColor, vec4(encode24(range), 1.0), 1.0 - step(0.0, -emptiness));
-                if( samplerCount == 2 ) return;
-
-                t = texture2D( samplerArr[2], tileOffsetArr[2].xy + vTextureCoord * tileOffsetArr[2].zw ) * insideBox(visibleExtentOffsetArr[2].xy + vTextureCoord * visibleExtentOffsetArr[2].zw, BOTTOMLEFT, TOPRIGHT);
-                emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[2].rgb ));
-                gl_FragColor = mix( gl_FragColor, vec4(encode24(range), 1.0), 1.0 - step(0.0, -emptiness));
-                if( samplerCount == 3 ) return;
-
-                t = texture2D( samplerArr[3], tileOffsetArr[3].xy + vTextureCoord * tileOffsetArr[3].zw ) * insideBox(visibleExtentOffsetArr[3].xy + vTextureCoord * visibleExtentOffsetArr[3].zw, BOTTOMLEFT, TOPRIGHT);
-                emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[3].rgb ));
-                gl_FragColor = mix( gl_FragColor, vec4(encode24(range), 1.0), 1.0 - step(0.0, -emptiness));
-                if( samplerCount == 4 ) return;
-
-                t = texture2D( samplerArr[4], tileOffsetArr[4].xy + vTextureCoord * tileOffsetArr[4].zw ) * insideBox(visibleExtentOffsetArr[4].xy + vTextureCoord * visibleExtentOffsetArr[4].zw, BOTTOMLEFT, TOPRIGHT);
-                emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[4].rgb ));
-                gl_FragColor = mix( gl_FragColor, vec4(encode24(range), 1.0), 1.0 - step(0.0, -emptiness));
+                gl_FragColor = vec4(encode24(range), 1.0);
             }`
     });
 }
@@ -700,12 +578,6 @@ export function drawnode_depth() {
         uniforms: {
             projectionMatrix: "mat4",
             viewMatrix: "mat4",
-            samplerCount: "int",
-            tileOffsetArr: "vec4",
-            visibleExtentOffsetArr: "vec4",
-            samplerArr: "sampler2darray",
-            transparentColorArr: "vec4",
-            defaultTexture: "sampler2d",
             height: "float",
             eyePositionHigh: "vec3",
             eyePositionLow: "vec3",
@@ -713,14 +585,11 @@ export function drawnode_depth() {
         },
         attributes: {
             aVertexPositionHigh: "vec3",
-            aVertexPositionLow: "vec3",
-            aTextureCoord: "vec2"
+            aVertexPositionLow: "vec3"
         },
 
-        vertexShader: `#version 300 es
-            in vec3 aVertexPositionHigh;
-            in vec3 aVertexPositionLow;
-            in vec2 aTextureCoord;
+        vertexShader: `attribute vec3 aVertexPositionHigh;
+            attribute vec3 aVertexPositionLow;
 
             uniform mat4 projectionMatrix;
             uniform mat4 viewMatrix;
@@ -728,8 +597,6 @@ export function drawnode_depth() {
             uniform vec3 eyePositionHigh;
             uniform vec3 eyePositionLow;
 
-            out vec2 vTextureCoord;
-
             void main(void) {
 
                 vec3 cameraPosition = eyePositionHigh + eyePositionLow;
@@ -741,60 +608,14 @@ export function drawnode_depth() {
                 mat4 viewMatrixRTE = viewMatrix;
                 viewMatrixRTE[3] = vec4(0.0, 0.0, 0.0, 1.0);
 
-                vTextureCoord = aTextureCoord;
                 gl_Position = projectionMatrix * viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
             }`,
 
-        fragmentShader: `#version 300 es
-            precision highp float;
-            uniform sampler2D defaultTexture;
-            uniform vec4 tileOffsetArr[5];
-            uniform vec4 visibleExtentOffsetArr[5];
-            uniform vec4 transparentColorArr[5];
-            uniform sampler2D samplerArr[5];
-            uniform int samplerCount;
+        fragmentShader: `precision highp float;
             uniform vec3 frustumPickingColor;
 
-            in vec2 vTextureCoord;
-
-            layout(location = 0) out vec4 frustumColor;
-
-            /* return 1 if v inside the box, return 0 otherwise */
-            float insideBox(vec2 v, vec2 bottomLeft, vec2 topRight) {
-                vec2 s = step(bottomLeft, v) - step(topRight, v);
-                return s.x * s.y;
-            }
-
-            ${CORNERS}
-
             void main(void) {
-
-            frustumColor = vec4(frustumPickingColor, texture(defaultTexture, vTextureCoord).a);
-            if(samplerCount == 0) return;
-
-    vec4 t = texture(samplerArr[0], tileOffsetArr[0].xy + vTextureCoord * tileOffsetArr[0].zw) * insideBox(visibleExtentOffsetArr[0].xy + vTextureCoord * visibleExtentOffsetArr[0].zw, BOTTOMLEFT, TOPRIGHT);
-    float emptiness = t.a * smoothstep(0.35, 0.5, distance(t.rgb, transparentColorArr[0].rgb));
-    frustumColor = mix(frustumColor, vec4(frustumPickingColor, 1.0), 1.0 - step(0.0, -emptiness));
-    if (samplerCount == 1) return;
-
-    t = texture(samplerArr[1], tileOffsetArr[1].xy + vTextureCoord * tileOffsetArr[1].zw) * insideBox(visibleExtentOffsetArr[1].xy + vTextureCoord * visibleExtentOffsetArr[1].zw, BOTTOMLEFT, TOPRIGHT);
-    emptiness = t.a * smoothstep(0.35, 0.5, distance(t.rgb, transparentColorArr[1].rgb));
-    frustumColor = mix(frustumColor, vec4(frustumPickingColor, 1.0), 1.0 - step(0.0, -emptiness));
-    if (samplerCount == 2) return;
-
-    t = texture(samplerArr[2], tileOffsetArr[2].xy + vTextureCoord * tileOffsetArr[2].zw) * insideBox(visibleExtentOffsetArr[2].xy + vTextureCoord * visibleExtentOffsetArr[2].zw, BOTTOMLEFT, TOPRIGHT);
-    emptiness = t.a * smoothstep(0.35, 0.5, distance(t.rgb, transparentColorArr[2].rgb));
-    frustumColor = mix(frustumColor, vec4(frustumPickingColor, 1.0), 1.0 - step(0.0, -emptiness));
-    if (samplerCount == 3) return;
-
-    t = texture(samplerArr[3], tileOffsetArr[3].xy + vTextureCoord * tileOffsetArr[3].zw) * insideBox(visibleExtentOffsetArr[3].xy + vTextureCoord * visibleExtentOffsetArr[3].zw, BOTTOMLEFT, TOPRIGHT);
-    emptiness = t.a * smoothstep(0.35, 0.5, distance(t.rgb, transparentColorArr[3].rgb));
-    frustumColor = mix(frustumColor, vec4(frustumPickingColor, 1.0), 1.0 - step(0.0, -emptiness));
-    if (samplerCount == 4) return;
-
-    t = texture(samplerArr[4], tileOffsetArr[4].xy + vTextureCoord * tileOffsetArr[4].zw) * insideBox(visibleExtentOffsetArr[4].xy + vTextureCoord * visibleExtentOffsetArr[4].zw, BOTTOMLEFT, TOPRIGHT);
-    emptiness = t.a * smoothstep(0.35, 0.5, distance(t.rgb, transparentColorArr[4].rgb));
-    frustumColor = mix(frustumColor, vec4(frustumPickingColor, 1.0), 1.0 - step(0.0, -emptiness));
-} `
+                gl_FragColor = vec4(frustumPickingColor, 1.0);
+            } `
     });
 }