@micahdb/tscon 0.0.0-stage → 0.1.1

package/dist/renderer.js

@@ -0,0 +1,172 @@
+import { renderer_frag, renderer_vert } from "./shaders.js";
+import { Canvas } from "./canvas.js";
+import { compileProgram, getAttribLocations, getUniformLocations, } from "./program.js";
+/**
+ * Renders a source texture as glyphs onto a {@link Canvas}.
+ *
+ * `Renderer` draws a grid of {@link TexGlyphs} cells, sampling an
+ * application-provided texture per cell according to each cell's
+ * {@link TexGlyphMode}. An application renders into a texture (e.g. a
+ * framebuffer object) and then calls {@link draw} with a matching
+ * {@link TexGlyphs} grid to draw that texture directly or as dithered
+ * coloured characters.
+ */
+export class Renderer {
+    gl_program;
+    attributes;
+    uniforms;
+    vao;
+    vbo;
+    resized;
+    /** The {@link Canvas} this renderer draws into. */
+    canvas;
+    /**
+     * Whether to use {@link Canvas.user_font} for non-box glyphs when
+     * available. Set to `true` by the application after assigning a font
+     * texture to `canvas.user_font`; automatically falls back to the bitmap
+     * font if `user_font` is `null`.
+     */
+    use_user_font;
+    /**
+     * Initializes the renderer for use.
+     * Listens for `"resize"` events from the canvas.
+     *
+     * @param canvas  The canvas to draw into.
+     */
+    constructor(canvas) {
+        this.canvas = canvas;
+        const gl = canvas.gl;
+        this.gl_program = compileProgram(gl, renderer_vert, renderer_frag);
+        this.attributes = getAttribLocations(gl, this.gl_program, {
+            row: "a_row",
+            col: "a_col",
+            mode: "a_mode",
+        });
+        this.uniforms = getUniformLocations(gl, this.gl_program, {
+            row: "u_row",
+            col: "u_col",
+            rows: "u_rows",
+            cols: "u_cols",
+            canvas_rows: "u_canvas_rows",
+            canvas_cols: "u_canvas_cols",
+            mouse_row: "u_mouse_row",
+            mouse_col: "u_mouse_col",
+            palette: "u_palette",
+            bitmap_font: "u_bitmap_font",
+            texture: "u_texture",
+            user_font: "u_user_font",
+            use_user_font: "u_use_user_font",
+        });
+        const vao = gl.createVertexArray();
+        this.vao = vao;
+        if (!vao) {
+            throw new Error("Could not create vertex array object");
+        }
+        gl.bindVertexArray(vao);
+        const vbo = gl.createBuffer();
+        this.vbo = vbo;
+        if (!vbo) {
+            throw new Error("Could not create vertex buffer");
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+        // every vertex in the VBO is a 32-bit integer split like so:
+        // [ row    | mode   | col     ]
+        // [ 8-bits | 8-bits | 16-bits ]
+        // a_row
+        gl.vertexAttribIPointer(this.attributes.row, 1, gl.UNSIGNED_BYTE, 4, 3);
+        gl.vertexAttribDivisor(this.attributes.row, 1);
+        gl.enableVertexAttribArray(this.attributes.row);
+        // a_mode
+        gl.vertexAttribIPointer(this.attributes.mode, 1, gl.UNSIGNED_BYTE, 4, 2);
+        gl.vertexAttribDivisor(this.attributes.mode, 1);
+        gl.enableVertexAttribArray(this.attributes.mode);
+        // a_col
+        gl.vertexAttribIPointer(this.attributes.col, 1, gl.UNSIGNED_SHORT, 4, 0);
+        gl.vertexAttribDivisor(this.attributes.col, 1);
+        gl.enableVertexAttribArray(this.attributes.col);
+        gl.bindVertexArray(null);
+        gl.useProgram(this.gl_program);
+        gl.uniform1i(this.uniforms.row, 0);
+        gl.uniform1i(this.uniforms.col, 0);
+        gl.uniform1i(this.uniforms.rows, 0);
+        gl.uniform1i(this.uniforms.cols, 0);
+        gl.uniform1i(this.uniforms.canvas_rows, this.canvas.rows);
+        gl.uniform1i(this.uniforms.canvas_cols, this.canvas.cols);
+        gl.uniform3fv(this.uniforms.palette, this.canvas.palette);
+        gl.uniform1i(this.uniforms.bitmap_font, 0);
+        gl.uniform1i(this.uniforms.texture, 1);
+        gl.uniform1i(this.uniforms.user_font, 2);
+        gl.uniform1i(this.uniforms.use_user_font, 0);
+        this.resized = false;
+        this.use_user_font = false;
+        this.canvas.addEventListener("resize", () => {
+            this.resized = true;
+        });
+    }
+    /**
+     * Draw a {@link TexGlyphs} grid sampling `texture` into a region of the
+     * canvas.
+     *
+     * `tglyphs.rows`/`cols` must match `dst.rows`/`cols`; otherwise the
+     * draw is skipped. `dst` is in canvas cell coordinates and may extend
+     * beyond the canvas; the shader clips via NDC. Use a `tglyphs` grid
+     * sized to the texture's aspect so the texture isn't distorted.
+     *
+     * @example
+     * ```ts
+     * renderer.draw(tglyphs, texture, {
+     *   row: 0, col: 0,
+     *   rows: tglyphs.rows, cols: tglyphs.cols,
+     * });
+     * ```
+     *
+     * @param tglyphs  Texture-glyph grid describing how to sample.
+     * @param texture  Source texture to sample from.
+     * @param dst      Destination region on the canvas (cells).
+     */
+    draw(tglyphs, texture, dst) {
+        if (tglyphs.rows !== dst.rows || tglyphs.cols !== dst.cols) {
+            console.log("Renderer.draw: skipping due to bad tglyphs or dst");
+            return;
+        }
+        const gl = this.canvas.gl;
+        gl.useProgram(this.gl_program);
+        if (this.resized) {
+            this.resized = false;
+            gl.uniform1i(this.uniforms.canvas_rows, this.canvas.rows);
+            gl.uniform1i(this.uniforms.canvas_cols, this.canvas.cols);
+        }
+        // set destination information uniforms
+        gl.uniform1i(this.uniforms.row, dst.row);
+        gl.uniform1i(this.uniforms.col, dst.col);
+        gl.uniform1i(this.uniforms.rows, tglyphs.rows);
+        gl.uniform1i(this.uniforms.cols, tglyphs.cols);
+        gl.uniform1i(this.uniforms.mouse_row, this.canvas.mouse_row ?? -1);
+        gl.uniform1i(this.uniforms.mouse_col, this.canvas.mouse_col ?? -1);
+        // set vertex buffer data to provided texture glyphs
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
+        gl.bufferData(gl.ARRAY_BUFFER, tglyphs.data, gl.DYNAMIC_DRAW);
+        // bind and activate bitmap font
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.canvas.bitmap_font);
+        // bind and activate provided texture
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        // user application-provided font
+        if (this.use_user_font) {
+            gl.uniform1i(this.uniforms.use_user_font, 1);
+        }
+        if (this.canvas.user_font !== null) {
+            gl.activeTexture(gl.TEXTURE2);
+            gl.bindTexture(gl.TEXTURE_2D, this.canvas.user_font);
+        }
+        else if (this.use_user_font) {
+            this.use_user_font = false;
+            gl.uniform1i(this.uniforms.use_user_font, 0);
+        }
+        // draw the glyphs covered by the provided texture glyphs
+        gl.bindVertexArray(this.vao);
+        gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, tglyphs.rows * tglyphs.cols);
+        gl.bindVertexArray(null);
+    }
+}

package/dist/shaders.d.ts

@@ -0,0 +1,5 @@
+export declare const glyph_frag = "// Computes the mix value for a coordinate relative to pixels, that will\n// snap to the center of the pixel if it is in the center 50% of it, and\n// otherwise interpolate linearly outside of the center 50%.\nfloat sharp_bilinear_weight(float coord) {\n\t// distance of coord to center of cooresponding pixel\n\tfloat center_dist = fract(coord) - 0.5;\n\n\t// the component of coord that is within 50% of the center of the pixel\n\tfloat center_comp = clamp(center_dist, -0.25, 0.25);\n\n\t// when center_dist is outside of the center 50% of the pixel, this\n\t// will be an interpolation between this pixel and its neighbour\n\tfloat interp_coord = floor(coord) + (center_dist - center_comp) * 2.0;\n\n\t// this will be 0 when coord is in the center 50% of the pixel\n\treturn interp_coord - floor(coord);\n}\n\nfloat bit_value(uvec4 texel, int x, int y) {\n\treturn float((texel[y] >> (7 - x)) & 1u);\n}\n\nfloat bitmap_glyph_value(\n\tmediump usampler2D bitmap,\n\tivec2 glyph_coord,\n\tvec2 cell_coord\n) {\n\tint block = clamp(int(floor(cell_coord.y * 4.0)), 0, 3);\n\tivec2 texel_coord = ivec2(glyph_coord.x, glyph_coord.y + block);\n\tuvec4 texel = texelFetch(bitmap, texel_coord, 0);\n\n\t// each block is 8px wide\n\tfloat block_x = clamp(cell_coord.x * 8.0, 0.0, 7.0);\n\n\t// each cell is 4 blocks high, each block being 4px tall\n\tfloat block_y = clamp(cell_coord.y * 16.0 - float(block) * 4.0,\n\t\t\t      0.0, 3.0);\n\n\tfloat horiz_weight = sharp_bilinear_weight(block_x);\n\tfloat vert_weight = sharp_bilinear_weight(block_y);\n\n\tint x = clamp(int(block_x), 0, 7);\n\tint y = clamp(int(block_y), 0, 3);\n\n\t// get each bit\n\tfloat tl = bit_value(texel, x, y);\n\tfloat tr = bit_value(texel, x + 1, y);\n\tfloat bl = bit_value(texel, x, y + 1);\n\tfloat br = bit_value(texel, x + 1, y + 1);\n\n\tfloat top = mix(tl, tr, horiz_weight);\n\tfloat bot = mix(bl, br, horiz_weight);\n\n\treturn mix(top, bot, vert_weight);\n}\n";
+export declare const terminal_vert = "#version 300 es\n\nin uint a_colour;\nin uint a_char_code;\n\nuniform int u_rows;\nuniform int u_cols;\nuniform int u_mouse_row;\nuniform int u_mouse_col;\nuniform vec3 u_palette[16];\n\nout vec2 v_cell_coord;\nout vec2 v_uv_coord;\n\nflat out vec3 f_fg_colour;\nflat out vec3 f_bg_colour;\nflat out ivec2 f_glyph_coord;\nflat out uint f_char_code;\n\nvoid main() {\n\tint row = gl_InstanceID / u_cols;\n\tint col = gl_InstanceID % u_cols;\n\tint is_cursor = int(u_mouse_row == row && u_mouse_col == col);\n\tint not_is_cursor = int(is_cursor == 0);\n\n\tif (a_colour == 0u && a_char_code == 0u) {\n\t\t// clipped: don't cover any pixels below this glyph\n\t\t// e.g., a previously rendered texture\n\t\tgl_Position = vec4(2.0, 2.0, 2.0, 1.0);\n\t\treturn;\n\t}\n\n\t// 240 = 0b11110000\n\tint colour = int(a_colour + uint(a_colour == 0u) * 240u);\n\n\tint fg_idx = int(colour >> (not_is_cursor * 4) & 0xf);\n\tint bg_idx = int(colour >> (is_cursor * 4) & 0xf);\n\n\tf_fg_colour = u_palette[fg_idx];\n\tf_bg_colour = u_palette[bg_idx];\n\n\t// 32 glyph columns, 8 glyph rows\n\tint glyph_row = clamp(int(a_char_code / 32u), 0, 7);\n\tint glyph_col = clamp(int(a_char_code % 32u), 0, 31);\n\n\t// coordinate of a_char_code in u_bitmap_font\n\t// (note: there are 4 pixels per glyph, in a column; hence row * 4)\n\tf_glyph_coord = ivec2(glyph_col, glyph_row * 4);\n\n\t// used when checking whether to use u_user_font or not\n\tf_char_code = a_char_code;\n\n\t/* A glyph is made up of two triangles, six vertices:\n\t *\n\t *   0--2     ,5     0--2,5\n\t *   | /  +  / |  =  |   |\n\t *   1'     3--4    1,3--4\n\t */\n\n\tint row_inc = int(gl_VertexID == 1 || gl_VertexID == 3 ||\n\t\t\t  gl_VertexID == 4);\n\n\tint col_inc = int(gl_VertexID == 2 || gl_VertexID == 4 ||\n\t\t\t  gl_VertexID == 5);\n\n\tv_cell_coord = vec2(float(col_inc), float(row_inc));\n\n\trow += row_inc;\n\tcol += col_inc;\n\n\tv_uv_coord = vec2(float(glyph_col + col_inc) / 32.0,\n\t\t\t  float(glyph_row + row_inc) / 8.0);\n\n\t// position needs to be in [-1.0, 1.0]\n\tfloat ndc_x = 2.0 * float(col) / float(u_cols) - 1.0;\n\tfloat ndc_y = -2.0 * float(row) / float(u_rows) + 1.0;\n\n\tgl_Position = vec4(ndc_x, ndc_y, 0.0, 1.0);\n}\n";
+export declare const terminal_frag = "#version 300 es\n\nprecision mediump float;\n\n// Computes the mix value for a coordinate relative to pixels, that will\n// snap to the center of the pixel if it is in the center 50% of it, and\n// otherwise interpolate linearly outside of the center 50%.\nfloat sharp_bilinear_weight(float coord) {\n\t// distance of coord to center of cooresponding pixel\n\tfloat center_dist = fract(coord) - 0.5;\n\n\t// the component of coord that is within 50% of the center of the pixel\n\tfloat center_comp = clamp(center_dist, -0.25, 0.25);\n\n\t// when center_dist is outside of the center 50% of the pixel, this\n\t// will be an interpolation between this pixel and its neighbour\n\tfloat interp_coord = floor(coord) + (center_dist - center_comp) * 2.0;\n\n\t// this will be 0 when coord is in the center 50% of the pixel\n\treturn interp_coord - floor(coord);\n}\n\nfloat bit_value(uvec4 texel, int x, int y) {\n\treturn float((texel[y] >> (7 - x)) & 1u);\n}\n\nfloat bitmap_glyph_value(\n\tmediump usampler2D bitmap,\n\tivec2 glyph_coord,\n\tvec2 cell_coord\n) {\n\tint block = clamp(int(floor(cell_coord.y * 4.0)), 0, 3);\n\tivec2 texel_coord = ivec2(glyph_coord.x, glyph_coord.y + block);\n\tuvec4 texel = texelFetch(bitmap, texel_coord, 0);\n\n\t// each block is 8px wide\n\tfloat block_x = clamp(cell_coord.x * 8.0, 0.0, 7.0);\n\n\t// each cell is 4 blocks high, each block being 4px tall\n\tfloat block_y = clamp(cell_coord.y * 16.0 - float(block) * 4.0,\n\t\t\t      0.0, 3.0);\n\n\tfloat horiz_weight = sharp_bilinear_weight(block_x);\n\tfloat vert_weight = sharp_bilinear_weight(block_y);\n\n\tint x = clamp(int(block_x), 0, 7);\n\tint y = clamp(int(block_y), 0, 3);\n\n\t// get each bit\n\tfloat tl = bit_value(texel, x, y);\n\tfloat tr = bit_value(texel, x + 1, y);\n\tfloat bl = bit_value(texel, x, y + 1);\n\tfloat br = bit_value(texel, x + 1, y + 1);\n\n\tfloat top = mix(tl, tr, horiz_weight);\n\tfloat bot = mix(bl, br, horiz_weight);\n\n\treturn mix(top, bot, vert_weight);\n}\n\n\nin vec2 v_cell_coord;\nin vec2 v_uv_coord;\n\nflat in vec3 f_fg_colour;\nflat in vec3 f_bg_colour;\nflat in ivec2 f_glyph_coord;\nflat in uint f_char_code;\n\nuniform mediump usampler2D u_bitmap_font;\nuniform sampler2D u_user_font;\nuniform bool u_use_user_font;\n\nout vec4 frag_colour;\n\nvoid main() {\n\t// 176U and 191U are the first and last box-drawing characters\n\tif (u_use_user_font && (f_char_code < 176U || f_char_code >= 224U)) {\n\t\tvec4 samp = texture(u_user_font, v_uv_coord);\n\t\tfrag_colour = vec4(mix(f_bg_colour, f_fg_colour, samp.r), 1.0);\n\t\treturn;\n\t}\n\n\tfloat value = bitmap_glyph_value(u_bitmap_font, f_glyph_coord,\n\t\t\t\t\t v_cell_coord);\n\tfrag_colour = vec4(mix(f_bg_colour, f_fg_colour, value), 1.0);\n}\n";
+export declare const renderer_vert = "#version 300 es\n\n#define SAMPLE_MODE\t0u\n#define GLYPHS_MODE\t1u\n#define BG_GLYPHS_MODE\t2u\n\nprecision mediump float;\n\nin uint a_row;\nin uint a_col;\nin uint a_mode;\n\nuniform int u_row;\nuniform int u_col;\nuniform int u_rows;\nuniform int u_cols;\nuniform int u_canvas_rows;\nuniform int u_canvas_cols;\nuniform int u_mouse_row;\nuniform int u_mouse_col;\nuniform vec3 u_palette[16];\nuniform sampler2D u_texture;\n\nout vec2 v_cell_coord;\nout vec2 v_tex_uv_coord; // sample mode\nout vec2 v_font_uv_coord;\n\nflat out uint f_mode;\nflat out int f_is_cursor;\nflat out vec3 f_fg_colour;\nflat out vec3 f_bg_colour;\nflat out ivec2 f_glyph_coord;\nflat out int f_char_code;\n\nconst vec3 dimensions[8] = vec3[](\n\tvec3(0.0, 0.0, 0.0),\t// black (unused)\n\tvec3(1.0, 0.8, 0.8),\t// red\n\tvec3(0.8, 1.0, 0.8),\t// green\n\tvec3(1.0, 1.0, 0.8),\t// yellow\n\tvec3(0.8, 0.8, 1.0),\t// blue\n\tvec3(1.0, 0.8, 1.0),\t// magenta\n\tvec3(0.8, 1.0, 1.0),\t// cyan\n\tvec3(1.0, 1.0, 1.0)\t// white\n);\n\nstruct Dims {\n\tint dim1;\n\tint dim2;\n\tfloat ratio;\n};\n\nDims getDims(vec3 colour) {\n\tvec3 ncolour = normalize(colour);\n\tfloat d1 = 1000.0;\n\tfloat d2 = 1000.0;\n\tint dim1 = 0;\n\tint dim2 = 0;\n\n\tfor (int i = 1; i < 8; i++) {\n\t\tfloat d = distance(ncolour, normalize(dimensions[i]));\n\n\t\tif (d < d1) {\n\t\t\td2 = d1;\n\t\t\tdim2 = dim1;\n\t\t\td1 = d;\n\t\t\tdim1 = i;\n\t\t} else if (d < d2) {\n\t\t\td2 = d;\n\t\t\tdim2 = i;\n\t\t}\n\t}\n\n\treturn Dims(dim1, dim2, d1 / (d1 + d2));\n}\n\nfloat getLum(vec3 colour, int dim) {\n\tvec3 dcolour = dimensions[dim];\n\treturn dot(colour, dcolour) / dot(dcolour, dcolour);\n}\n\nstruct Glyph {\n\tint char_code;\n\tint fg_idx;\n\tint bg_idx;\n};\n\nGlyph getGlyph(int dim, float lum) {\n\t//                        .   ,   -   :   ;   =   !   *   #   $   @\n\tint glyphs[12] = int[](0, 46, 44, 45, 58, 59, 61, 33, 42, 35, 36, 64);\n\n\tint fgs[2] = int[](dim, dim + 8);\n\n\tif (dim == 7) {\n\t\tfgs = int[](8, 15);\n\t}\n\n\tint layer = clamp(int(lum * 2.0), 0, 2);\n\n\tGlyph glyph;\n\n\tint glyph_idx = clamp(int(12.0 * lum), 0, 11);\n\tglyph.char_code = glyphs[glyph_idx];\n\tglyph.fg_idx = fgs[layer];\n\tglyph.bg_idx = 0;\n\n\treturn glyph;\n}\n\nGlyph getBgGlyph(int dim, float lum) {\n\t//                        .   -   ,   :   ;   =   !   *   #   $   @\n\tint glyphs[12] = int[](0, 46, 45, 44, 58, 59, 61, 33, 42, 35, 36, 64);\n\n\tint fgs[3] = int[](dim, dim + 8, 15);\n\tint bgs[3] = int[](0, dim, dim + 8);\n\n\tint layer = clamp(int(lum * 3.0), 0, 2);\n\n\t// check if dimension is white\n\tif (dim == 7) {\n\t\tif (layer > 0) {\n\t\t\t// reverse the order of the glyphs\n\t\t\tglyphs = int[](64, 36, 35, 42, 33, 61, 59, 58, 44, 45,\n\t\t\t\t       46, 0);\n\t\t}\n\n\t\tfgs = int[](7, 0, 8);\n\t\tbgs = int[](0, 7, 15);\n\t}\n\n\tGlyph glyph;\n\n\tint glyph_idx = clamp(int(12.0 * (3.0 * lum - float(layer))), 0, 11);\n\tglyph.char_code = glyphs[glyph_idx];\n\tglyph.fg_idx = fgs[layer];\n\tglyph.bg_idx = bgs[layer];\n\n\treturn glyph;\n}\n\nvoid main() {\n\tint origin_row = int(a_row);\n\tint origin_col = int(a_col);\n\n\tf_is_cursor = int(origin_row + u_row == u_mouse_row &&\n\t\t\t  origin_col + u_col == u_mouse_col);\n\n\t/* A glyph is made up of two triangles, six vertices:\n\t *\n\t *   0--2     ,5     0--2,5\n\t *   | /  +  / |  =  |   |\n\t *   1'     3--4    1,3--4\n\t */\n\n\tint row_inc = int(gl_VertexID == 1 || gl_VertexID == 3 ||\n\t\t\t  gl_VertexID == 4);\n\n\tint col_inc = int(gl_VertexID == 2 || gl_VertexID == 4 ||\n\t\t\t  gl_VertexID == 5);\n\n\tv_cell_coord = vec2(float(col_inc), float(row_inc));\n\n\tint row = origin_row + row_inc;\n\tint col = origin_col + col_inc;\n\n\tv_tex_uv_coord = vec2(float(col) / float(u_cols),\n\t\t\t  float(row) / float(u_rows));\n\n\t// position needs to be in [-1.0, 1.0]\n\tfloat ndc_x = 2.0 * float(u_col + col) / float(u_canvas_cols) - 1.0;\n\tfloat ndc_y = -2.0 * float(u_row + row) / float(u_canvas_rows) + 1.0;\n\n\tgl_Position = vec4(ndc_x, ndc_y, 0.0, 1.0);\n\n\tf_mode = a_mode;\n\n\t// sample mode\n\tif (f_mode == SAMPLE_MODE) {\n\t\t// no more work to do\n\t\treturn;\n\t}\n\n\t// dithered glyphs mode\n\n\tvec2 origin_uv_coord = vec2(float(origin_col) / float(u_cols),\n\t\t\t\t    float(origin_row) / float(u_rows));\n\n\tvec2 full_uv_cell = vec2(1.0 / float(u_cols), 1.0 / float(u_rows));\n\tvec4 samp = texture(u_texture, origin_uv_coord + 0.5 * full_uv_cell);\n\tvec3 colour = samp.rgb;\n\n\t// dithering\n\tfloat bayer[16] = float[](\n\t\t0.0, 0.5, 0.125, 0.625,\n\t\t0.75, 0.25, 0.875, 0.375,\n\t\t0.1875, 0.6875, 0.0625, 0.5625,\n\t\t0.9375, 0.4375, 0.8125, 0.3125\n\t);\n\tfloat bayer_val = bayer[int(origin_row) % 4 * 4 + int(origin_col) % 4];\n\n\tDims dims = getDims(colour);\n\tint dim = (bayer_val < dims.ratio) ? dims.dim2 : dims.dim1;\n\tfloat lum = getLum(colour, dim);\n\n\tfloat dither = (bayer_val - 0.5) / 12.0;\n\tlum = clamp(lum + dither, 0.0, 1.0);\n\n\tGlyph glyph;\n\n\tif (f_mode == BG_GLYPHS_MODE) {\n\t\tglyph = getBgGlyph(dim, lum);\n\t} else {\n\t\tglyph = getGlyph(dim, lum);\n\t}\n\n\tif (glyph.fg_idx == glyph.bg_idx && f_is_cursor == 1) {\n\t\tglyph.fg_idx = 15;\n\t\tglyph.bg_idx = 0;\n\t}\n\n\tf_fg_colour = u_palette[glyph.fg_idx];\n\tf_bg_colour = u_palette[glyph.bg_idx];\n\n\t// 32 glyph columns, 8 glyph rows\n\tint glyph_row = clamp(int(glyph.char_code / 32), 0, 7);\n\tint glyph_col = clamp(int(glyph.char_code % 32), 0, 31);\n\n\t// coordinate of char_code in u_bitmap_font\n\tf_glyph_coord = ivec2(glyph_col, glyph_row << 2);\n\n\tf_char_code = glyph.char_code;\n\n\tv_font_uv_coord = vec2(float(glyph_col + col_inc) / 32.0,\n\t\t\t       float(glyph_row + row_inc) / 8.0);\n}\n";
+export declare const renderer_frag = "#version 300 es\n\nprecision mediump float;\n\n// Computes the mix value for a coordinate relative to pixels, that will\n// snap to the center of the pixel if it is in the center 50% of it, and\n// otherwise interpolate linearly outside of the center 50%.\nfloat sharp_bilinear_weight(float coord) {\n\t// distance of coord to center of cooresponding pixel\n\tfloat center_dist = fract(coord) - 0.5;\n\n\t// the component of coord that is within 50% of the center of the pixel\n\tfloat center_comp = clamp(center_dist, -0.25, 0.25);\n\n\t// when center_dist is outside of the center 50% of the pixel, this\n\t// will be an interpolation between this pixel and its neighbour\n\tfloat interp_coord = floor(coord) + (center_dist - center_comp) * 2.0;\n\n\t// this will be 0 when coord is in the center 50% of the pixel\n\treturn interp_coord - floor(coord);\n}\n\nfloat bit_value(uvec4 texel, int x, int y) {\n\treturn float((texel[y] >> (7 - x)) & 1u);\n}\n\nfloat bitmap_glyph_value(\n\tmediump usampler2D bitmap,\n\tivec2 glyph_coord,\n\tvec2 cell_coord\n) {\n\tint block = clamp(int(floor(cell_coord.y * 4.0)), 0, 3);\n\tivec2 texel_coord = ivec2(glyph_coord.x, glyph_coord.y + block);\n\tuvec4 texel = texelFetch(bitmap, texel_coord, 0);\n\n\t// each block is 8px wide\n\tfloat block_x = clamp(cell_coord.x * 8.0, 0.0, 7.0);\n\n\t// each cell is 4 blocks high, each block being 4px tall\n\tfloat block_y = clamp(cell_coord.y * 16.0 - float(block) * 4.0,\n\t\t\t      0.0, 3.0);\n\n\tfloat horiz_weight = sharp_bilinear_weight(block_x);\n\tfloat vert_weight = sharp_bilinear_weight(block_y);\n\n\tint x = clamp(int(block_x), 0, 7);\n\tint y = clamp(int(block_y), 0, 3);\n\n\t// get each bit\n\tfloat tl = bit_value(texel, x, y);\n\tfloat tr = bit_value(texel, x + 1, y);\n\tfloat bl = bit_value(texel, x, y + 1);\n\tfloat br = bit_value(texel, x + 1, y + 1);\n\n\tfloat top = mix(tl, tr, horiz_weight);\n\tfloat bot = mix(bl, br, horiz_weight);\n\n\treturn mix(top, bot, vert_weight);\n}\n\n\n#define SAMPLE_MODE 0u\n\nin vec2 v_cell_coord;\nin vec2 v_tex_uv_coord; // f_mode == 0\nin vec2 v_font_uv_coord;\n\nflat in uint f_mode;\nflat in int f_is_cursor;\nflat in vec3 f_fg_colour;\nflat in vec3 f_bg_colour;\nflat in ivec2 f_glyph_coord;\nflat in int f_char_code;\n\nuniform mediump usampler2D u_bitmap_font;\nuniform sampler2D u_texture; // f_mode == 0\nuniform sampler2D u_user_font;\nuniform bool u_use_user_font;\n\nout vec4 frag_colour;\n\nvoid main() {\n\tif (f_mode == SAMPLE_MODE) {\n\t\tfrag_colour = texture(u_texture, v_tex_uv_coord);\n\n\t\t// invert the sample\n\t\tif (f_is_cursor == 1) {\n\t\t\tfrag_colour = vec4(vec3(1.0, 1.0, 1.0) -\n\t\t\t\t\t   frag_colour.rgb, 1.0);\n\t\t}\n\n\t\treturn;\n\t}\n\n\tvec3 fg = f_fg_colour;\n\tvec3 bg = f_bg_colour;\n\n\tif (f_is_cursor == 1) {\n\t\tvec3 tmp = fg;\n\t\tfg = bg;\n\t\tbg = tmp;\n\t}\n\n\t// 176 and 191 are the first and last box-drawing characters\n\tif (u_use_user_font && (f_char_code < 176 || f_char_code >= 224)) {\n\t\tvec4 samp = texture(u_user_font, v_font_uv_coord);\n\t\tfrag_colour = vec4(mix(bg, fg, samp.r), 1.0);\n\t\treturn;\n\t}\n\n\tfloat value = bitmap_glyph_value(u_bitmap_font, f_glyph_coord,\n\t\t\t\t\t v_cell_coord);\n\tfrag_colour = vec4(mix(bg, fg, value), 1.0);\n}\n";

package/dist/shaders.js

@@ -0,0 +1,470 @@
+// generated by `bun run shaders`
+export const glyph_frag = `\
+// Computes the mix value for a coordinate relative to pixels, that will
+// snap to the center of the pixel if it is in the center 50% of it, and
+// otherwise interpolate linearly outside of the center 50%.
+float sharp_bilinear_weight(float coord) {
+	// distance of coord to center of cooresponding pixel
+	float center_dist = fract(coord) - 0.5;
+
+	// the component of coord that is within 50% of the center of the pixel
+	float center_comp = clamp(center_dist, -0.25, 0.25);
+
+	// when center_dist is outside of the center 50% of the pixel, this
+	// will be an interpolation between this pixel and its neighbour
+	float interp_coord = floor(coord) + (center_dist - center_comp) * 2.0;
+
+	// this will be 0 when coord is in the center 50% of the pixel
+	return interp_coord - floor(coord);
+}
+
+float bit_value(uvec4 texel, int x, int y) {
+	return float((texel[y] >> (7 - x)) & 1u);
+}
+
+float bitmap_glyph_value(
+	mediump usampler2D bitmap,
+	ivec2 glyph_coord,
+	vec2 cell_coord
+) {
+	int block = clamp(int(floor(cell_coord.y * 4.0)), 0, 3);
+	ivec2 texel_coord = ivec2(glyph_coord.x, glyph_coord.y + block);
+	uvec4 texel = texelFetch(bitmap, texel_coord, 0);
+
+	// each block is 8px wide
+	float block_x = clamp(cell_coord.x * 8.0, 0.0, 7.0);
+
+	// each cell is 4 blocks high, each block being 4px tall
+	float block_y = clamp(cell_coord.y * 16.0 - float(block) * 4.0,
+			      0.0, 3.0);
+
+	float horiz_weight = sharp_bilinear_weight(block_x);
+	float vert_weight = sharp_bilinear_weight(block_y);
+
+	int x = clamp(int(block_x), 0, 7);
+	int y = clamp(int(block_y), 0, 3);
+
+	// get each bit
+	float tl = bit_value(texel, x, y);
+	float tr = bit_value(texel, x + 1, y);
+	float bl = bit_value(texel, x, y + 1);
+	float br = bit_value(texel, x + 1, y + 1);
+
+	float top = mix(tl, tr, horiz_weight);
+	float bot = mix(bl, br, horiz_weight);
+
+	return mix(top, bot, vert_weight);
+}
+`;
+export const terminal_vert = `\
+#version 300 es
+
+in uint a_colour;
+in uint a_char_code;
+
+uniform int u_rows;
+uniform int u_cols;
+uniform int u_mouse_row;
+uniform int u_mouse_col;
+uniform vec3 u_palette[16];
+
+out vec2 v_cell_coord;
+out vec2 v_uv_coord;
+
+flat out vec3 f_fg_colour;
+flat out vec3 f_bg_colour;
+flat out ivec2 f_glyph_coord;
+flat out uint f_char_code;
+
+void main() {
+	int row = gl_InstanceID / u_cols;
+	int col = gl_InstanceID % u_cols;
+	int is_cursor = int(u_mouse_row == row && u_mouse_col == col);
+	int not_is_cursor = int(is_cursor == 0);
+
+	if (a_colour == 0u && a_char_code == 0u) {
+		// clipped: don't cover any pixels below this glyph
+		// e.g., a previously rendered texture
+		gl_Position = vec4(2.0, 2.0, 2.0, 1.0);
+		return;
+	}
+
+	// 240 = 0b11110000
+	int colour = int(a_colour + uint(a_colour == 0u) * 240u);
+
+	int fg_idx = int(colour >> (not_is_cursor * 4) & 0xf);
+	int bg_idx = int(colour >> (is_cursor * 4) & 0xf);
+
+	f_fg_colour = u_palette[fg_idx];
+	f_bg_colour = u_palette[bg_idx];
+
+	// 32 glyph columns, 8 glyph rows
+	int glyph_row = clamp(int(a_char_code / 32u), 0, 7);
+	int glyph_col = clamp(int(a_char_code % 32u), 0, 31);
+
+	// coordinate of a_char_code in u_bitmap_font
+	// (note: there are 4 pixels per glyph, in a column; hence row * 4)
+	f_glyph_coord = ivec2(glyph_col, glyph_row * 4);
+
+	// used when checking whether to use u_user_font or not
+	f_char_code = a_char_code;
+
+	/* A glyph is made up of two triangles, six vertices:
+	 *
+	 *   0--2     ,5     0--2,5
+	 *   | /  +  / |  =  |   |
+	 *   1'     3--4    1,3--4
+	 */
+
+	int row_inc = int(gl_VertexID == 1 || gl_VertexID == 3 ||
+			  gl_VertexID == 4);
+
+	int col_inc = int(gl_VertexID == 2 || gl_VertexID == 4 ||
+			  gl_VertexID == 5);
+
+	v_cell_coord = vec2(float(col_inc), float(row_inc));
+
+	row += row_inc;
+	col += col_inc;
+
+	v_uv_coord = vec2(float(glyph_col + col_inc) / 32.0,
+			  float(glyph_row + row_inc) / 8.0);
+
+	// position needs to be in [-1.0, 1.0]
+	float ndc_x = 2.0 * float(col) / float(u_cols) - 1.0;
+	float ndc_y = -2.0 * float(row) / float(u_rows) + 1.0;
+
+	gl_Position = vec4(ndc_x, ndc_y, 0.0, 1.0);
+}
+`;
+export const terminal_frag = `\
+#version 300 es
+
+precision mediump float;
+
+${glyph_frag}
+
+in vec2 v_cell_coord;
+in vec2 v_uv_coord;
+
+flat in vec3 f_fg_colour;
+flat in vec3 f_bg_colour;
+flat in ivec2 f_glyph_coord;
+flat in uint f_char_code;
+
+uniform mediump usampler2D u_bitmap_font;
+uniform sampler2D u_user_font;
+uniform bool u_use_user_font;
+
+out vec4 frag_colour;
+
+void main() {
+	// 176U and 191U are the first and last box-drawing characters
+	if (u_use_user_font && (f_char_code < 176U || f_char_code >= 224U)) {
+		vec4 samp = texture(u_user_font, v_uv_coord);
+		frag_colour = vec4(mix(f_bg_colour, f_fg_colour, samp.r), 1.0);
+		return;
+	}
+
+	float value = bitmap_glyph_value(u_bitmap_font, f_glyph_coord,
+					 v_cell_coord);
+	frag_colour = vec4(mix(f_bg_colour, f_fg_colour, value), 1.0);
+}
+`;
+export const renderer_vert = `\
+#version 300 es
+
+#define SAMPLE_MODE	0u
+#define GLYPHS_MODE	1u
+#define BG_GLYPHS_MODE	2u
+
+precision mediump float;
+
+in uint a_row;
+in uint a_col;
+in uint a_mode;
+
+uniform int u_row;
+uniform int u_col;
+uniform int u_rows;
+uniform int u_cols;
+uniform int u_canvas_rows;
+uniform int u_canvas_cols;
+uniform int u_mouse_row;
+uniform int u_mouse_col;
+uniform vec3 u_palette[16];
+uniform sampler2D u_texture;
+
+out vec2 v_cell_coord;
+out vec2 v_tex_uv_coord; // sample mode
+out vec2 v_font_uv_coord;
+
+flat out uint f_mode;
+flat out int f_is_cursor;
+flat out vec3 f_fg_colour;
+flat out vec3 f_bg_colour;
+flat out ivec2 f_glyph_coord;
+flat out int f_char_code;
+
+const vec3 dimensions[8] = vec3[](
+	vec3(0.0, 0.0, 0.0),	// black (unused)
+	vec3(1.0, 0.8, 0.8),	// red
+	vec3(0.8, 1.0, 0.8),	// green
+	vec3(1.0, 1.0, 0.8),	// yellow
+	vec3(0.8, 0.8, 1.0),	// blue
+	vec3(1.0, 0.8, 1.0),	// magenta
+	vec3(0.8, 1.0, 1.0),	// cyan
+	vec3(1.0, 1.0, 1.0)	// white
+);
+
+struct Dims {
+	int dim1;
+	int dim2;
+	float ratio;
+};
+
+Dims getDims(vec3 colour) {
+	vec3 ncolour = normalize(colour);
+	float d1 = 1000.0;
+	float d2 = 1000.0;
+	int dim1 = 0;
+	int dim2 = 0;
+
+	for (int i = 1; i < 8; i++) {
+		float d = distance(ncolour, normalize(dimensions[i]));
+
+		if (d < d1) {
+			d2 = d1;
+			dim2 = dim1;
+			d1 = d;
+			dim1 = i;
+		} else if (d < d2) {
+			d2 = d;
+			dim2 = i;
+		}
+	}
+
+	return Dims(dim1, dim2, d1 / (d1 + d2));
+}
+
+float getLum(vec3 colour, int dim) {
+	vec3 dcolour = dimensions[dim];
+	return dot(colour, dcolour) / dot(dcolour, dcolour);
+}
+
+struct Glyph {
+	int char_code;
+	int fg_idx;
+	int bg_idx;
+};
+
+Glyph getGlyph(int dim, float lum) {
+	//                        .   ,   -   :   ;   =   !   *   #   $   @
+	int glyphs[12] = int[](0, 46, 44, 45, 58, 59, 61, 33, 42, 35, 36, 64);
+
+	int fgs[2] = int[](dim, dim + 8);
+
+	if (dim == 7) {
+		fgs = int[](8, 15);
+	}
+
+	int layer = clamp(int(lum * 2.0), 0, 2);
+
+	Glyph glyph;
+
+	int glyph_idx = clamp(int(12.0 * lum), 0, 11);
+	glyph.char_code = glyphs[glyph_idx];
+	glyph.fg_idx = fgs[layer];
+	glyph.bg_idx = 0;
+
+	return glyph;
+}
+
+Glyph getBgGlyph(int dim, float lum) {
+	//                        .   -   ,   :   ;   =   !   *   #   $   @
+	int glyphs[12] = int[](0, 46, 45, 44, 58, 59, 61, 33, 42, 35, 36, 64);
+
+	int fgs[3] = int[](dim, dim + 8, 15);
+	int bgs[3] = int[](0, dim, dim + 8);
+
+	int layer = clamp(int(lum * 3.0), 0, 2);
+
+	// check if dimension is white
+	if (dim == 7) {
+		if (layer > 0) {
+			// reverse the order of the glyphs
+			glyphs = int[](64, 36, 35, 42, 33, 61, 59, 58, 44, 45,
+				       46, 0);
+		}
+
+		fgs = int[](7, 0, 8);
+		bgs = int[](0, 7, 15);
+	}
+
+	Glyph glyph;
+
+	int glyph_idx = clamp(int(12.0 * (3.0 * lum - float(layer))), 0, 11);
+	glyph.char_code = glyphs[glyph_idx];
+	glyph.fg_idx = fgs[layer];
+	glyph.bg_idx = bgs[layer];
+
+	return glyph;
+}
+
+void main() {
+	int origin_row = int(a_row);
+	int origin_col = int(a_col);
+
+	f_is_cursor = int(origin_row + u_row == u_mouse_row &&
+			  origin_col + u_col == u_mouse_col);
+
+	/* A glyph is made up of two triangles, six vertices:
+	 *
+	 *   0--2     ,5     0--2,5
+	 *   | /  +  / |  =  |   |
+	 *   1'     3--4    1,3--4
+	 */
+
+	int row_inc = int(gl_VertexID == 1 || gl_VertexID == 3 ||
+			  gl_VertexID == 4);
+
+	int col_inc = int(gl_VertexID == 2 || gl_VertexID == 4 ||
+			  gl_VertexID == 5);
+
+	v_cell_coord = vec2(float(col_inc), float(row_inc));
+
+	int row = origin_row + row_inc;
+	int col = origin_col + col_inc;
+
+	v_tex_uv_coord = vec2(float(col) / float(u_cols),
+			  float(row) / float(u_rows));
+
+	// position needs to be in [-1.0, 1.0]
+	float ndc_x = 2.0 * float(u_col + col) / float(u_canvas_cols) - 1.0;
+	float ndc_y = -2.0 * float(u_row + row) / float(u_canvas_rows) + 1.0;
+
+	gl_Position = vec4(ndc_x, ndc_y, 0.0, 1.0);
+
+	f_mode = a_mode;
+
+	// sample mode
+	if (f_mode == SAMPLE_MODE) {
+		// no more work to do
+		return;
+	}
+
+	// dithered glyphs mode
+
+	vec2 origin_uv_coord = vec2(float(origin_col) / float(u_cols),
+				    float(origin_row) / float(u_rows));
+
+	vec2 full_uv_cell = vec2(1.0 / float(u_cols), 1.0 / float(u_rows));
+	vec4 samp = texture(u_texture, origin_uv_coord + 0.5 * full_uv_cell);
+	vec3 colour = samp.rgb;
+
+	// dithering
+	float bayer[16] = float[](
+		0.0, 0.5, 0.125, 0.625,
+		0.75, 0.25, 0.875, 0.375,
+		0.1875, 0.6875, 0.0625, 0.5625,
+		0.9375, 0.4375, 0.8125, 0.3125
+	);
+	float bayer_val = bayer[int(origin_row) % 4 * 4 + int(origin_col) % 4];
+
+	Dims dims = getDims(colour);
+	int dim = (bayer_val < dims.ratio) ? dims.dim2 : dims.dim1;
+	float lum = getLum(colour, dim);
+
+	float dither = (bayer_val - 0.5) / 12.0;
+	lum = clamp(lum + dither, 0.0, 1.0);
+
+	Glyph glyph;
+
+	if (f_mode == BG_GLYPHS_MODE) {
+		glyph = getBgGlyph(dim, lum);
+	} else {
+		glyph = getGlyph(dim, lum);
+	}
+
+	if (glyph.fg_idx == glyph.bg_idx && f_is_cursor == 1) {
+		glyph.fg_idx = 15;
+		glyph.bg_idx = 0;
+	}
+
+	f_fg_colour = u_palette[glyph.fg_idx];
+	f_bg_colour = u_palette[glyph.bg_idx];
+
+	// 32 glyph columns, 8 glyph rows
+	int glyph_row = clamp(int(glyph.char_code / 32), 0, 7);
+	int glyph_col = clamp(int(glyph.char_code % 32), 0, 31);
+
+	// coordinate of char_code in u_bitmap_font
+	f_glyph_coord = ivec2(glyph_col, glyph_row << 2);
+
+	f_char_code = glyph.char_code;
+
+	v_font_uv_coord = vec2(float(glyph_col + col_inc) / 32.0,
+			       float(glyph_row + row_inc) / 8.0);
+}
+`;
+export const renderer_frag = `\
+#version 300 es
+
+precision mediump float;
+
+${glyph_frag}
+
+#define SAMPLE_MODE 0u
+
+in vec2 v_cell_coord;
+in vec2 v_tex_uv_coord; // f_mode == 0
+in vec2 v_font_uv_coord;
+
+flat in uint f_mode;
+flat in int f_is_cursor;
+flat in vec3 f_fg_colour;
+flat in vec3 f_bg_colour;
+flat in ivec2 f_glyph_coord;
+flat in int f_char_code;
+
+uniform mediump usampler2D u_bitmap_font;
+uniform sampler2D u_texture; // f_mode == 0
+uniform sampler2D u_user_font;
+uniform bool u_use_user_font;
+
+out vec4 frag_colour;
+
+void main() {
+	if (f_mode == SAMPLE_MODE) {
+		frag_colour = texture(u_texture, v_tex_uv_coord);
+
+		// invert the sample
+		if (f_is_cursor == 1) {
+			frag_colour = vec4(vec3(1.0, 1.0, 1.0) -
+					   frag_colour.rgb, 1.0);
+		}
+
+		return;
+	}
+
+	vec3 fg = f_fg_colour;
+	vec3 bg = f_bg_colour;
+
+	if (f_is_cursor == 1) {
+		vec3 tmp = fg;
+		fg = bg;
+		bg = tmp;
+	}
+
+	// 176 and 191 are the first and last box-drawing characters
+	if (u_use_user_font && (f_char_code < 176 || f_char_code >= 224)) {
+		vec4 samp = texture(u_user_font, v_font_uv_coord);
+		frag_colour = vec4(mix(bg, fg, samp.r), 1.0);
+		return;
+	}
+
+	float value = bitmap_glyph_value(u_bitmap_font, f_glyph_coord,
+					 v_cell_coord);
+	frag_colour = vec4(mix(bg, fg, value), 1.0);
+}
+`;