@openglobus/og 0.11.6 → 0.12.1

package/src/og/shaders/drawnode.js

@@ -6,8 +6,31 @@
 
 import { Program } from "../webgl/Program.js";
 
-const CORNERS = `const vec2 BOTTOMLEFT = vec2(-0.01);
-                const vec2 TOPRIGHT = vec2(1.01);`;
+// 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 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", {
@@ -18,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"
         },
@@ -53,55 +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;
-            }
 
-            ${CORNERS}
+            ${DEF_BLEND_WEBGL1}
 
             void main(void) {
                 gl_FragColor = texture2D( defaultTexture, vTextureCoord );
-                if( samplerCount == 0 ) return;
+                if( samplerCount == 0 ) return;
+
+                vec4 src;
 
-                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(t.rgb, 1.0), transparentColorArr[0].a * t.a * emptiness);
+                blend(gl_FragColor, samplerArr[0], tileOffsetArr[0], layerOpacityArr[0]);
                 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(t.rgb, 1.0), transparentColorArr[1].a * t.a * emptiness);
+                blend(gl_FragColor, samplerArr[1], tileOffsetArr[1], layerOpacityArr[1]);
                 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(t.rgb, 1.0), transparentColorArr[2].a * t.a * emptiness);
+                blend(gl_FragColor, samplerArr[2], tileOffsetArr[2], layerOpacityArr[2]);
                 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(t.rgb, 1.0), transparentColorArr[3].a * t.a * emptiness);
+                blend(gl_FragColor, samplerArr[3], tileOffsetArr[3], layerOpacityArr[3]);
                 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(t.rgb, 1.0), transparentColorArr[4].a * t.a * emptiness);
+                blend(gl_FragColor, samplerArr[4], tileOffsetArr[4], layerOpacityArr[4]);
             }`
     });
 }
@@ -120,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",
@@ -177,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];
@@ -190,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;
@@ -203,15 +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;
-            }
+            ${NIGHT}
 
-            ${CORNERS}
+            ${DEF_BLEND}
 
-            const vec3 nightStep = 10.0 * vec3(0.58, 0.48, 0.25);
 
             void main(void) {
 
@@ -227,63 +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;
-
-
-
-                spec = specularMaterial[1].rgb * pow( reflection, specularMaterial[1].w) * (1.0 + shininess);
-                lightWeighting = ambientMaterial[1] + diffuseMaterial[1] * diffuseLightWeighting + spec;
-
-                t = texture2D( samplerArr[0], tileOffsetArr[0].xy + vTextureCoord.xy * tileOffsetArr[0].zw ) * insideBox(visibleExtentOffsetArr[0].xy + vTextureCoord.xy * 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(t.rgb * lightWeighting + night + spec, 1.0), transparentColorArr[0].a * t.a * emptiness);
-                if( samplerCount == 1 ) return;
-
-
-
-                spec = specularMaterial[2].rgb * pow( reflection, specularMaterial[2].w);
-                lightWeighting = ambientMaterial[2] + diffuseMaterial[2] * diffuseLightWeighting + spec;
-
-                t = texture2D( samplerArr[1], tileOffsetArr[1].xy + vTextureCoord.xy * tileOffsetArr[1].zw ) * insideBox(visibleExtentOffsetArr[1].xy + vTextureCoord.xy * 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(t.rgb * lightWeighting + night + spec, 1.0), transparentColorArr[1].a * t.a * emptiness);
-                if( samplerCount == 2 ) return;
-
-
-
-                spec = specularMaterial[3].rgb * pow( reflection, specularMaterial[3].w);
-                lightWeighting = ambientMaterial[3] + diffuseMaterial[3] * diffuseLightWeighting + spec;
-
-                t = texture2D( samplerArr[2], tileOffsetArr[2].xy + vTextureCoord.xy * tileOffsetArr[2].zw ) * insideBox(visibleExtentOffsetArr[2].xy + vTextureCoord.xy * 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(t.rgb * lightWeighting + night + spec, 1.0), transparentColorArr[2].a * t.a * emptiness);
-                if( samplerCount == 3 ) return;
-
-
-
-                spec = specularMaterial[4].rgb * pow( reflection, specularMaterial[4].w);
-                lightWeighting = ambientMaterial[4] + diffuseMaterial[4] * diffuseLightWeighting + spec;
-
-                t = texture2D( samplerArr[3], tileOffsetArr[3].xy + vTextureCoord.xy * tileOffsetArr[3].zw ) * insideBox(visibleExtentOffsetArr[3].xy + vTextureCoord.xy * 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(t.rgb * lightWeighting + night + spec, 1.0), transparentColorArr[3].a * t.a * emptiness);
-                if( samplerCount == 4 ) return;
-
-
-
-                spec = specularMaterial[5].rgb * pow( reflection, specularMaterial[5].w);
-                lightWeighting = ambientMaterial[5] + diffuseMaterial[5] * diffuseLightWeighting + spec;
-
-                t = texture2D( samplerArr[4], tileOffsetArr[4].xy + vTextureCoord.xy * tileOffsetArr[4].zw ) * insideBox(visibleExtentOffsetArr[4].xy + vTextureCoord.xy * 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(t.rgb * lightWeighting + night + spec, 1.0), transparentColorArr[4].a * t.a * emptiness);
+                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;
             }`
     });
 }
@@ -302,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",
@@ -363,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];
@@ -376,12 +351,11 @@ 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;
@@ -389,19 +363,18 @@ export function drawnode_screen_wl_webgl2() {
             in vec4 v_vertex;
             in float v_height;
 
-            layout(location = 0) out vec4 fragColor;
+            float shininess;
+            float reflection;
+            float diffuseLightWeighting;
+            vec3 night;
 
-            /* 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;
-            }
+            layout(location = 0) out vec4 fragColor;
 
-            ${CORNERS}
+            ${NIGHT}
 
-            const vec3 nightStep = 10.0 * vec3(0.58, 0.48, 0.25);
+            ${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));
@@ -409,69 +382,50 @@ export function drawnode_screen_wl_webgl2() {
                 vec3 eyeDirection = normalize(-v_vertex.xyz);
                 vec3 reflectionDirection = reflect(-lightDirection, normal);
                 vec4 nightImageColor = texture( nightTexture, vGlobalTextureCoord.st );
-                float shininess = texture( specularTexture, vGlobalTextureCoord.st ).r * 255.0 * overGround;
-                float reflection = max( dot(reflectionDirection, eyeDirection), 0.0);
-                float diffuseLightWeighting = max(dot(normal, lightDirection), 0.0);
-                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 = texture( defaultTexture, vTextureCoord.xy );
-                fragColor = vec4(t.rgb * lightWeighting + night + spec, t.a);
-                if( samplerCount == 0 ) return;
-
-
-
-                spec = specularMaterial[1].rgb * pow( reflection, specularMaterial[1].w) * (1.0 + shininess);
-                lightWeighting = ambientMaterial[1] + diffuseMaterial[1] * diffuseLightWeighting + spec;
-
-                t = texture( samplerArr[0], tileOffsetArr[0].xy + vTextureCoord.xy * tileOffsetArr[0].zw ) * insideBox(visibleExtentOffsetArr[0].xy + vTextureCoord.xy * visibleExtentOffsetArr[0].zw, BOTTOMLEFT, TOPRIGHT);
-                float emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[0].rgb ));
-                fragColor = mix( fragColor, vec4(t.rgb * lightWeighting + night + spec, 1.0), transparentColorArr[0].a * t.a * emptiness);
-                if( samplerCount == 1 ) return;
-
-
-
-                spec = specularMaterial[2].rgb * pow( reflection, specularMaterial[2].w);
-                lightWeighting = ambientMaterial[2] + diffuseMaterial[2] * diffuseLightWeighting + spec;
-
-                t = texture( samplerArr[1], tileOffsetArr[1].xy + vTextureCoord.xy * tileOffsetArr[1].zw ) * insideBox(visibleExtentOffsetArr[1].xy + vTextureCoord.xy * visibleExtentOffsetArr[1].zw, BOTTOMLEFT, TOPRIGHT);
-                emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[1].rgb ));
-                fragColor = mix( fragColor, vec4(t.rgb * lightWeighting + night + spec, 1.0), transparentColorArr[1].a * t.a * emptiness);
-                if( samplerCount == 2 ) return;
-
-
-
-                spec = specularMaterial[3].rgb * pow( reflection, specularMaterial[3].w);
-                lightWeighting = ambientMaterial[3] + diffuseMaterial[3] * diffuseLightWeighting + spec;
-
-                t = texture( samplerArr[2], tileOffsetArr[2].xy + vTextureCoord.xy * tileOffsetArr[2].zw ) * insideBox(visibleExtentOffsetArr[2].xy + vTextureCoord.xy * visibleExtentOffsetArr[2].zw, BOTTOMLEFT, TOPRIGHT);
-                emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[2].rgb ));
-                fragColor = mix( fragColor, vec4(t.rgb * lightWeighting + night + spec, 1.0), transparentColorArr[2].a * t.a * emptiness);
-                if( samplerCount == 3 ) return;
 
+                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);
 
-
-                spec = specularMaterial[4].rgb * pow( reflection, specularMaterial[4].w);
-                lightWeighting = ambientMaterial[4] + diffuseMaterial[4] * diffuseLightWeighting + spec;
-
-                t = texture( samplerArr[3], tileOffsetArr[3].xy + vTextureCoord.xy * tileOffsetArr[3].zw ) * insideBox(visibleExtentOffsetArr[3].xy + vTextureCoord.xy * visibleExtentOffsetArr[3].zw, BOTTOMLEFT, TOPRIGHT);
-                emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[3].rgb ));
-                fragColor = mix( fragColor, vec4(t.rgb * lightWeighting + night + spec, 1.0), transparentColorArr[3].a * t.a * emptiness);
-                if( samplerCount == 4 ) return;
-
-
-
-                spec = specularMaterial[5].rgb * pow( reflection, specularMaterial[5].w);
-                lightWeighting = ambientMaterial[5] + diffuseMaterial[5] * diffuseLightWeighting + spec;
-
-                t = texture( samplerArr[4], tileOffsetArr[4].xy + vTextureCoord.xy * tileOffsetArr[4].zw ) * insideBox(visibleExtentOffsetArr[4].xy + vTextureCoord.xy * visibleExtentOffsetArr[4].zw, BOTTOMLEFT, TOPRIGHT);
-                emptiness = t.a * smoothstep(0.35, 0.5, distance( t.rgb, transparentColorArr[4].rgb ));
-                fragColor = mix( fragColor, vec4(t.rgb * lightWeighting + night + spec, 1.0), transparentColorArr[4].a * t.a * emptiness);
+                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;
+                }
+
+                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;
             }`
     });
 }
@@ -485,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"
         },
@@ -524,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);
             }`
     });
 }
@@ -596,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;
@@ -622,7 +534,6 @@ export function drawnode_heightPicking() {
             uniform vec3 eyePositionHigh;
             uniform vec3 eyePositionLow;
 
-            varying vec2 vTextureCoord;
             varying float range;
 
             void main(void) {
@@ -637,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);
@@ -669,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);
             }`
     });
 }
@@ -707,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",
@@ -720,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;
@@ -735,8 +597,6 @@ export function drawnode_depth() {
             uniform vec3 eyePositionHigh;
             uniform vec3 eyePositionLow;
 
-            out vec2 vTextureCoord;
-
             void main(void) {
 
                 vec3 cameraPosition = eyePositionHigh + eyePositionLow;
@@ -748,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);
+            } `
     });
 }