nanovgjs 0.1.0

package/nanovg_gl.js

@@ -0,0 +1,1429 @@
+const GLNVG_LOC_VIEWSIZE = 0;
+const GLNVG_LOC_TEX = 1;
+const GLNVG_LOC_FRAG = 2;
+const GLNVG_LOC_INNECOL = 3;
+const GLNVG_MAX_LOCS = 4;
+
+const NVG_ANTIALIAS = 1 << 0;
+const NVG_STENCIL_STROKES = 1 << 1;
+const NVG_DEBUG = 1 << 2;
+const NVG_IMAGE_NODELETE = 1 << 16;
+
+const NANOVG_GL_USE_UNIFORMBUFFER = false;
+
+const NANOVG_GL_USE_STATE_FILTER = true;
+
+const GLNVG_NONE = 0;
+const GLNVG_FILL = 1;
+const GLNVG_CONVEXFILL = 2;
+const GLNVG_STROKE = 3;
+const GLNVG_TRIANGLES = 4;  
+
+const NANOVG_GL_UNIFORMARRAY_SIZE = 11;
+
+const NSVG_SHADER_FILLGRAD = 0;
+const NSVG_SHADER_FILLIMG = 1;
+const NSVG_SHADER_SIMPLE = 2;
+const NSVG_SHADER_IMG = 3;
+
+const GLNVG_FRAG_BINDING = 0;
+  
+class GLNVGblend {
+    constructor() {
+        this.srcRGB = 0;
+        this.dstRGB = 0;
+        this.srcAlpha = 0;
+        this.dstAlpha = 0;
+    }
+}
+
+class GLNVGcall {
+    constructor() {
+        this.type = 0;
+        this.image = 0;
+        this.pathOffset = 0;
+        this.pathCount = 0;
+        this.triangleOffset = 0;
+        this.triangleCount = 0;
+        this.uniformOffset = 0;
+        this.blendFunc = new GLNVGblend();
+    }
+}
+
+class GLNVGpath {
+	constructor() {
+		this.fillOffset = 0;
+		this.fillCount = 0;
+		this.strokeOffset = 0;
+		this.strokeCount = 0;
+	}
+}
+
+const SIZEOF_FLOAT = 4;
+const SIZEOF_INT = 4;
+
+const FLOATS_PER_BYTE = 1 / Float32Array.BYTES_PER_ELEMENT;
+
+class GLNVGfragUniforms {
+    constructor(buffer, byteOffset = 0) {
+        const floatOffset = byteOffset / Float32Array.BYTES_PER_ELEMENT;
+        const floatSize = 44; // 176 bytes / 4 = 44 floats total
+        
+        if (buffer instanceof Float32Array) {
+            this.buffer = buffer.subarray(floatOffset, floatOffset + floatSize);
+        } else {
+            this.buffer = new Float32Array(buffer, byteOffset, floatSize);
+        }
+        
+        this.offsets = {
+            scissorMat: 0,      // 12 floats (mat3x4)
+            paintMat: 12,       // 12 floats (mat3x4)
+            innerCol: 24,       // 4 floats (vec4)
+            outerCol: 28,       // 4 floats (vec4)
+            scissorExt: 32,     // 2 floats (vec2)
+            scissorScale: 34,   // 2 floats (vec2)
+            extent: 36,         // 2 floats (vec2)
+            radius: 38,         // 1 float
+            feather: 39,        // 1 float
+            strokeMult: 40,     // 1 float
+            strokeThr: 41,      // 1 float
+            texType: 42,        // 1 float/int
+            type: 43,           // 1 float/int
+        };
+    }
+
+    get size() {
+        return 44 * 4; // 44 floats * 4 bytes = 176 bytes
+    }
+
+    set scissorMat(mat) {
+        if (mat && mat.length >= 12) {
+            this.buffer.set(mat.slice(0, 12), this.offsets.scissorMat);
+        }
+    }
+  
+    set paintMat(mat) {
+        if (mat && mat.length >= 12) {
+            this.buffer.set(mat.slice(0, 12), this.offsets.paintMat);
+        }
+    }
+  
+    set innerCol(color) {
+        this.buffer[this.offsets.innerCol] = color.r;
+        this.buffer[this.offsets.innerCol + 1] = color.g;
+        this.buffer[this.offsets.innerCol + 2] = color.b;
+        this.buffer[this.offsets.innerCol + 3] = color.a;
+    }
+  
+    set outerCol(color) {
+        this.buffer[this.offsets.outerCol] = color.r;
+        this.buffer[this.offsets.outerCol + 1] = color.g;
+        this.buffer[this.offsets.outerCol + 2] = color.b;
+        this.buffer[this.offsets.outerCol + 3] = color.a;
+    }
+  
+    set scissorExt(ext) {
+        this.buffer[this.offsets.scissorExt] = ext[0];
+        this.buffer[this.offsets.scissorExt + 1] = ext[1];
+    }
+  
+    set scissorScale(scale) {
+        this.buffer[this.offsets.scissorScale] = scale[0];
+        this.buffer[this.offsets.scissorScale + 1] = scale[1];
+    }
+  
+    set extent(extent) {
+        this.buffer[this.offsets.extent] = extent[0];
+        this.buffer[this.offsets.extent + 1] = extent[1];
+    }
+  
+    set radius(value) {
+        this.buffer[this.offsets.radius] = value;
+    }
+  
+    set feather(value) {
+        this.buffer[this.offsets.feather] = value;
+    }
+  
+    set strokeMult(value) {
+        this.buffer[this.offsets.strokeMult] = value;
+    }
+  
+    set strokeThr(value) {
+        this.buffer[this.offsets.strokeThr] = value;
+    }
+  
+    set texType(value) {
+        this.buffer[this.offsets.texType] = value;
+    }
+  
+    set type(value) {
+        this.buffer[this.offsets.type] = value;
+    }
+
+    get innerCol() {
+        return [
+            this.buffer[this.offsets.innerCol],
+            this.buffer[this.offsets.innerCol + 1],
+            this.buffer[this.offsets.innerCol + 2],
+            this.buffer[this.offsets.innerCol + 3]
+        ];
+    }
+
+    get outerCol() {
+        return [
+            this.buffer[this.offsets.outerCol],
+            this.buffer[this.offsets.outerCol + 1],
+            this.buffer[this.offsets.outerCol + 2],
+            this.buffer[this.offsets.outerCol + 3]
+        ];
+    }
+}
+
+class GLNVGshader {
+    constructor() {
+        this.prog = 0;
+        this.frag = 0;
+        this.vert = 0;
+        this.loc = new Array(GLNVG_MAX_LOCS).fill(0);
+    }
+}
+
+class GLNVGcontext {
+    constructor() {
+        this.shader = new GLNVGshader();
+        this.textures = null;
+        this.view = [0.0, 0.0];
+        this.ntextures = 0;
+        this.ctextures = 0;
+        this.textureId = 0;
+        this.vertBuf = null;
+        this.vertArr = null;
+        this.fragBuf = null;
+        this.fragSize = 0;
+        this.flags = 0;
+        this.calls = null;
+        this.ccalls = 0;
+        this.ncalls = 0;
+        this.paths = null;
+        this.cpaths = 0;
+        this.npaths = 0;
+        this.verts = null;
+        this.cverts = 0;
+        this.nverts = 0;
+        this.uniforms = null;
+        this.cuniforms = 0;
+        this.nuniforms = 0;
+        
+	    if(NANOVG_GL_USE_STATE_FILTER){
+            this.boundTexture = 0;
+            this.stencilMsk = 0;
+            this.stencilFnc = 0;
+            this.stencilFuncRef = 0;
+            this.stencilFuncMask = 0;
+            this.blendFunc = new GLNVGblend();
+        }
+        this.dummyTex = 0;
+    }
+}
+
+class GLNVGtexture {
+    constructor() {
+        this.id = 0;
+        this.tex = null;
+        this.width = 0;
+        this.height = 0;
+        this.type = 0;
+        this.flags = 0;
+    }
+}  
+
+function glnvg__renderCreate(gl) {
+    let glnvgContext = new GLNVGcontext();
+
+    Object.assign(gl, glnvgContext);
+    gl.flags = (gl.edgeAntiAlias ? NVG_ANTIALIAS : 0) | NVG_STENCIL_STROKES;
+
+    var align = 4;
+  
+    let shaderHeader = 
+        "#version 100\n"
+        +((NANOVG_GL_USE_UNIFORMBUFFER) ? "#define USE_UNIFORMBUFFER 1\n" : "#define UNIFORMARRAY_SIZE 11\n" )
+        +((gl.edgeAntiAlias) ? "#define EDGE_AA 1" : "")
+    ;
+
+    const fillVertShader = 
+        `precision mediump float;
+        uniform vec2 viewSize;
+        attribute vec2 vertex;
+        attribute vec2 tcoord;
+        varying vec2 ftcoord;
+        varying vec2 fpos;
+        void main(void) {
+            ftcoord = tcoord;
+            fpos = vertex;
+            gl_Position = vec4(2.0*vertex.x/viewSize.x - 1.0, 1.0 - 2.0*vertex.y/viewSize.y, 0, 1);
+        }`;
+
+    const fillFragShader = `
+        #if defined(GL_FRAGMENT_PRECISION_HIGH)
+		    precision highp float;
+		#else
+		    precision mediump float;
+		#endif
+        uniform sampler2D tex;
+        varying vec2 ftcoord;
+        varying vec2 fpos;
+        
+    
+        #ifndef USE_UNIFORMBUFFER
+		    uniform vec4 frag[UNIFORMARRAY_SIZE];
+            #define scissorMat mat3(frag[0].xyz, frag[1].xyz, frag[2].xyz)
+            #define paintMat mat3(frag[3].xyz, frag[4].xyz, frag[5].xyz)
+            #define innerCol frag[6]
+            #define outerCol frag[7]
+            #define scissorExt frag[8].xy
+            #define scissorScale frag[8].zw
+            #define extent frag[9].xy
+            #define radius frag[9].z
+            #define feather frag[9].w
+            #define strokeMult frag[10].x
+            #define strokeThr frag[10].y
+            #define texType int(frag[10].z)
+            #define type int(frag[10].w)
+        #else
+            uniform mat3 scissorMat;
+            uniform mat3 paintMat;
+            uniform vec4 innerCol;
+            uniform vec4 outerCol;
+            uniform vec2 scissorExt;
+            uniform vec2 scissorScale;
+            uniform vec2 extent;
+            uniform float radius;
+            uniform float feather;
+            uniform float strokeMult;
+            uniform float strokeThr;
+            uniform highp int texType;
+            uniform highp int type;
+        #endif
+    
+        float sdroundrect(vec2 pt, vec2 ext, float rad) {
+            vec2 ext2 = ext - vec2(rad, rad);
+            vec2 d = abs(pt) - ext2;
+            return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - rad;
+        }
+    
+        float scissorMask(vec2 p) {
+            vec2 sc = (abs((scissorMat * vec3(p, 1.0)).xy) - scissorExt);
+            sc = vec2(0.5, 0.5) - sc * scissorScale;
+            return clamp(sc.x, 0.0, 1.0) * clamp(sc.y, 0.0, 1.0);
+        }
+    
+        #ifdef EDGE_AA
+        float strokeMask() {
+            return min(1.0, (1.0 - abs(ftcoord.x * 2.0 - 1.0)) * strokeMult) * min(1.0, ftcoord.y);
+        }
+        #endif
+    
+        void main(void) {
+            vec4 result;
+            float scissor = scissorMask(fpos);
+    
+            #ifdef EDGE_AA
+            float strokeAlpha = strokeMask();
+            if (strokeAlpha < strokeThr) discard;
+            #else
+            float strokeAlpha = 1.0;
+            #endif
+    
+            if (type == 0) {
+                vec2 pt = (paintMat * vec3(fpos, 1.0)).xy;
+                float d = clamp((sdroundrect(pt, extent, radius) + feather * 0.5) / feather, 0.0, 1.0);
+                vec4 color = mix(innerCol, outerCol, d);
+                color *= strokeAlpha * scissor;
+                result = color;
+                // DEBUG: Show gradient parameter
+                //result = vec4(d, d, d, 1.0);  // Shows gradient interpolation
+                //result = vec4(innerCol.rgb, 1.0);  // Shows inner color
+                //result = vec4(outerCol.rgb, 1.0);  // Shows outer color
+            } else if (type == 1) {
+                vec2 pt = (paintMat * vec3(fpos, 1.0)).xy / extent;
+                vec4 color = texture2D(tex, pt);
+                if (texType == 1) color = vec4(color.xyz * color.w, color.w);
+                if (texType == 2) color = vec4(color.x);
+                color *= innerCol;
+                color *= strokeAlpha * scissor;
+                result = color;
+            } else if (type == 2) {
+                result = innerCol * strokeAlpha * scissor;
+            } else if (type == 3) {
+                vec4 color = texture2D(tex, ftcoord);
+                if (texType == 1) color = vec4(color.xyz * color.w, color.w);
+                if (texType == 2) color = vec4(color.x);
+                color *= scissor;
+                result = color * innerCol;
+            }
+    
+            gl_FragColor = result;
+        }
+    `;
+
+    glnvg__checkError(gl, "init");
+  
+	if (glnvg__createShader(gl, "shader", shaderHeader, null, fillVertShader, fillFragShader) == 0) return 0;
+	
+    glnvg__checkError(gl, "uniform locations");
+    glnvg__getUniforms(gl, gl.shader);
+
+    gl.vertBuf = gl.createBuffer();
+    
+    if (NANOVG_GL_USE_UNIFORMBUFFER) {
+        gl.uniformBlockBinding(gl.shader.prog, gl.shader.loc[GLNVG_LOC_FRAG], GLNVG_FRAG_BINDING);
+        gl.fragBuf = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, gl.fragBuf);
+        align = gl.getParameter(gl.UNIFORM_BUFFER_OFFSET_ALIGNMENT);
+    }
+    let fragUniforms = new GLNVGfragUniforms();
+	gl.fragSize = fragUniforms.size + align - fragUniforms.size % align;
+    gl.dummyTex = glnvg__renderCreateTexture(gl, NVG_TEXTURE_ALPHA, 1, 1, 0, null);
+  
+    glnvg__checkError(gl, "create done");
+  
+    gl.flush();
+
+    return 1;
+}
+
+function glnvg__checkError(gl, str) {
+    if ((gl.flags & NVG_DEBUG) === 0) return;
+    const err = gl.getError();
+    if (err !== gl.NO_ERROR) {
+        console.log(`Error ${err.toString(16)} after ${str}`);
+        return;
+    }
+}
+  
+function glnvg__createShader(gl, name, header, opts, vshader, fshader) {
+    let status;
+    let prog, vert, frag;
+    const str = [];
+    str[0] = header;
+    str[1] = opts !== null ? opts : '';
+
+    prog = gl.createProgram();
+    vert = gl.createShader(gl.VERTEX_SHADER);
+    frag = gl.createShader(gl.FRAGMENT_SHADER);
+    str[2] = vshader;
+    gl.shaderSource(vert, str.join('\n'));
+    str[2] = fshader;
+    gl.shaderSource(frag, str.join('\n'));
+  
+    gl.compileShader(vert);
+    status = gl.getShaderParameter(vert, gl.COMPILE_STATUS);
+    if (!status) {
+        console.log("could not compile shader:" + gl.getShaderInfoLog(vert));
+        glnvg__dumpShaderError(gl, vert, name, 'vert');
+        return 0;
+    }
+  
+    gl.compileShader(frag);
+    status = gl.getShaderParameter(frag, gl.COMPILE_STATUS);
+    if (!status) {
+        console.log("could not compile shader:" + gl.getShaderInfoLog(frag));
+        glnvg__dumpShaderError(gl, frag, name, 'frag');
+        return 0;
+    }
+  
+    gl.attachShader(prog, vert);
+    gl.attachShader(prog, frag);
+  
+    gl.bindAttribLocation(prog, 0, 'vertex');
+    gl.bindAttribLocation(prog, 1, 'tcoord');
+  
+    gl.linkProgram(prog);
+    status = gl.getProgramParameter(prog, gl.LINK_STATUS);
+    if (!status) {
+        glnvg__dumpProgramError(gl, prog, name);
+        return 0;
+    }
+  
+    gl.shader.prog = prog;
+    gl.shader.vert = vert;
+    gl.shader.frag = frag;
+  
+    return 1;
+}
+
+function glnvg__renderUpdateTexture(gl, image, x, y, w, h, data) {
+  const tex = glnvg__findTexture(gl, image);
+  if (!tex) return 0;
+
+  glnvg__bindTexture(gl, tex.tex);
+
+  const isWebGL2 = gl.getParameter(gl.VERSION).indexOf('WebGL 2') !== -1;
+
+  gl.pixelStorei(gl.UNPACK_ALIGNMENT, tex.type === NVG_TEXTURE_RGBA ? 4 : 1);
+
+  let uploadData = data;
+  if (!isWebGL2) {
+    if (x !== 0 || y !== 0) {
+      console.warn('Partial texture updates not supported in WebGL1 without extensions.');
+      return 0;
+    }
+  } else {
+    gl.pixelStorei(gl.UNPACK_ROW_LENGTH, tex.width);
+    gl.pixelStorei(gl.UNPACK_SKIP_PIXELS, x);
+    gl.pixelStorei(gl.UNPACK_SKIP_ROWS, y);
+  }
+
+  const format = tex.type === NVG_TEXTURE_RGBA ? gl.RGBA : gl.LUMINANCE;
+  const subX = isWebGL2 ? 0 : x;
+  const subY = isWebGL2 ? 0 : y;
+  gl.texSubImage2D(gl.TEXTURE_2D, 0, subX, subY, w, h, format, gl.UNSIGNED_BYTE, uploadData);
+
+  if (isWebGL2) {
+    gl.pixelStorei(gl.UNPACK_ROW_LENGTH, 0);
+    gl.pixelStorei(gl.UNPACK_SKIP_PIXELS, 0);
+    gl.pixelStorei(gl.UNPACK_SKIP_ROWS, 0);
+  }
+  gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
+
+  return 1;
+}
+
+function glnvg__renderCreateTexture(gl, type, w, h, imageFlags, data) {
+    var tex = glnvg__allocTexture(gl);
+  
+    if (tex === null) return 0;
+  
+    if (glnvg__nearestPow2(w) !== w || glnvg__nearestPow2(h) !== h) {
+        if ((imageFlags & NVG_IMAGE_REPEATX) !== 0 || (imageFlags & NVG_IMAGE_REPEATY) !== 0) {
+            console.log("Repeat X/Y is not supported for non power-of-two textures (" + w + " x " + h + ")");
+            imageFlags &= ~(NVG_IMAGE_REPEATX | NVG_IMAGE_REPEATY);
+        }
+        if (imageFlags & NVG_IMAGE_GENERATE_MIPMAPS) {
+            console.log("Mip-maps is not support for non power-of-two textures (" + w + " x " + h + ")");
+            imageFlags &= ~NVG_IMAGE_GENERATE_MIPMAPS;
+        }
+    }
+  
+    var texId = gl.createTexture();
+    tex.tex = texId;
+    tex.width = w;
+    tex.height = h;
+    tex.type = type;
+    tex.flags = imageFlags;
+    glnvg__bindTexture(gl, tex.tex);
+  
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+
+    const isWebGL2 = gl.getParameter(gl.VERSION).indexOf('WebGL 2') !== -1;
+    const format = type === NVG_TEXTURE_RGBA ? gl.RGBA : (isWebGL2 ? gl.RED : gl.LUMINANCE);
+    const isElementSource =
+        typeof ImageBitmap !== "undefined" && data instanceof ImageBitmap ||
+        typeof HTMLImageElement !== "undefined" && data instanceof HTMLImageElement ||
+        typeof HTMLCanvasElement !== "undefined" && data instanceof HTMLCanvasElement ||
+        typeof ImageData !== "undefined" && data instanceof ImageData;
+
+    if (isElementSource) {
+        gl.texImage2D(gl.TEXTURE_2D, 0, format, format, gl.UNSIGNED_BYTE, data);
+    } else {
+        gl.texImage2D(gl.TEXTURE_2D, 0, format, w, h, 0, format, gl.UNSIGNED_BYTE, data);
+    }
+  
+    if (imageFlags & NVG_IMAGE_GENERATE_MIPMAPS) {
+        if (imageFlags & NVG_IMAGE_NEAREST) {
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST);
+        } else {
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+        }
+    } else {
+        if (imageFlags & NVG_IMAGE_NEAREST) {
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        } else {
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        }
+    }
+  
+    if (imageFlags & NVG_IMAGE_NEAREST) {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    } else {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    }
+  
+    if (imageFlags & NVG_IMAGE_REPEATX)
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+    else
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  
+    if (imageFlags & NVG_IMAGE_REPEATY)
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+    else
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
+
+    if (imageFlags & NVG_IMAGE_GENERATE_MIPMAPS) {
+        gl.generateMipmap(gl.TEXTURE_2D);
+    }
+  
+    glnvg__checkError(gl, "create tex");
+    glnvg__bindTexture(gl, null);
+
+    return tex.id;
+}
+
+function glnvg__renderStroke(gl, paint, compositeOperation, scissor, fringe, strokeWidth, paths, npaths) {
+    let call = glnvg__allocCall(gl);
+    if (call === null) return;
+
+    call.type = GLNVG_STROKE;
+    call.pathOffset = glnvg__allocPaths(gl, npaths);
+    if (call.pathOffset === -1) gotoError();
+    call.pathCount = npaths;
+    call.image = paint.image;
+    call.blendFunc = glnvg__blendCompositeOperation(compositeOperation);
+
+    let maxverts = glnvg__maxVertCount(paths, npaths);
+    let offset = glnvg__allocVerts(gl, maxverts);
+    if (offset === -1) gotoError();
+
+    for (let i = 0; i < npaths; i++) {
+        let copy = gl.paths[call.pathOffset + i];
+        let path = paths[i];
+        copy.fillOffset = 0;
+        copy.fillCount = 0;
+        copy.strokeOffset = 0;
+        copy.strokeCount = 0;
+
+        if (path.nstroke > 0) {
+            copy.strokeOffset = offset;
+            copy.strokeCount = path.nstroke;
+
+            let destView = new Float32Array(gl.verts, offset * NVG_VERTEX_SIZEOF, path.nstroke * 4);
+            destView.set(path.stroke);
+            offset += path.nstroke;
+        }
+    }
+
+    if (gl.flags & NVG_STENCIL_STROKES) {
+        call.uniformOffset = glnvg__allocFragUniforms(gl, 2);
+        if (call.uniformOffset === -1) gotoError();
+
+        glnvg__convertPaint(gl, nvg__fragUniformPtr(gl, call.uniformOffset), paint, scissor, strokeWidth, fringe, -1.0);
+        glnvg__convertPaint(gl, nvg__fragUniformPtr(gl, call.uniformOffset + gl.fragSize), paint, scissor, strokeWidth, fringe, 1.0 - 0.5 / 255.0);
+    } else {
+        call.uniformOffset = glnvg__allocFragUniforms(gl, 1);
+        if (call.uniformOffset === -1) gotoError();
+
+        glnvg__convertPaint(gl, nvg__fragUniformPtr(gl, call.uniformOffset), paint, scissor, strokeWidth, fringe, -1.0);
+    }
+
+    return;
+
+    function gotoError() {
+        if (gl.ncalls > 0) gl.ncalls--;
+    }
+}
+  
+function glnvg__renderViewport(gl, width, height, devicePixelRatio) {
+    gl.view[0] = width;
+    gl.view[1] = height;
+}
+  
+
+function glnvg__dumpShaderError(gl, shader, name, type) {
+    const infoLog = gl.getShaderInfoLog(shader);
+    console.error(`Shader ${name}/${type} error:\n${infoLog}`);
+}
+  
+function glnvg__dumpProgramError(gl, program, name) {
+    const infoLog = gl.getProgramInfoLog(program);
+    console.error(`Program ${name} error:\n${infoLog}`);
+}
+  
+function glnvg__getUniforms(gl, shader) {
+    shader.loc[GLNVG_LOC_VIEWSIZE] = gl.getUniformLocation(shader.prog, "viewSize");
+    shader.loc[GLNVG_LOC_TEX] = gl.getUniformLocation(shader.prog, "tex");
+    
+    shader.loc[GLNVG_LOC_INNECOL] = gl.getUniformLocation(shader.prog, "innerCol");
+  
+    if(NANOVG_GL_USE_UNIFORMBUFFER){
+        shader.loc[GLNVG_LOC_FRAG] = gl.getUniformBlockIndex(shader.prog, "frag");
+    }else{
+        shader.loc[GLNVG_LOC_FRAG] = gl.getUniformLocation(shader.prog, "frag[0]");
+        if (!shader.loc[GLNVG_LOC_FRAG]) {
+            shader.loc[GLNVG_LOC_FRAG] = gl.getUniformLocation(shader.prog, "frag");
+        }
+    }
+}
+
+function glnvg__renderFill(gl, paint, compositeOperation, scissor, fringe, bounds, paths, npaths) {
+    var call = glnvg__allocCall(gl);
+    if (call == null) return;
+
+    call.type = GLNVG_FILL;
+    call.triangleCount = 4;
+    call.pathOffset = glnvg__allocPaths(gl, npaths);
+    if (call.pathOffset === -1) return;
+    call.pathCount = npaths;
+    call.image = paint.image;
+    call.blendFunc = glnvg__blendCompositeOperation(compositeOperation);
+    
+    if (npaths === 1 && paths[0].convex) {
+        call.type = GLNVG_CONVEXFILL;
+        call.triangleCount = 0;
+    }
+
+    let maxverts = glnvg__maxVertCount(paths, npaths) + call.triangleCount;
+    let offset = glnvg__allocVerts(gl, maxverts);
+    if (offset === -1) return;
+    
+    for (let i = 0; i < npaths; i++) {
+        let copy = gl.paths[call.pathOffset + i];
+        let path = paths[i];
+        copy.fillOffset = 0;
+        copy.fillCount = 0;
+        copy.strokeOffset = 0;
+        copy.strokeCount = 0;
+        
+        if (path.nfill > 0) {
+            copy.fillOffset = offset;
+            copy.fillCount = path.nfill;
+            
+            let destView = new Float32Array(gl.verts, offset * NVG_VERTEX_SIZEOF, path.nfill * 4);
+            destView.set(path.fill);
+            
+            offset += path.nfill;
+        }
+
+        if (path.nstroke > 0) {
+            copy.strokeOffset = offset;
+            copy.strokeCount = path.nstroke;
+            
+            let destView = new Float32Array(gl.verts, offset * NVG_VERTEX_SIZEOF, path.nstroke * 4);
+            destView.set(path.stroke);
+            
+            offset += path.nstroke;
+        }
+    }
+
+    if (call.type === GLNVG_FILL) {
+        call.triangleOffset = offset;
+        
+        for (let i = 0; i < 4; i++) {
+            let vtx = new NVGvertex(gl.verts, call.triangleOffset + i);
+            
+            switch(i) {
+                case 0: nvg__vset(vtx, bounds[2], bounds[3], 0.5, 1.0); break;
+                case 1: nvg__vset(vtx, bounds[2], bounds[1], 0.5, 1.0); break;
+                case 2: nvg__vset(vtx, bounds[0], bounds[3], 0.5, 1.0); break;
+                case 3: nvg__vset(vtx, bounds[0], bounds[1], 0.5, 1.0); break;
+            }
+        }
+
+        call.uniformOffset = glnvg__allocFragUniforms(gl, 2);
+        if (call.uniformOffset === -1) return;
+
+        let frag = nvg__fragUniformPtr(gl, call.uniformOffset);
+        frag.strokeThr = -1.0;
+        frag.type = NSVG_SHADER_SIMPLE;
+
+        glnvg__convertPaint(gl, nvg__fragUniformPtr(gl, call.uniformOffset + gl.fragSize), 
+                           paint, scissor, fringe, fringe, -1.0);
+    } else {
+        call.uniformOffset = glnvg__allocFragUniforms(gl, 1);
+        if (call.uniformOffset === -1) return;
+
+        glnvg__convertPaint(gl, nvg__fragUniformPtr(gl, call.uniformOffset), 
+                           paint, scissor, fringe, fringe, -1.0);
+    }
+}
+
+function glnvg__allocCall(gl) {
+    if (gl.ncalls + 1 > gl.ccalls) {
+        var calls;
+        var ccalls = Math.max(gl.ncalls + 1, 128) + Math.floor(gl.ccalls / 2); 
+        calls = new Array(ccalls);
+        for (var i = 0; i < ccalls; i++) {
+            calls[i] = i < gl.ncalls && gl.calls ? gl.calls[i] : new GLNVGcall();
+        }
+        if (calls === null) return null;
+        gl.calls = calls;
+        gl.ccalls = ccalls;
+    }
+    let ret = gl.calls[gl.ncalls++];
+    Object.assign(ret, new GLNVGcall());
+    return ret;
+}
+
+function glnvg__allocPaths(gl, n) {
+    let ret = 0;
+    if (gl.npaths + n > gl.cpaths) {
+        let cpaths = Math.max(gl.npaths + n, 128) + Math.floor(gl.cpaths / 2); 
+        let paths = new Array(cpaths);
+        for (let i = 0; i < cpaths; i++) {
+            paths[i] = i < gl.npaths && gl.paths ? gl.paths[i] : new GLNVGpath();
+        }
+        if (paths === null) return -1;
+        gl.paths = paths;
+        gl.cpaths = cpaths;
+    }
+    ret = gl.npaths;
+    gl.npaths += n;
+    return ret;
+}
+
+function glnvg__allocVerts(gl, n) {
+    let ret = 0;
+    if (gl.nverts + n > gl.cverts) {
+        let cverts = Math.max(gl.nverts + n, 4096) + Math.floor(gl.cverts / 2);
+        
+        let newVerts = new ArrayBuffer(cverts * NVG_VERTEX_SIZEOF);
+        
+        if (gl.verts && gl.nverts > 0) {
+            let oldView = new Uint8Array(gl.verts, 0, gl.nverts * NVG_VERTEX_SIZEOF);
+            let newView = new Uint8Array(newVerts);
+            newView.set(oldView);
+        }
+        
+        gl.verts = newVerts;
+        gl.cverts = cverts;
+    }
+    ret = gl.nverts;
+    gl.nverts += n;
+    return ret;
+}
+
+/*function glnvg__allocVerts(gl, n) {
+    let ret = 0;
+    let cverts = Math.max(gl.nverts + n, 4096) + Math.floor(gl.cverts / 2); 
+    if (gl.verts == null)
+        gl.verts = new ArrayBuffer(n * NVG_VERTEX_SIZEOF);
+    else{
+        let oldView = new Float32Array(gl.verts);
+        console.log("oldView: " + oldView.length)
+        console.log("newView: " + n * 4)
+        let newLength = (oldView.length + n * 4);
+        console.log("newLength: " + newLength)
+        let newBuffer = new ArrayBuffer(newLength * 4);
+        let newView = new Float32Array(newBuffer);
+        newView.set(oldView.subarray(0, newLength));
+        gl.verts = newBuffer;
+    }
+    gl.cverts = cverts;
+    ret = gl.nverts;
+    gl.nverts += n;
+    return ret;
+}*/
+  
+function glnvg__blendCompositeOperation(op) {
+    const blend = {
+        srcRGB: glnvg_convertBlendFuncFactor(op.srcRGB),
+        dstRGB: glnvg_convertBlendFuncFactor(op.dstRGB),
+        srcAlpha: glnvg_convertBlendFuncFactor(op.srcAlpha),
+        dstAlpha: glnvg_convertBlendFuncFactor(op.dstAlpha)
+    };
+    const INVALID_ENUM = 0x0500;
+    const ONE = 1;
+    const ONE_MINUS_SRC_ALPHA = 0x0303;
+    if (
+        blend.srcRGB === INVALID_ENUM ||
+        blend.dstRGB === INVALID_ENUM ||
+        blend.srcAlpha === INVALID_ENUM ||
+        blend.dstAlpha === INVALID_ENUM
+    ) {
+        blend.srcRGB = ONE;
+        blend.dstRGB = ONE_MINUS_SRC_ALPHA;
+        blend.srcAlpha = ONE;
+        blend.dstAlpha = ONE_MINUS_SRC_ALPHA;
+    }
+    return blend;
+}
+
+function glnvg__renderFlush(ctx) {
+    const gl = ctx.params.userPtr;
+  
+    if (gl.ncalls > 0) {
+  
+        gl.useProgram(gl.shader.prog);
+        gl.enable(gl.CULL_FACE);
+        gl.cullFace(gl.BACK);
+        gl.frontFace(gl.CCW);
+        gl.enable(gl.BLEND);
+        gl.disable(gl.DEPTH_TEST);
+        gl.disable(gl.SCISSOR_TEST);
+        gl.colorMask(true, true, true, true);
+        gl.stencilMask(0xffffffff);
+        gl.stencilFunc(gl.ALWAYS, 0, 0xffffffff);
+        gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
+        
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+
+        if(NANOVG_GL_USE_STATE_FILTER){
+            gl.boundTexture = 0;
+            gl.stencilMsk = 0xffffffff;
+            gl.stencilFnc = gl.ALWAYS;
+            gl.stencilFuncRef = 0;
+            gl.stencilFuncMask = 0xffffffff;
+            gl.blendFunc.srcRGB = gl.INVALID_ENUM;
+            gl.blendFunc.srcAlpha = gl.INVALID_ENUM;
+            gl.blendFunc.dstRGB = gl.INVALID_ENUM;
+            gl.blendFunc.dstAlpha = gl.INVALID_ENUM;
+        }
+  
+        if(NANOVG_GL_USE_UNIFORMBUFFER){
+            gl.bindBuffer(gl.UNIFORM_BUFFER, gl.fragBuf);
+            gl.bufferData(gl.UNIFORM_BUFFER, gl.uniforms, gl.STREAM_DRAW);
+        }
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertBuf);
+        
+        const vertexData = new Float32Array(gl.verts, 0, gl.nverts * 4);
+        gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STREAM_DRAW);
+
+        gl.enableVertexAttribArray(0);
+        gl.enableVertexAttribArray(1);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+        gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
+
+        gl.uniform1i(gl.shader.loc[GLNVG_LOC_TEX], 0);
+        gl.uniform2fv(gl.shader.loc[GLNVG_LOC_VIEWSIZE], gl.view);
+        
+        for (let i = 0; i < gl.ncalls; i++) {
+            const call = gl.calls[i];
+            
+            glnvg__blendFuncSeparate(gl, call.blendFunc);
+            
+            if (call.type === GLNVG_FILL)
+                glnvg__fill(gl, call);
+            else if (call.type === GLNVG_CONVEXFILL)
+                glnvg__convexFill(gl, call);
+            else if (call.type === GLNVG_STROKE)
+                glnvg__stroke(gl, call);
+            else if (call.type === GLNVG_TRIANGLES)
+                glnvg__triangles(gl, call);
+        }
+
+        gl.disableVertexAttribArray(0);
+        gl.disableVertexAttribArray(1);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        gl.useProgram(null);
+        glnvg__bindTexture(gl, null);
+    }
+  
+    gl.nverts = 0;
+    gl.npaths = 0;
+    gl.ncalls = 0;
+    gl.nuniforms = 0;
+}
+  
+function glnvg__blendFuncSeparate(gl, blend) {
+    if(NANOVG_GL_USE_STATE_FILTER){
+        if (
+            gl.blendFunc.srcRGB !== blend.srcRGB ||
+            gl.blendFunc.dstRGB !== blend.dstRGB ||
+            gl.blendFunc.srcAlpha !== blend.srcAlpha ||
+            gl.blendFunc.dstAlpha !== blend.dstAlpha
+        ) {
+            gl.blendFunc = blend;
+            gl.blendFuncSeparate(blend.srcRGB, blend.dstRGB, blend.srcAlpha, blend.dstAlpha);
+        }
+    }else{
+        gl.blendFuncSeparate(blend.srcRGB, blend.dstRGB, blend.srcAlpha, blend.dstAlpha);
+    }
+}
+
+function glnvg__setUniforms(gl, uniformOffset, image) {
+  let tex = null;
+
+  const frag = nvg__fragUniformPtr(gl, uniformOffset);
+  
+  gl.uniform4fv(gl.shader.loc[GLNVG_LOC_FRAG], frag.buffer);
+
+  if (image !== 0) tex = glnvg__findTexture(gl, image);
+  if (tex === null) tex = glnvg__findTexture(gl, gl.dummyTex);
+  glnvg__bindTexture(gl, tex !== null ? tex.tex : null);
+}
+
+
+function glnvg__fill(gl, call) {
+    let paths = [];
+    for (let i = call.pathOffset; i < call.pathOffset + call.pathCount; i++) {
+        paths.push(gl.paths[i]);
+    }
+    let npaths = call.pathCount;
+
+    gl.enable(gl.STENCIL_TEST);
+    glnvg__stencilMask(gl, 0xff);
+    glnvg__stencilFunc(gl, gl.ALWAYS, 0, 0xff);
+    gl.colorMask(false, false, false, false);
+
+    glnvg__setUniforms(gl, call.uniformOffset, 0);
+    glnvg__checkError(gl, "fill simple");
+
+    gl.stencilOpSeparate(gl.FRONT, gl.KEEP, gl.KEEP, gl.INCR_WRAP);
+    gl.stencilOpSeparate(gl.BACK, gl.KEEP, gl.KEEP, gl.DECR_WRAP);
+    gl.disable(gl.CULL_FACE);
+    for (let i = 0; i < npaths; i++)
+        gl.drawArrays(gl.TRIANGLE_FAN, paths[i].fillOffset, paths[i].fillCount);
+    gl.enable(gl.CULL_FACE);
+
+    gl.colorMask(true, true, true, true);
+
+    glnvg__setUniforms(gl, call.uniformOffset + gl.fragSize, call.image);
+    glnvg__checkError(gl, "fill fill");
+
+    if (gl.flags & NVG_ANTIALIAS) {
+        glnvg__stencilFunc(gl, gl.EQUAL, 0x00, 0xff);
+        gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
+        for (let i = 0; i < npaths; i++)
+            gl.drawArrays(gl.TRIANGLE_STRIP, paths[i].strokeOffset, paths[i].strokeCount);
+    }
+
+    glnvg__stencilFunc(gl, gl.NOTEQUAL, 0x0, 0xff);
+    gl.stencilOp(gl.ZERO, gl.ZERO, gl.ZERO);
+    gl.drawArrays(gl.TRIANGLE_STRIP, call.triangleOffset, call.triangleCount);
+
+    gl.disable(gl.STENCIL_TEST);
+}
+    
+function glnvg__convexFill(gl, call) {
+    const paths = gl.paths.slice(call.pathOffset, call.pathOffset + call.pathCount);
+    const npaths = call.pathCount;
+  
+    glnvg__setUniforms(gl, call.uniformOffset, call.image);
+    glnvg__checkError(gl, "convex fill");
+
+    for (let i = 0; i < npaths; i++) {
+        if (paths[i].fillCount > 0) {
+            gl.drawArrays(gl.TRIANGLE_FAN, paths[i].fillOffset, paths[i].fillCount);
+        }
+        if (paths[i].strokeCount > 0) {
+            gl.drawArrays(gl.TRIANGLE_STRIP, paths[i].strokeOffset, paths[i].strokeCount);
+        }
+    }
+}
+
+function glnvg__stroke(gl, call) {
+    let paths = [];
+    for (let i = call.pathOffset; i < call.pathOffset + call.pathCount; i++) {
+        paths.push(gl.paths[i]);
+    }
+    let npaths = call.pathCount;
+    const hadCull = gl.isEnabled(gl.CULL_FACE);
+    gl.disable(gl.CULL_FACE);
+
+    if (gl.flags & NVG_STENCIL_STROKES) {
+        gl.enable(gl.STENCIL_TEST);
+        glnvg__stencilMask(gl, 0xff);
+
+        glnvg__stencilFunc(gl, gl.EQUAL, 0x0, 0xff);
+        gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
+        glnvg__setUniforms(gl, call.uniformOffset + gl.fragSize, call.image);
+        glnvg__checkError(gl, "stroke fill 0");
+        for (let i = 0; i < npaths; i++)
+            gl.drawArrays(gl.TRIANGLE_STRIP, paths[i].strokeOffset, paths[i].strokeCount);
+
+        glnvg__setUniforms(gl, call.uniformOffset, call.image);
+        glnvg__stencilFunc(gl, gl.EQUAL, 0x00, 0xff);
+        gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
+        for (let i = 0; i < npaths; i++)
+            gl.drawArrays(gl.TRIANGLE_STRIP, paths[i].strokeOffset, paths[i].strokeCount);
+
+        gl.colorMask(false, false, false, false);
+        glnvg__stencilFunc(gl, gl.ALWAYS, 0x0, 0xff);
+        gl.stencilOp(gl.ZERO, gl.ZERO, gl.ZERO);
+        glnvg__checkError(gl, "stroke fill 1");
+        for (let i = 0; i < npaths; i++)
+            gl.drawArrays(gl.TRIANGLE_STRIP, paths[i].strokeOffset, paths[i].strokeCount);
+        gl.colorMask(true, true, true, true);
+
+        gl.disable(gl.STENCIL_TEST);
+    } else {
+        glnvg__setUniforms(gl, call.uniformOffset, call.image);
+        glnvg__checkError(gl, "stroke fill");
+        for (let i = 0; i < npaths; i++)
+            gl.drawArrays(gl.TRIANGLE_STRIP, paths[i].strokeOffset, paths[i].strokeCount);
+    }
+
+    if (hadCull) gl.enable(gl.CULL_FACE);
+}
+
+function glnvg__triangles(gl, call) {
+    glnvg__setUniforms(gl, call.uniformOffset, call.image);
+    glnvg__checkError(gl, "triangles fill");
+
+    gl.drawArrays(gl.TRIANGLES, call.triangleOffset, call.triangleCount);
+}
+
+function glnvg__maxVertCount(paths, npaths) {
+    let count = 0;
+    for (let i = 0; i < npaths; i++) {
+        count += paths[i].nfill;
+        count += paths[i].nstroke;
+    }
+    return count;
+}
+
+function nvg__vset(vtx, x, y, u, v) {
+    vtx.x = x;
+    vtx.y = y;
+    vtx.u = u;
+    vtx.v = v;
+}
+
+function glnvg__allocFragUniforms(gl, n) {
+    let ret = 0;
+    let structSize = gl.fragSize;
+    
+    if (gl.nuniforms + n > gl.cuniforms) {
+        let cuniforms = Math.max(gl.nuniforms + n, 128) + Math.floor(gl.cuniforms / 2);
+        let totalFloats = (structSize * cuniforms) / Float32Array.BYTES_PER_ELEMENT;
+        
+        let newUniforms = new Float32Array(totalFloats);
+        
+        if (gl.uniforms && gl.nuniforms > 0) {
+            let oldSize = (structSize * gl.nuniforms) / Float32Array.BYTES_PER_ELEMENT;
+            newUniforms.set(gl.uniforms.subarray(0, oldSize));
+        }
+        
+        gl.uniforms = newUniforms;
+        gl.cuniforms = cuniforms;
+    }
+    
+    ret = gl.nuniforms * structSize;
+    gl.nuniforms += n;
+    return ret;
+}
+
+//function nvg__fragUniformPtr(gl, i) {
+//    return new GLNVGfragUniforms(gl.uniforms.subarray(i * gl.fragSize, (i + 1) * gl.fragSize));
+//}
+
+function nvg__fragUniformPtr(gl, byteOffset) {
+    const floatOffset = byteOffset / Float32Array.BYTES_PER_ELEMENT;
+    return new GLNVGfragUniforms(gl.uniforms, byteOffset);
+}
+
+
+function glnvg__convertPaint(gl, frag, paint, scissor, width, fringe, strokeThr) {
+    let tex = null;
+    const invxform = new Float32Array(6);
+    frag.buffer.fill(0);
+
+    frag.innerCol = glnvg__premulColor(paint.innerColor);
+    frag.outerCol = glnvg__premulColor(paint.outerColor);
+
+    if (scissor.extent[0] < -0.5 || scissor.extent[1] < -0.5) {
+        const zeroMat = new Float32Array(12);
+        frag.scissorMat = zeroMat;
+        frag.scissorExt = [1.0, 1.0];
+        frag.scissorScale = [1.0, 1.0];
+    } else {
+        const scissorMat3x4 = new Float32Array(12);
+        nvgTransformInverse(invxform, scissor.xform);
+        glnvg__xformToMat3x4(scissorMat3x4, invxform);
+        frag.scissorMat = scissorMat3x4;
+        frag.scissorExt = [scissor.extent[0], scissor.extent[1]];
+        frag.scissorScale = [
+            Math.sqrt(scissor.xform[0] * scissor.xform[0] + scissor.xform[2] * scissor.xform[2]) / fringe,
+            Math.sqrt(scissor.xform[1] * scissor.xform[1] + scissor.xform[3] * scissor.xform[3]) / fringe
+        ];
+    }
+
+    frag.extent = [paint.extent[0], paint.extent[1]];
+    frag.strokeMult = (width * 0.5 + fringe * 0.5) / fringe;
+    frag.strokeThr = strokeThr;
+
+    if (paint.image !== 0 && paint.image !== undefined && paint.image !== null) {
+        tex = glnvg__findTexture(gl, paint.image);
+        if (tex === null) return 0;
+        if ((tex.flags & NVG_IMAGE_FLIPY) !== 0) {
+            const m1 = new Float32Array(6);
+            const m2 = new Float32Array(6);
+            nvgTransformTranslate(m1, 0.0, frag.extent[1] * 0.5);
+            nvgTransformMultiply(m1, paint.xform);
+            nvgTransformScale(m2, 1.0, -1.0);
+            nvgTransformMultiply(m2, m1);
+            nvgTransformTranslate(m1, 0.0, -frag.extent[1] * 0.5);
+            nvgTransformMultiply(m1, m2);
+            nvgTransformInverse(invxform, m1);
+        } else {
+            nvgTransformInverse(invxform, paint.xform);
+        }
+        frag.type = NSVG_SHADER_FILLIMG;
+
+        if(NANOVG_GL_USE_UNIFORMBUFFER){
+            if (tex.type === NVG_TEXTURE_RGBA)
+                frag.texType = (tex.flags & NVG_IMAGE_PREMULTIPLIED) ? 0 : 1;
+            else
+                frag.texType = 2;
+        }else{
+            if (tex.type === NVG_TEXTURE_RGBA)
+                frag.texType = (tex.flags & NVG_IMAGE_PREMULTIPLIED) ? 0.0 : 1.0;
+            else
+                frag.texType = 2.0;
+        }
+    } else {
+        frag.type = NSVG_SHADER_FILLGRAD;
+        frag.radius = paint.radius;
+        frag.feather = paint.feather;
+        nvgTransformInverse(invxform, paint.xform);
+    }
+
+    const paintMat3x4 = new Float32Array(12);
+    glnvg__xformToMat3x4(paintMat3x4, invxform);
+    frag.paintMat = paintMat3x4;
+
+    return 1;
+}
+
+function glnvg_convertBlendFuncFactor(factor) {
+    if (factor === NVG_ZERO)
+        return 0;  // ZERO
+    if (factor === NVG_ONE)
+        return 1;  // ONE
+    if (factor === NVG_SRC_COLOR)
+        return 0x0300;  // SRC_COLOR
+    if (factor === NVG_ONE_MINUS_SRC_COLOR)
+        return 0x0301;  // ONE_MINUS_SRC_COLOR
+    if (factor === NVG_DST_COLOR)
+        return 0x0306;  // DST_COLOR
+    if (factor === NVG_ONE_MINUS_DST_COLOR)
+        return 0x0307;  // ONE_MINUS_DST_COLOR
+    if (factor === NVG_SRC_ALPHA)
+        return 0x0302;  // SRC_ALPHA
+    if (factor === NVG_ONE_MINUS_SRC_ALPHA)
+        return 0x0303;  // ONE_MINUS_SRC_ALPHA
+    if (factor === NVG_DST_ALPHA)
+        return 0x0304;  // DST_ALPHA
+    if (factor === NVG_ONE_MINUS_DST_ALPHA)
+        return 0x0305;  // ONE_MINUS_DST_ALPHA
+    if (factor === NVG_SRC_ALPHA_SATURATE)
+        return 0x0308;  // SRC_ALPHA_SATURATE
+    return 0x0500;  // INVALID_ENUM
+}
+
+function glnvg__maxi(a, b) {
+    return a > b ? a : b;
+}
+
+function glnvg__premulColor(c) {
+    return {
+        r: c.rgba[0] * c.rgba[3],
+        g: c.rgba[1] * c.rgba[3],
+        b: c.rgba[2] * c.rgba[3],
+        a: c.rgba[3]
+    };
+}
+
+function glnvg__xformToMat3x4(m3, t) {
+    m3[0] = t[0];
+    m3[1] = t[1];
+    m3[2] = 0.0;
+    m3[3] = 0.0;
+    m3[4] = t[2];
+    m3[5] = t[3];
+    m3[6] = 0.0;
+    m3[7] = 0.0;
+    m3[8] = t[4];
+    m3[9] = t[5];
+    m3[10] = 1.0;
+    m3[11] = 0.0;
+}
+
+function glnvg__findTexture(gl, id) {
+    for (let i = 0; i < gl.ntextures; i++) {
+        if (gl.textures[i].id === id) {
+            return gl.textures[i];
+        }
+    }
+    return null;
+}
+
+function glnvg__allocTexture(gl) {
+    var tex = null;
+    var i;
+  
+    for (i = 0; i < gl.ntextures; i++) {
+      if (gl.textures[i].id === 0) {
+        tex = gl.textures[i];
+        break;
+      }
+    }
+  
+    if (tex === null) {
+      if (gl.ntextures + 1 > gl.ctextures) {
+        var textures;
+        var ctextures = glnvg__maxi(gl.ntextures + 1, 4) + Math.floor(gl.ctextures / 2); 
+        textures = new Array(ctextures);
+        for (var j = 0; j < ctextures; j++) {
+          textures[j] = j < gl.ntextures && gl.textures ? gl.textures[j] : new GLNVGtexture();
+        }
+        if (textures === null) return null;
+        gl.textures = textures;
+        gl.ctextures = ctextures;
+      }
+      tex = gl.textures[gl.ntextures++];
+    }
+  
+    tex.id = ++gl.textureId;
+  
+    return tex;
+}
+  
+function glnvg__nearestPow2(num) {
+    var n = num > 0 ? num - 1 : 0;
+    n |= n >> 1;
+    n |= n >> 2;
+    n |= n >> 4;
+    n |= n >> 8;
+    n |= n >> 16;
+    n++;
+    return n;
+}
+
+function glnvg__stencilMask(gl, mask) {
+    if (NANOVG_GL_USE_STATE_FILTER) {
+        if (gl.stencilMsk !== mask) {
+            gl.stencilMsk = mask;
+            gl.stencilMask(mask);
+        }
+    } else {
+        gl.stencilMsk = mask;
+    }
+}
+
+function glnvg__stencilFunc(gl, func, ref, mask) {
+    if (NANOVG_GL_USE_STATE_FILTER) {
+        if (
+            gl.stencilFnc !== func ||
+            gl.stencilFuncRef !== ref ||
+            gl.stencilFuncMask !== mask
+        ) {
+            gl.stencilFnc = func;
+            gl.stencilFuncRef = ref;
+            gl.stencilFuncMask = mask;
+            gl.stencilFunc(func, ref, mask);
+        }
+    } else {
+        gl.stencilFunc(func, ref, mask);
+    }
+}
+  
+function glnvg__bindTexture(gl, tex) {
+    if (NANOVG_GL_USE_STATE_FILTER){
+        if (gl.boundTexture !== tex) {
+            gl.boundTexture = tex;
+            gl.bindTexture(gl.TEXTURE_2D, tex);
+        }
+    }
+    else
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+}
+
+function glnvg__deleteTexture(gl, id) {
+    for (let i = 0; i < gl.ntextures; i++) {
+        const tex = gl.textures[i];
+        if (tex.id === id) {
+            if (tex.tex && (tex.flags & NVG_IMAGE_NODELETE) === 0) {
+                gl.deleteTexture(tex.tex);
+            }
+            gl.textures[i] = new GLNVGtexture();
+            return 1;
+        }
+    }
+    return 0;
+}
+
+function glnvg__renderDeleteTexture(gl, image) {
+    return glnvg__deleteTexture(gl, image);
+}
+
+function glnvg__renderGetTextureSize(gl, image) {
+    const tex = glnvg__findTexture(gl, image);
+    if (tex === null) return [0, 0];
+    return [tex.width, tex.height];
+}
+
+function glnvg__renderCancel(gl) {
+    gl.nverts = 0;
+    gl.npaths = 0;
+    gl.ncalls = 0;
+    gl.nuniforms = 0;
+}
+
+function glnvg__renderTriangles(gl, paint, compositeOperation, scissor, verts, nverts, fringe) {
+    const call = glnvg__allocCall(gl);
+    if (call === null) return;
+
+    call.type = GLNVG_TRIANGLES;
+    call.image = paint.image;
+    call.blendFunc = glnvg__blendCompositeOperation(compositeOperation);
+
+    call.triangleOffset = glnvg__allocVerts(gl, nverts);
+    if (call.triangleOffset === -1) {
+        if (gl.ncalls > 0) gl.ncalls--;
+        return;
+    }
+    call.triangleCount = nverts;
+
+    const destView = new Float32Array(gl.verts, call.triangleOffset * NVG_VERTEX_SIZEOF, nverts * 4);
+    if (verts instanceof ArrayBuffer) {
+        destView.set(new Float32Array(verts, 0, nverts * 4));
+    } else if (verts instanceof Float32Array) {
+        destView.set(verts.subarray(0, nverts * 4));
+    } else {
+        for (let i = 0; i < nverts; i++) {
+            const dst = i * 4;
+            destView[dst + 0] = verts[i].x;
+            destView[dst + 1] = verts[i].y;
+            destView[dst + 2] = verts[i].u;
+            destView[dst + 3] = verts[i].v;
+        }
+    }
+
+    call.uniformOffset = glnvg__allocFragUniforms(gl, 1);
+    if (call.uniformOffset === -1) {
+        if (gl.ncalls > 0) gl.ncalls--;
+        return;
+    }
+
+    const frag = nvg__fragUniformPtr(gl, call.uniformOffset);
+    glnvg__convertPaint(gl, frag, paint, scissor, 1.0, fringe, -1.0);
+    frag.type = NSVG_SHADER_IMG;
+}
+
+function glnvg__deleteShader(gl, shader) {
+    if (shader.prog) gl.deleteProgram(shader.prog);
+    if (shader.vert) gl.deleteShader(shader.vert);
+    if (shader.frag) gl.deleteShader(shader.frag);
+}
+
+function glnvg__renderDelete(gl) {
+    if (!gl) return;
+
+    glnvg__deleteShader(gl, gl.shader);
+
+    if (gl.vertBuf) gl.deleteBuffer(gl.vertBuf);
+    if (gl.fragBuf) gl.deleteBuffer(gl.fragBuf);
+    if (gl.vertArr && gl.deleteVertexArray) gl.deleteVertexArray(gl.vertArr);
+
+    if (gl.textures) {
+        for (let i = 0; i < gl.ntextures; i++) {
+            const tex = gl.textures[i];
+            if (tex && tex.tex && (tex.flags & NVG_IMAGE_NODELETE) === 0) {
+                gl.deleteTexture(tex.tex);
+            }
+        }
+    }
+
+    gl.textures = null;
+    gl.paths = null;
+    gl.verts = null;
+    gl.uniforms = null;
+    gl.calls = null;
+}
+