Merge pull request #927 from openglobus/926-transparent-background

926 transparent background

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",

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;