@openglobus/og 0.11.4 → 0.11.8

package/src/og/shaders/drawnode.js

@@ -5,9 +5,40 @@
 "use strict";
 
 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 BLEND = `
+            void blend(
+                out vec4 dest,
+                in sampler2D sampler,
+                in vec4 tileOffset,
+                in float opacity)
+            {
+                vec4 src = texture( sampler, tileOffset.xy + vTextureCoord.xy * tileOffset.zw );
+                //dest = dest * (1.0 - src.a * opacity) + src * opacity;
+                dest = vec4(mix(dest.rgb, src.rgb, src.a * opacity), 1.0);
+            }`;
+
+const BLEND1 =
+            `void blend(
+                out vec4 dest,
+                in sampler2D sampler,
+                in vec4 tileOffset,
+                in float opacity)
+            {
+                vec4 src = texture2D(sampler, tileOffset.xy + vTextureCoord.xy * tileOffset.zw);
+                dest = vec4(mix(dest.rgb, src.rgb, src.a * opacity), 1.0);
+            }`
+
+const SLICE_SIZE = 4;
 
 export function drawnode_screen_nl() {
     return new Program("drawnode_screen_nl", {
@@ -17,10 +48,9 @@ export function drawnode_screen_nl() {
             eyePositionHigh: "vec3",
             eyePositionLow: "vec3",
             samplerCount: "int",
-            tileOffsetArr: "vec4",
-            visibleExtentOffsetArr: "vec4",
+            tileOffsetArr: "vec4",
+            layerOpacityArr: "float",
             samplerArr: "sampler2darray",
-            transparentColorArr: "vec4",
             defaultTexture: "sampler2d",
             height: "float"
         },
@@ -53,55 +83,36 @@ 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];
+        fragmentShader: `precision highp float;
+            #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}
+            varying vec2 vTextureCoord;
+
+            ${BLEND1}
 
             void main(void) {
                 gl_FragColor = texture2D( defaultTexture, vTextureCoord );
-                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(t.rgb, 1.0), transparentColorArr[0].a * t.a * 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(t.rgb, 1.0), transparentColorArr[1].a * t.a * 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(t.rgb, 1.0), transparentColorArr[2].a * t.a * 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(t.rgb, 1.0), transparentColorArr[3].a * t.a * 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(t.rgb, 1.0), transparentColorArr[4].a * t.a * emptiness);
+                if( samplerCount == 0 ) return;
+
+                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]);
             }`
     });
 }
@@ -119,19 +130,18 @@ export function drawnode_screen_wl() {
             uNormalMapBias: "vec3",
 
             samplerCount: "int",
-            tileOffsetArr: "vec4",
-            visibleExtentOffsetArr: "vec4",
+            tileOffsetArr: "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 +187,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,28 +199,22 @@ 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;
             varying vec2 vGlobalTextureCoord;
             varying vec4 v_vertex;
             varying float v_height;
+
+            ${NIGHT}
+
+            ${BLEND}
 
-            /* 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}
-
-            const vec3 nightStep = 10.0 * vec3(0.58, 0.48, 0.25);
 
             void main(void) {
 
@@ -227,63 +230,41 @@ 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;
+                }
+
+                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,19 +282,18 @@ export function drawnode_screen_wl_webgl2() {
             uNormalMapBias: "vec3",
 
             samplerCount: "int",
-            tileOffsetArr: "vec4",
-            visibleExtentOffsetArr: "vec4",
+            tileOffsetArr: "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",
@@ -321,7 +301,7 @@ export function drawnode_screen_wl_webgl2() {
             aTextureCoord: "vec2"
         },
 
-        vertexShader: `#version 300 es
+        vertexShader: `#version 300 es
 
             in vec3 aVertexPositionHigh;
             in vec3 aVertexPositionLow;
@@ -363,12 +343,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,30 +355,28 @@ 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;
 
-            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;
-            }
+            float shininess;
+            float reflection;
+            float diffuseLightWeighting;
+            vec3 night;
 
-            ${CORNERS}
+            layout(location = 0) out vec4 fragColor;
 
-            const vec3 nightStep = 10.0 * vec3(0.58, 0.48, 0.25);
+            ${NIGHT}
+
+            ${BLEND}
 
             void main(void) {
 
@@ -408,70 +385,49 @@ export function drawnode_screen_wl_webgl2() {
                 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 );
-                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;
-
-
+                vec4 nightImageColor = texture( nightTexture, vGlobalTextureCoord.st );
 
-                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);
+                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;
+                }
+
+                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 +441,8 @@ export function drawnode_colorPicking() {
             eyePositionLow: "vec3",
             samplerCount: "int",
             tileOffsetArr: "vec4",
-            visibleExtentOffsetArr: "vec4",
             samplerArr: "sampler2darray",
             pickingMaskArr: "sampler2darray",
-            transparentColorArr: "vec4",
             pickingColorArr: "vec4",
             height: "float"
         },
@@ -523,70 +477,46 @@ export function drawnode_colorPicking() {
                 gl_Position = projectionMatrix * viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
             }`,
 
-        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];
+        fragmentShader: `precision highp float;
+            #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;
+            varying vec2 vTextureCoord;
+
+            void blendPicking(
+                out vec4 dest,
+                in vec4 tileOffset,
+                in sampler2D sampler,
+                in sampler2D pickingMask,
+                in vec4 pickingColor,
+                in float opacity)
+            {
+                vec2 tc = tileOffset.xy + vTextureCoord.xy * tileOffset.zw;
+                vec4 t = texture2D( sampler, tc );
+                vec4 p = texture2D( pickingMask, tc );
+                dest = mix( dest, vec4(max(pickingColor.rgb, p.rgb), opacity), (t.a == 0.0 ? 0.0 : 1.0) * pickingColor.a);
             }
 
-            ${CORNERS}
-
             void main(void) {
                 gl_FragColor = vec4(0.0);
                 if( samplerCount == 0 ) return;
 
-                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);
             }`
     });
 }
@@ -598,9 +528,7 @@ export function drawnode_heightPicking() {
             viewMatrix: "mat4",
             samplerCount: "int",
             tileOffsetArr: "vec4",
-            visibleExtentOffsetArr: "vec4",
             samplerArr: "sampler2darray",
-            transparentColorArr: "vec4",
             defaultTexture: "sampler2d",
             height: "float",
             eyePositionHigh: "vec3",
@@ -641,22 +569,15 @@ export function drawnode_heightPicking() {
                 gl_Position = projectionMatrix * viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
             }`,
 
-        fragmentShader: `precision highp float;
+        fragmentShader: `precision highp float;
+            #define SLICE_SIZE ${SLICE_SIZE + 1}
             uniform sampler2D defaultTexture;
-            uniform vec4 tileOffsetArr[5];
-            uniform vec4 visibleExtentOffsetArr[5];
-            uniform vec4 transparentColorArr[5];
-            uniform sampler2D samplerArr[5];
+            uniform vec4 tileOffsetArr[SLICE_SIZE];
+            uniform sampler2D samplerArr[SLICE_SIZE];
             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;
-            }
-
             vec3 encode24(highp float f) {
                 float F = abs(f);
                 float s = step( 0.0, -f );
@@ -669,35 +590,30 @@ 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;
+                vec4 t = texture2D( samplerArr[0], tileOffsetArr[0].xy + vTextureCoord * tileOffsetArr[0].zw );
+                gl_FragColor = mix( gl_FragColor, vec4(encode24(range), 1.0), 1.0);
+                //
+                // TODO: Seems to be it is not necessary
+                //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[1], tileOffsetArr[1].xy + vTextureCoord * tileOffsetArr[1].zw );
+                //gl_FragColor = mix( gl_FragColor, vec4(encode24(range), 1.0), 1.0);
+                //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[2], tileOffsetArr[2].xy + vTextureCoord * tileOffsetArr[2].zw );
+                //gl_FragColor = mix( gl_FragColor, vec4(encode24(range), 1.0), 1.0);
+                //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[3], tileOffsetArr[3].xy + vTextureCoord * tileOffsetArr[3].zw );
+                //gl_FragColor = mix( gl_FragColor, vec4(encode24(range), 1.0), 1.0);
+                //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));
+                //t = texture2D( samplerArr[4], tileOffsetArr[4].xy + vTextureCoord * tileOffsetArr[4].zw );
+                //gl_FragColor = mix( gl_FragColor, vec4(encode24(range), 1.0), 1.0);
             }`
     });
 }
@@ -709,9 +625,7 @@ export function drawnode_depth() {
             viewMatrix: "mat4",
             samplerCount: "int",
             tileOffsetArr: "vec4",
-            visibleExtentOffsetArr: "vec4",
             samplerArr: "sampler2darray",
-            transparentColorArr: "vec4",
             defaultTexture: "sampler2d",
             height: "float",
             eyePositionHigh: "vec3",
@@ -752,13 +666,12 @@ export function drawnode_depth() {
                 gl_Position = projectionMatrix * viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
             }`,
 
-        fragmentShader: `#version 300 es
+        fragmentShader: `#version 300 es
+            #define SLICE_SIZE ${SLICE_SIZE + 1}
             precision highp float;
             uniform sampler2D defaultTexture;
-            uniform vec4 tileOffsetArr[5];
-            uniform vec4 visibleExtentOffsetArr[5];
-            uniform vec4 transparentColorArr[5];
-            uniform sampler2D samplerArr[5];
+            uniform vec4 tileOffsetArr[SLICE_SIZE];
+            uniform sampler2D samplerArr[SLICE_SIZE];
             uniform int samplerCount;
             uniform vec3 frustumPickingColor;
 
@@ -766,42 +679,32 @@ export function drawnode_depth() {
 
             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));
-} `
+            vec4 t = texture(samplerArr[0], tileOffsetArr[0].xy + vTextureCoord * tileOffsetArr[0].zw);
+            frustumColor = mix(frustumColor, vec4(frustumPickingColor, 1.0), 1.0);
+
+            //
+            // TODO: Seems to be it is not necessary
+            //if (samplerCount == 1) return;
+
+            //t = texture(samplerArr[1], tileOffsetArr[1].xy + vTextureCoord * tileOffsetArr[1].zw);
+            //frustumColor = mix(frustumColor, vec4(frustumPickingColor, 1.0), 1.0);
+            //if (samplerCount == 2) return;
+
+            //t = texture(samplerArr[2], tileOffsetArr[2].xy + vTextureCoord * tileOffsetArr[2].zw);
+            //frustumColor = mix(frustumColor, vec4(frustumPickingColor, 1.0), 1.0);
+            //if (samplerCount == 3) return;
+
+            //t = texture(samplerArr[3], tileOffsetArr[3].xy + vTextureCoord * tileOffsetArr[3].zw);
+            //frustumColor = mix(frustumColor, vec4(frustumPickingColor, 1.0), 1.0);
+            //if (samplerCount == 4) return;
+
+            //t = texture(samplerArr[4], tileOffsetArr[4].xy + vTextureCoord * tileOffsetArr[4].zw);
+            //frustumColor = mix(frustumColor, vec4(frustumPickingColor, 1.0), 1.0);
+        } `
     });
 }