@pirireis/webglobeplugins 0.15.35 → 0.16.0

package/programs/totems/camerauniformblock.ts

@@ -0,0 +1,310 @@
+import { globeProgramCache } from "../programcache";
+// import { getFrustumPlanes } from "../../Math/frustum/from-projection-matrix";
+// import { getFrustum } from "../../Math/frustum/from-globeinfo"
+// import { Plane } from "../../Math/";
+import { Globe, GlobeChanges } from "../../types";
+import { Vec3, Vec2 } from "../../Math/types";
+import { fromLongLatToUnitVector } from "../../Math/vec3";
+import { RADIANS } from "../../Math/methods";
+import { GlobeChangeObserver } from "./globe-changes";
+
+
+export const CameraUniformBlockString = `
+layout(std140) uniform CameraUniformBlock {
+    mat4 view; // 64 bytes           0
+    mat4 projection; // 64 bytes     64
+    vec3 translate; // 12 bytes      128
+    bool is3D; // 4 bytes            140
+    vec2 mapWH; // 8 bytes           144
+    vec2 screenWH; //  8 bytes       152
+    float z_level; // 4 bytes        160 | 164
+    float world_distance; // 4 bytes 164
+    float world_tilt; // 4 bytes     168
+    float world_north_angle; // 4 bytes 172
+    vec2 world_center_radian; // 8 bytes    176 | 184
+}; // 14 lines
+`;
+
+const Radian = Math.PI / 180.0;
+
+const _0vec3: Vec3 = [0, 0, 0];
+
+interface GLContext extends WebGL2RenderingContext {
+    // Extend with any custom methods if needed
+}
+
+
+
+
+type TranslateVec3 = { x: number; y: number; z: number };
+
+export class CameraUniformBlockTotem {
+    id: string;
+    description: string;
+    gl: GLContext | null;
+    globe: Globe | null;
+    ubo: WebGLBuffer | null;
+    traslateFloat32: Float32Array;
+    mapWHFloat32: Float32Array;
+    _isMovedParams: { lastLod: number | null; isMoved: boolean };
+    _normalizedCameraVector: Vec3 = [0, 0, 0]; // Normalized camera vector
+    // _frustumPlanes: any; // Uncomment and type if used
+    _globeChangeObserver: GlobeChangeObserver | null = null;
+    constructor() {
+        this.id = "CameraUniformBlockTotem";
+        this.description =
+            `Sets a uniform block and provides buffer for it. The following is the glsl uniform block:` +
+            CameraUniformBlockString;
+        this.gl = null;
+        this.globe = null;
+        this.ubo = null;
+        // this._frustumPlanes = { ... }
+        this._isMovedParams = {
+            lastLod: null,
+            isMoved: false,
+        };
+        this.traslateFloat32 = new Float32Array(3);
+        this.mapWHFloat32 = new Float32Array(2);
+    }
+
+    init(globe: Globe, gl: GLContext) {
+        this.gl = gl;
+        this.globe = globe;
+        this.ubo = this._createUBO();
+        this.traslateFloat32 = new Float32Array(3);
+        this.mapWHFloat32 = new Float32Array(2);
+        this._globeChangeObserver = new GlobeChangeObserver(globe);
+        this.setGeometry();
+        this.resize();
+    }
+
+    _createUBO(): WebGLBuffer | null {
+        const gl = this.gl!;
+        const ubo = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        // 184 bytes in reality. Overflow on linux for some reason. So, 200 bytes.
+        gl.bufferData(gl.UNIFORM_BUFFER, 200, gl.STREAM_DRAW);
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        return ubo;
+    }
+
+    resize() {
+        const gl = this.gl!;
+        const globe = this.globe!;
+        const ubo = this.ubo!;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferSubData(
+            gl.UNIFORM_BUFFER,
+            152,
+            new Float32Array([globe.api_ScrW(), globe.api_ScrH()])
+        );
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+    setGeometry() {
+        const gl = this.gl!;
+        const globe = this.globe!;
+        const ubo = this.ubo!;
+        const is3D = globe.api_GetCurrentGeometry() === 0 ? 1 : 0;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 140, new Float32Array([is3D]));
+    }
+
+    draw3D(projection: Float32Array, modelView: Float32Array, translate: TranslateVec3) {
+        const gl = this.gl!;
+        const traslateFloat32 = this.traslateFloat32;
+        const ubo = this.ubo!;
+        const mapWHFloat32 = this.mapWHFloat32;
+        const globe = this.globe!;
+        this._globeChangeObserver?.checkChanges();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        {
+            // view, projection, translate
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, modelView);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 64, projection);
+            traslateFloat32.set([translate.x, translate.y, translate.z], 0);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 128, traslateFloat32);
+        }
+        {
+            // zoom level
+            gl.bufferSubData(
+                gl.UNIFORM_BUFFER,
+                160,
+                new Float32Array([globe.api_GetCurrentLODWithDecimal()])
+            );
+        }
+        {
+            // mapWH
+            if (globe.api_GetCurrentGeometry() === 1) {
+                const { width, height } = globe.api_GetCurrentWorldWH();
+                mapWHFloat32.set([width, height]);
+                gl.bufferSubData(gl.UNIFORM_BUFFER, 144, mapWHFloat32);
+            }
+        }
+        {
+            // float world_distance; // 4 bytes 164
+            // float world_tilt; // 4 bytes     168
+            // float world_north_angle; // 4 bytes 172
+            // vec2 world_center_radian; // 8 bytes    180
+            const { CenterLong, CenterLat, Distance, Tilt, NorthAng } =
+                globe.api_GetCurrentLookInfo();
+            gl.bufferSubData(
+                gl.UNIFORM_BUFFER,
+                164,
+                new Float32Array([
+                    Distance,
+                    Radian * Tilt,
+                    Radian * NorthAng,
+                    Radian * CenterLong,
+                    Radian * CenterLat,
+                ])
+            );
+        }
+
+        // this._frustumPlanes = getFrustumPlanes(projection, translate);
+
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+
+        {
+            // isMoved
+            const currentLOD = globe.api_GetCurrentLODWithDecimal();
+            this._isMovedParams.isMoved =
+                this._isMovedParams.lastLod !== currentLOD ||
+                globe.api_IsScreenMoving();
+            this._isMovedParams.lastLod = currentLOD;
+        }
+
+        this.__setCameraVectors();
+
+    }
+
+    __setCameraVectors() {
+        if (!this.globe) {
+            throw new Error("Globe is not initialized");
+        }
+        const globe = this.globe;
+        const currentGeom = globe.api_GetCurrentGeometry()
+        if (currentGeom === 0) {
+
+            const { Fp, FUPos } = globe as Globe;
+
+
+            const cameraVector = [Fp.x, Fp.y, Fp.z];
+            const length = Math.sqrt(
+                cameraVector.reduce((sum, val) => sum + val * val, 0)
+            );
+
+
+            this._normalizedCameraVector[0] = cameraVector[0] / length;
+            this._normalizedCameraVector[1] = cameraVector[1] / length;
+            this._normalizedCameraVector[2] = cameraVector[2] / length;
+        } else if (currentGeom === 1) {
+            const { CenterLong, CenterLat } = globe.api_GetCurrentLookInfo();
+
+            fromLongLatToUnitVector(
+                _0vec3,
+                [CenterLong * RADIANS, CenterLat * RADIANS]
+            );
+            this._normalizedCameraVector[0] = _0vec3[0];
+            this._normalizedCameraVector[1] = _0vec3[1];
+            this._normalizedCameraVector[2] = _0vec3[2];
+        }
+    }
+
+    // TODO: cut implicits to the bottom
+
+    assignBindingPoint(program: WebGLProgram, bindingPoint: number) {
+        const gl = this.gl!;
+        const cameraBlockIndex = gl.getUniformBlockIndex(
+            program,
+            "CameraUniformBlock"
+        );
+        gl.uniformBlockBinding(program, cameraBlockIndex, bindingPoint);
+    }
+
+    getUBO(): WebGLBuffer | null {
+        return this.ubo;
+    }
+
+    // getFrustumPlanes() {
+    //     return this._frustumPlanes;
+    // }
+
+    bind(bindingPoint: number) {
+        const gl = this.gl!;
+        const ubo = this.ubo!;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, ubo);
+    }
+
+    unbind(bindingPoint: number) {
+        const gl = this.gl!;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
+    }
+
+    isMoved(): boolean {
+        return this._isMovedParams.isMoved;
+    }
+
+    getCameraVector(): Vec3 {
+        const globe = this.globe!;
+        return [globe.Fp.x, globe.Fp.y, globe.Fp.z];
+    }
+
+    getNormalizedCameraVector(): Vec3 {
+        return this._normalizedCameraVector || _0vec3;
+    }
+
+    getCameraUpVector(): Vec3 {
+        const globe = this.globe!;
+        return [globe.FUPos.x, globe.FUPos.y, globe.FUPos.z];
+    }
+
+
+    getLookAtVector(): Vec3 {
+        const globe = this.globe!;
+        const { CenterLong, CenterLat } = globe.api_GetCurrentLookInfo();
+        const result: Vec3 = [0, 0, 0];
+        fromLongLatToUnitVector(result, [CenterLong * RADIANS, CenterLat * RADIANS]);
+        return result;
+    }
+
+
+    getGlobeChanges(): GlobeChanges {
+        return this._globeChangeObserver?.getChanges()!;
+    }
+
+
+    free() {
+        const gl = this.gl!;
+        const ubo = this.ubo!;
+        gl.deleteBuffer(ubo);
+    }
+
+    readBuffer() {
+        const gl = this.gl!;
+        const ubo = this.ubo!;
+        const result = new Float32Array(41);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.getBufferSubData(gl.UNIFORM_BUFFER, 0, result);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        return {
+            view: result.slice(0, 16),
+            projection: result.slice(16, 32),
+            translate: result.slice(32, 35),
+            is3D: result[35],
+            mapWH: result.slice(36, 38),
+            screenWH: result.slice(38, 40),
+            z_level: result[40],
+        };
+    }
+}
+
+export const CameraUniformBlockTotemCache = Object.freeze({
+    get: (globe: Globe) => {
+        return globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+    },
+    release: (globe: Globe) => {
+        return globeProgramCache.releaseProgram(globe, CameraUniformBlockTotem);
+    },
+});

package/programs/totems/canvas-webglobe-info.ts

@@ -0,0 +1,156 @@
+import { globeProgramCache } from "../programcache";
+import { Globe } from "../../types"
+
+export const WebGlobeInfoUniformBlockString = `
+layout(std140) uniform WebGlobeInfo {
+    vec2 canvas_resolution;
+    vec2 mouse_radian_long_lat;
+    vec2 mouse_pixel_xy;
+    float north_angle;
+    float world_tilt;
+    float earth_distance;
+}; 
+`;
+
+
+export default class CanvasWebGlobeInfo {
+    id: string;
+    description: string;
+    gl: WebGL2RenderingContext | null;
+    globe: Globe | null;
+    ubo: WebGLBuffer | null;
+    traslateFloat32: Float32Array;
+    mapWHFloat32: Float32Array;
+
+    constructor() {
+        this.id = "CanvasWebGlobeInfo";
+        this.description =
+            `Sets a uniform block and provides buffer for it. The following is the glsl uniform block:` +
+            WebGlobeInfoUniformBlockString;
+        this.gl = null;
+        this.globe = null;
+        this.ubo = null;
+        this.traslateFloat32 = new Float32Array(3);
+        this.mapWHFloat32 = new Float32Array(2);
+    }
+
+    init(globe: Globe, gl: WebGL2RenderingContext) {
+        this.gl = gl;
+        this.globe = globe;
+        this.ubo = this._createUBO();
+        this.traslateFloat32 = new Float32Array(3);
+        this.mapWHFloat32 = new Float32Array(2);
+        this.setGeometry();
+        this.resize();
+    }
+
+    _createUBO(): WebGLBuffer | null {
+        if (!this.gl) return null;
+        const gl = this.gl;
+        const ubo = gl.createBuffer();
+        if (!ubo) return null;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferData(gl.UNIFORM_BUFFER, 164, gl.STREAM_DRAW);
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        return ubo;
+    }
+
+    resize() {
+        if (!this.gl || !this.globe || !this.ubo) return;
+        const { gl, globe, ubo } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferSubData(
+            gl.UNIFORM_BUFFER,
+            152,
+            new Float32Array([globe.api_ScrW(), globe.api_ScrH()])
+        );
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+    setGeometry() {
+        if (!this.gl || !this.globe || !this.ubo) return;
+        const { gl, globe, ubo } = this;
+        const is3D = globe.api_GetCurrentGeometry() === 0 ? 1 : 0;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 140, new Float32Array([is3D]));
+    }
+
+    draw3D(projection: Float32Array, modelView: Float32Array, translate: { x: number; y: number; z: number }) {
+        if (!this.gl || !this.globe || !this.ubo) return;
+        const { gl, traslateFloat32, ubo, mapWHFloat32, globe } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        {
+            // view, projection, translate
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, modelView);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 64, projection);
+            traslateFloat32.set([translate.x, translate.y, translate.z], 0);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 128, traslateFloat32);
+        }
+        {
+            // zoom level
+            gl.bufferSubData(
+                gl.UNIFORM_BUFFER,
+                160,
+                new Float32Array([globe.api_GetCurrentLODWithDecimal()])
+            );
+        }
+        {
+            // mapWH
+            if (globe.api_GetCurrentGeometry() === 1) {
+                const { width, height } = globe.api_GetCurrentWorldWH();
+                mapWHFloat32.set([width, height]);
+                gl.bufferSubData(gl.UNIFORM_BUFFER, 144, mapWHFloat32);
+            }
+        }
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+    getUBO(): WebGLBuffer | null {
+        return this.ubo;
+    }
+
+    bind(bindingPoint: number) {
+        if (!this.gl || !this.ubo) return;
+        const { gl, ubo } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, ubo);
+    }
+
+    unbind(bindingPoint: number) {
+        if (!this.gl) return;
+        const { gl } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
+    }
+
+    free() {
+        if (!this.gl || !this.ubo) return;
+        const { gl, ubo } = this;
+        gl.deleteBuffer(ubo);
+    }
+
+    readBuffer() {
+        if (!this.gl || !this.ubo) return null;
+        const result = new Float32Array(41);
+        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, this.ubo);
+        this.gl.getBufferSubData(this.gl.UNIFORM_BUFFER, 0, result);
+        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, null);
+        return {
+            view: result.slice(0, 16),
+            projection: result.slice(16, 32),
+            translate: result.slice(32, 35),
+            is3D: result[35],
+            mapWH: result.slice(36, 38),
+            screenWH: result.slice(38, 40),
+            z_level: result[40],
+        };
+    }
+}
+
+export const CanvasWebGlobeInfoCache = Object.freeze({
+    get: (globe: Globe) => {
+        return globeProgramCache.getProgram(globe, CanvasWebGlobeInfo);
+    },
+    release: (globe: Globe) => {
+        return globeProgramCache.releaseProgram(globe, CanvasWebGlobeInfo);
+    },
+});

package/programs/totems/globe-changes.ts

@@ -0,0 +1,79 @@
+import { Globe, GlobeLookInfo, GlobeChanges } from "../../types";
+
+
+
+export class GlobeChangeObserver {
+    private globe: Globe;
+    private lastLOD: number = -1;
+    private lastGeometry: 0 | 1;
+    private lastWorldWH: { width: number; height: number } = { width: 0, height: 0 };
+    private lastLook: GlobeLookInfo = {
+        CenterLong: 0,
+        CenterLat: 0,
+        Distance: 0,
+        Tilt: 0,
+        NorthAng: 0
+    };
+    private lastElevationCoefficient: number = NaN;
+    changes: GlobeChanges = {
+        geometry: false,
+        look: false,
+        lod: false,
+        lod2DWheel: false,
+        elevationScale: false,
+        screenMoved: false
+    }
+
+    constructor(globe: Globe) {
+        this.globe = globe;
+        this.lastGeometry = globe.api_GetCurrentGeometry();
+        this.lastLook = globe.api_GetCurrentLookInfo();
+        this.lastLOD = globe.api_GetCurrentLODWithDecimal();
+        this.lastWorldWH = globe.api_GetCurrentWorldWH();
+        this.lastElevationCoefficient = globe.api_GetZScale()
+    }
+
+
+    checkChanges(): void {
+        const globe = this.globe;
+        const currentGeometry = globe.api_GetCurrentGeometry();
+        const currentLook = globe.api_GetCurrentLookInfo();
+        const currentLOD = globe.api_GetCurrentLODWithDecimal();
+        const currentWorldWH = globe.api_GetCurrentWorldWH();
+
+        this.changes.geometry = (this.lastGeometry !== currentGeometry);
+        this.changes.look = (
+            this.lastLook.CenterLong !== currentLook.CenterLong ||
+            this.lastLook.CenterLat !== currentLook.CenterLat ||
+            this.lastLook.Distance !== currentLook.Distance ||
+            this.lastLook.Tilt !== currentLook.Tilt ||
+            this.lastLook.NorthAng !== currentLook.NorthAng ||
+            this.lastWorldWH.width !== currentWorldWH.width ||
+            this.lastWorldWH.height !== currentWorldWH.height
+        );
+
+        this.changes.lod = (this.lastLOD !== currentLOD);
+        this.changes.lod2DWheel = (!globe.api_IsScreenMoving() && this.changes.lod);
+
+        // Update last known states
+        this.lastGeometry = currentGeometry;
+        this.lastLook = currentLook;
+        this.lastLOD = currentLOD;
+        this.lastWorldWH = currentWorldWH;
+
+        this.changes.screenMoved = (this.changes.geometry ||
+            this.changes.look ||
+            this.changes.lod ||
+            this.changes.lod2DWheel);
+
+    }
+
+
+    getChanges(): GlobeChanges {
+        return this.changes;
+    }
+
+}
+
+
+