@zappar/zappar-cv 3.0.1-alpha.13 → 3.0.1-alpha.14

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/3.0.1-alpha.13/zappar-cv.js"></script>
+<script src="https://libs.zappar.com/zappar-cv/3.0.1-alpha.14/zappar-cv.js"></script>
 ```
 
 Or you can download and host our standalone JavaScript bundle:
-[https://libs.zappar.com/zappar-cv/3.0.1-alpha.13/zappar-cv.zip](https://libs.zappar.com/zappar-cv/3.0.1-alpha.13/zappar-cv.zip)
+[https://libs.zappar.com/zappar-cv/3.0.1-alpha.14/zappar-cv.zip](https://libs.zappar.com/zappar-cv/3.0.1-alpha.14/zappar-cv.zip)

package/lib/drawaxis.d.ts

@@ -0,0 +1,2 @@
+export declare function disposeDrawPlane(): void;
+export declare function drawAxis(gl: WebGLRenderingContext, projectionMatrix: Float32Array, cameraMatrix: Float32Array, targetMatrix: Float32Array): void;

package/lib/drawaxis.js

@@ -0,0 +1,172 @@
+import { compileShader, linkProgram } from "./shader";
+let shader;
+let vbo;
+let uvbo;
+let texturesByUrl = {};
+export function disposeDrawPlane() {
+    shader = undefined;
+    vbo = undefined;
+    uvbo = undefined;
+    texturesByUrl = {};
+}
+function generate(gl) {
+    if (vbo)
+        return vbo;
+    vbo = gl.createBuffer();
+    if (!vbo)
+        throw new Error("Unable to create buffer object");
+    let coords = [
+        0, 0, 0, 1, 0, 0,
+        0, 0, 0, 0, 1, 0,
+        0, 0, 0, 0, 0, 1
+    ];
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    return vbo;
+}
+function generateColor(gl) {
+    if (uvbo)
+        return uvbo;
+    uvbo = gl.createBuffer();
+    if (!uvbo)
+        throw new Error("Unable to create buffer object");
+    let coords = [
+        1, 0, 0, 1, 1, 0, 0, 1,
+        0, 1, 0, 1, 0, 1, 0, 1,
+        0, 0, 1, 1, 0, 0, 1, 1
+    ];
+    gl.bindBuffer(gl.ARRAY_BUFFER, uvbo);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    return uvbo;
+}
+export function drawAxis(gl, projectionMatrix, cameraMatrix, targetMatrix) {
+    let shader = getShader(gl);
+    let v = generate(gl);
+    let uvbo = generateColor(gl);
+    gl.disable(gl.DEPTH_TEST);
+    gl.useProgram(shader.prog);
+    gl.uniformMatrix4fv(shader.unif_proj, false, projectionMatrix);
+    gl.uniformMatrix4fv(shader.unif_camera, false, cameraMatrix);
+    gl.uniformMatrix4fv(shader.unif_matrix, false, targetMatrix);
+    gl.bindBuffer(gl.ARRAY_BUFFER, v);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.vertexAttribPointer(shader.attr_position, 3, gl.FLOAT, false, 3 * 4, 0);
+    gl.enableVertexAttribArray(shader.attr_position);
+    gl.bindBuffer(gl.ARRAY_BUFFER, uvbo);
+    gl.vertexAttribPointer(shader.attr_color, 4, gl.FLOAT, false, 4 * 4, 0);
+    gl.enableVertexAttribArray(shader.attr_color);
+    gl.lineWidth(10);
+    gl.drawArrays(gl.LINES, 0, 6);
+    gl.disableVertexAttribArray(shader.attr_position);
+    gl.disableVertexAttribArray(shader.attr_color);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+}
+function generateLocalMatrix() {
+    let position = [0, 0, -5];
+    return new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, position[0], position[1], position[2], 1]);
+}
+let vertexShaderSrc = `
+#ifndef GL_ES
+#define highp
+#define mediump
+#define lowp
+#endif
+
+uniform mat4 projMatrix;
+uniform mat4 cameraMatrix;
+uniform mat4 modelViewMatrix;
+attribute vec4 position;
+attribute vec4 color;
+
+varying highp vec4 vColor;
+
+void main()
+{
+    gl_Position = projMatrix * cameraMatrix * modelViewMatrix * position;
+    vColor = color;
+}`;
+let fragmentShaderSrc = `
+#define highp mediump
+#ifdef GL_ES
+    // define default precision for float, vec, mat.
+    precision highp float;
+#else
+#define highp
+#define mediump
+#define lowp
+#endif
+
+varying highp vec4 vColor;
+
+void main()
+{
+    gl_FragColor = vColor;
+}`;
+function getShader(gl) {
+    if (shader)
+        return shader;
+    let prog = gl.createProgram();
+    if (!prog)
+        throw new Error("Unable to create program");
+    let vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexShaderSrc);
+    let fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSrc);
+    gl.attachShader(prog, vertexShader);
+    gl.attachShader(prog, fragmentShader);
+    linkProgram(gl, prog);
+    let unif_proj = gl.getUniformLocation(prog, "projMatrix");
+    if (!unif_proj)
+        throw new Error("Unable to get uniform location projMatrix");
+    let unif_matrix = gl.getUniformLocation(prog, "modelViewMatrix");
+    if (!unif_matrix)
+        throw new Error("Unable to get uniform location modelViewMatrix");
+    let unif_camera = gl.getUniformLocation(prog, "cameraMatrix");
+    if (!unif_camera)
+        throw new Error("Unable to get uniform location cameraMatrix");
+    shader = {
+        prog,
+        unif_matrix,
+        unif_proj,
+        unif_camera,
+        attr_position: gl.getAttribLocation(prog, "position"),
+        attr_color: gl.getAttribLocation(prog, "color")
+    };
+    return shader;
+}
+function loadTexture(gl, url) {
+    if (texturesByUrl[url])
+        return texturesByUrl[url];
+    let texture = gl.createTexture();
+    if (!texture)
+        throw new Error("Unable to create texture");
+    texturesByUrl[url] = texture;
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    // Because images have to be download over the internet
+    // they might take a moment until they are ready.
+    // Until then put a single pixel in the texture so we can
+    // use it immediately. When the image has finished downloading
+    // we'll update the texture with the contents of the image.
+    const level = 0;
+    const internalFormat = gl.RGBA;
+    const width = 1;
+    const height = 1;
+    const border = 0;
+    const srcFormat = gl.RGBA;
+    const srcType = gl.UNSIGNED_BYTE;
+    const pixel = new Uint8Array([0, 0, 255, 255]); // opaque blue
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, pixel);
+    const image = new Image();
+    image.onload = function () {
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    };
+    image.src = url;
+    return texture;
+}

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.0.1-alpha.13";
+export declare const VERSION = "3.0.1-alpha.14";

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = "3.0.1-alpha.13";
+export const VERSION = "3.0.1-alpha.14";

package/package.json

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