926 added transparentBackground, and clearColor options

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,7 +218,7 @@ class Globe {
                 autoActivate: false,
                 pixelRatio: options.dpi || (window.devicePixelRatio + 0.15),
                 context: {
-                    alpha: true, // turn on for transparent background
+                    alpha: options.transparentBackground,
                     antialias: 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/SimpleSkyBackground.ts

@@ -55,12 +55,12 @@ export class SimpleSkyBackground extends Control {
 
     public override onactivate() {
         super.onactivate();
-        //this.planet!.events.on("draw", this._drawBackground, this);
+        this.planet!.events.on("draw", this._drawBackground, this);
     }
 
     public override ondeactivate() {
         super.ondeactivate();
-        //this.planet!.events.off("draw", this._drawBackground);
+        this.planet!.events.off("draw", this._drawBackground);
     }
 
     protected _drawBackground() {

src/control/atmosphere/atmosphere.frag.glsl

@@ -16,9 +16,9 @@ float valueHSV(vec3 rgb) {
     return max(max(rgb.r, rgb.g), rgb.b);
 }
 
-float luma601(vec3 srgb) {
+//float luma601(vec3 srgb) {
-    return dot(srgb, vec3(0.299, 0.587, 0.114));
+//    return dot(srgb, vec3(0.299, 0.587, 0.114));
-}
+//}
 
 vec3 transmittanceFromTexture(float height, float angle)
 {

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, 0.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();

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) {
+            if (!this._transparentBackground) {
-                this.renderer.controls.SimpleSkyBackground.deactivate();
+                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) {
+            if (!this._transparentBackground) {
-                this.addControl(new SimpleSkyBackground());
+                if (!this.renderer.controls.SimpleSkyBackground) {
-            } else {
+                    this.addControl(new SimpleSkyBackground());
-                this.renderer.controls.SimpleSkyBackground.activate();
+                } else {
+                    this.renderer.controls.SimpleSkyBackground.activate();
+                }
             }
 
             if (h.isWebGl2()) {