@openglobus/og 0.20.2 → 0.20.3

package/lib/js/shaders/atmos.d.ts

@@ -1,4 +1,20 @@
 import { Program } from '../webgl/Program';
-export declare const COMMON = "\n    \n    \n    float getLerpValue(in float min, in float max, in float between)\n    {\n        return (clamp(between, min, max) - min) / (max - min);\n    }\n    \n    vec3 aces(vec3 color) \n    {\n        float a = 2.51;\n        float b = 0.03;\n        float c = 2.43;\n        float d = 0.59;\n        float e = 0.14;\n        return clamp((color * (a * color + b)) / (color * (c * color + d ) + e), 0.0, 1.0);\n    }\n     \n    bool intersectSphere(vec3 rayOrigin, vec3 rayDirection, float radius, inout float t1, inout float t2) \n    {\n        float b = dot(rayDirection, rayOrigin);\n        float c = dot(rayOrigin, rayOrigin) - radius * radius;\n        float d = b * b - c;\n        if (d < 0.0) {\n            return false;\n        }\n        t1 = -b - sqrt(d);\n        t2 = -b + sqrt(d);\n        return true;\n    }\n    \n    bool intersectSphere(vec3 rayOrigin, vec3 rayDirection, float radius, inout float t) \n    {\n        float b = dot(rayDirection, rayOrigin);\n        float c = dot(rayOrigin, rayOrigin) - radius * radius;\n        float d = b * b - c;\n        if (d < 0.0) {\n            return false;\n        }\n        t = -b - sqrt(d);\n        return true;\n    }\n    \n    bool intersectEllipsoid( in vec3 ro, in vec3 rd, in vec3 ra, inout float t )\n    {\n        vec3 ocn = ro/ra;\n        vec3 rdn = rd/ra;\n        float a = dot( rdn, rdn );\n        float b = dot( ocn, rdn );\n        float c = dot( ocn, ocn );\n        float h = b*b - a*(c-1.0);\n                       \n        if (h < 0.0) \n        { \n            return false; \n        }\n        \n        t = (-b-sqrt(h))/a;\n        \n        return true;\n    }\n    \n    bool intersectEllipsoid( in vec3 ro, in vec3 rd, in vec3 ra, inout float t1, inout float t2)\n    {\n        vec3 ocn = ro/ra;\n        vec3 rdn = rd/ra;\n        float a = dot( rdn, rdn );\n        float b = dot( ocn, rdn );\n        float c = dot( ocn, ocn );\n        float h = b*b - a*(c-1.0);\n                \n        if (h < 0.0) \n        { \n            return false; \n        }\n        \n        h = sqrt(h);\n        t1 = (-b-h)/a;\n        t2 = (-b+h)/a;\n        \n        return true;\n    }\n    \n    vec3 normalEllipsoid( in vec3 pos, in vec3 ra )\n    {\n        return normalize( pos/(ra*ra) );\n    }\n\n    \n    #define PI 3.1415926538\n    #define ATMOS_HEIGHT 100000.0\n    #define RAYLEIGH_SCALE 0.08\n    #define MIE_SCALE 0.012\n    \n    #define SAMPLE_COUNT 16\n    #define SQRT_SAMPLE_COUNT 4\n            \n    const float GROUND_ALBEDO = 0.05 / PI;\n\n    // Sphere\n    const float BOTTOM_RADIUS = 6356752.3142451793;\n    const float TOP_RADIUS = 6356752.3142451793 + ATMOS_HEIGHT;\n        \n    // Ellipsoid\n    const vec3 bottomRadii = vec3(6378137.0, 6378137.0, 6356752.3142451793);           \n    const vec3 topRadii = bottomRadii + ATMOS_HEIGHT;\n    \n    const vec3 SPHERE_TO_ELLIPSOID_SCALE = vec3(BOTTOM_RADIUS) / bottomRadii;           \n    \n    const vec2 rayleighMieHeights = vec2(RAYLEIGH_SCALE, MIE_SCALE) * ATMOS_HEIGHT;\n     \n    const vec3 rayleighScatteringCoefficient = vec3(5.802, 13.558, 33.100) * 1e-6;\n    \n    const float mieScatteringCoefficient = 3.996e-06;\n    const float mieExtinctionCoefficient = 4.440e-06;\n    const vec3 ozoneAbsorptionCoefficient = vec3(0.650, 1.881, 0.085) * 1e-6;\n    \n    const float SUN_ANGULAR_RADIUS = 0.004685;\n    const float SUN_INTENSITY = 1.0;        \n    \n    vec3 sunWithBloom(vec3 rayDir, vec3 sunDir) \n    {\n        float minSunCosTheta = cos(SUN_ANGULAR_RADIUS);            \n        float cosTheta = dot(rayDir, sunDir);\n        if (cosTheta >= minSunCosTheta) return vec3(1.0);                \n        float offset = minSunCosTheta - cosTheta;\n        float gaussianBloom = exp(-offset*15000.0)*0.7;\n        float invBloom = 1.0/(0.09 + offset*200.0)*0.01;\n        return vec3(gaussianBloom + invBloom);\n    }\n    \n    float rayleighPhase(float angle) \n    {\n        return 3.0 / (16.0 * PI) * (1.0 + (angle * angle));\n    }\n    \n    float miePhase(float angle) \n    {\n        float g = 0.8;\n        return 3.0 / (8.0 * PI) * ((1.0 - g * g) * (1.0 + angle * angle)) / ((2.0 + g * g) * pow(1.0 + g * g - 2.0 * g * angle, 1.5));\n    }\n        \n    vec3 opticalDepth(float height, float angle) \n    {\n        vec3 rayOrigin = vec3(0.0, BOTTOM_RADIUS + height, 0.0);\n        vec3 rayDirection = vec3(sqrt(1.0 - angle * angle), angle, 0.0);\n        float t1, t2;\n        intersectSphere(rayOrigin, rayDirection, TOP_RADIUS, t1, t2);\n        float segmentLength = t2 / float(SAMPLE_COUNT);\n        \n        float t = segmentLength * 0.5;\n        vec3 opticalDepth = vec3(0.0);\n        \n        for (int i = 0; i < SAMPLE_COUNT; i++) \n        {\n            vec3 position = rayOrigin + t * rayDirection;\n            float height = length(position) - BOTTOM_RADIUS;\n            opticalDepth.xy += exp(-height / rayleighMieHeights) * segmentLength;\n            \n            // density of the ozone layer is modeled as a triangular \n            // function that is 30 km wide and centered at 25 km altitude\n            opticalDepth.z += (1.0 - min(abs(height - 25e3) / 15e3, 1.0)) * segmentLength;  \n            t += segmentLength;\n        }\n        \n        return opticalDepth;\n    }\n    \n    vec3 transmittance(float height, float angle) \n    {\n        vec3 opticalDepth = opticalDepth(height, angle);\n        return exp(-(rayleighScatteringCoefficient * opticalDepth.x + mieExtinctionCoefficient * opticalDepth.y + ozoneAbsorptionCoefficient * opticalDepth.z));\n    }";
-export declare function transmittance(): Program;
-export declare function scattering(): Program;
+import { NumberArray3 } from "../math/Vec3";
+export interface AtmosphereParameters {
+    ATMOS_HEIGHT: number;
+    RAYLEIGH_SCALE: number;
+    MIE_SCALE: number;
+    GROUND_ALBEDO: number;
+    BOTTOM_RADIUS: number;
+    rayleighScatteringCoefficient: NumberArray3;
+    mieScatteringCoefficient: number;
+    mieExtinctionCoefficient: number;
+    ozoneAbsorptionCoefficient: NumberArray3;
+    SUN_ANGULAR_RADIUS: number;
+    SUN_INTENSITY: number;
+    ozoneDensityHeight: number;
+    ozoneDensityWide: number;
+}
+export declare const COMMON: (atmosParams?: AtmosphereParameters) => string;
+export declare function transmittance(atmosParams?: AtmosphereParameters): Program;
+export declare function scattering(atmosParams?: AtmosphereParameters): Program;

package/lib/js/shaders/atmos.js

@@ -1,39 +1,57 @@
 import { Program } from '../webgl/Program';
 import { UTILS } from './utils';
-export const COMMON = `
-    
+const DEFAULT_PARAMS = {
+    ATMOS_HEIGHT: 100000.0,
+    RAYLEIGH_SCALE: 0.08,
+    MIE_SCALE: 0.012,
+    GROUND_ALBEDO: 0.05,
+    BOTTOM_RADIUS: 6356752.3142451793,
+    rayleighScatteringCoefficient: [5.802, 13.558, 33.100],
+    mieScatteringCoefficient: 3.996,
+    mieExtinctionCoefficient: 4.440,
+    ozoneAbsorptionCoefficient: [0.650, 1.881, 0.085],
+    SUN_ANGULAR_RADIUS: 0.004685,
+    SUN_INTENSITY: 1.0,
+    ozoneDensityHeight: 25e3,
+    ozoneDensityWide: 15e3,
+};
+export const COMMON = (atmosParams = DEFAULT_PARAMS) => `    
     ${UTILS}
     
     #define PI 3.1415926538
-    #define ATMOS_HEIGHT 100000.0
-    #define RAYLEIGH_SCALE 0.08
-    #define MIE_SCALE 0.012
+    #define ATMOS_HEIGHT ${atmosParams.ATMOS_HEIGHT.toFixed(2)}
+    #define RAYLEIGH_SCALE ${atmosParams.RAYLEIGH_SCALE.toFixed(5)}
+    #define MIE_SCALE ${atmosParams.MIE_SCALE.toFixed(5)}
     
     #define SAMPLE_COUNT 16
     #define SQRT_SAMPLE_COUNT 4
             
-    const float GROUND_ALBEDO = 0.05 / PI;
+    const float GROUND_ALBEDO = ${atmosParams.GROUND_ALBEDO.toFixed(2)} / PI;
 
     // Sphere
-    const float BOTTOM_RADIUS = 6356752.3142451793;
-    const float TOP_RADIUS = 6356752.3142451793 + ATMOS_HEIGHT;
-        
+    const float BOTTOM_RADIUS = ${atmosParams.BOTTOM_RADIUS.toFixed(10)};
+    const float TOP_RADIUS = BOTTOM_RADIUS + ATMOS_HEIGHT;   
+    const float EQUATORIAL_RADIUS = 6378137.0;
+    
     // Ellipsoid
-    const vec3 bottomRadii = vec3(6378137.0, 6378137.0, 6356752.3142451793);           
+    const vec3 bottomRadii = vec3(EQUATORIAL_RADIUS, EQUATORIAL_RADIUS, BOTTOM_RADIUS);           
     const vec3 topRadii = bottomRadii + ATMOS_HEIGHT;
     
     const vec3 SPHERE_TO_ELLIPSOID_SCALE = vec3(BOTTOM_RADIUS) / bottomRadii;           
     
     const vec2 rayleighMieHeights = vec2(RAYLEIGH_SCALE, MIE_SCALE) * ATMOS_HEIGHT;
      
-    const vec3 rayleighScatteringCoefficient = vec3(5.802, 13.558, 33.100) * 1e-6;
+    const vec3 rayleighScatteringCoefficient = vec3(${atmosParams.rayleighScatteringCoefficient[0].toFixed(5)}, ${atmosParams.rayleighScatteringCoefficient[1].toFixed(5)}, ${atmosParams.rayleighScatteringCoefficient[2].toFixed(5)}) * 1e-6;
     
-    const float mieScatteringCoefficient = 3.996e-06;
-    const float mieExtinctionCoefficient = 4.440e-06;
-    const vec3 ozoneAbsorptionCoefficient = vec3(0.650, 1.881, 0.085) * 1e-6;
+    const float mieScatteringCoefficient = ${atmosParams.mieScatteringCoefficient.toFixed(3)} * 1e-6;
+    const float mieExtinctionCoefficient = ${atmosParams.mieExtinctionCoefficient.toFixed(3)} * 1e-6;
+    const vec3 ozoneAbsorptionCoefficient = vec3(${atmosParams.ozoneAbsorptionCoefficient[0].toFixed(5)}, ${atmosParams.ozoneAbsorptionCoefficient[1].toFixed(5)}, ${atmosParams.ozoneAbsorptionCoefficient[2].toFixed(5)}) * 1e-6;
     
-    const float SUN_ANGULAR_RADIUS = 0.004685;
-    const float SUN_INTENSITY = 1.0;        
+    const float SUN_ANGULAR_RADIUS = ${atmosParams.SUN_ANGULAR_RADIUS.toFixed(10)};
+    const float SUN_INTENSITY = ${atmosParams.SUN_INTENSITY.toFixed(2)};        
+    
+    const float ozoneDensityHeight = ${atmosParams.ozoneDensityHeight.toFixed(1)};//25e3;
+    const float ozoneDensityWide = ${atmosParams.ozoneDensityWide.toFixed(1)};//15e3;
     
     vec3 sunWithBloom(vec3 rayDir, vec3 sunDir) 
     {
@@ -73,10 +91,7 @@ export const COMMON = `
             vec3 position = rayOrigin + t * rayDirection;
             float height = length(position) - BOTTOM_RADIUS;
             opticalDepth.xy += exp(-height / rayleighMieHeights) * segmentLength;
-            
-            // density of the ozone layer is modeled as a triangular 
-            // function that is 30 km wide and centered at 25 km altitude
-            opticalDepth.z += (1.0 - min(abs(height - 25e3) / 15e3, 1.0)) * segmentLength;  
+            opticalDepth.z += (1.0 - min(abs(height - ozoneDensityHeight) / ozoneDensityWide, 1.0)) * segmentLength;  
             t += segmentLength;
         }
         
@@ -88,7 +103,7 @@ export const COMMON = `
         vec3 opticalDepth = opticalDepth(height, angle);
         return exp(-(rayleighScatteringCoefficient * opticalDepth.x + mieExtinctionCoefficient * opticalDepth.y + ozoneAbsorptionCoefficient * opticalDepth.z));
     }`;
-export function transmittance() {
+export function transmittance(atmosParams) {
     return new Program("transmittance", {
         uniforms: {
             iResolution: "vec2"
@@ -106,7 +121,7 @@ export function transmittance() {
         fragmentShader: `
             precision highp float;
             
-            ${COMMON}
+            ${COMMON(atmosParams)}
                        
             uniform vec2 iResolution;
                         
@@ -119,7 +134,7 @@ export function transmittance() {
             }`
     });
 }
-export function scattering() {
+export function scattering(atmosParams) {
     return new Program("scattering", {
         uniforms: {
             iResolution: "vec2",
@@ -141,7 +156,7 @@ export function scattering() {
             uniform sampler2D transmittanceTexture;
             uniform vec2 iResolution;
             
-            ${COMMON}
+            ${COMMON(atmosParams)}
             
             vec3 transmittanceFromTexture(float height, float angle) 
             {
@@ -223,8 +238,7 @@ export function scattering() {
                             vec3 hitPoint = rayOrigin + rayDirection * distanceToGround;
                             vec3 normal = normalize(hitPoint);
                             float diffuseAngle = max(dot(normal, lightDirection), 0.0); 
-                            float earthAlbedo = 0.05;
-                            light += transmittanceCamera * transmittanceLight * (earthAlbedo / PI) * diffuseAngle;
+                            light += transmittanceCamera * transmittanceLight * GROUND_ALBEDO * diffuseAngle;
                         }
                     }
                 }

package/lib/js/shaders/drawnode.d.ts

@@ -1,8 +1,9 @@
+import { AtmosphereParameters } from "./atmos";
 import { Program } from "../webgl/Program";
 export declare function drawnode_screen_nl(): Program;
 export declare function drawnode_screen_wl_webgl1NoAtmos(): Program;
 export declare function drawnode_screen_wl_webgl2NoAtmos(): Program;
-export declare function drawnode_screen_wl_webgl2Atmos(): Program;
+export declare function drawnode_screen_wl_webgl2Atmos(atmosParams?: AtmosphereParameters): Program;
 export declare function drawnode_colorPicking(): Program;
 export declare function drawnode_heightPicking(): Program;
 export declare function drawnode_depth(): Program;

package/lib/js/shaders/drawnode.js

@@ -1,4 +1,4 @@
-import * as atmos from "./atmos";
+import { COMMON } from "./atmos";
 import { Program } from "../webgl/Program";
 import { UTILS } from './utils';
 // REMEMBER!
@@ -468,7 +468,7 @@ export function drawnode_screen_wl_webgl2NoAtmos() {
             }`
     });
 }
-export function drawnode_screen_wl_webgl2Atmos() {
+export function drawnode_screen_wl_webgl2Atmos(atmosParams) {
     return new Program("drawnode_screen_wl", {
         uniforms: {
             projectionMatrix: "mat4",
@@ -591,7 +591,7 @@ export function drawnode_screen_wl_webgl2Atmos() {
 
             ${DEF_BLEND}
             
-            ${atmos.COMMON}            
+            ${COMMON(atmosParams)}            
             
             vec3 transmittanceFromTexture(float height, float angle) 
             {
@@ -619,14 +619,21 @@ export function drawnode_screen_wl_webgl2Atmos() {
             }
            
             void atmosGroundColor(out vec4 fragColor, in vec3 normal)
-            {                                                                                                                                
+            {      
+                vec3 cameraPosition = cameraPosition;           
+                
+                if(length(cameraPosition * SPHERE_TO_ELLIPSOID_SCALE) < BOTTOM_RADIUS + 1.0){
+                    cameraPosition = normalize(cameraPosition * SPHERE_TO_ELLIPSOID_SCALE) * (BOTTOM_RADIUS + 1.0) / SPHERE_TO_ELLIPSOID_SCALE;
+                }             
+                                                                                
                 vec3 rayDirection = normalize(v_vertex - cameraPosition);
                 vec3 lightDir = normalize(sunPos);
                 
                 rayDirection = normalize(rayDirection * SPHERE_TO_ELLIPSOID_SCALE);
                 vec3 camPos = cameraPosition * SPHERE_TO_ELLIPSOID_SCALE;
                 lightDir = normalize(lightDir * SPHERE_TO_ELLIPSOID_SCALE);
-            
+               
+
                 vec3 light = vec3(0.0);
                 vec3 transmittanceFromCameraToSpace = vec3(1.0);
                 float offset = 0.0;
@@ -656,13 +663,9 @@ export function drawnode_screen_wl_webgl2Atmos() {
                 float distanceToGround = 0.0;
                 
                 bool hitGround = intersectSphere(camPos, rayDirection, BOTTOM_RADIUS, distanceToGround) && distanceToGround > 0.0;                
-                
-                // Fix black dots on the edge of atmosphere                        
-                // if(camHeight < 700000.0 || !hitGround)
-                // {                          
-                //     distanceToGround = distance(camPos, v_vertex * SPHERE_TO_ELLIPSOID_SCALE);
-                // }
-                
+                //intersectSphere(camPos, rayDirection, BOTTOM_RADIUS, distanceToGround);
+               
+
                 if(length(v_vertex * SPHERE_TO_ELLIPSOID_SCALE) > BOTTOM_RADIUS){
                     distanceToGround = distance(camPos, v_vertex * SPHERE_TO_ELLIPSOID_SCALE);
                 }

package/lib/js/ui/Slider.js

@@ -18,7 +18,7 @@ class Slider extends View {
             })
         });
         this._onResize = () => {
-            this._setOffset(this._value * this.$panel.clientWidth / (this._max - this._min));
+            this._setOffset((this._value - this._min) * this.$panel.clientWidth / (this._max - this._min));
         };
         this._onMouseWheel = (e) => {
             //@ts-ignore
@@ -57,7 +57,7 @@ class Slider extends View {
             let clientX = clamp(e.clientX, rect.left, rect.right);
             let dx = this._startPosX - clientX;
             this._startPosX = clientX;
-            this.value = (this.$pointer.offsetLeft - dx) * (this._max - this._min) / this.$panel.clientWidth;
+            this.value = this._value - dx * (this._max - this._min) / this.$panel.clientWidth;
         };
         this._onMouseUp = () => {
             document.removeEventListener("mouseup", this._onMouseUp);
@@ -95,7 +95,7 @@ class Slider extends View {
         if (val !== this._value) {
             this._value = clamp(val, this._min, this._max);
             this.$input.value = this._value.toString();
-            this._setOffset(this._value * this.$panel.clientWidth / (this._max - this._min));
+            this._setOffset((this._value - this._min) * this.$panel.clientWidth / (this._max - this._min));
             this.events.dispatch(this.events.change, this._value, this);
         }
     }

package/lib/js/webgl/Handler.d.ts

@@ -56,6 +56,7 @@ export interface IDefaultTextureParams {
  * @param {Array.<string>} [params.extensions] - Additional WebGL extension list. Available by default: EXT_texture_filter_anisotropic.
  */
 declare class Handler {
+    protected _throttledDrawFrame: () => void;
     /**
      * Events.
      * @public
@@ -158,6 +159,7 @@ declare class Handler {
     resizeObserver?: ResizeObserver;
     protected _requestAnimationFrameId: number;
     constructor(canvasTarget: string | HTMLCanvasElement | undefined, params?: IHandlerParameters);
+    set frameDelay(delay: number);
     isInitialized(): boolean;
     protected _createCanvas(): void;
     /**
@@ -431,7 +433,7 @@ declare class Handler {
      * Draw single frame.
      * @public
      */
-    drawFrame(): void;
+    drawFrame: () => void;
     /**
      * Clearing gl frame.
      * @public

package/lib/js/webgl/Handler.js

@@ -6,6 +6,7 @@ import { ImageCanvas } from "../ImageCanvas";
 import { Vec2 } from "../math/Vec2";
 import { ProgramController } from "./ProgramController";
 import { Stack } from "../Stack";
+import { throttle } from "../utils/shared";
 const vendorPrefixes = ["", "WEBKIT_", "MOZ_"];
 const CONTEXT_TYPE = ["webgl2", "webgl"];
 // Maximal mipmap levels
@@ -25,7 +26,35 @@ class Handler {
     constructor(canvasTarget, params = {}) {
         this.framebufferStack = new Stack();
         this._requestAnimationFrameId = 0;
+        /**
+         * Draw single frame.
+         * @public
+         */
+        this.drawFrame = () => {
+            /** Calculating frame time */
+            let now = window.performance.now();
+            this.deltaTime = now - this._lastAnimationFrameTime;
+            this._lastAnimationFrameTime = now;
+            this.defaultClock.tick(this.deltaTime);
+            for (let i = 0; i < this._clocks.length; i++) {
+                this._clocks[i].tick(this.deltaTime);
+            }
+            /** Canvas resize checking */
+            let canvas = this.canvas;
+            if (Math.floor(canvas.clientWidth * this._params.pixelRatio) !== canvas.width || Math.floor(canvas.clientHeight * this._params.pixelRatio) !== canvas.height) {
+                if (canvas.clientWidth === 0 || canvas.clientHeight === 0) {
+                    this.stop();
+                }
+                else if (!document.hidden) {
+                    this.start();
+                    this.setSize(canvas.clientWidth, canvas.clientHeight);
+                }
+            }
+            /** Draw frame */
+            this._frameCallback();
+        };
         this.events = createEvents(["visibilitychange", "resize"]);
+        this._throttledDrawFrame = this.drawFrame;
         this.defaultClock = new Clock();
         this._clocks = [];
         this.deltaTime = 0;
@@ -69,6 +98,14 @@ class Handler {
             this.initialize();
         }
     }
+    set frameDelay(delay) {
+        if (delay === 0) {
+            this._throttledDrawFrame = this.drawFrame;
+        }
+        else {
+            this._throttledDrawFrame = throttle(this.drawFrame, delay);
+        }
+    }
     isInitialized() {
         return this._initialized;
     }
@@ -786,33 +823,6 @@ class Handler {
         let c = this.canvas;
         return c ? new Vec2(Math.round(c.width * 0.5), Math.round(c.height * 0.5)) : new Vec2();
     }
-    /**
-     * Draw single frame.
-     * @public
-     */
-    drawFrame() {
-        /** Calculating frame time */
-        let now = window.performance.now();
-        this.deltaTime = now - this._lastAnimationFrameTime;
-        this._lastAnimationFrameTime = now;
-        this.defaultClock.tick(this.deltaTime);
-        for (let i = 0; i < this._clocks.length; i++) {
-            this._clocks[i].tick(this.deltaTime);
-        }
-        /** Canvas resize checking */
-        let canvas = this.canvas;
-        if (Math.floor(canvas.clientWidth * this._params.pixelRatio) !== canvas.width || Math.floor(canvas.clientHeight * this._params.pixelRatio) !== canvas.height) {
-            if (canvas.clientWidth === 0 || canvas.clientHeight === 0) {
-                this.stop();
-            }
-            else if (!document.hidden) {
-                this.start();
-                this.setSize(canvas.clientWidth, canvas.clientHeight);
-            }
-        }
-        /** Draw frame */
-        this._frameCallback();
-    }
     /**
      * Clearing gl frame.
      * @public
@@ -853,7 +863,7 @@ class Handler {
      */
     _animationFrameCallback() {
         this._requestAnimationFrameId = window.requestAnimationFrame(() => {
-            this.drawFrame();
+            this._throttledDrawFrame();
             this._requestAnimationFrameId && this._animationFrameCallback();
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "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.",
   "directories": {
     "example": "./sandbox"