Optimized string writing to use fixed-size buffer

Author: Sekqies

devlog.md

@@ -0,0 +1,15 @@
+    No new features for you! This time developing was dedicated almost entirely to refactoring our render pipeline so it's easier to use. 
+
+    A graphics engine is pretty general-use, for once I have one up and running, I'm free to do essentially whatever I feel like. The problem is the quick graphics system I built yesterday is kind of bad. 
+    When I was writing my last devlog, I wanted to make a quick demo scene to show the rendering engine up and running. In doing so, I realized that the way I had structured my data pipeline was kind of all over the place, and required me to keep track of a bunch different buffers, that I was cloning and moving every draw frame. I took a quick look at my performance graph, and found that 6% of usage was in the `rasterize` function, which allocated memory every time a new frame was called.
+
+    We can't be having that. So, I decided to refactor my system to use a `Mesh` structure that holds three distinct buffers: our vertices, those vertices after being transformed, and them after being rasterized. This way, I allocate memory once, and modify these buffers at runtime, whenever needed.
+    This required to rewrite _every_ step of my rendering pipeline, including most of our matrix math, to mutate instead of copy and return. This is particularly annoying, because javascript passes object by reference (good!) but you can't reassign them (bad), and it doesn't throw a warning if you try to.
+
+    Anyways, everything is now done! This leaves us free to try to further optimize the `<svg>`, or pivot into actually doing anything with our engine.
+    Attached, the new performance results!
+
+    Obs: I thought this would be a quick refactor, and didn't plan ahead. No issues nor modularization of commits in this one :\(
+
+    **Commits**
+    [Commit 5d1a342](https://github.com/Sekqies/native-html-images/commit/5d1a34267f30762c0e1550e14240dc450b4d9bc5): Refactor to use mesh system

src/main.ts

@@ -2,6 +2,7 @@ import { mat4, vec3 } from "./math/types";
 import { perspective, identity, look_at, rotate, translate } from "./math/transformations";
 import { create_sphere } from "./rendering/primitives";
 import { build_mesh } from "./rendering/render";
+import { StringBuffer } from "./utils/string_buffer";
 
 
 export function main_3d() {
@@ -15,18 +16,19 @@ export function main_3d() {
     const view:mat4 = look_at(vec3(0,2,6.5),vec3(0,0,0),y);
     const projection = perspective(60 * Math.PI / 180, 400/300, 0.1, 100);
     let time = 0;
+    const string_buffer = new StringBuffer(1024*1024);
     const loop = () => {
         time += 0.01;
 
         let frame_html = "";
         let sun_model = identity();
         sun_model = rotate(sun_model, time * 0.5, y);
-        frame_html += build_mesh(sun_mesh, sun_model,view,projection,do_wireframe,true);
+        frame_html += build_mesh(sun_mesh, sun_model,view,projection,string_buffer,do_wireframe,true);
         let planet_model = identity();
         planet_model = rotate(planet_model, time, vec3(0, 1, 0));
         planet_model = translate(planet_model, vec3(3.5, 0, 0));
         planet_model = rotate(planet_model, time * 3, vec3(1, 0, 1));
-        frame_html += build_mesh(planet_mesh, planet_model,view,projection,do_wireframe,true);
+        frame_html += build_mesh(planet_mesh, planet_model,view,projection,string_buffer,do_wireframe,true);
         target!.innerHTML = frame_html;
         requestAnimationFrame(loop);
     }

src/rendering/render.ts

@@ -5,6 +5,7 @@ import { mul_mat4 } from "../math/matrix_operators";
 import type { mat4 } from "../math/types";
 import { transform_vertices } from "./vertex";
 import { assemble_primitives } from "./primitive_assembler";
+import type { StringBuffer } from "../utils/string_buffer";
 
 export function render(mesh: Mesh, model:mat4, view:mat4, projection:mat4, invert_y:boolean = true, stride:number = 4):void {
     const mvp = mul_mat4(mul_mat4(projection,view),model);
@@ -24,9 +25,9 @@ export function render(mesh: Mesh, model:mat4, view:mat4, projection:mat4, inver
  * @param stride 
  * @returns An html string for the rendered mesh. This is to be included inside an <svg> tag, with a ViewBox attribute.
  */
-export function build_mesh(mesh:Mesh,model:mat4,view:mat4,projection:mat4, use_rect:boolean = true, invert_y: boolean = true, stride:number = 4):string{
+export function build_mesh(mesh:Mesh,model:mat4,view:mat4,projection:mat4, string_buffer:StringBuffer, use_rect:boolean = true, invert_y: boolean = true, stride:number = 4):string{
     render(mesh,model,view,projection,invert_y,stride);
-    const svg_content = build_3d_svg(mesh.raster_buffer, mesh.raster_end, use_rect);
+    const svg_content = build_3d_svg(mesh.raster_buffer, mesh.raster_end, use_rect,string_buffer);
     return svg_content;
 }
 

src/to_html.ts

@@ -1,4 +1,5 @@
 import type { ArrayType } from "./math/types";
+import { character_to_uint, SB_TOKENS, string_to_uint, type StringBuffer } from "./utils/string_buffer";
 
 export type vec3 = [number,number,number];
 
@@ -71,9 +72,60 @@ function get_rect_edge(x1:number, y1:number,x2:number,y2:number,thickness:number
     return `<rect x="0" y="${-thickness / 2}" width="${len}" height="${thickness}" transform="translate(${x1} ${y1}) rotate(${ang})"/>`;
 }
 
-export function build_3d_svg(vertices:ArrayType, end:number, use_rect:boolean):string{
+const RECT_TOKENS = {
+    HEAD: string_to_uint('<rect x="0" y="'),
+    WIDTH: string_to_uint('" width="'),
+    HEIGHT: string_to_uint('" height="'),
+    TRANSFORM: string_to_uint('" transform="translate('),
+    ROTATE: string_to_uint(') rotate('),
+    TAIL: string_to_uint(')"/>')
+};
+
+function get_rect_edge_buffer(x1:number, y1:number,x2:number,y2:number,thickness:number, buffer:StringBuffer){
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    const ang = Math.atan2(dy, dx) * (180 / Math.PI);
+    const y_offset = -thickness / 2;
+    buffer.write_chunk(RECT_TOKENS.HEAD);
+    buffer.write_float(y_offset);
+    
+    buffer.write_chunk(RECT_TOKENS.WIDTH);
+    buffer.write_float(len);
+
+    buffer.write_chunk(RECT_TOKENS.HEIGHT);
+    buffer.write_float(thickness);
+
+    buffer.write_chunk(RECT_TOKENS.TRANSFORM);
+    buffer.write_float(x1);
+    buffer.push(32);
+    buffer.write_float(y1);
+
+    buffer.write_chunk(RECT_TOKENS.ROTATE);
+    buffer.write_float(ang);
+
+    buffer.write_chunk(RECT_TOKENS.TAIL);
+}
+
+const POLYGON_TOKENS = {
+    HEAD: string_to_uint('<polygon points = "'),
+    TAIL: string_to_uint('"/>')
+}
+
+function push_pair(x:number,y:number,buffer:StringBuffer){
+    buffer.write_float(x);
+    buffer.push(SB_TOKENS.COMMA);
+    buffer.write_float(y);
+    buffer.push(SB_TOKENS.SPACE);
+}
+
+
+const decoder = new TextDecoder('ascii');
+
+export function build_3d_svg(vertices:ArrayType, end:number, use_rect:boolean, buffer:StringBuffer):string{
     const n = end;
-    let html = "";
+    buffer.reset();
+
 
     const thickness = 0.005;
 
@@ -90,14 +142,18 @@ export function build_3d_svg(vertices:ArrayType, end:number, use_rect:boolean):s
 
 
         if(use_rect){
-            html+= get_rect_edge(x1,y1,x2,y2,thickness);
-            html+= get_rect_edge(x2,y2,x3,y3,thickness);
-            html+= get_rect_edge(x3,y3,x1,y1,thickness);
+            get_rect_edge_buffer(x1,y1,x2,y2,thickness,buffer);
+            get_rect_edge_buffer(x2,y2,x3,y3,thickness,buffer);
+            get_rect_edge_buffer(x3,y3,x1,y1,thickness,buffer);
             continue;
         }
-        html += `<polygon points = "${x1},${y1} ${x2},${y2} ${x3},${y3}"/>`;
+        buffer.write_chunk(POLYGON_TOKENS.HEAD);
+        push_pair(x1,y1,buffer);
+        push_pair(x2,y2,buffer);
+        push_pair(x3,y3,buffer);
+        buffer.write_chunk(POLYGON_TOKENS.TAIL);
     }
-    return html;
+    return decoder.decode(buffer.buffer.subarray(0,buffer.cursor));
 }
 
 

src/utils/string_buffer.ts

@@ -0,0 +1,93 @@
+
+export function string_to_uint(str: string): Uint8Array {
+    const arr = new Uint8Array(str.length);
+    for (let i = 0; i < str.length; i++) {
+        arr[i] = str.charCodeAt(i);
+    }
+    return arr;
+}
+
+export function character_to_uint(str:string):number{
+    return str.charCodeAt(0);
+}
+
+
+const MINUS = character_to_uint("-");
+const ZERO = character_to_uint("0");
+const DOT = character_to_uint(".");
+
+
+export const SB_TOKENS = {
+    MINUS: MINUS,
+    ZERO: ZERO,
+    DOT: DOT,
+    COMMA: character_to_uint(','),
+    SPACE: character_to_uint(' ')
+}
+
+export class StringBuffer{
+    cursor:number;
+    buffer:Uint8Array;
+    constructor(size:number){
+        this.buffer = new Uint8Array(size);
+        this.cursor = 0;
+    }
+    
+    push(val:number){
+        this.buffer[this.cursor++] = val;
+    }
+
+    write_chunk(chunk:Uint8Array):void {
+        this.buffer.set(chunk,this.cursor);
+        this.cursor += chunk.length;
+    }
+
+    write_float(val:number):void {
+        if(val < 0){
+            this.push(MINUS);
+            val = -val;
+        }
+        const fixed_point = (val * 1000 + 0.5) | 0;
+        const integer_part = (fixed_point / 1000) | 0;
+        
+        if(integer_part !== 0){
+            const start = this.cursor;
+            let temp = integer_part;
+            while(temp > 0){
+                const digit = temp%10;
+                this.push(ZERO + digit);
+                temp = (temp/10) | 0;
+            }
+            let left = start;
+            let right = this.cursor - 1;
+            while(left<right){
+                const swap = this.buffer[left];
+                this.buffer[left++] = this.buffer[right];
+                this.buffer[right--] = swap;
+            }
+        }
+        else {
+            this.push(ZERO);
+        }
+        this.push(DOT);
+        let decimal_part = fixed_point % 1000;
+        const first_digit = (decimal_part / 100) | 0;
+        this.push(ZERO + first_digit);
+        decimal_part %= 100;
+
+        const second_digit = (decimal_part / 10) | 0;
+        this.push(ZERO + second_digit);
+        const third_digit = decimal_part % 10;
+        this.push(ZERO + third_digit);  
+    }
+
+    write_string(str:string):void {
+        for(let i = 0; i < str.length; ++i){
+            this.push(str.charCodeAt(i));
+        }
+    }
+
+    reset():void {
+        this.cursor = 0;
+    }
+}