@openglobus/og 0.20.2 → 0.20.4

package/lib/js/scene/Planet.js

@@ -102,6 +102,7 @@ export class Planet extends RenderNode {
             }
             gl.enable(gl.DEPTH_TEST);
         };
+        this._atmosphere = new Atmosphere(options.atmosphereParameters);
         this._prevNodes = new Map();
         this._currNodes = new Map();
         this.transitionTime = 580;
@@ -424,24 +425,39 @@ export class Planet extends RenderNode {
             });
         }
     }
+    initAtmosphereShader(atmosParams) {
+        if (this.renderer && this.renderer.handler && this._atmosphereEnabled) {
+            let h = this.renderer.handler;
+            if (h.isWebGl2()) {
+                h.removeProgram("drawnode_screen_wl");
+                h.addProgram(shaders.drawnode_screen_wl_webgl2Atmos(atmosParams), true);
+            }
+            else {
+                console.warn("Atmosphere WebGL2 only");
+            }
+        }
+    }
+    get atmosphereControl() {
+        return this._atmosphere;
+    }
     _initializeAtmosphere() {
+        if (!this.renderer)
+            return;
         let h = this.renderer.handler;
         h.removeProgram("drawnode_screen_wl");
         if (this._atmosphereEnabled) {
             this._renderScreenNodesPASS = this._renderScreenNodesPASSAtmos;
             this._renderScreenNodesWithHeightPASS = this._renderScreenNodesWithHeightPASSAtmos;
+            if (!this.renderer.controls.Atmosphere) {
+                this.addControl(this._atmosphere);
+            }
+            this._atmosphere.activate();
             if (h.isWebGl2()) {
-                h.addProgram(shaders.drawnode_screen_wl_webgl2Atmos(), true);
+                h.addProgram(shaders.drawnode_screen_wl_webgl2Atmos(this._atmosphere.parameters), true);
             }
             else {
                 h.addProgram(shaders.drawnode_screen_wl_webgl1NoAtmos(), true);
             }
-            if (!this.renderer.controls.Atmosphere) {
-                this.addControl(new Atmosphere());
-            }
-            else {
-                this.renderer.controls.Atmosphere.activate();
-            }
             if (this.renderer.controls.SimpleSkyBackground) {
                 this.renderer.controls.SimpleSkyBackground.deactivate();
             }
@@ -449,9 +465,7 @@ export class Planet extends RenderNode {
         else {
             this._renderScreenNodesPASS = this._renderScreenNodesPASSNoAtmos;
             this._renderScreenNodesWithHeightPASS = this._renderScreenNodesWithHeightPASSNoAtmos;
-            if (this.renderer.controls.Atmosphere) {
-                this.renderer.controls.Atmosphere.deactivate();
-            }
+            this._atmosphere.deactivate();
             if (!this.renderer.controls.SimpleSkyBackground) {
                 this.addControl(new SimpleSkyBackground());
             }
@@ -1061,7 +1075,7 @@ export class Planet extends RenderNode {
         let transparentSegments = [];
         let isEq = this.terrain.equalizeVertices;
         let i = renderedNodes.length;
-        if (cam.slope > 0.8 /*|| cam.getAltitude() > 10000*/) {
+        if (cam.slope > 0.8 || !this.terrain || this.terrain.isEmpty /*|| cam.getAltitude() > 10000*/) {
             while (i--) {
                 let ri = renderedNodes[i];
                 let s = ri.segment;

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/shaders/geoObject.js

@@ -1,4 +1,7 @@
 import { Program } from "../webgl/Program";
+const QROT = `vec3 qRotate(vec4 q, vec3 v){
+    return v + 2.0 * cross(q.xyz, cross(q.xyz, v) + q.w * v);
+}`;
 export const geo_object = () => new Program("geo_object", {
     uniforms: {
         viewMatrix: "mat4",
@@ -10,7 +13,8 @@ export const geo_object = () => new Program("geo_object", {
         lightsParamsv: "vec3",
         lightsParamsf: "float",
         uTexture: "sampler2d",
-        uUseTexture: "float"
+        uUseTexture: "float",
+        useLighting: "float"
     },
     attributes: {
         aVertexPosition: "vec3",
@@ -18,11 +22,10 @@ export const geo_object = () => new Program("geo_object", {
         aTexCoord: "vec2",
         aPositionHigh: { type: "vec3", divisor: 1 },
         aPositionLow: { type: "vec3", divisor: 1 },
-        aDirection: { type: "vec3", divisor: 1 },
-        aPitchRoll: { type: "vec2", divisor: 1 },
         aColor: { type: "vec4", divisor: 1 },
         aScale: { type: "vec3", divisor: 1 },
-        aDispose: { type: "float", divisor: 1 }
+        aDispose: { type: "float", divisor: 1 },
+        qRot: { type: "vec4", divisor: 1 }
     },
     vertexShader: `precision highp float;
             
@@ -30,13 +33,12 @@ export const geo_object = () => new Program("geo_object", {
             attribute vec3 aVertexNormal; 
             attribute vec3 aPositionHigh;
             attribute vec3 aPositionLow;    
-            attribute vec3 aDirection;
-            attribute vec2 aPitchRoll;
             attribute vec4 aColor;
             attribute vec3 aScale;
             attribute float aDispose;
             attribute float aUseTexture;
             attribute vec2 aTexCoord;
+            attribute vec4 qRot;
             
             uniform vec3 uScaleByDistance;
             uniform mat4 projectionMatrix;
@@ -51,11 +53,8 @@ export const geo_object = () => new Program("geo_object", {
             varying vec4 vColor;
             varying float vDispose;
             varying vec2 vTexCoords;
-            //varying float useLighting;
             
-            const float PI = 3.141592653589793;
-            
-            const float RADIANS = PI / 180.0;
+            ${QROT}
            
             void main(void) {
                         
@@ -69,43 +68,16 @@ export const geo_object = () => new Program("geo_object", {
                 vec3 look = cameraPosition - position;
                 float lookLength = length(look);
 
-                // useLighting = 1.0;                
-                // if(lookLength > 2000000.0){
-                //      useLighting = 0.0;
-                // }
-
-            
                 vColor = aColor;
                 vTexCoords = aTexCoord;
               
-                float cos_roll = cos(aPitchRoll.y);
-                float sin_roll = sin(aPitchRoll.y);
-                
-                mat3 rotZ = mat3(
-                     vec3(cos_roll, sin_roll, 0.0),
-                     vec3(-sin_roll, cos_roll, 0.0), 
-                     vec3(0.0, 0.0, 1.0) 
-                );
-
-                float cos_pitch = cos(aPitchRoll.x);
-                float sin_pitch = sin(aPitchRoll.x);
-
-                mat3 rotX = mat3(
-                    vec3(1.0, 0.0, 0.0),
-                    vec3(0.0, cos_pitch, sin_pitch), 
-                    vec3(0.0, -sin_pitch, cos_pitch) 
-               );
-
-                vec3 r = cross(normalize(-position), aDirection);
-                mat3 modelMatrix = mat3(r, normalize(position), -aDirection) * rotX * rotZ;
-
                 mat4 viewMatrixRTE = viewMatrix;
                 viewMatrixRTE[3] = vec4(0.0, 0.0, 0.0, 1.0);
 
                 vec3 highDiff = aPositionHigh - eyePositionHigh;
                 vec3 lowDiff = aPositionLow - eyePositionLow;
              
-                vNormal = modelMatrix * aVertexNormal;
+                vNormal = qRotate(qRot, aVertexNormal);
                                
                 // if(lookLength > uScaleByDistance[1])
                 // {
@@ -116,9 +88,10 @@ export const geo_object = () => new Program("geo_object", {
                 //     scd = lookLength / uScaleByDistance[0];
                 // }
                 // ... is the same math
+                // use scaleByDistance: [1.0, 1.0, 1.0] for real sized objects 
                 float scd = uScaleByDistance[2] * clamp(lookLength, uScaleByDistance[0], uScaleByDistance[1]) / uScaleByDistance[0];
                 
-                vec3 vert = modelMatrix * (aVertexPosition * aScale) * scd;
+                vec3 vert = qRotate(qRot, (aVertexPosition * aScale)) * scd;
                 
                 vert += lowDiff;
                                
@@ -135,19 +108,19 @@ export const geo_object = () => new Program("geo_object", {
                 uniform float lightsParamsf[MAX_POINT_LIGHTS];
                 uniform sampler2D uTexture;
                 uniform float uUseTexture;
+                uniform float useLighting;                
                             
                 varying vec3 cameraPosition;
                 varying vec3 v_vertex;                
                 varying vec4 vColor;
                 varying vec3 vNormal;
                 varying vec2 vTexCoords;
-                //varying float useLighting;
                 
                 void main(void) {        
                                         
                     vec3 lightWeighting = vec3(1.0);
                 
-                    //if(useLighting != 0.0){
+                    if(useLighting != 0.0){
                         vec3 normal = normalize(vNormal);
                         vec3 lightDir = normalize(lightsPositions[0]);
                         vec3 viewDir = normalize(cameraPosition - v_vertex);                
@@ -156,7 +129,7 @@ export const geo_object = () => new Program("geo_object", {
                         float specularLightWeighting = pow( reflection, lightsParamsf[0]);                                        
                         float diffuseLightWeighting = max(dot(normal, lightDir), 0.0);
                         lightWeighting = lightsParamsv[0] + lightsParamsv[1] * diffuseLightWeighting + lightsParamsv[2] * specularLightWeighting;
-                    //}
+                    }
                                        
                     if(uUseTexture > 0.0) {
                         vec4 tColor = texture2D(uTexture, vTexCoords);
@@ -179,22 +152,20 @@ export const geo_object_picking = () => new Program("geo_object_picking", {
         aVertexPosition: "vec3",
         aPositionHigh: { type: "vec3", divisor: 1 },
         aPositionLow: { type: "vec3", divisor: 1 },
-        aDirection: { type: "vec3", divisor: 1 },
-        aPitchRoll: { type: "vec2", divisor: 1 },
         aPickingColor: { type: "vec3", divisor: 1 },
         aScale: { type: "vec3", divisor: 1 },
-        aDispose: { type: "float", divisor: 1 }
+        aDispose: { type: "float", divisor: 1 },
+        qRot: { type: "vec4", divisor: 1 }
     },
     vertexShader: `precision highp float;
 
             attribute vec3 aVertexPosition;
             attribute vec3 aPositionHigh;
-            attribute vec3 aPositionLow;    
-            attribute vec3 aDirection;
-            attribute vec3 aPickingColor;
-            attribute vec2 aPitchRoll;
+            attribute vec3 aPositionLow;
+            attribute vec3 aPickingColor;    
             attribute vec3 aScale;
             attribute float aDispose;
+            attribute vec4 qRot;
             
             uniform vec3 eyePositionHigh;
             uniform vec3 eyePositionLow;
@@ -205,7 +176,7 @@ export const geo_object_picking = () => new Program("geo_object_picking", {
 
             varying vec3 vColor;
             
-            const float RADIANS = 3.141592653589793 / 180.0;
+            ${QROT}
 
             void main(void) {
 
@@ -214,29 +185,9 @@ export const geo_object_picking = () => new Program("geo_object_picking", {
                  }
             
                  vColor = aPickingColor;
-               
-                float cos_roll = cos(aPitchRoll.y);
-                float sin_roll = sin(aPitchRoll.y);
                 
-                mat3 rotZ = mat3(
-                     vec3(cos_roll, sin_roll, 0.0),
-                     vec3(-sin_roll, cos_roll, 0.0), 
-                     vec3(0.0, 0.0, 1.0) 
-                );
-
-                float cos_pitch = cos(aPitchRoll.x);
-                float sin_pitch = sin(aPitchRoll.x);
-
-                mat3 rotX = mat3(
-                    vec3(1.0, 0.0, 0.0),
-                    vec3(0.0, cos_pitch, sin_pitch), 
-                    vec3(0.0, -sin_pitch, cos_pitch) 
-               );
- 
                  vec3 position = aPositionHigh + aPositionLow;
                  vec3 cameraPosition = eyePositionHigh + eyePositionLow;
-                 vec3 r = cross(normalize(-position), aDirection);
-                 mat3 modelMatrix = mat3(r, normalize(position), -aDirection) * rotX * rotZ;
  
                  mat4 viewMatrixRTE = viewMatrix;
                  viewMatrixRTE[3] = vec4(0.0, 0.0, 0.0, 1.0);
@@ -261,7 +212,7 @@ export const geo_object_picking = () => new Program("geo_object_picking", {
                  // tays in the vert above it affects on Mac Safari jitter
                  float scd = pickingScale * uScaleByDistance[2] * clamp(lookLength, uScaleByDistance[0], uScaleByDistance[1]) / uScaleByDistance[0];
 
-                 vec3 vert = modelMatrix * (aVertexPosition * aScale) * scd;
+                 vec3 vert = qRotate(qRot, (aVertexPosition * aScale)) * scd;
                  
                  vert += lowDiff;
                                 

package/lib/js/terrain/GlobusRgbTerrain.js

@@ -7,14 +7,14 @@ const urlPref = {
 const urlRewriteFunc = (tileX, tileY, tileZoom, tileGroup) => {
     let g = urlPref[tileGroup];
     if (g)
-        return `https://terrain.openglobus.org/public/poles/${g}/${tileZoom}/${tileX}/${tileY}.png`;
+        return `https://terrain.openglobus.org/poles/${g}/${tileZoom}/${tileX}/${tileY}.png`;
 };
 export class GlobusRgbTerrain extends RgbTerrain {
     constructor(name, options) {
         super(name || "GlobusEarthRgb", {
             maxNativeZoom: 6,
             maxZoom: 17,
-            url: "https://{s}.terrain.openglobus.org/public/all/{z}/{x}/{y}.png",
+            url: "https://{s}.terrain.openglobus.org/all/{z}/{x}/{y}.png",
             urlRewrite: urlRewriteFunc,
             ...options
         });

package/lib/js/terrain/GlobusTerrain.d.ts

@@ -19,6 +19,8 @@ type TileData = {
     extent: Extent | null;
 };
 /**
+ * @deprecated
+ * Use GlobusRgbTerrain
  * Class that loads segment elevation data, converts it to the array and passes it to the planet segment.
  * @class
  * @extends {GlobusTerrain}

package/lib/js/terrain/GlobusTerrain.js

@@ -12,6 +12,8 @@ import { TILEGROUP_COMMON } from "../segment/Segment";
 import { Ray } from "../math/Ray";
 import { Vec3 } from "../math/Vec3";
 /**
+ * @deprecated
+ * Use GlobusRgbTerrain
  * Class that loads segment elevation data, converts it to the array and passes it to the planet segment.
  * @class
  * @extends {GlobusTerrain}

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