Merge branch 'master' of github.com:openglobus/openglobus

css/og.css

@@ -56,7 +56,6 @@
     height: 100%;
     float: left;
     position: relative;
-    background-color: black;
     -webkit-user-select: none;
     -moz-user-select: none;
     -khtml-user-select: none;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@openglobus/og",
-  "version": "0.27.10",
+  "version": "0.27.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@openglobus/og",
-      "version": "0.27.10",
+      "version": "0.27.12",
       "license": "MIT",
       "devDependencies": {
         "@babel/plugin-proposal-class-properties": "^7.18.6",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.27.12",
+  "version": "0.27.13",
   "description": "[openglobus](https://www.openglobus.org/) is a javascript/typescript library designed to display interactive 3d maps and planets with map tiles, imagery and vector data, markers, and 3D objects. It uses the WebGL technology, open source, and completely free.",
   "main": "lib/og.es.js",
   "types": "lib/index.d.ts",

sandbox/drawingControl/drawingControl.html

@@ -45,6 +45,7 @@
 
     globus.planet.addControl(new control.DebugInfo());
     globus.planet.addControl(new control.ToggleWireframe());
+    globus.planet.addControl(new control.DrawingSwitcher());
 </script>
 </body>
 

src/Globe.ts

@@ -62,6 +62,7 @@ export interface IGlobeParams {
     gamma?: number;
     exposure?: number;
     maxNodesCount?: number;
+    transparentBackground?: boolean;
 }
 
 const DEFAULT_NIGHT_SRC = `/night.png`;
@@ -217,9 +218,9 @@ class Globe {
                 autoActivate: false,
                 pixelRatio: options.dpi || (window.devicePixelRatio + 0.15),
                 context: {
-                    //alpha: false,
+                    alpha: options.transparentBackground,
                     antialias: false,
-                    premultipliedAlpha: false,
+                    premultipliedAlpha: true,
                     preserveDrawingBuffer: false
                 }
             }), {
@@ -228,6 +229,7 @@ class Globe {
                 fontsSrc: options.fontsSrc,
                 gamma: options.gamma,
                 exposure: options.exposure,
+                ...(options.transparentBackground && {clearColor: [0, 0, 0, 0]})
             }
         );
 
@@ -260,6 +262,7 @@ class Globe {
             minDistanceBeforeMemClear: options.minDistanceBeforeMemClear,
             vectorTileSize: options.vectorTileSize,
             maxNodesCount: options.maxNodesCount,
+            transparentBackground: options.transparentBackground,
         });
 
         // Attach terrain provider (can be one object or array)

src/control/atmosphere/Atmosphere.ts

@@ -253,6 +253,9 @@ export class Atmosphere extends Control {
 
         gl.disable(gl.DEPTH_TEST);
 
+        r.enableBlendOneSrcAlpha();
+        //r.enableBlendDefault();
+
         sh.activate();
         gl.bindBuffer(gl.ARRAY_BUFFER, r.screenFramePositionBuffer!);
         gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
@@ -277,6 +280,8 @@ export class Atmosphere extends Control {
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
         gl.enable(gl.DEPTH_TEST);
+
+        r.enableBlendDefault();
     }
 }
 

src/control/atmosphere/atmosphere.frag.glsl

@@ -12,6 +12,14 @@ uniform float opacity;
 uniform sampler2D transmittanceTexture;
 uniform sampler2D scatteringTexture;
 
+float valueHSV(vec3 rgb) {
+    return max(max(rgb.r, rgb.g), rgb.b);
+}
+
+//float luma601(vec3 srgb) {
+//    return dot(srgb, vec3(0.299, 0.587, 0.114));
+//}
+
 vec3 transmittanceFromTexture(float height, float angle)
 {
     float u = (angle + 1.0) * 0.5;
@@ -180,7 +188,7 @@ void mainImage(out vec4 fragColor)
         light += sunLum * SUN_INTENSITY * transmittanceFromCameraToSpace;
     }
 
-    fragColor = vec4(pow(light * 8.0, vec3(1.0 / 2.2)), clamp(opacity, 0.0, 1.0));
+    fragColor = vec4(pow(opacity * light * 8.0, vec3(1.0 / 2.2)), valueHSV(light) * clamp(opacity, 0.0, 1.0));
 }
 
 void main(void)

src/renderer/Renderer.ts

@@ -30,6 +30,7 @@ interface IRendererParams {
     gamma?: number;
     exposure?: number;
     dpi?: number;
+    clearColor?: [number, number, number, number]
 }
 
 interface IPickingObject {
@@ -250,6 +251,8 @@ class Renderer {
 
     protected _readPickingBuffer: () => void;
 
+    public clearColor: Float32Array;
+
     constructor(handler: Handler | string | HTMLCanvasElement, params: IRendererParams = {}) {
 
         this.div = null;
@@ -263,6 +266,8 @@ class Renderer {
             });
         }
 
+        this.clearColor = new Float32Array(params.clearColor || [0, 0, 0, 1]);
+
         this.exposure = params.exposure || 3.01;
 
         this.gamma = params.gamma || 0.47;
@@ -1001,7 +1006,7 @@ class Renderer {
         let h = this.handler,
             gl = h.gl!;
 
-        gl.clearColor(0.0, 0.0, 0.0, 1.0);
+        gl.clearColor(this.clearColor[0], this.clearColor[1], this.clearColor[2], this.clearColor[3]);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
         this.enableBlendDefault();
@@ -1110,6 +1115,9 @@ class Renderer {
 
         this.toneMappingFramebuffer!.activate();
 
+        gl.clearColor(0.0, 0.0, 0.0, 0.0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+
         sh.activate();
 
         // screen texture
@@ -1246,8 +1254,8 @@ class Renderer {
             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
             this.screenDepthFramebuffer!.deactivate();
-            gl.enable(gl.BLEND);
         }
+        gl.enable(gl.BLEND);
     }
 
     protected _readDepthBuffer(callback?: () => void) {

src/scene/Planet.ts

@@ -41,8 +41,6 @@ import type {WebGLBufferExt, WebGLTextureExt, IDefaultTextureParams} from "../we
 import {Program} from "../webgl/Program";
 import {Segment} from "../segment/Segment";
 import type {AtmosphereParameters} from "../shaders/atmos/atmos";
-import { DEFAULT_EASING, DEFAULT_FLIGHT_DURATION } from "../camera/Camera";
-import {Easing, EasingFunction} from "../utils/easing";
 
 export interface IPlanetParams {
     name?: string;
@@ -68,6 +66,7 @@ export interface IPlanetParams {
     minDistanceBeforeMemClear?: number;
     vectorTileSize?: number;
     maxNodesCount?: number;
+    transparentBackground?: boolean;
 }
 
 export type PlanetEventsList = [
@@ -342,6 +341,8 @@ export class Planet extends RenderNode {
     private _minDistanceBeforeMemClear: number = 0;
     private _maxNodes: number;
 
+    protected _transparentBackground: boolean;
+
     constructor(options: IPlanetParams = {}) {
         super(options.name);
 
@@ -477,6 +478,8 @@ export class Planet extends RenderNode {
 
         this._nightTextureSrc = options.nightTextureSrc || null;
         this._specularTextureSrc = options.specularTextureSrc || null;
+
+        this._transparentBackground = options.transparentBackground || false;
     }
 
     /**
@@ -760,8 +763,10 @@ export class Planet extends RenderNode {
                 h.addProgram(shaders.drawnode_screen_wl_webgl1NoAtmos());
             }
 
-            if (this.renderer.controls.SimpleSkyBackground) {
-                this.renderer.controls.SimpleSkyBackground.deactivate();
+            if (!this._transparentBackground) {
+                if (this.renderer.controls.SimpleSkyBackground) {
+                    this.renderer.controls.SimpleSkyBackground.deactivate();
+                }
             }
 
         } else {
@@ -771,10 +776,12 @@ export class Planet extends RenderNode {
 
             this._atmosphere.deactivate();
 
-            if (!this.renderer.controls.SimpleSkyBackground) {
-                this.addControl(new SimpleSkyBackground());
-            } else {
-                this.renderer.controls.SimpleSkyBackground.activate();
+            if (!this._transparentBackground) {
+                if (!this.renderer.controls.SimpleSkyBackground) {
+                    this.addControl(new SimpleSkyBackground());
+                } else {
+                    this.renderer.controls.SimpleSkyBackground.activate();
+                }
             }
 
             if (h.isWebGl2()) {
@@ -1571,7 +1578,7 @@ export class Planet extends RenderNode {
         }
 
         // Here is set blending for transparent overlays
-        renderer.enableBlendDefault();
+        //renderer.enableBlendDefault();
 
         gl.enable(gl.POLYGON_OFFSET_FILL);
         for (let j = 1, len = sl.length; j < len; j++) {

src/shaders/tone_mapping/tone_mapping.frag.glsl

@@ -48,7 +48,7 @@ in vec2 tc;
 layout (location = 0) out vec4 fragColor;
 
 void main(void) {
-    vec4 hdrColor = texture(hdrBuffer, tc).rgba;
+    vec4 hdrColor = texture(hdrBuffer, tc);
 
     float oneByGamma = gamma / gamma;
     float oneByWhitePoint = whitepoint / whitepoint;