@zappar/zappar-cv 0.3.15 → 0.3.16

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.3.16] - 2021-02-07
+
+### Fixed
+
+- External WebGL state is preserved during `process_gl` calls
+
 ## [0.3.15] - 2021-01-25
 
 ### Fixed

package/README.md

@@ -18,8 +18,8 @@ npm i @zappar/zappar-cv
 
 You can use our CDN from within your HTML:
 ```
-<script src="https://libs.zappar.com/zappar-cv/0.3.15/zappar-cv.js"></script>
+<script src="https://libs.zappar.com/zappar-cv/0.3.16/zappar-cv.js"></script>
 ```
 
 Or you can download and host our standalone JavaScript bundle:
-[https://libs.zappar.com/zappar-cv/0.3.15/zappar-cv.zip](https://libs.zappar.com/zappar-cv/0.3.15/zappar-cv.zip)
+[https://libs.zappar.com/zappar-cv/0.3.16/zappar-cv.zip](https://libs.zappar.com/zappar-cv/0.3.16/zappar-cv.zip)

package/lib/gl-state-manager.d.ts

@@ -0,0 +1,9 @@
+export declare class GLStateManager {
+    private _gl;
+    static get(gl: WebGLRenderingContext): GLStateManager;
+    private _viewports;
+    private _underlyingViewport;
+    private constructor();
+    push(): void;
+    pop(): void;
+}

package/lib/gl-state-manager.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GLStateManager = void 0;
+const managers = new Map();
+class GLStateManager {
+    constructor(_gl) {
+        this._gl = _gl;
+        this._viewports = [];
+        this._underlyingViewport = this._gl.viewport;
+        this._viewports.push(this._gl.getParameter(this._gl.VIEWPORT));
+        this._gl.viewport = (x, y, width, height) => {
+            this._viewports[this._viewports.length - 1] = [x, y, width, height];
+            this._underlyingViewport.call(this._gl, x, y, width, height);
+        };
+    }
+    static get(gl) {
+        let existing = managers.get(gl);
+        if (!existing) {
+            existing = new GLStateManager(gl);
+            managers.set(gl, existing);
+        }
+        return existing;
+    }
+    push() {
+        this._viewports.push(this._viewports[this._viewports.length - 1]);
+    }
+    pop() {
+        const current = this._viewports.pop();
+        const prev = this._viewports[this._viewports.length - 1];
+        if (!current || current[0] !== prev[0] || current[1] !== prev[1] || current[2] !== prev[2] || current[3] !== prev[3]) {
+            this._underlyingViewport.call(this._gl, prev[0], prev[1], prev[2], prev[3]);
+        }
+    }
+}
+exports.GLStateManager = GLStateManager;

package/lib/html-element-source.js

@@ -7,6 +7,7 @@ const profile_1 = require("./profile");
 const shader_1 = require("./shader");
 const gl_matrix_1 = require("gl-matrix");
 const loglevel_1 = require("./loglevel");
+const gl_state_manager_1 = require("./gl-state-manager");
 let latest = 1;
 let byId = new Map();
 class HTMLElementSource extends source_1.Source {
@@ -128,12 +129,25 @@ class HTMLElementSource extends source_1.Source {
         let gl = pipeline.glContext;
         if (!gl)
             return;
+        const glStateManager = gl_state_manager_1.GLStateManager.get(gl);
+        glStateManager.push();
+        const reenableScissorTest = gl.isEnabled(gl.SCISSOR_TEST);
+        const reenableDepthTest = gl.isEnabled(gl.DEPTH_TEST);
+        const reenableBlend = gl.isEnabled(gl.BLEND);
+        const reenableCullFace = gl.isEnabled(gl.CULL_FACE);
+        const previousActiveTexture = gl.getParameter(gl.ACTIVE_TEXTURE);
+        const previousUnpackFlip = gl.getParameter(gl.UNPACK_FLIP_Y_WEBGL);
+        const previousProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.activeTexture(gl.TEXTURE0);
+        const previousBoundTexture = gl.getParameter(gl.TEXTURE_BINDING_2D);
+        const previousBoundFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+        const previousBoundArrayBuffer = gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+        const previousBoundElementArrayBuffer = gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
         gl.disable(gl.SCISSOR_TEST);
         gl.disable(gl.DEPTH_TEST);
         gl.disable(gl.BLEND);
         gl.disable(gl.CULL_FACE);
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-        gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, this._currentVideoTexture);
         const level = 0;
         const internalFormat = gl.RGBA;
@@ -157,13 +171,29 @@ class HTMLElementSource extends source_1.Source {
         let vbo = this._getVertexBuffer(gl);
         let ibo = this._getIndexBuffer(gl);
         let shader = this._getGreyscaleShader(gl);
-        //     // Rendering to the greyscale conversion buffer - bind the framebuffer
+        const previousVertexAttribSize = gl.getVertexAttrib(shader.aVertexPositionLoc, gl.VERTEX_ATTRIB_ARRAY_SIZE);
+        const previousVertexAttribType = gl.getVertexAttrib(shader.aVertexPositionLoc, gl.VERTEX_ATTRIB_ARRAY_TYPE);
+        const previousVertexAttribNormalized = gl.getVertexAttrib(shader.aVertexPositionLoc, gl.VERTEX_ATTRIB_ARRAY_NORMALIZED);
+        const previousVertexAttribStride = gl.getVertexAttrib(shader.aVertexPositionLoc, gl.VERTEX_ATTRIB_ARRAY_STRIDE);
+        const previousVertexAttribOffset = gl.getVertexAttribOffset(shader.aVertexPositionLoc, gl.VERTEX_ATTRIB_ARRAY_POINTER);
+        const previousVertexAttribEnabled = gl.getVertexAttrib(shader.aVertexPositionLoc, gl.VERTEX_ATTRIB_ARRAY_ENABLED);
+        const previousVertexAttribBufferBinding = gl.getVertexAttrib(shader.aVertexPositionLoc, gl.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING);
+        const previousTextureAttribSize = gl.getVertexAttrib(shader.aTextureCoordLoc, gl.VERTEX_ATTRIB_ARRAY_SIZE);
+        const previousTextureAttribType = gl.getVertexAttrib(shader.aTextureCoordLoc, gl.VERTEX_ATTRIB_ARRAY_TYPE);
+        const previousTextureAttribNormalized = gl.getVertexAttrib(shader.aTextureCoordLoc, gl.VERTEX_ATTRIB_ARRAY_NORMALIZED);
+        const previousTextureAttribStride = gl.getVertexAttrib(shader.aTextureCoordLoc, gl.VERTEX_ATTRIB_ARRAY_STRIDE);
+        const previousTextureAttribOffset = gl.getVertexAttribOffset(shader.aTextureCoordLoc, gl.VERTEX_ATTRIB_ARRAY_POINTER);
+        const previousTextureAttribEnabled = gl.getVertexAttrib(shader.aTextureCoordLoc, gl.VERTEX_ATTRIB_ARRAY_ENABLED);
+        const previousTextureAttribBufferBinding = gl.getVertexAttrib(shader.aTextureCoordLoc, gl.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING);
+        // Rendering to the greyscale conversion buffer - bind the framebuffer
         gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+        // const t_before = performance.now();
+        // const viewport = gl.getParameter(gl.VIEWPORT);
+        // console.log("Viewport time", performance.now() - t_before, viewport);
         gl.viewport(0, 0, this._framebufferWidth, this._framebufferHeight);
-        //     // We'll be replacing all the content - clear is a good hint for this on mobile
-        gl.clearColor(0.0, 0.0, 0.0, 1.0);
+        // We'll be replacing all the content - clear is a good hint for this on mobile
         gl.clear(gl.COLOR_BUFFER_BIT);
-        //     // Set up bindings for vertex attributes
+        // Set up bindings for vertex attributes
         gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
         gl.vertexAttribPointer(shader.aVertexPositionLoc, 2, gl.FLOAT, false, 4 * 4, 0);
         gl.enableVertexAttribArray(shader.aVertexPositionLoc);
@@ -183,14 +213,30 @@ class HTMLElementSource extends source_1.Source {
         gl.uniform1i(shader.uSamplerLoc, 0);
         // Do the drawing...
         gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
-        // Disable attribute arrays
-        gl.disableVertexAttribArray(shader.aVertexPositionLoc);
-        gl.disableVertexAttribArray(shader.aTextureCoordLoc);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-        gl.useProgram(null);
-        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, previousVertexAttribBufferBinding);
+        gl.vertexAttribPointer(shader.aVertexPositionLoc, previousVertexAttribSize, previousVertexAttribType, previousVertexAttribNormalized, previousVertexAttribStride, previousVertexAttribOffset);
+        gl.bindBuffer(gl.ARRAY_BUFFER, previousTextureAttribBufferBinding);
+        gl.vertexAttribPointer(shader.aTextureCoordLoc, previousTextureAttribSize, previousTextureAttribType, previousTextureAttribNormalized, previousTextureAttribStride, previousTextureAttribOffset);
+        gl.bindBuffer(gl.ARRAY_BUFFER, previousBoundArrayBuffer);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, previousBoundElementArrayBuffer);
+        if (!previousVertexAttribEnabled)
+            gl.disableVertexAttribArray(shader.aVertexPositionLoc);
+        if (!previousTextureAttribEnabled)
+            gl.disableVertexAttribArray(shader.aTextureCoordLoc);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, previousBoundFramebuffer);
+        gl.useProgram(previousProgram);
+        gl.bindTexture(gl.TEXTURE_2D, previousBoundTexture);
+        gl.activeTexture(previousActiveTexture);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, previousUnpackFlip);
+        if (reenableBlend)
+            gl.enable(gl.BLEND);
+        if (reenableCullFace)
+            gl.enable(gl.CULL_FACE);
+        if (reenableDepthTest)
+            gl.enable(gl.DEPTH_TEST);
+        if (reenableScissorTest)
+            gl.enable(gl.SCISSOR_TEST);
+        glStateManager.pop();
     }
     _readFrame(p, gl) {
         if (!this._currentVideoTexture)
@@ -208,10 +254,11 @@ class HTMLElementSource extends source_1.Source {
             pixels = new ArrayBuffer(greySize);
         }
         let pixelsView = new Uint8Array(pixels);
+        const previousBoundFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
         let framebuffer = this._getFramebuffer(gl, profile_1.profile.dataWidth / 4, profile_1.profile.dataHeight);
         gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
         gl.readPixels(0, 0, this._framebufferWidth, this._framebufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixelsView);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, previousBoundFramebuffer);
         return {
             uvTransform: this._cameraUvTransform,
             data: pixels,

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.3.15";
+export declare const VERSION = "0.3.16";

package/lib/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = "0.3.15";
+exports.VERSION = "0.3.16";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zappar/zappar-cv",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "description": "Zappar's core computer vision library, supporting image, face and world tracking.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",