@zappar/zappar-cv 0.3.16 → 0.3.17

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.3.17] - 2022-07-21
+
+### Fixed
+
+- Preserve `TextureAttribDivisor`, `VertexAttribDivisor` and `STENCIL_TEST` WebGL state.
+
 ## [0.3.16] - 2021-02-07
 
 ### 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.16/zappar-cv.js"></script>
+<script src="https://libs.zappar.com/zappar-cv/0.3.17/zappar-cv.js"></script>
 ```
 
 Or you can download and host our standalone JavaScript bundle:
-[https://libs.zappar.com/zappar-cv/0.3.16/zappar-cv.zip](https://libs.zappar.com/zappar-cv/0.3.16/zappar-cv.zip)
+[https://libs.zappar.com/zappar-cv/0.3.17/zappar-cv.zip](https://libs.zappar.com/zappar-cv/0.3.17/zappar-cv.zip)

package/lib/html-element-source.d.ts

@@ -30,6 +30,8 @@ export declare class HTMLElementSource extends Source {
     start(): void;
     getFrame(currentlyProcessing: boolean): CameraFrameInfo | undefined;
     private _processFrame;
+    private _instancedArraysExtension;
+    private _instancedArraysExtensionSet;
     private _uploadFrame;
     private _readFrame;
     private _updateTransforms;

package/lib/html-element-source.js

@@ -28,6 +28,7 @@ class HTMLElementSource extends source_1.Source {
         this._framebufferHeight = 0;
         this._framebufferId = null;
         this._renderTexture = null;
+        this._instancedArraysExtensionSet = false;
         let video = this._video;
         if (this._video instanceof HTMLVideoElement) {
             video.addEventListener("loadedmetadata", () => { this._hadFrames = true; });
@@ -56,6 +57,7 @@ class HTMLElementSource extends source_1.Source {
         this._vertexBuffer = undefined;
         this._indexBuffer = undefined;
         this._greyscaleShader = undefined;
+        this._instancedArraysExtensionSet = false;
     }
     destroy() {
         let p = pipeline_1.Pipeline.get(this._pipeline);
@@ -126,15 +128,20 @@ class HTMLElementSource extends source_1.Source {
         let pipeline = pipeline_1.Pipeline.get(this._pipeline);
         if (!pipeline)
             return;
-        let gl = pipeline.glContext;
+        let { glContext: gl, isWebGL2 } = pipeline;
         if (!gl)
             return;
+        if (!isWebGL2 && !this._instancedArraysExtensionSet) {
+            this._instancedArraysExtension = gl.getExtension("ANGLE_instanced_arrays");
+            this._instancedArraysExtensionSet = true;
+        }
         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 reenableStencilTest = gl.isEnabled(gl.STENCIL_TEST);
         const previousActiveTexture = gl.getParameter(gl.ACTIVE_TEXTURE);
         const previousUnpackFlip = gl.getParameter(gl.UNPACK_FLIP_Y_WEBGL);
         const previousProgram = gl.getParameter(gl.CURRENT_PROGRAM);
@@ -147,6 +154,7 @@ class HTMLElementSource extends source_1.Source {
         gl.disable(gl.DEPTH_TEST);
         gl.disable(gl.BLEND);
         gl.disable(gl.CULL_FACE);
+        gl.disable(gl.STENCIL_TEST);
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
         gl.bindTexture(gl.TEXTURE_2D, this._currentVideoTexture);
         const level = 0;
@@ -185,6 +193,20 @@ class HTMLElementSource extends source_1.Source {
         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);
+        let previousVertexAttribDivisor = 0;
+        let previousTextureAttribDivisor = 0;
+        if (isWebGL2) {
+            previousVertexAttribDivisor = gl.getVertexAttrib(shader.aVertexPositionLoc, gl.VERTEX_ATTRIB_ARRAY_DIVISOR);
+            previousTextureAttribDivisor = gl.getVertexAttrib(shader.aTextureCoordLoc, gl.VERTEX_ATTRIB_ARRAY_DIVISOR);
+            gl.vertexAttribDivisor(shader.aVertexPositionLoc, 0);
+            gl.vertexAttribDivisor(shader.aTextureCoordLoc, 0);
+        }
+        else if (this._instancedArraysExtension) {
+            previousVertexAttribDivisor = gl.getVertexAttrib(shader.aVertexPositionLoc, this._instancedArraysExtension.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE);
+            previousTextureAttribDivisor = gl.getVertexAttrib(shader.aTextureCoordLoc, this._instancedArraysExtension.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE);
+            this._instancedArraysExtension.vertexAttribDivisorANGLE(shader.aVertexPositionLoc, 0);
+            this._instancedArraysExtension.vertexAttribDivisorANGLE(shader.aTextureCoordLoc, 0);
+        }
         // Rendering to the greyscale conversion buffer - bind the framebuffer
         gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
         // const t_before = performance.now();
@@ -223,6 +245,14 @@ class HTMLElementSource extends source_1.Source {
             gl.disableVertexAttribArray(shader.aVertexPositionLoc);
         if (!previousTextureAttribEnabled)
             gl.disableVertexAttribArray(shader.aTextureCoordLoc);
+        if (isWebGL2) {
+            gl.vertexAttribDivisor(shader.aVertexPositionLoc, previousVertexAttribDivisor);
+            gl.vertexAttribDivisor(shader.aTextureCoordLoc, previousTextureAttribDivisor);
+        }
+        else if (this._instancedArraysExtension) {
+            this._instancedArraysExtension.vertexAttribDivisorANGLE(shader.aVertexPositionLoc, previousVertexAttribDivisor);
+            this._instancedArraysExtension.vertexAttribDivisorANGLE(shader.aTextureCoordLoc, previousTextureAttribDivisor);
+        }
         gl.bindFramebuffer(gl.FRAMEBUFFER, previousBoundFramebuffer);
         gl.useProgram(previousProgram);
         gl.bindTexture(gl.TEXTURE_2D, previousBoundTexture);

package/lib/pipeline.d.ts

@@ -15,15 +15,17 @@ export declare class Pipeline {
     private cameraTokens;
     private nextCameraToken;
     private tokensInFlight;
-    glContext: WebGLRenderingContext | undefined;
+    glContext: WebGLRenderingContext | WebGL2RenderingContext | undefined;
     private videoTextures;
     cameraPixelArrays: ArrayBuffer[];
     private _cameraDraw;
     private _faceDraw;
     private _faceProjectDraw;
+    private _isWebGL2;
     onGLContextReset: Event;
     static create(client: zappar_cwrap, mgr: MsgManager): zappar_pipeline_t;
     static get(p: zappar_pipeline_t): Pipeline | undefined;
+    get isWebGL2(): boolean;
     private constructor();
     frameUpdate(client: zappar_client): void;
     cameraTokenReturn(tokenId: number, pixelArray: ArrayBuffer): void;

package/lib/pipeline.js

@@ -21,6 +21,7 @@ class Pipeline {
         this.tokensInFlight = 0;
         this.videoTextures = [];
         this.cameraPixelArrays = [];
+        this._isWebGL2 = false;
         this.onGLContextReset = new event_1.Event();
     }
     static create(client, mgr) {
@@ -31,6 +32,9 @@ class Pipeline {
     static get(p) {
         return byId.get(p);
     }
+    get isWebGL2() {
+        return this._isWebGL2;
+    }
     frameUpdate(client) {
         for (let msg of this.pendingMessages) {
             client.processMessages(msg);
@@ -106,6 +110,7 @@ class Pipeline {
     glContextSet(gl, texturePool) {
         this.glContextLost();
         this.glContext = gl;
+        this._isWebGL2 = gl.getParameter(gl.VERSION).indexOf("WebGL 2") >= 0;
         texturePool = texturePool || [];
         for (let i = 0; i < 4; i++) {
             let tex = texturePool[i] || gl.createTexture();

package/lib/version.d.ts

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

package/lib/version.js

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

package/package.json

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