Primitive assembler and rasterizer

Author: Sekqies

src/image.ts

@@ -1,4 +1,4 @@
-import type { vec3 } from "./transformer";
+import type { vec3 } from "./to_html";
 
 function hsl2rgb(h:number, s:number, l:number):vec3 {
     const f_final = (n:number) => {

src/main.ts

@@ -1,4 +1,4 @@
-import { build_color_table, build_color_text } from "./transformer";
+import { build_color_table, build_color_text } from "./to_html";
 import { generate_trash_data } from "./image";
 
 

src/rendering/primitive_assembler.ts

@@ -0,0 +1,27 @@
+import { ArrayType } from "../math/types";
+
+export class PrimitiveAssembler{
+    out:ArrayType;
+
+    constructor(size:number){
+        this.out = new ArrayType(size);
+    }
+
+    assemble_primitives(vertices:ArrayType, indices:ArrayType, stride:number = 4):ArrayType{
+        const required_space = indices.length * stride;
+        if (this.out.length < required_space){
+            console.warn("Resizing this.out - this generally shouldn't happen");
+            this.out = new ArrayType(required_space);
+        }
+        let out_index = 0;
+        for(let i = 0; i < indices.length; ++i){
+            const index = indices[i];
+            const start = index * stride;
+            
+            for(let k = 0; k < stride; ++k){
+                this.out[out_index++] = vertices[start + k];
+            }
+        }
+        return this.out.subarray(0, out_index);
+    }
+}

src/rendering/rasterizer.ts

@@ -0,0 +1,36 @@
+import { ArrayType, vec4 } from "../math/types";
+import { process_perspective, to_viewport_space } from "./vertex";
+
+
+export function rasterize(vertices:ArrayType, invert_y:boolean = true, stride:number = 4):ArrayType {
+    const num_verts = vertices.length/stride;
+    const num_triangles = num_verts/3;
+    const out = new ArrayType(num_triangles * 6);
+    let out_index = 0;
+    for(let i = 0; i < num_triangles; ++i){
+        const base = 3 * i * stride;
+        const c1 = vec4(vertices[base + 0], vertices[base + 1], vertices[base + 2], vertices[base + 3]);
+        const c2 = vec4(vertices[base + stride + 0], vertices[base + stride + 1], vertices[base + stride + 2], vertices[base + stride + 3]);
+        const c3 = vec4(vertices[base + stride * 2 + 0], vertices[base + stride * 2 + 1], vertices[base + stride * 2 + 2], vertices[base + stride * 2 + 3]);
+
+        const n1 = process_perspective(c1);
+        const n2 = process_perspective(c2);
+        const n3 = process_perspective(c3);
+
+        if(!n1 || !n2 || !n3){
+            continue;
+        }
+
+        const sign = invert_y? -1 : 1;
+
+        out[out_index++] = n1[0];
+        out[out_index++] = sign * n1[1];
+        
+        out[out_index++] = n2[0];
+        out[out_index++] = sign * n2[1];
+
+        out[out_index++] = n3[0];
+        out[out_index++] = sign * n3[1];
+    }
+    return out.subarray(0,out_index);
+}

src/rendering/render.ts

@@ -0,0 +1,6 @@
+import type { ArrayType } from "../math/types";
+
+
+export function render(target:HTMLElement, vertices:ArrayType, use_rect:boolean = true, stride:number = 4) {
+    
+}

src/vertex/vertex.ts src/rendering/vertex.tssrc/vertex/vertex.ts renamed to src/rendering/vertex.ts

@@ -1,3 +1,5 @@
+import type { ArrayType } from "./math/types";
+
 export type vec3 = [number,number,number];
 
 
@@ -61,4 +63,39 @@ export function build_color_text(color_grid:vec3[][], base_text:string){
     return html;
 }
 
+function get_rect_edge(x1:number, y1:number,x2:number,y2:number,thickness:number) : string{
+    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);
+    return `<rect x="0" y="${-thickness / 2}" width="${len}" height="${thickness}" transform="translate(${x1} ${y1}) rotate(${ang})"/>`;
+}
+
+export function build_3d_svg(vertices:ArrayType, use_rect:boolean, stride:number = 4):string{
+    const n = vertices.length;
+    let html = "";
+
+    const thickness = 0.005;
+
+
+    for(let i = 0; i < n ; i+=6){
+        const x1 = vertices[i];
+        const y1 = vertices[i+1];
+
+        const x2 = vertices[i+2];
+        const y2 = vertices[i+3];
+
+        const x3 = vertices[i+4];
+        const y3 = vertices[i+5];
+        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);
+            continue;
+        }
+        html += `<polygon points = "${x1},${y1} ${x2},${y2} ${x3},${y3}"/>`;
+    }
+    return html;
+}
+