@luxonis/depthai-viewer-common 3.7.5 → 3.8.0

package/dist/visualizer/panels/image/webgl-image-renderer.js

@@ -0,0 +1,729 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+import { readCanvasColorRgb } from "../../utils/use-theme-mode.js";
+const POSITION_DATA = new Float32Array([-1, 1, 1, 1, -1, -1, 1, -1]);
+const TEXTURE_COORD_DATA = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
+const PACKED_MODE_RGB = 0;
+const PACKED_MODE_BGR = 1;
+const PACKED_MODE_RGBA = 2;
+const PACKED_MODE_BGRA = 3;
+const PACKED_MODE_MONO = 4;
+const YUV422_MODE_UYVY = 0;
+const YUV422_MODE_YUYV = 1;
+const VERTEX_SHADER_SOURCE = `
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+varying vec2 v_texCoord;
+
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+  v_texCoord = a_texCoord;
+}
+`;
+const PACKED_FRAGMENT_SHADER_SOURCE = `
+precision mediump float;
+
+varying vec2 v_texCoord;
+uniform sampler2D u_texture;
+uniform vec2 u_textureScale;
+uniform float u_mode;
+
+void main() {
+  vec4 sampleColor = texture2D(u_texture, vec2(v_texCoord.x * u_textureScale.x, v_texCoord.y));
+  if (u_mode < 0.5) {
+    gl_FragColor = vec4(sampleColor.rgb, 1.0);
+    return;
+  }
+  if (u_mode < 1.5) {
+    gl_FragColor = vec4(sampleColor.b, sampleColor.g, sampleColor.r, 1.0);
+    return;
+  }
+  if (u_mode < 2.5) {
+    gl_FragColor = sampleColor;
+    return;
+  }
+  if (u_mode < 3.5) {
+    gl_FragColor = vec4(sampleColor.b, sampleColor.g, sampleColor.r, sampleColor.a);
+    return;
+  }
+  gl_FragColor = vec4(sampleColor.rrr, 1.0);
+}
+`;
+const YUV420_FRAGMENT_SHADER_SOURCE = `
+precision mediump float;
+
+varying vec2 v_texCoord;
+uniform sampler2D u_yTexture;
+uniform sampler2D u_uTexture;
+uniform sampler2D u_vTexture;
+uniform vec2 u_yScale;
+uniform vec2 u_uScale;
+uniform vec2 u_vScale;
+
+vec3 yuvToRgb(float y, float u, float v) {
+  float correctedY = max(y - 0.0625, 0.0);
+  float correctedU = u - 0.5;
+  float correctedV = v - 0.5;
+  return vec3(
+    clamp(correctedY + 1.5748 * correctedV, 0.0, 1.0),
+    clamp(correctedY - 0.1873 * correctedU - 0.4681 * correctedV, 0.0, 1.0),
+    clamp(correctedY + 1.8556 * correctedU, 0.0, 1.0)
+  );
+}
+
+void main() {
+  float y = texture2D(u_yTexture, v_texCoord * u_yScale).r;
+  float u = texture2D(u_uTexture, v_texCoord * u_uScale).r;
+  float v = texture2D(u_vTexture, v_texCoord * u_vScale).r;
+  gl_FragColor = vec4(yuvToRgb(y, u, v), 1.0);
+}
+`;
+const NV12_FRAGMENT_SHADER_SOURCE = `
+precision mediump float;
+
+varying vec2 v_texCoord;
+uniform sampler2D u_yTexture;
+uniform sampler2D u_uvTexture;
+uniform vec2 u_yScale;
+uniform vec2 u_uvScale;
+
+vec3 yuvToRgb(float y, float u, float v) {
+  float correctedY = max(y - 0.0625, 0.0);
+  float correctedU = u - 0.5;
+  float correctedV = v - 0.5;
+  return vec3(
+    clamp(correctedY + 1.5748 * correctedV, 0.0, 1.0),
+    clamp(correctedY - 0.1873 * correctedU - 0.4681 * correctedV, 0.0, 1.0),
+    clamp(correctedY + 1.8556 * correctedU, 0.0, 1.0)
+  );
+}
+
+void main() {
+  float y = texture2D(u_yTexture, v_texCoord * u_yScale).r;
+  vec4 uvSample = texture2D(u_uvTexture, v_texCoord * u_uvScale);
+  gl_FragColor = vec4(yuvToRgb(y, uvSample.r, uvSample.a), 1.0);
+}
+`;
+const YUV422_FRAGMENT_SHADER_SOURCE = `
+precision mediump float;
+
+varying vec2 v_texCoord;
+uniform sampler2D u_texture;
+uniform vec2 u_textureScale;
+uniform float u_visibleWidth;
+uniform float u_mode;
+
+vec3 yuvToRgb(float y, float u, float v) {
+  float correctedY = max(y - 0.0625, 0.0);
+  float correctedU = u - 0.5;
+  float correctedV = v - 0.5;
+  return vec3(
+    clamp(correctedY + 1.5748 * correctedV, 0.0, 1.0),
+    clamp(correctedY - 0.1873 * correctedU - 0.4681 * correctedV, 0.0, 1.0),
+    clamp(correctedY + 1.8556 * correctedU, 0.0, 1.0)
+  );
+}
+
+void main() {
+  vec4 packed = texture2D(u_texture, vec2(v_texCoord.x * u_textureScale.x, v_texCoord.y));
+  float isOddPixel = mod(floor(v_texCoord.x * u_visibleWidth), 2.0);
+  float y;
+  float u;
+  float v;
+
+  if (u_mode < 0.5) {
+    u = packed.r;
+    y = isOddPixel < 0.5 ? packed.g : packed.a;
+    v = packed.b;
+  } else {
+    y = isOddPixel < 0.5 ? packed.r : packed.b;
+    u = packed.g;
+    v = packed.a;
+  }
+
+  gl_FragColor = vec4(yuvToRgb(y, u, v), 1.0);
+}
+`;
+export function resolveWebGlImageRenderPlan(image) {
+    if (image.width <= 0 || image.height <= 0) {
+        return undefined;
+    }
+    switch (image.encoding) {
+        case "nv12":
+            return resolveNv12Plan(image);
+        case "yuv422":
+        case "uyvy":
+            return resolveYuv422Plan(image, "uyvy");
+        case "yuv422_yuy2":
+        case "yuyv":
+            return resolveYuv422Plan(image, "yuyv");
+        case "I420":
+        case "yuv420p":
+            return resolveI420Plan(image);
+        case "rgb8":
+            return resolvePackedPlan(image, "rgb", 3, "rgb");
+        case "bgr8i":
+            return resolvePackedPlan(image, "bgr", 3, "rgb");
+        case "rgba8":
+            return resolvePackedPlan(image, "rgba", 4, "rgba");
+        case "bgra8":
+            return resolvePackedPlan(image, "bgra", 4, "rgba");
+        case "mono8":
+        case "8UC1":
+            return resolvePackedPlan(image, "mono", 1, "luminance");
+        default:
+            return undefined;
+    }
+}
+export class WebGlImageRenderer {
+    #canvas;
+    #gl;
+    #positionBuffer;
+    #texCoordBuffer;
+    #packedProgram;
+    #yuvProgram;
+    #nv12Program;
+    #yuv422Program;
+    #primaryTexture;
+    #secondaryTexture;
+    #tertiaryTexture;
+    constructor(canvas) {
+        this.#canvas = canvas;
+        const gl = canvas.getContext("webgl", {
+            alpha: false,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            premultipliedAlpha: false,
+            preserveDrawingBuffer: false,
+        });
+        if (!gl) {
+            return;
+        }
+        this.#gl = gl;
+        gl.disable(gl.DEPTH_TEST);
+        gl.disable(gl.BLEND);
+        gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+        this.#positionBuffer = createStaticBuffer(gl, POSITION_DATA);
+        this.#texCoordBuffer = createStaticBuffer(gl, TEXTURE_COORD_DATA);
+    }
+    isAvailable() {
+        return this.#gl != undefined;
+    }
+    canRender(image) {
+        return this.isAvailable() && resolveWebGlImageRenderPlan(image) != undefined;
+    }
+    clear(width, height) {
+        const gl = this.#gl;
+        if (!gl) {
+            return;
+        }
+        this.#resizeCanvas(width, height);
+        gl.viewport(0, 0, width, height);
+        const [r, g, b] = readCanvasColorRgb();
+        gl.clearColor(r, g, b, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+    draw(image, width, height, rect) {
+        const gl = this.#gl;
+        const plan = resolveWebGlImageRenderPlan(image);
+        if (!gl || !plan) {
+            return false;
+        }
+        this.#resizeCanvas(width, height);
+        gl.viewport(0, 0, width, height);
+        const [r, g, b] = readCanvasColorRgb();
+        gl.clearColor(r, g, b, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        const viewportWidth = Math.max(Math.floor(rect.width), 1);
+        const viewportHeight = Math.max(Math.floor(rect.height), 1);
+        const viewportX = Math.floor(rect.x);
+        const viewportY = height - Math.floor(rect.y) - viewportHeight;
+        gl.viewport(viewportX, viewportY, viewportWidth, viewportHeight);
+        switch (plan.kind) {
+            case "packed":
+                this.#drawPackedImage(gl, image, plan);
+                return true;
+            case "nv12":
+                this.#drawNv12Image(gl, image, plan);
+                return true;
+            case "yuv422":
+                this.#drawYuv422Image(gl, image, plan);
+                return true;
+            case "i420":
+                this.#drawI420Image(gl, image, plan);
+                return true;
+        }
+    }
+    destroy() {
+        const gl = this.#gl;
+        if (!gl) {
+            return;
+        }
+        deleteTexture(gl, this.#primaryTexture);
+        deleteTexture(gl, this.#secondaryTexture);
+        deleteTexture(gl, this.#tertiaryTexture);
+        deleteProgram(gl, this.#packedProgram?.program);
+        deleteProgram(gl, this.#yuvProgram?.program);
+        deleteProgram(gl, this.#nv12Program?.program);
+        deleteProgram(gl, this.#yuv422Program?.program);
+        if (this.#positionBuffer) {
+            gl.deleteBuffer(this.#positionBuffer);
+        }
+        if (this.#texCoordBuffer) {
+            gl.deleteBuffer(this.#texCoordBuffer);
+        }
+        this.#primaryTexture = undefined;
+        this.#secondaryTexture = undefined;
+        this.#tertiaryTexture = undefined;
+        this.#packedProgram = undefined;
+        this.#yuvProgram = undefined;
+        this.#nv12Program = undefined;
+        this.#yuv422Program = undefined;
+        this.#positionBuffer = undefined;
+        this.#texCoordBuffer = undefined;
+        this.#gl = undefined;
+    }
+    #drawPackedImage(gl, image, plan) {
+        const program = this.#ensurePackedProgram(gl);
+        if (!program) {
+            return;
+        }
+        if (!this.#bindProgram(gl, program.program, program.positionLocation, program.texCoordLocation)) {
+            return;
+        }
+        this.#primaryTexture = uploadTexture(gl, this.#primaryTexture, plan.textureWidth, plan.textureHeight, resolveGlFormat(gl, plan.glFormat), image.data);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.#primaryTexture.texture);
+        gl.uniform1i(program.textureLocation, 0);
+        gl.uniform2f(program.textureScaleLocation, plan.textureScaleX, 1);
+        gl.uniform1f(program.modeLocation, packedModeToNumber(plan.mode));
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    }
+    #drawNv12Image(gl, image, plan) {
+        const program = this.#ensureNv12Program(gl);
+        if (!program) {
+            return;
+        }
+        const uvHeight = image.height >> 1;
+        const uvTextureWidth = plan.yStride >> 1;
+        const uvByteLength = plan.yStride * uvHeight;
+        const yPlaneByteLength = plan.yStride * image.height;
+        if (!this.#bindProgram(gl, program.program, program.positionLocation, program.texCoordLocation)) {
+            return;
+        }
+        this.#primaryTexture = uploadTexture(gl, this.#primaryTexture, plan.yStride, image.height, gl.LUMINANCE, image.data.subarray(0, yPlaneByteLength));
+        this.#secondaryTexture = uploadTexture(gl, this.#secondaryTexture, uvTextureWidth, uvHeight, gl.LUMINANCE_ALPHA, image.data.subarray(plan.uvOffset, plan.uvOffset + uvByteLength));
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.#primaryTexture.texture);
+        gl.uniform1i(program.yTextureLocation, 0);
+        gl.uniform2f(program.yScaleLocation, image.width / plan.yStride, 1);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, this.#secondaryTexture.texture);
+        gl.uniform1i(program.uvTextureLocation, 1);
+        gl.uniform2f(program.uvScaleLocation, image.width / plan.yStride, 1);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    }
+    #drawYuv422Image(gl, image, plan) {
+        const program = this.#ensureYuv422Program(gl);
+        if (!program) {
+            return;
+        }
+        if (!this.#bindProgram(gl, program.program, program.positionLocation, program.texCoordLocation)) {
+            return;
+        }
+        this.#primaryTexture = uploadTexture(gl, this.#primaryTexture, plan.textureWidth, plan.textureHeight, gl.RGBA, image.data);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.#primaryTexture.texture);
+        gl.uniform1i(program.textureLocation, 0);
+        gl.uniform2f(program.textureScaleLocation, plan.textureScaleX, 1);
+        gl.uniform1f(program.visibleWidthLocation, image.width);
+        gl.uniform1f(program.modeLocation, yuv422ModeToNumber(plan.mode));
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    }
+    #drawI420Image(gl, image, plan) {
+        const program = this.#ensureYuvProgram(gl);
+        if (!program) {
+            return;
+        }
+        const uvHeight = image.height >> 1;
+        const yPlaneByteLength = plan.yStride * image.height;
+        const uvPlaneByteLength = plan.uvStride * uvHeight;
+        if (!this.#bindProgram(gl, program.program, program.positionLocation, program.texCoordLocation)) {
+            return;
+        }
+        this.#primaryTexture = uploadTexture(gl, this.#primaryTexture, plan.yStride, image.height, gl.LUMINANCE, image.data.subarray(0, yPlaneByteLength));
+        this.#secondaryTexture = uploadTexture(gl, this.#secondaryTexture, plan.uvStride, uvHeight, gl.LUMINANCE, image.data.subarray(plan.uOffset, plan.uOffset + uvPlaneByteLength));
+        this.#tertiaryTexture = uploadTexture(gl, this.#tertiaryTexture, plan.uvStride, uvHeight, gl.LUMINANCE, image.data.subarray(plan.vOffset, plan.vOffset + uvPlaneByteLength));
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.#primaryTexture.texture);
+        gl.uniform1i(program.yTextureLocation, 0);
+        gl.uniform2f(program.yScaleLocation, image.width / plan.yStride, 1);
+        const chromaScaleX = (image.width >> 1) / plan.uvStride;
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, this.#secondaryTexture.texture);
+        gl.uniform1i(program.uTextureLocation, 1);
+        gl.uniform2f(program.uScaleLocation, chromaScaleX, 1);
+        gl.activeTexture(gl.TEXTURE2);
+        gl.bindTexture(gl.TEXTURE_2D, this.#tertiaryTexture.texture);
+        gl.uniform1i(program.vTextureLocation, 2);
+        gl.uniform2f(program.vScaleLocation, chromaScaleX, 1);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    }
+    #bindProgram(gl, program, positionLocation, texCoordLocation) {
+        if (!this.#positionBuffer || !this.#texCoordBuffer) {
+            return false;
+        }
+        gl.useProgram(program);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.#positionBuffer);
+        gl.enableVertexAttribArray(positionLocation);
+        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.#texCoordBuffer);
+        gl.enableVertexAttribArray(texCoordLocation);
+        gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
+        return true;
+    }
+    #ensurePackedProgram(gl) {
+        if (this.#packedProgram) {
+            return this.#packedProgram;
+        }
+        const program = createProgram(gl, VERTEX_SHADER_SOURCE, PACKED_FRAGMENT_SHADER_SOURCE);
+        if (!program) {
+            return undefined;
+        }
+        const positionLocation = gl.getAttribLocation(program, "a_position");
+        const texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
+        const textureLocation = gl.getUniformLocation(program, "u_texture");
+        const textureScaleLocation = gl.getUniformLocation(program, "u_textureScale");
+        const modeLocation = gl.getUniformLocation(program, "u_mode");
+        if (positionLocation < 0 ||
+            texCoordLocation < 0 ||
+            !textureLocation ||
+            !textureScaleLocation ||
+            !modeLocation) {
+            gl.deleteProgram(program);
+            return undefined;
+        }
+        this.#packedProgram = {
+            program,
+            positionLocation,
+            texCoordLocation,
+            textureLocation,
+            textureScaleLocation,
+            modeLocation,
+        };
+        return this.#packedProgram;
+    }
+    #ensureYuvProgram(gl) {
+        if (this.#yuvProgram) {
+            return this.#yuvProgram;
+        }
+        const program = createProgram(gl, VERTEX_SHADER_SOURCE, YUV420_FRAGMENT_SHADER_SOURCE);
+        if (!program) {
+            return undefined;
+        }
+        const positionLocation = gl.getAttribLocation(program, "a_position");
+        const texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
+        const yTextureLocation = gl.getUniformLocation(program, "u_yTexture");
+        const uTextureLocation = gl.getUniformLocation(program, "u_uTexture");
+        const vTextureLocation = gl.getUniformLocation(program, "u_vTexture");
+        const yScaleLocation = gl.getUniformLocation(program, "u_yScale");
+        const uScaleLocation = gl.getUniformLocation(program, "u_uScale");
+        const vScaleLocation = gl.getUniformLocation(program, "u_vScale");
+        if (positionLocation < 0 ||
+            texCoordLocation < 0 ||
+            !yTextureLocation ||
+            !uTextureLocation ||
+            !vTextureLocation ||
+            !yScaleLocation ||
+            !uScaleLocation ||
+            !vScaleLocation) {
+            gl.deleteProgram(program);
+            return undefined;
+        }
+        this.#yuvProgram = {
+            program,
+            positionLocation,
+            texCoordLocation,
+            yTextureLocation,
+            uTextureLocation,
+            vTextureLocation,
+            yScaleLocation,
+            uScaleLocation,
+            vScaleLocation,
+        };
+        return this.#yuvProgram;
+    }
+    #ensureNv12Program(gl) {
+        if (this.#nv12Program) {
+            return this.#nv12Program;
+        }
+        const program = createProgram(gl, VERTEX_SHADER_SOURCE, NV12_FRAGMENT_SHADER_SOURCE);
+        if (!program) {
+            return undefined;
+        }
+        const positionLocation = gl.getAttribLocation(program, "a_position");
+        const texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
+        const yTextureLocation = gl.getUniformLocation(program, "u_yTexture");
+        const uvTextureLocation = gl.getUniformLocation(program, "u_uvTexture");
+        const yScaleLocation = gl.getUniformLocation(program, "u_yScale");
+        const uvScaleLocation = gl.getUniformLocation(program, "u_uvScale");
+        if (positionLocation < 0 ||
+            texCoordLocation < 0 ||
+            !yTextureLocation ||
+            !uvTextureLocation ||
+            !yScaleLocation ||
+            !uvScaleLocation) {
+            gl.deleteProgram(program);
+            return undefined;
+        }
+        this.#nv12Program = {
+            program,
+            positionLocation,
+            texCoordLocation,
+            yTextureLocation,
+            uvTextureLocation,
+            yScaleLocation,
+            uvScaleLocation,
+        };
+        return this.#nv12Program;
+    }
+    #ensureYuv422Program(gl) {
+        if (this.#yuv422Program) {
+            return this.#yuv422Program;
+        }
+        const program = createProgram(gl, VERTEX_SHADER_SOURCE, YUV422_FRAGMENT_SHADER_SOURCE);
+        if (!program) {
+            return undefined;
+        }
+        const positionLocation = gl.getAttribLocation(program, "a_position");
+        const texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
+        const textureLocation = gl.getUniformLocation(program, "u_texture");
+        const textureScaleLocation = gl.getUniformLocation(program, "u_textureScale");
+        const visibleWidthLocation = gl.getUniformLocation(program, "u_visibleWidth");
+        const modeLocation = gl.getUniformLocation(program, "u_mode");
+        if (positionLocation < 0 ||
+            texCoordLocation < 0 ||
+            !textureLocation ||
+            !textureScaleLocation ||
+            !visibleWidthLocation ||
+            !modeLocation) {
+            gl.deleteProgram(program);
+            return undefined;
+        }
+        this.#yuv422Program = {
+            program,
+            positionLocation,
+            texCoordLocation,
+            textureLocation,
+            textureScaleLocation,
+            visibleWidthLocation,
+            modeLocation,
+        };
+        return this.#yuv422Program;
+    }
+    #resizeCanvas(width, height) {
+        if (this.#canvas.width !== width) {
+            this.#canvas.width = width;
+        }
+        if (this.#canvas.height !== height) {
+            this.#canvas.height = height;
+        }
+    }
+}
+function resolvePackedPlan(image, mode, bytesPerPixel, glFormat) {
+    if (image.step < image.width * bytesPerPixel || image.step % bytesPerPixel !== 0) {
+        return undefined;
+    }
+    const textureWidth = image.step / bytesPerPixel;
+    return {
+        kind: "packed",
+        mode,
+        textureWidth,
+        textureHeight: image.height,
+        textureScaleX: image.width / textureWidth,
+        glFormat,
+    };
+}
+function resolveNv12Plan(image) {
+    if (image.width % 2 !== 0 || image.height % 2 !== 0) {
+        return undefined;
+    }
+    const yStride = image.stride ?? image.step;
+    if (yStride < image.width || yStride % 2 !== 0) {
+        return undefined;
+    }
+    const uvOffset = image.planeStride ?? yStride * image.height;
+    const requiredBytes = uvOffset + yStride * (image.height >> 1);
+    if (image.data.byteLength < requiredBytes) {
+        return undefined;
+    }
+    return { kind: "nv12", yStride, uvOffset };
+}
+function resolveYuv422Plan(image, mode) {
+    if (image.width % 2 !== 0 || image.step < image.width * 2 || image.step % 4 !== 0) {
+        return undefined;
+    }
+    const textureWidth = image.step / 4;
+    const requiredBytes = image.step * image.height;
+    if (image.data.byteLength < requiredBytes) {
+        return undefined;
+    }
+    return {
+        kind: "yuv422",
+        mode,
+        textureWidth,
+        textureHeight: image.height,
+        textureScaleX: image.width / 2 / textureWidth,
+    };
+}
+function resolveI420Plan(image) {
+    if (image.width % 2 !== 0 || image.height % 2 !== 0) {
+        return undefined;
+    }
+    const yStride = image.step;
+    const uvStride = image.width >> 1;
+    const uOffset = yStride * image.height;
+    const vOffset = uOffset + uvStride * (image.height >> 1);
+    const requiredBytes = vOffset + uvStride * (image.height >> 1);
+    if (yStride !== image.width || image.data.byteLength < requiredBytes) {
+        return undefined;
+    }
+    return {
+        kind: "i420",
+        yStride,
+        uvStride,
+        uOffset,
+        vOffset,
+    };
+}
+function packedModeToNumber(mode) {
+    switch (mode) {
+        case "rgb":
+            return PACKED_MODE_RGB;
+        case "bgr":
+            return PACKED_MODE_BGR;
+        case "rgba":
+            return PACKED_MODE_RGBA;
+        case "bgra":
+            return PACKED_MODE_BGRA;
+        case "mono":
+            return PACKED_MODE_MONO;
+    }
+}
+function yuv422ModeToNumber(mode) {
+    switch (mode) {
+        case "uyvy":
+            return YUV422_MODE_UYVY;
+        case "yuyv":
+            return YUV422_MODE_YUYV;
+    }
+}
+function resolveGlFormat(gl, format) {
+    switch (format) {
+        case "rgb":
+            return gl.RGB;
+        case "rgba":
+            return gl.RGBA;
+        case "luminance":
+            return gl.LUMINANCE;
+    }
+}
+function createStaticBuffer(gl, data) {
+    const buffer = gl.createBuffer();
+    if (!buffer) {
+        return undefined;
+    }
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    return buffer;
+}
+function uploadTexture(gl, resource, width, height, format, data) {
+    let textureResource = resource;
+    if (!textureResource) {
+        const texture = gl.createTexture();
+        if (!texture) {
+            throw new Error("Unable to create image texture.");
+        }
+        textureResource = {
+            texture,
+            width: 0,
+            height: 0,
+            internalFormat: format,
+            format,
+        };
+    }
+    gl.bindTexture(gl.TEXTURE_2D, textureResource.texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    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.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+    if (textureResource.width !== width ||
+        textureResource.height !== height ||
+        textureResource.format !== format ||
+        textureResource.internalFormat !== format) {
+        gl.texImage2D(gl.TEXTURE_2D, 0, format, width, height, 0, format, gl.UNSIGNED_BYTE, data);
+        textureResource.width = width;
+        textureResource.height = height;
+        textureResource.internalFormat = format;
+        textureResource.format = format;
+        return textureResource;
+    }
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, format, gl.UNSIGNED_BYTE, data);
+    return textureResource;
+}
+function createProgram(gl, vertexShaderSource, fragmentShaderSource) {
+    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
+    if (!vertexShader || !fragmentShader) {
+        if (vertexShader) {
+            gl.deleteShader(vertexShader);
+        }
+        if (fragmentShader) {
+            gl.deleteShader(fragmentShader);
+        }
+        return undefined;
+    }
+    const program = gl.createProgram();
+    if (!program) {
+        gl.deleteShader(vertexShader);
+        gl.deleteShader(fragmentShader);
+        return undefined;
+    }
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        gl.deleteProgram(program);
+        return undefined;
+    }
+    return program;
+}
+function createShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (!shader) {
+        return undefined;
+    }
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        gl.deleteShader(shader);
+        return undefined;
+    }
+    return shader;
+}
+function deleteTexture(gl, resource) {
+    if (resource) {
+        gl.deleteTexture(resource.texture);
+    }
+}
+function deleteProgram(gl, program) {
+    if (program) {
+        gl.deleteProgram(program);
+    }
+}
+//# sourceMappingURL=webgl-image-renderer.js.map