@openglobus/og 0.17.1 → 0.18.0

package/src/utils/units.ts

@@ -0,0 +1,78 @@
+export const ELL = 0;
+export const MSL = 1;
+export const GND = 2;
+
+export const heightMode: Record<string, number> = {
+    "ell": ELL,
+    "msl": MSL,
+    "gnd": GND
+};
+
+const KM_to_M = 1000.0;
+const M_to_KM = 1.0 / KM_to_M;
+const FT_to_M = 0.3048;
+const M_to_FT = 1.0 / FT_to_M;
+const MS_to_KMH = 3.6;
+const KMH_to_MS = 1.0 / MS_to_KMH;
+const MS_to_FTS = 3.28084;
+const FT_to_KM = FT_to_M * M_to_KM;
+const KM_to_FT = 1.0 / FT_to_KM;
+
+export const m = 0;
+export const km = 1;
+export const ft = 2;
+export const s = 3;
+export const h = 4;
+export const ms = 5;
+export const kmh = 6;
+export const fts = 7;
+
+const DEFAULT_NAN = "--";
+
+const _abbr: string[] = ["m", "km", "ft", "s", "h", "m/s", "km/h", "ft/s"];
+
+export const _tenth = [0, 2, 0, 0, 0, 0, 0, 0];
+
+
+let _convFn: ((v: number) => number)[][] = [];
+
+_convFn[m] = [];
+_convFn[m][m] = (v: number): number => v;
+_convFn[m][km] = (v: number): number => v * M_to_KM;
+_convFn[m][ft] = (v: number): number => v * M_to_FT;
+
+_convFn[ft] = [];
+_convFn[ft][m] = (v: number): number => v * FT_to_M;
+_convFn[ft][km] = (v: number): number => v * FT_to_KM;
+_convFn[ft][ft] = (v: number): number => v;
+
+_convFn[km] = [];
+_convFn[km][m] = (v: number): number => v * KM_to_M;
+_convFn[km][km] = (v: number): number => v;
+_convFn[km][ft] = (v: number): number => v * KM_to_FT;
+
+_convFn[ms] = [];
+_convFn[ms][ms] = (v: number): number => v;
+_convFn[ms][kmh] = (v: number): number => v * MS_to_KMH;
+_convFn[ms][fts] = (v: number): number => v * MS_to_FTS;
+
+_convFn[kmh] = [];
+_convFn[kmh][ms] = (v: number): number => v * KMH_to_MS;
+_convFn[kmh][kmh] = (v: number): number => v;
+
+//_convFn[kmh][fts] = (v) => v * KMH_to_FTS;
+
+export function convert(from: number, to: number, val: number): number {
+    return _convFn[from][to](val);
+}
+
+export function convertExt(isNotNaN: boolean, unitFrom: number, unitTo: number, val: number, fixed?: number): string {
+    if (isNotNaN) {
+        return convert(unitFrom, unitTo, val).toFixed(fixed || _tenth[unitTo]);
+    }
+    return DEFAULT_NAN;
+}
+
+export function toString(u: number) {
+    return _abbr[u];
+}

package/src/webgl/BaseFramebuffer.ts

@@ -0,0 +1,125 @@
+import {Handler} from "./Handler";
+
+export interface IBaseFramebufferParams {
+    internalFormat?: string | string[];
+    width?: number;
+    height?: number;
+    useDepth?: boolean;
+    depthComponent?: string;
+    size?: number;
+    filter?: string;
+}
+
+export class BaseFramebuffer {
+    public handler: Handler;
+    public _fbo: WebGLFramebuffer | null;
+    protected _depthRenderbuffer: WebGLRenderbuffer | null;
+    public _width: number;
+    public _height: number;
+    protected _depthComponent: string;
+    protected _size: number;
+    protected _active: boolean;
+    protected _useDepth: boolean;
+    protected _filter: string;
+
+    constructor(handler: Handler, options: IBaseFramebufferParams = {}) {
+        this.handler = handler;
+        this._fbo = null;
+        this._width = options.width || handler.canvas!.width;
+        this._height = options.height || handler.canvas!.height;
+        this._depthComponent = options.depthComponent != undefined ? options.depthComponent : "DEPTH_COMPONENT16";
+        this._useDepth = options.useDepth != undefined ? options.useDepth : true;
+        this._active = false;
+        this._size = options.size || 1;
+        this._depthRenderbuffer = null;
+        this._filter = options.filter || "NEAREST";
+    }
+
+    public get width(): number {
+        return this._width;
+    }
+
+    public get height(): number {
+        return this._height;
+    }
+
+    /**
+     * Sets framebuffer viewport size.
+     * @public
+     * @param {number} width - Framebuffer width.
+     * @param {number} height - Framebuffer height.
+     * @param {boolean} [forceDestroy] -
+     */
+    public setSize(width: number, height: number, forceDestroy: boolean = false) {
+        this._width = width;
+        this._height = height;
+
+        if (this._active) {
+            this.handler.gl!.viewport(0, 0, this._width, this._height);
+        }
+
+        if (this._useDepth || forceDestroy) {
+            this.destroy();
+            this.init();
+        }
+    }
+
+    public init() {
+    }
+
+    public destroy() {
+    }
+
+    /**
+     * Returns framebuffer completed.
+     * @public
+     * @returns {boolean} -
+     */
+    public isComplete(): boolean {
+        let gl = this.handler.gl!;
+        return gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
+    }
+
+    public checkStatus(): number {
+        let gl = this.handler.gl!;
+        return gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+    }
+
+    /**
+     * Activate framebuffer frame to draw.
+     * @public
+     * @returns {Framebuffer} Returns Current framebuffer.
+     */
+    public activate() {
+        let gl = this.handler.gl!;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
+        gl.viewport(0, 0, this._width, this._height);
+        this._active = true;
+
+        let c = this.handler.framebufferStack.current().data;
+        c && (c._active = false);
+        this.handler.framebufferStack.push(this);
+        return this;
+    }
+
+    /**
+     * Deactivate framebuffer frame.
+     * @public
+     */
+    public deactivate() {
+        let h = this.handler,
+            gl = h.gl!;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null!);
+        this._active = false;
+
+        let f = this.handler.framebufferStack.popPrev();
+
+        if (f) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, f._fbo);
+            gl.viewport(0, 0, f._width, f._height);
+        } else {
+            gl.viewport(0, 0, h.canvas!.width, h.canvas!.height);
+        }
+    }
+}

package/src/webgl/Framebuffer.ts

@@ -0,0 +1,206 @@
+import {BaseFramebuffer, IBaseFramebufferParams} from "./BaseFramebuffer";
+import {ImageCanvas} from "../ImageCanvas";
+import {Handler} from "./Handler";
+
+export interface IFrameBufferParams extends IBaseFramebufferParams {
+    isBare?: boolean;
+    format?: string | string[];
+    type?: string | string[];
+    attachment?: string | string[];
+    renderbufferTarget?: string;
+    textures?: WebGLTexture[];
+}
+
+/**
+ * Class represents framebuffer.
+ * @class
+ * @param {Handler} handler - WebGL handler.
+ * @param {IFrameBufferParams} [options] - Framebuffer options:
+ */
+export class Framebuffer extends BaseFramebuffer {
+
+    protected _isBare: boolean;
+
+    protected _internalFormatArr: string[];
+
+    protected _formatArr: string[];
+
+    protected _typeArr: string[];
+
+    protected _attachmentArr: string[];
+
+    protected _renderbufferTarget: string;
+
+    /**
+     * Framebuffer texture.
+     * @public
+     * @type {number}
+     */
+    public textures: WebGLTexture[];
+
+    constructor(handler: Handler, options: IFrameBufferParams = {}) {
+
+        super(handler, options);
+
+        this._isBare = options.isBare || false;
+
+        this._internalFormatArr = options.internalFormat instanceof Array ? options.internalFormat : [options.internalFormat || "RGBA"];
+
+        this._formatArr = options.format instanceof Array ? options.format : [options.format || "RGBA"];
+
+        this._typeArr = options.type instanceof Array ? options.type : [options.type || "UNSIGNED_BYTE"];
+
+        if (options.attachment instanceof Array) {
+            this._attachmentArr = options.attachment.map((a: string, i: number) => {
+                let res = a.toUpperCase();
+                if (res === "COLOR_ATTACHMENT") {
+                    return `${res}${i.toString()}`;
+                }
+                return res;
+            })
+        } else {
+            this._attachmentArr = [options.attachment as string || "COLOR_ATTACHMENT0"];
+        }
+
+        this._renderbufferTarget = options.renderbufferTarget != undefined ? options.renderbufferTarget : "DEPTH_ATTACHMENT";
+
+        this.textures = options.textures || new Array(this._size);
+    }
+
+    // static blit(sourceFramebuffer: Framebuffer, destFramebuffer: Framebuffer, glAttachment: number, glMask: number, glFilter: number) {
+    //     let gl = sourceFramebuffer.handler.gl!;
+    //
+    //     gl.bindFramebuffer(gl.READ_FRAMEBUFFER, sourceFramebuffer._fbo);
+    //     gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, destFramebuffer._fbo);
+    //     gl.readBuffer(glAttachment);
+    //
+    //     gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
+    //
+    //     gl.blitFramebuffer(0, 0, sourceFramebuffer._width, sourceFramebuffer._height, 0, 0, destFramebuffer._width, destFramebuffer._height, glMask, glFilter);
+    //
+    //     gl.bindFramebuffer(gl.FRAMEBUFFER, null!);
+    //     gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null!);
+    //     gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null!);
+    // }
+
+    public override destroy() {
+        let gl = this.handler.gl;
+
+        if (!gl) return;
+
+        for (let i = 0; i < this.textures.length; i++) {
+            gl.deleteTexture(this.textures[i]);
+        }
+        this.textures = new Array(this._size);
+
+        gl.deleteFramebuffer(this._fbo);
+        gl.deleteRenderbuffer(this._depthRenderbuffer);
+
+        this._depthRenderbuffer = null;
+        this._fbo = null;
+
+        this._active = false;
+    }
+
+    /**
+     * Framebuffer initialization.
+     * @public
+     * @override
+     */
+    public override init() {
+        let gl = this.handler.gl;
+
+        if (!gl) return;
+
+        this._fbo = gl.createFramebuffer();
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
+
+        if (!this._isBare) {
+            let attachmentArr = [];
+            for (let i = 0; i < this.textures.length; i++) {
+                let ti = this.textures[i] || this.handler.createEmptyTexture2DExt(this._width, this._height, this._filter, this._internalFormatArr[i], this._formatArr[i], this._typeArr[i]);
+
+                let att_i = (gl as any)[this._attachmentArr[i]];
+
+                if (ti) {
+                    this.bindOutputTexture(ti, att_i);
+                    this.textures[i] = ti;
+                }
+
+                if (this._attachmentArr[i] != "DEPTH_ATTACHMENT") {
+                    attachmentArr.push(att_i);
+                }
+            }
+            gl.drawBuffers && gl.drawBuffers(attachmentArr);
+        }
+
+        if (this._useDepth) {
+            this._depthRenderbuffer = gl.createRenderbuffer();
+            gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthRenderbuffer);
+            gl.renderbufferStorage(gl.RENDERBUFFER, (gl as any)[this._depthComponent], this._width, this._height);
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, (gl as any)[this._renderbufferTarget], gl.RENDERBUFFER, this._depthRenderbuffer);
+            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+        }
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null!);
+    }
+
+    /**
+     * Bind buffer texture.
+     * @public
+     * @param {WebGLTexture} texture - Output texture.
+     * @param {number} [glAttachment=0] - color attachment index.
+     */
+    public bindOutputTexture(texture: WebGLTexture, glAttachment?: number) {
+        let gl = this.handler.gl!;
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, glAttachment || gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+        gl.bindTexture(gl.TEXTURE_2D, null!);
+    }
+
+    /**
+     * Gets pixel RGBA color from framebuffer by coordinates.
+     * @public
+     * @param {Uint8Array} res - Normalized x - coordinate.
+     * @param {number} nx - Normalized x - coordinate.
+     * @param {number} ny - Normalized y - coordinate.
+     * @param {number} [w=1] - Normalized width.
+     * @param {number} [h=1] - Normalized height.
+     * @param {number} [index=0] - color attachment index.
+     */
+    public readPixels(res: Uint8Array, nx: number, ny: number, index: number = 0, w: number = 1, h: number = 1) {
+        let gl = this.handler.gl!;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
+        gl.readBuffer && gl.readBuffer(gl.COLOR_ATTACHMENT0 + index || 0);
+        gl.readPixels(nx * this._width, ny * this._height, w, h, gl.RGBA, (gl as any)[this._typeArr[index]], res);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null!);
+    }
+
+    /**
+     * Reads all pixels(RGBA colors) from framebuffer.
+     * @public
+     * @param {Uint8Array} res - Result array.
+     * @param {number} [attachmentIndex=0] - color attachment index.
+     */
+    public readAllPixels(res: Uint8Array, attachmentIndex: number = 0) {
+        let gl = this.handler.gl!;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
+        gl.readBuffer && gl.readBuffer(gl.COLOR_ATTACHMENT0 + attachmentIndex);
+        gl.readPixels(0, 0, this._width, this._height, gl.RGBA, (gl as any)[this._typeArr[attachmentIndex]], res);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null!);
+    }
+
+    /**
+     * Gets JavaScript image that in the framebuffer.
+     * @public
+     * @returns {HTMLImageElement} -
+     */
+    public getImage(): HTMLImageElement {
+        let data = new Uint8Array(4 * this._width * this._height);
+        this.readAllPixels(data);
+        let imageCanvas = new ImageCanvas(this._width, this._height);
+        imageCanvas.setData(data);
+        return imageCanvas.getImage();
+    }
+}