@openglobus/og 0.22.2 → 0.23.0

package/lib/js/webgl/Framebuffer.js

@@ -1,5 +1,26 @@
 import { BaseFramebuffer } from "./BaseFramebuffer";
 import { ImageCanvas } from "../ImageCanvas";
+const TypeArrayConstructor = {
+    "UNSIGNED_BYTE": Uint8Array,
+    "FLOAT": Float32Array
+};
+export function clientWaitAsync(gl, sync, flags) {
+    return new Promise((resolve, reject) => {
+        function check() {
+            const res = gl.clientWaitSync(sync, flags, 0);
+            if (res == gl.WAIT_FAILED) {
+                reject();
+            }
+            else if (res == gl.TIMEOUT_EXPIRED) {
+                requestAnimationFrame(check);
+            }
+            else {
+                resolve();
+            }
+        }
+        check();
+    });
+}
 /**
  * Class represents framebuffer.
  * @class
@@ -9,24 +30,75 @@ import { ImageCanvas } from "../ImageCanvas";
 export class Framebuffer extends BaseFramebuffer {
     constructor(handler, options = {}) {
         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, i) => {
-                let res = a.toUpperCase();
-                if (res === "COLOR_ATTACHMENT") {
-                    return `${res}${i.toString()}`;
+        this.readPixelBuffersAsync = () => {
+            const gl = this.handler.gl;
+            if (this._skipFrame)
+                return;
+            this._skipFrame = true;
+            let w = this.width, h = this.height;
+            let pb = this.pixelBuffers;
+            this.activate();
+            for (let i = 0; i < pb.length; i++) {
+                let pbi = pb[i];
+                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pbi.buffer);
+                gl.bufferData(gl.PIXEL_PACK_BUFFER, pbi.data.byteLength, gl.STREAM_READ);
+                gl.readBuffer(pbi.glAttachment);
+                gl.readPixels(0, 0, w, h, gl.RGBA, pbi.glType, 0);
+                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+            }
+            this.deactivate();
+            const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+            gl.flush();
+            clientWaitAsync(gl, sync, 0).then(() => {
+                this._skipFrame = false;
+                gl.deleteSync(sync);
+                for (let i = 0; i < pb.length; i++) {
+                    let pbi = pb[i];
+                    if (pbi.data) {
+                        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pbi.buffer);
+                        gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, pbi.data);
+                    }
                 }
-                return res;
+                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
             });
-        }
-        else {
-            this._attachmentArr = [options.attachment || "COLOR_ATTACHMENT0"];
-        }
+        };
+        this._targets = Framebuffer.createTargets(options.targets);
+        this._size = this._targets.length;
         this._renderbufferTarget = options.renderbufferTarget != undefined ? options.renderbufferTarget : "DEPTH_ATTACHMENT";
         this.textures = options.textures || new Array(this._size);
+        this.pixelBuffers = [];
+        this._skipFrame = false;
+    }
+    static createTargets(targets) {
+        let attInd = 0;
+        let pbInd = 0;
+        if (targets) {
+            return targets.map((ti) => {
+                let attachment = ti.attachment || "COLOR_ATTACHMENT";
+                if (attachment === "COLOR_ATTACHMENT") {
+                    attachment = `COLOR_ATTACHMENT${attInd++}`;
+                }
+                let type = ti.type || "UNSIGNED_BYTE";
+                return {
+                    internalFormat: ti.internalFormat || "RGBA",
+                    format: ti.format || "RGBA",
+                    type,
+                    attachment,
+                    filter: ti.filter || "NEAREST",
+                    pixelBufferIndex: ti.readAsync ? pbInd++ : -1,
+                    TypeArrayConstructor: TypeArrayConstructor[type]
+                };
+            });
+        }
+        return [{
+                internalFormat: "RGBA",
+                format: "RGBA",
+                type: "UNSIGNED_BYTE",
+                attachment: "COLOR_ATTACHMENT0",
+                filter: "NEAREST",
+                pixelBufferIndex: -1,
+                TypeArrayConstructor: TypeArrayConstructor.UNSIGNED_BYTE
+            }];
     }
     // static blit(sourceFramebuffer: Framebuffer, destFramebuffer: Framebuffer, glAttachment: number, glMask: number, glFilter: number) {
     //     let gl = sourceFramebuffer.handler.gl!;
@@ -51,6 +123,11 @@ export class Framebuffer extends BaseFramebuffer {
             gl.deleteTexture(this.textures[i]);
         }
         this.textures = new Array(this._size);
+        for (let i = 0; i < this.pixelBuffers.length; i++) {
+            this.pixelBuffers[i].data = null;
+            gl.deleteBuffer(this.pixelBuffers[i].buffer);
+        }
+        this.pixelBuffers = [];
         gl.deleteFramebuffer(this._fbo);
         gl.deleteRenderbuffer(this._depthRenderbuffer);
         this._depthRenderbuffer = null;
@@ -68,21 +145,23 @@ export class Framebuffer extends BaseFramebuffer {
             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[this._attachmentArr[i]];
-                if (ti) {
-                    this.bindOutputTexture(ti, att_i);
-                    this.textures[i] = ti;
-                }
-                if (this._attachmentArr[i] != "DEPTH_ATTACHMENT") {
-                    attachmentArr.push(att_i);
-                }
+        let attachmentArr = [];
+        for (let i = 0; i < this._targets.length; i++) {
+            let tr = this._targets[i];
+            let ti = this.textures[i] || this.handler.createEmptyTexture2DExt(this._width, this._height, tr.filter, tr.internalFormat, tr.format, tr.type);
+            let att_i = gl[tr.attachment];
+            if (ti) {
+                this.bindOutputTexture(ti, att_i);
+                this.textures[i] = ti;
+            }
+            if (tr.attachment !== "DEPTH_ATTACHMENT") {
+                attachmentArr.push(att_i);
+            }
+            if (tr.pixelBufferIndex !== -1) {
+                this._createPixelBuffer(tr);
             }
-            gl.drawBuffers && gl.drawBuffers(attachmentArr);
         }
+        gl.drawBuffers && gl.drawBuffers(attachmentArr);
         if (this._useDepth) {
             this._depthRenderbuffer = gl.createRenderbuffer();
             gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthRenderbuffer);
@@ -92,6 +171,34 @@ export class Framebuffer extends BaseFramebuffer {
         }
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     }
+    getPixelBufferData(targetIndex) {
+        let pbInd = this._targets[targetIndex].pixelBufferIndex;
+        return pbInd !== -1 ? this.pixelBuffers[pbInd].data : null;
+    }
+    _createPixelBuffer(target) {
+        let gl = this.handler.gl;
+        let pbInd = target.pixelBufferIndex;
+        let pb = this.pixelBuffers[pbInd];
+        if (!pb) {
+            pb = this.pixelBuffers[pbInd] = {
+                buffer: null,
+                data: null,
+                glType: -1,
+                glAttachment: -1
+            };
+        }
+        let size = this.width * this.height * 4;
+        // clear current pixel buffer
+        pb.data = null;
+        pb.data = new target.TypeArrayConstructor(size);
+        //gl.deleteBuffer(pb.buffer);
+        pb.buffer = gl.createBuffer();
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pb.buffer);
+        gl.bufferData(gl.PIXEL_PACK_BUFFER, size, gl.STREAM_READ);
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+        pb.glType = gl[target.type];
+        pb.glAttachment = gl[target.attachment];
+    }
     /**
      * Bind buffer texture.
      * @public
@@ -118,7 +225,7 @@ export class Framebuffer extends BaseFramebuffer {
         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[this._typeArr[index]], res);
+        gl.readPixels(nx * this._width, ny * this._height, w, h, gl.RGBA, gl[this._targets[index].type], res);
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     }
     /**
@@ -131,7 +238,7 @@ export class Framebuffer extends BaseFramebuffer {
         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[this._typeArr[attachmentIndex]], res);
+        gl.readPixels(0, 0, this._width, this._height, gl.RGBA, gl[this._targets[attachmentIndex].type], res);
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     }
     /**

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

@@ -82,6 +82,7 @@ declare class Handler {
      * @type {number}
      */
     deltaTime: number;
+    prevDeltaTime: number;
     /**
      * WebGL rendering canvas element.
      * @public

package/lib/js/webgl/Handler.js

@@ -33,7 +33,16 @@ class Handler {
         this.drawFrame = () => {
             /** Calculating frame time */
             let now = window.performance.now();
-            this.deltaTime = now - this._lastAnimationFrameTime;
+            let prevDeltaTime = this.deltaTime;
+            //Make some filter:)
+            this.deltaTime = (now - this._lastAnimationFrameTime + this.prevDeltaTime) * 0.5;
+            if (this.deltaTime > 3) {
+                this.deltaTime = 3;
+            }
+            else if (this.deltaTime < 1) {
+                this.deltaTime = 1;
+            }
+            this.prevDeltaTime = prevDeltaTime;
             this._lastAnimationFrameTime = now;
             this.defaultClock.tick(this.deltaTime);
             for (let i = 0; i < this._clocks.length; i++) {
@@ -57,6 +66,7 @@ class Handler {
         this._throttledDrawFrame = this.drawFrame;
         this.defaultClock = new Clock();
         this._clocks = [];
+        this.prevDeltaTime = 0;
         this.deltaTime = 0;
         this.canvas = null;
         this.gl = null;

package/lib/js/webgl/Program.js

@@ -222,10 +222,6 @@ class Program {
                     this.drawElementsInstanced = ext.drawElementsInstancedANGLE.bind(ext);
                 }
             }
-            // this.drawElementsInstanced =
-            //     gl.drawElementsInstanced ?
-            //         gl.drawElementsInstanced.bind(gl) :
-            //         gl.getExtension('ANGLE_instanced_arrays').drawElementsInstancedANGLE.bind(gl.getExtension('ANGLE_instanced_arrays'));
         }
         if (!this.vertexAttribDivisor) {
             if (gl.vertexAttribDivisor) {
@@ -237,10 +233,6 @@ class Program {
                     this.vertexAttribDivisor = ext.vertexAttribDivisorANGLE.bind(ext);
                 }
             }
-            // this.vertexAttribDivisor =
-            //     gl.vertexAttribDivisor ?
-            //         gl.vertexAttribDivisor.bind(gl) :
-            //         gl.getExtension('ANGLE_instanced_arrays').vertexAttribDivisorANGLE.bind(gl.getExtension('ANGLE_instanced_arrays'));
         }
         if (!gl.getProgramParameter(this._p, gl.LINK_STATUS)) {
             cons.logErr(`Shader program "${this.name}": initialization failed. ${gl.getProgramInfoLog(this._p)}.`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.22.2",
+  "version": "0.23.0",
   "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"
@@ -20,7 +20,8 @@
     "test_watch": "jest --env=jsdom --watch",
     "lint": "eslint src/",
     "gen_js": "tsc --build tsconfig.json --declaration",
-    "font": "node ./fonts/index.js"
+    "font": "node ./fonts/index.js",
+    "dev_serve": "npm-run-all --parallel --continue-on-error --race dev serve"
   },
   "repository": {
     "type": "git",
@@ -55,6 +56,7 @@
     "jsdoc-babel": "^0.5.0",
     "lint-staged": "^15.2.10",
     "local-web-server": "^5.4.0",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.45",
     "prettier": "^3.3.3",
     "rollup": "^4.22.4",