@zappar/zappar-cv 3.0.1-alpha.8 → 3.0.1-beta.0

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

package/lib/additional.d.ts

@@ -1,5 +1,5 @@
 import { CameraFrameData } from "./camera-frame-data";
-import { zappar_face_mesh_t, zappar_face_tracker_t, zappar_pipeline_t, zappar_image_tracker_t, zappar_sequence_source_t } from "./gen/zappar";
+import { zappar_face_mesh_t, zappar_face_tracker_t, zappar_world_tracker_t, zappar_pipeline_t, zappar_image_tracker_t, zappar_sequence_source_t } from "./gen/zappar";
 export declare type zappar_html_element_source_t = number & {
     _: 'zappar_html_element_source_t';
 };
@@ -15,6 +15,7 @@ export interface Additional {
     pipeline_camera_frame_data_height(pipeline: zappar_pipeline_t): number;
     draw_plane(gl: WebGLRenderingContext, projectionMatrix: Float32Array, cameraMatrix: Float32Array, targetMatrix: Float32Array, texture: string): void;
     draw_grid(gl: WebGLRenderingContext, projectionMatrix: Float32Array, cameraMatrix: Float32Array, targetMatrix: Float32Array): void;
+    draw_axis(gl: WebGLRenderingContext, projectionMatrix: Float32Array, cameraMatrix: Float32Array, targetMatrix: Float32Array): void;
     image_tracker_target_image(o: zappar_image_tracker_t, indx: number): HTMLImageElement | undefined;
     face_mesh_load_default(o: zappar_face_mesh_t): Promise<void>;
     face_mesh_load_default_face(o: zappar_face_mesh_t, fillMouth: boolean, fillEyeL: boolean, fillEyeR: boolean): Promise<void>;
@@ -30,4 +31,5 @@ export interface Additional {
     browser_incompatible_ui: () => void;
     sequence_source_time_set: (o: zappar_sequence_source_t, ms: number) => void;
     cookies_permitted: (p: boolean) => void;
+    world_tracker_points_data_matrix(wt: zappar_world_tracker_t, screenWidth: number, screenHeight: number, mirror: boolean): Float32Array;
 }

package/lib/deserializer.d.ts

@@ -1,4 +1,4 @@
-import { barcode_format_t, face_landmark_name_t, instant_world_tracker_transform_orientation_t, log_level_t } from "./gen/zappar-native";
+import { barcode_format_t, face_landmark_name_t, instant_world_tracker_transform_orientation_t, transform_orientation_t, log_level_t, plane_orientation_t, anchor_status_t } from "./gen/zappar-native";
 interface Message {
     int: () => number;
     float: () => number;
@@ -8,6 +8,7 @@ interface Message {
     type: () => number;
     matrix4x4: () => Float32Array;
     matrix3x3: () => Float32Array;
+    ucharArray: () => Uint8Array;
     floatArray: () => Float32Array;
     identityCoefficients: () => Float32Array;
     expressionCoefficients: () => Float32Array;
@@ -16,6 +17,9 @@ interface Message {
     barcodeFormat: () => barcode_format_t;
     faceLandmarkName: () => face_landmark_name_t;
     instantTrackerTransformOrientation: () => instant_world_tracker_transform_orientation_t;
+    transformOrientation: () => transform_orientation_t;
+    planeOrientation: () => plane_orientation_t;
+    anchorStatus: () => anchor_status_t;
     logLevel: () => log_level_t;
 }
 export declare class MessageDeserializer {

package/lib/deserializer.js

@@ -40,6 +40,15 @@ export class MessageDeserializer {
                     this._startOffset++;
                 return ret.buffer;
             },
+            ucharArray: () => {
+                let len = this._i32View[this._startOffset++];
+                let ret = new Uint8Array(len);
+                ret.set(this._u8View.subarray(this._startOffset * 4, this._startOffset * 4 + len));
+                this._startOffset += (ret.byteLength >> 2);
+                if ((ret.byteLength & 3) !== 0)
+                    this._startOffset++;
+                return ret;
+            },
             floatArray: () => {
                 let len = this._i32View[this._startOffset++];
                 let ret = new Float32Array(len);
@@ -85,6 +94,9 @@ export class MessageDeserializer {
             barcodeFormat: () => this._i32View[this._startOffset++],
             faceLandmarkName: () => this._i32View[this._startOffset++],
             instantTrackerTransformOrientation: () => this._i32View[this._startOffset++],
+            transformOrientation: () => this._i32View[this._startOffset++],
+            planeOrientation: () => this._i32View[this._startOffset++],
+            anchorStatus: () => this._i32View[this._startOffset++],
             logLevel: () => this._i32View[this._startOffset++],
         };
     }

package/lib/direct.js

@@ -25,6 +25,6 @@ export function launchWorker(wasm) {
             for (let msg of msgs)
                 messageManager.postIncomingMessage(msg.msg);
         });
-        launchWorkerServer(wasm, module, false);
+        launchWorkerServer(wasm, module, 0);
     });
 }

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,137 @@
+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, 0.1, 0, 0,
+        0, 0, 0, 0, 0.1, 0,
+        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(2);
+    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;
+}

package/lib/drawgrid.js

@@ -2,6 +2,7 @@ import { compileShader, linkProgram } from "./shader";
 let shader;
 let vbo;
 let uvbo;
+const gridSize = 10;
 export function disposeDrawGrid() {
     shader = undefined;
     vbo = undefined;
@@ -19,6 +20,7 @@ function generate(gl) {
         0.5, 0, 0.5,
         0.5, 0, -0.5
     ];
+    coords = coords.map(entry => entry * gridSize);
     gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), gl.STATIC_DRAW);
     gl.bindBuffer(gl.ARRAY_BUFFER, null);
@@ -36,6 +38,7 @@ function generateUVBO(gl) {
         1, 1,
         1, 0
     ];
+    coords = coords.map(entry => entry * gridSize);
     gl.bindBuffer(gl.ARRAY_BUFFER, uvbo);
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), gl.STATIC_DRAW);
     gl.bindBuffer(gl.ARRAY_BUFFER, null);
@@ -97,8 +100,8 @@ uniform sampler2D skinSampler;
 
 void main()
 {
-    vec2 pixels = 100.0 * vTextureCoord + 0.5;
-    if ((int(mod(pixels.x, 10.0)) == 0) || (int(mod(pixels.y, 10.0)) == 0)) {
+    vec2 pixels = 500.0 * vTextureCoord + 0.5;
+    if ((int(mod(pixels.x, 50.0)) == 0) || (int(mod(pixels.y, 50.0)) == 0)) {
         gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
     } else {
         discard;

package/lib/drawpoints.d.ts

@@ -8,3 +8,4 @@ export declare class PointsDraw {
     drawPoints(screenWidth: number, screenHeight: number, dataWidth: number, dataHeight: number, points: Float32Array, mirror: boolean, color: [number, number, number], pointSize: number): void;
     private _getCameraShader;
 }
+export declare function getPointsDataMatrix(frameWidth: number, frameHeight: number, screenWidth: number, screenHeight: number, mirror: boolean): Float32Array;

package/lib/drawpoints.js

@@ -48,7 +48,7 @@ export class PointsDraw {
         gl.useProgram(shader.prog);
         gl.uniform3f(shader.unif_color, color[0], color[1], color[2]);
         gl.uniform1f(shader.unif_pointSize, pointSize);
-        gl.uniformMatrix4fv(shader.unif_skinTexTransform, false, getMatrix(dataWidth, dataHeight, screenWidth, screenHeight, mirror));
+        gl.uniformMatrix4fv(shader.unif_skinTexTransform, false, getPointsDataMatrix(dataWidth, dataHeight, screenWidth, screenHeight, mirror));
         gl.bindTexture(gl.TEXTURE_2D, null);
         gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
         gl.vertexAttribPointer(shader.attr_position, 2, gl.FLOAT, false, 0, 0);
@@ -157,7 +157,7 @@ function cameraRotationForScreenOrientation() {
     }
     return 0;
 }
-function getMatrix(frameWidth, frameHeight, screenWidth, screenHeight, mirror) {
+export function getPointsDataMatrix(frameWidth, frameHeight, screenWidth, screenHeight, mirror) {
     let ret = mat4.create();
     let trans = mat4.create();
     // Translate to centre UV coords

package/lib/drawpointswithtype.d.ts

@@ -0,0 +1,13 @@
+export declare class PointsWithTypeDraw {
+    private _gl;
+    private _vbo;
+    private _typebo;
+    private _shader;
+    constructor(_gl: WebGL2RenderingContext);
+    dispose(): void;
+    private _generate;
+    private _generateTypes;
+    drawPoints(screenWidth: number, screenHeight: number, dataWidth: number, dataHeight: number, points: Float32Array, mirror: boolean, type: Uint8Array, pointSize: number): void;
+    private _getCameraShader;
+}
+export declare function getPointsDataMatrix(frameWidth: number, frameHeight: number, screenWidth: number, screenHeight: number, mirror: boolean): Float32Array;

package/lib/drawpointswithtype.js

@@ -0,0 +1,190 @@
+import { profile } from "./profile";
+import { compileShader, linkProgram } from "./shader";
+import { mat4 } from "gl-matrix";
+let identity = mat4.create();
+export class PointsWithTypeDraw {
+    constructor(_gl) {
+        this._gl = _gl;
+    }
+    dispose() {
+        if (this._vbo)
+            this._gl.deleteBuffer(this._vbo);
+        this._vbo = undefined;
+        if (this._shader)
+            this._gl.deleteProgram(this._shader.prog);
+        this._shader = undefined;
+    }
+    _generate(gl, points) {
+        if (!this._vbo)
+            this._vbo = gl.createBuffer();
+        if (!this._vbo)
+            throw new Error("Unable to create buffer object");
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._vbo);
+        gl.bufferData(gl.ARRAY_BUFFER, points, gl.DYNAMIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return this._vbo;
+    }
+    _generateTypes(gl, points) {
+        if (!this._typebo)
+            this._typebo = gl.createBuffer();
+        if (!this._typebo)
+            throw new Error("Unable to create buffer object");
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._typebo);
+        gl.bufferData(gl.ARRAY_BUFFER, points, gl.DYNAMIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return this._typebo;
+    }
+    drawPoints(screenWidth, screenHeight, dataWidth, dataHeight, points, mirror, type, pointSize) {
+        if (points.length === 0)
+            return; // points = new Float32Array([0, 1, 0, 1]);
+        let gl = this._gl;
+        const reenableDepthTest = gl.isEnabled(gl.DEPTH_TEST);
+        const reenableScissorTest = gl.isEnabled(gl.SCISSOR_TEST);
+        const reenableCullFace = gl.isEnabled(gl.CULL_FACE);
+        const reenableStencilTest = gl.isEnabled(gl.STENCIL_TEST);
+        const reenableBlend = gl.isEnabled(gl.BLEND);
+        const previousBoundTexture = gl.getParameter(gl.TEXTURE_BINDING_2D);
+        const previousBoundFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+        const previousProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        const previousActiveTexture = gl.getParameter(gl.ACTIVE_TEXTURE);
+        gl.disable(gl.DEPTH_TEST);
+        gl.disable(gl.SCISSOR_TEST);
+        gl.disable(gl.CULL_FACE);
+        gl.disable(gl.STENCIL_TEST);
+        gl.disable(gl.BLEND);
+        let shader = this._getCameraShader(gl);
+        let vbo = this._generate(gl, points);
+        let typebo = this._generateTypes(gl, type);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.useProgram(shader.prog);
+        gl.uniform1f(shader.unif_pointSize, pointSize);
+        gl.uniformMatrix4fv(shader.unif_skinTexTransform, false, getPointsDataMatrix(dataWidth, dataHeight, screenWidth, screenHeight, mirror));
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+        gl.vertexAttribPointer(shader.attr_position, 2, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(shader.attr_position);
+        gl.bindBuffer(gl.ARRAY_BUFFER, typebo);
+        gl.vertexAttribIPointer(shader.attr_type, 1, gl.UNSIGNED_BYTE, 0, 0);
+        gl.enableVertexAttribArray(shader.attr_type);
+        gl.drawArrays(gl.POINTS, 0, points.length / 2);
+        gl.disableVertexAttribArray(shader.attr_type);
+        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+        gl.disableVertexAttribArray(shader.attr_position);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, previousBoundFramebuffer);
+        gl.useProgram(previousProgram);
+        gl.bindTexture(gl.TEXTURE_2D, previousBoundTexture);
+        gl.activeTexture(previousActiveTexture);
+        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);
+        if (reenableStencilTest)
+            gl.enable(gl.STENCIL_TEST);
+    }
+    _getCameraShader(gl) {
+        if (this._shader)
+            return this._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_skinTexTransform = gl.getUniformLocation(prog, "skinTexTransform");
+        if (!unif_skinTexTransform)
+            throw new Error("Unable to get uniform location skinTexTransform");
+        let unif_pointSize = gl.getUniformLocation(prog, "pointSize");
+        if (!unif_pointSize)
+            throw new Error("Unable to get uniform location pointSize");
+        this._shader = {
+            prog,
+            unif_skinTexTransform,
+            unif_pointSize,
+            attr_position: gl.getAttribLocation(prog, "pos"),
+            attr_type: gl.getAttribLocation(prog, "aType"),
+        };
+        return this._shader;
+    }
+}
+let vertexShaderSrc = `#version 300 es
+
+in vec2 pos;
+in uint aType;
+uniform mat4 skinTexTransform;
+uniform float pointSize;
+
+out vec4 vColor;
+
+void main()
+{
+    gl_Position = skinTexTransform * vec4(pos, 0.0, 1.0);
+    vColor = vec4(1.0, 0.0, 0.0, 1.0);
+    if (aType == 1u) {
+        vColor = vec4(1.0, 0.7, 0.0, 1.0);
+    } else if (aType >= 4u) {
+        vColor = vec4(0.0, 0.0, 1.0, 1.0);
+    } else if (aType > 1u) {
+        vColor = vec4(0.0, 1.0, 0.0, 1.0);
+    }
+    gl_PointSize = pointSize;
+}`;
+let fragmentShaderSrc = `#version 300 es
+precision highp float;
+
+in vec4 vColor;
+out vec4 outColor;
+
+void main()
+{
+    outColor = vColor;
+}`;
+function cameraRotationForScreenOrientation() {
+    if (window.screen.orientation && !profile.forceWindowOrientation) {
+        switch (window.screen.orientation.type) {
+            case "portrait-primary":
+                return 270;
+            case "landscape-secondary":
+                return 180;
+            case "portrait-secondary":
+                return 90;
+            default:
+                return 0;
+        }
+    }
+    else if (window.orientation !== undefined) {
+        switch (window.orientation) {
+            case 0: return 270;
+            case 90: return 0;
+            case 180: return 90;
+            case -90: return 180;
+        }
+    }
+    return 0;
+}
+export function getPointsDataMatrix(frameWidth, frameHeight, screenWidth, screenHeight, mirror) {
+    let ret = mat4.create();
+    let trans = mat4.create();
+    // Translate to centre UV coords
+    mat4.fromTranslation(trans, [-0.5 * frameWidth, -0.5 * frameHeight, 0]);
+    mat4.multiply(ret, trans, ret);
+    mat4.fromScaling(trans, [2 / frameWidth, 2 / -frameHeight, 1]);
+    mat4.multiply(ret, trans, ret);
+    if (mirror) {
+        mat4.fromScaling(trans, [-1, 1, 1]);
+        mat4.multiply(ret, trans, ret);
+    }
+    let screenAspect = screenWidth > screenHeight ? (screenWidth / screenHeight) : (screenHeight / screenWidth);
+    let frameAspect = frameWidth / frameHeight;
+    mat4.fromScaling(trans, [1, screenAspect / frameAspect, 1]);
+    mat4.multiply(ret, trans, ret);
+    // Apply rotation back into ZCV's landscape space
+    mat4.fromRotation(trans, cameraRotationForScreenOrientation() * Math.PI / 180.0, [0, 0, 1]);
+    mat4.multiply(ret, trans, ret);
+    return ret;
+}

package/lib/drawpolygon.d.ts

@@ -0,0 +1,5 @@
+export declare class PolygonDraw {
+    private _vbo;
+    private _generate;
+    drawPolygon(gl: WebGLRenderingContext, projectionMatrix: Float32Array, cameraMatrix: Float32Array, targetMatrix: Float32Array, points: Float32Array): void;
+}

package/lib/drawpolygon.js

@@ -0,0 +1,94 @@
+import { compileShader, linkProgram } from "./shader";
+let shader;
+export class PolygonDraw {
+    _generate(gl, points) {
+        if (!this._vbo) {
+            this._vbo = gl.createBuffer();
+        }
+        if (!this._vbo)
+            throw new Error("Unable to create buffer object");
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._vbo);
+        gl.bufferData(gl.ARRAY_BUFFER, points, gl.DYNAMIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return this._vbo;
+    }
+    drawPolygon(gl, projectionMatrix, cameraMatrix, targetMatrix, points) {
+        let shader = getShader(gl);
+        let v = this._generate(gl, points);
+        gl.disable(gl.DEPTH_TEST);
+        gl.disable(gl.SCISSOR_TEST);
+        gl.disable(gl.CULL_FACE);
+        gl.disable(gl.STENCIL_TEST);
+        gl.disable(gl.BLEND);
+        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.vertexAttribPointer(shader.attr_position, 2, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(shader.attr_position);
+        gl.drawArrays(gl.LINE_LOOP, 0, points.length / 2);
+        gl.disableVertexAttribArray(shader.attr_position);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+}
+let vertexShaderSrc = `
+#ifndef GL_ES
+#define highp
+#define mediump
+#define lowp
+#endif
+
+uniform mat4 projMatrix;
+uniform mat4 cameraMatrix;
+uniform mat4 modelViewMatrix;
+attribute vec2 position;
+
+void main()
+{
+    gl_Position = projMatrix * cameraMatrix * modelViewMatrix * vec4(position.x, 0.0, position.y, 1.0);
+}`;
+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
+
+void main()
+{
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+}`;
+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"),
+    };
+    return shader;
+}