@openglobus/og 0.11.2 → 0.11.7

package/src/og/scene/RenderNode.js

@@ -1,7 +1,7 @@
-'use strict';
+"use strict";
 
-import { BaseNode } from './BaseNode.js';
-import { Events } from '../Events.js';
+import { BaseNode } from "./BaseNode.js";
+import { Events } from "../Events.js";
 
 /**
  * Render node is a logical part of a render mechanism. Represents scene rendering.
@@ -10,7 +10,7 @@ import { Events } from '../Events.js';
  * There are collections of ligh sources, entities and so on in the node.
  * Access to the node is renderer.renderNodes["Earth"]
  * @class
- * @extends {og.RenderNode}
+ * @extends {RenderNode}
  * @param {string} name - Node name.
  */
 class RenderNode extends BaseNode {
@@ -20,7 +20,7 @@ class RenderNode extends BaseNode {
         /**
          * Renderer that calls frame() callback.
          * @public
-         * @type {og.Renderer}
+         * @type {Renderer}
          */
         this.renderer = null;
 
@@ -43,7 +43,7 @@ class RenderNode extends BaseNode {
         /**
          * Point light array.
          * @private
-         * @type {Array.<og.LightSource>}
+         * @type {Array.<LightSource>}
          */
         this._lights = [];
         this._lightsTransformedPositions = [];
@@ -54,7 +54,7 @@ class RenderNode extends BaseNode {
         /**
          * Entity collection array.
          * @public
-         * @type {Array.<og.EntityCollection>}
+         * @type {Array.<EntityCollection>}
          */
         this.entityCollections = [];
 
@@ -66,7 +66,7 @@ class RenderNode extends BaseNode {
     /**
      * Adds node to the current hierarchy.
      * @public
-     * @type {og.RenderNode}
+     * @type {RenderNode}
      */
     addNode(node) {
         super.addNode(node);
@@ -76,7 +76,7 @@ class RenderNode extends BaseNode {
     /**
      * Assign render node with renderer.
      * @public
-     * @param {og.Renderer} renderer - Redner node's renderer.
+     * @param {Renderer} renderer - Redner node's renderer.
      */
     assign(renderer) {
         this.renderer = renderer;
@@ -98,8 +98,7 @@ class RenderNode extends BaseNode {
             n = this.name;
 
         if (r) {
-            if (r.renderNodes[n] &&
-                r.renderNodes[n].isEqual(this)) {
+            if (r.renderNodes[n] && r.renderNodes[n].isEqual(this)) {
                 r.renderNodes[n] = null;
                 delete r.renderNodes[n];
             }
@@ -119,9 +118,9 @@ class RenderNode extends BaseNode {
     /**
      * Adds entity collection.
      * @public
-     * @param {og.EntityCollection} entityCollection - Entity collection.
+     * @param {EntityCollection} entityCollection - Entity collection.
      * @param {boolean} [isHidden] - If it's true that this collection has specific rendering.
-     * @returns {og.scene.RenderNode} -
+     * @returns {RenderNode} -
      */
     addEntityCollection(entityCollection, isHidden) {
         entityCollection.addTo(this, isHidden);
@@ -131,7 +130,7 @@ class RenderNode extends BaseNode {
     /**
      * Removes entity collection.
      * @public
-     * @param {og.EntityCollection} entityCollection - Entity collection for remove.
+     * @param {EntityCollection} entityCollection - Entity collection for remove.
      */
     removeEntityCollection(entityCollection) {
         entityCollection.remove();
@@ -140,8 +139,8 @@ class RenderNode extends BaseNode {
     /**
      * Adds point light source.
      * @public
-     * @param {og.LightSource} light - Light source.
-     * @returns {og.scene.RenderNode}
+     * @param {LightSource} light - Light source.
+     * @returns {RenderNode}
      */
     addLight(light) {
         light.addTo(this);
@@ -152,7 +151,7 @@ class RenderNode extends BaseNode {
      * Gets light object by its name.
      * @public
      * @param {string} name - Point light name.
-     * @returns {og.LightSource}
+     * @returns {LightSource}
      */
     getLightByName(name) {
         var li = this._lightsNames.indexOf(name);
@@ -162,7 +161,7 @@ class RenderNode extends BaseNode {
     /**
      * Removes light source.
      * @public
-     * @param {og.LightSource} light - Light source object.
+     * @param {LightSource} light - Light source object.
      */
     removeLight(light) {
         light.remove();
@@ -195,7 +194,10 @@ class RenderNode extends BaseNode {
 
         if (this.renderer) {
             if (this._isActive && this._pickingId === -1) {
-                this._pickingId = this.renderer.addPickingCallback(this, this._entityCollectionPickingCallback);
+                this._pickingId = this.renderer.addPickingCallback(
+                    this,
+                    this._entityCollectionPickingCallback
+                );
             } else if (!this._isActive && this._pickingId !== -1) {
                 this.renderer.removePickingCallback(this._pickingId);
                 this._pickingId = -1;
@@ -277,7 +279,6 @@ class RenderNode extends BaseNode {
      */
     drawPickingEntityCollections(ec) {
         if (ec.length) {
-
             var gl = this.renderer.handler.gl;
 
             gl.disable(gl.CULL_FACE);
@@ -292,6 +293,12 @@ class RenderNode extends BaseNode {
                 ec[i]._fadingOpacity && ec[i].billboardHandler.drawPicking();
             }
 
+            // geoObject pass
+            i = ec.length;
+            while (i--) {
+                ec[i]._fadingOpacity && ec[i].geoObjectHandler.drawPicking();
+            }
+
             // label pass
             i = ec.length;
             while (i--) {
@@ -344,4 +351,4 @@ class RenderNode extends BaseNode {
     }
 }
 
-export { RenderNode };
+export { RenderNode };

package/src/og/segment/Segment.js

@@ -11,6 +11,7 @@ import { Sphere } from "../bv/Sphere.js";
 import { Box } from "../bv/Box.js";
 import { Vec3 } from "../math/Vec3.js";
 import * as segmentHelper from "../segment/segmentHelper.js";
+import { getMatrixSubArray } from "../utils/shared.js";
 
 export const MAX_NORMAL_ZOOM = 7;
 
@@ -58,15 +59,15 @@ window.BBSC = 100;
 /**
  * Planet segment Web Mercator tile class that stored and rendered with quad tree.
  * @class
- * @param {og.quadTree.Node} node - Segment node.
- * @param {og.scene.Planet} planet - Current planet scene.
+ * @param {quadTree.Node} node - Segment node.
+ * @param {Planet} planet - Current planet scene.
  * @param {Number} tileZoom - Zoom index.
- * @param {og.Extent} extent - Segment extent.
+ * @param {Extent} extent - Segment extent.
  */
 class Segment {
     /**
      * @param {quadTree.Node} node - Segment node.
-     * @param {scene.Planet} planet - Current planet scene.
+     * @param {Planet} planet - Current planet scene.
      * @param {number} tileZoom - Zoom index.
      * @param {Extent} extent - Segment extent.
      */
@@ -79,25 +80,25 @@ class Segment {
 
         /**
          * Quad tree node of the segment.
-         * @type {og.quadTree.Node}
+         * @type {quadTree.Node}
          */
         this.node = node;
 
         /**
          * Planet pointer.
-         * @type {og.scene.Planet}
+         * @type {Planet}
          */
         this.planet = planet;
 
         /**
          * WebGl handler pointer.
-         * @type {og.webgl.Handler}
+         * @type {Handler}
          */
         this.handler = planet.renderer.handler;
 
         /**
          * Segment bounding sphere
-         * @type {og.bv.Sphere}
+         * @type {Sphere}
          */
         this.bsphere = new Sphere();
 
@@ -105,7 +106,7 @@ class Segment {
 
         /**
          * Segment bounding box.
-         * @type {og.bv.Box}
+         * @type {Box}
          */
         this.bbox = new Box();
 
@@ -116,7 +117,7 @@ class Segment {
 
         /**
          * Geographical extent.
-         * @type {og.Extent}
+         * @type {Extent}
          */
         this._extent = extent;
 
@@ -162,7 +163,7 @@ class Segment {
 
         /**
          * Texture materials array.
-         * @type {Array.<og.planetSegment.Material>}
+         * @type {Array.<planetSegment.Material>}
          */
         this.materials = [];
 
@@ -252,7 +253,7 @@ class Segment {
     /**
      * Returns that segment good for rendering with camera by current lod ratio.
      * @public
-     * @param {og.Camera} camera - Camera object.
+     * @param {Camera} camera - Camera object.
      * @returns {boolean} -
      */
     acceptForRendering(camera) {
@@ -265,10 +266,10 @@ class Segment {
     /**
      * Returns entity terrain point.
      * @public
-     * @param {og.Entity} entity - Entity.
-     * @param {og.Vec3} res - Point coordinates.
-     * @param {og.Vec3} [normal] - Terrain point normal.
-     * @returns {og.Vec3} -
+     * @param {Entity} entity - Entity.
+     * @param {Vec3} res - Point coordinates.
+     * @param {Vec3} [normal] - Terrain point normal.
+     * @returns {Vec3} -
      */
     getEntityTerrainPoint(entity, res, normal) {
         return this.getTerrainPoint(entity._cartesian, entity._lonlatMerc, res, normal);
@@ -281,10 +282,10 @@ class Segment {
     /**
      * Returns distance from object to terrain coordinates and terrain point that calculates out in the res parameter.
      * @public
-     * @param {og.Vec3} xyz - Cartesian object position.
+     * @param {Vec3} xyz - Cartesian object position.
      * @param {LonLat} insideSegmentPosition - Geodetic object position.
-     * @param {og.Vec3} [res] - Result cartesian coordiantes on the terrain.
-     * @param {og.Vec3} [normal] - Terrain point normal.
+     * @param {Vec3} [res] - Result cartesian coordiantes on the terrain.
+     * @param {Vec3} [normal] - Terrain point normal.
      * @returns {number} -
      */
     getTerrainPoint(xyz, insideSegmentPosition, res, normal) {
@@ -375,6 +376,10 @@ class Segment {
         return lonlat.forwardMercator();
     }
 
+    /**
+     *
+     * @param {boolean} forceLoading
+     */
     loadTerrain(forceLoading) {
         if (this.tileZoom < this.planet.terrain.minZoom) {
             this.terrainIsLoading = true;
@@ -1434,8 +1439,8 @@ class Segment {
     /**
      * Gets specific layer material.
      * @public
-     * @param {og.Layer} layer - Layer object.
-     * @returns {og.planetSegment.Material} - Segment material.
+     * @param {Layer} layer - Layer object.
+     * @returns {planetSegment.Material} - Segment material.
      */
     getMaterialByLayer(layer) {
         return this.materials[layer._id];

package/src/og/segment/SegmentLonLat.js

@@ -19,16 +19,16 @@ let _tempHigh = new Vec3(),
 /**
  * Planet segment Web Mercator tile class that stored and rendered with quad tree.
  * @class
- * @extends {og.planetSegment.Segment}
- * @param {og.quadNode.Node} node - Quad tree segment node.
- * @param {og.scene.Planet} planet - Scene planet.
+ * @extends {Segment}
+ * @param {quadNode.Node} node - Quad tree segment node.
+ * @param {Planet} planet - Scene planet.
  * @param {Number} tileZoom - Segment tile zoom index.
- * @param {og.Extent} extent - Segment WGS84 extent.
+ * @param {Extent} extent - Segment WGS84 extent.
  */
 class SegmentLonLat extends Segment {
     /**
      * @param {quadTree.Node} node - Segment node.
-     * @param {scene.Planet} planet - Current planet scene.
+     * @param {Planet} planet - Current planet scene.
      * @param {number} tileZoom - Zoom index.
      * @param {Extent} extent - Segment extent.
      */

package/src/og/shaders/drawnode.js

@@ -5,9 +5,17 @@
 "use strict";
 
 import { Program } from "../webgl/Program.js";
+
+// 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 vec2 TOPRIGHT = vec2(1.01);`;
+
+const NIGHT = `const vec3 nightStep = 10.0 * vec3(0.58, 0.48, 0.25);`;
 
 export function drawnode_screen_nl() {
     return new Program("drawnode_screen_nl", {
@@ -66,42 +74,48 @@ export function drawnode_screen_nl() {
             uniform sampler2D defaultTexture;
             uniform sampler2D samplerArr[5];
             uniform int samplerCount;
-            varying vec2 vTextureCoord;
+            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}
+
+            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;
             }
 
-            ${CORNERS}
-
             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], 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]);
             }`
     });
 }
@@ -209,9 +223,24 @@ export function drawnode_screen_wl() {
                 return s.x * s.y;
             }
 
-            ${CORNERS}
-
-            const vec3 nightStep = 10.0 * vec3(0.58, 0.48, 0.25);
+            ${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;
+            }
 
             void main(void) {
 
@@ -236,54 +265,24 @@ export function drawnode_screen_wl() {
                 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);
+                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]);
             }`
     });
 }
@@ -321,7 +320,7 @@ export function drawnode_screen_wl_webgl2() {
             aTextureCoord: "vec2"
         },
 
-        vertexShader: `#version 300 es
+        vertexShader: `#version 300 es
 
             in vec3 aVertexPositionHigh;
             in vec3 aVertexPositionLow;
@@ -387,7 +386,12 @@ export function drawnode_screen_wl_webgl2() {
             in vec4 vTextureCoord;
             in vec2 vGlobalTextureCoord;
             in vec4 v_vertex;
-            in float v_height;
+            in float v_height;
+
+            float shininess;
+            float reflection;
+            float diffuseLightWeighting;
+            vec3 night;
 
             layout(location = 0) out vec4 fragColor;
 
@@ -399,7 +403,28 @@ export function drawnode_screen_wl_webgl2() {
 
             ${CORNERS}
 
-            const vec3 nightStep = 10.0 * vec3(0.58, 0.48, 0.25);
+            ${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;
+            }
 
             void main(void) {
 
@@ -408,70 +433,38 @@ 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);
-
-
+                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 = 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;
-
-
-
-                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);
+                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]);
             }`
     });
 }