Created Scene object

Author: Sekqies

devlog.md

@@ -1,15 +1,13 @@
-    No new features for you! This time developing was dedicated almost entirely to refactoring our render pipeline so it's easier to use. 
+We got some new optimizations, one of which provides a visual effect. Also, news!
 
-    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.
+First of all, getting the purely optimizations things out of the way: we're stepping out of manually manipulating strings. I noticed that in my old benchmark, 8.2% of the time was being used in `build_3d_svg`. At first i found this to be weird, since this function is purely string manipulation, but, as it turns out, this is exactly the issue. String reallocation is expensive, and since they aren't mutable in Javascript, I can't just edit a pre-existing string.
+The solution to this is representing the strings as what they should be, character arrays. This involved the creation of a new helper class, StringBuffer, that represents strings as an uInt8 typed array, and the necessary helper functions to convert strings and numbers into this byte array method.
 
-    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.
+Another thing: I thought I wouldn't be able to use the `stroke` and `fill` attributes of svg because i thought this project could also be submitted to the #flavorless challenge. As it turns out, it isn't. So I get this freedom which, in turn, means I'll get to actually _color_ my 3D meshes. 
+If you've done 3D rendering in OpenGL before, you'll likely be familiar with the GL_DEPTH_TESTING that you enable so two meshes in different z positions don't merge together. This is a nice bonus that comes pre-made, but, as with everything in our project, we had to implement ourselves through a technique called Painter's Algorithm. Usually, this is done through a technique called z-buffering, but this doesn't work for our svg based project, because it requires you to have pixels (while the only thing we have here are vertices). 
 
-    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!
+And, one last optimization: backface culling. We simply don't draw vertices facing away from the camera.
 
-    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
+**Commits**
+[Commit f10e698](https://url.jam06452.uk/u0uj8u): Optimized string writing to use fixed-size buffer
+[Commit 07573cd](https://url.jam06452.uk/103qgwe): Depth sorting & Backface culling

src/main.ts

@@ -1,7 +1,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 { build_mesh, build_meshes } from "./rendering/render";
 import { StringBuffer } from "./utils/string_buffer";
 
 
@@ -28,7 +28,7 @@ export function main_3d() {
         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,string_buffer,do_wireframe,true);
+        frame_html += build_meshes([sun_mesh,planet_mesh],[sun_model,planet_model],[view,view],[projection,projection],string_buffer,do_wireframe,true);
         target!.innerHTML = frame_html;
         requestAnimationFrame(loop);
     }

src/rendering/depth_sorting.ts

@@ -20,8 +20,5 @@ export function depth_sort(mesh: Mesh, stride: number = 4): number {
         visible_count++;
     }
 
-    const active_order = mesh.draw_order.subarray(0, visible_count);
-    active_order.sort((a, b) => raster[b] - raster[a]);
-
     return visible_count;
 }

src/rendering/mesh.ts

@@ -10,11 +10,14 @@ export class Mesh{
     raster_end:number
     visible_triangles_count:number
 
-    constructor(vertices:ArrayType, indices:IndexingType){
+    constructor(vertices:ArrayType, indices:IndexingType, raster_buffer:ArrayType | null = null){
         this.vertices = vertices;
         this.indices = indices;
         this.projected_buffer = new ArrayType(vertices.length * 4 / 3);
-        this.raster_buffer = new ArrayType(indices.length * 4);
+        if(raster_buffer === null)
+            this.raster_buffer = new ArrayType(indices.length * 4);
+        else
+            this.raster_buffer = raster_buffer; 
         this.draw_order = new IndexingType(indices.length);
         this.raster_end = indices.length * 4;
         this.visible_triangles_count = 0;

src/rendering/rasterizer.ts

@@ -9,8 +9,6 @@ import { process_perspective_mutate} from "./vertex";
  * @param stride 
  */
 export function rasterize(mesh:Mesh, invert_y:boolean = true, stride:number = 4):void {
-    const num_verts = mesh.raster_buffer.length/stride;
-    const num_triangles = num_verts/3;
     const vertices = mesh.raster_buffer;
     const out = mesh.raster_buffer;
     let out_index = 0;

src/rendering/render.ts

@@ -2,10 +2,11 @@ import { rasterize } from "./rasterizer";
 import { build_3d_svg } from "../to_html";
 import type { Mesh } from "./mesh";
 import { mul_mat4 } from "../math/matrix_operators";
-import type { mat4 } from "../math/types";
+import { ArrayType, type mat4 } from "../math/types";
 import { transform_vertices } from "./vertex";
 import { assemble_primitives } from "./primitive_assembler";
 import type { StringBuffer } from "../utils/string_buffer";
+import type { Scene } from "./scene";
 
 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);
@@ -14,6 +15,16 @@ export function render(mesh: Mesh, model:mat4, view:mat4, projection:mat4, inver
     rasterize(mesh, invert_y, stride);
 }
 
+export function render_scene(scene:Scene, mvp:mat4[], invert_y:boolean = true){
+    for(let i = 0; i < scene.meshes.length; ++i){
+        const mesh = scene.meshes[i];
+        transform_vertices(mesh,mvp[i]);
+        assemble_primitives(mesh);
+        rasterize(mesh,invert_y);
+    }
+}
+
+
 /**
  * 
  * @param mesh The mesh to be rendered. Vertices and Indices must be filled.

src/rendering/scene.ts

@@ -0,0 +1,31 @@
+import { ArrayType, type IndexingType } from "../math/types";
+import { Mesh } from "./mesh";
+
+export class Scene{
+    scene_buffer:ArrayType;
+    meshes:Mesh[];
+
+    constructor(vertices:ArrayType[], indices:IndexingType[]){
+        if(indices.length !== vertices.length){
+            console.warn("Scene built incorrectly: number of vertices is not equal to number of indices");
+        }
+        let vert_size = 0;
+        let index_size = 0;
+        for(let i = 0; i < vertices.length; ++i){
+            vert_size += vertices[i].length;
+            index_size += indices[i].length;
+        }
+        this.scene_buffer = new ArrayType(index_size * 4);
+        this.meshes = new Array(vertices.length);
+        let prev_length = 0;
+        for(let i = 0; i < vertices.length; ++i){
+            this.meshes[i] = new Mesh(vertices[i],indices[i],this.scene_buffer.subarray(prev_length,indices[i].length*4));
+        }
+    }
+    resize(size:number){
+        const prev = this.scene_buffer;
+        this.scene_buffer = new ArrayType(size);
+        this.scene_buffer.set(prev,0);
+    }
+
+}

src/to_html.ts

@@ -122,7 +122,7 @@ function push_pair(x:number,y:number,buffer:StringBuffer){
 
 const decoder = new TextDecoder('ascii');
 
-export function build_3d_svg(vertices:ArrayType, end:number, use_rect:boolean, buffer:StringBuffer):string{
+export function build_3d_svg_legacy(vertices:ArrayType, end:number, use_rect:boolean, buffer:StringBuffer):string{
     const n = end;
     buffer.reset();
 
@@ -156,4 +156,40 @@ export function build_3d_svg(vertices:ArrayType, end:number, use_rect:boolean, b
     return decoder.decode(buffer.buffer.subarray(0,buffer.cursor));
 }
 
+const PATH_TOKENS = {
+    HEAD: string_to_uint('<path d="'),
+    M: string_to_uint('M '),
+    L: string_to_uint('L '),
+    Z: string_to_uint('Z '),
+    TAIL_WIREFRAME: string_to_uint('" fill="none" stroke = "black" stroke-width = "0.005"/>'),
+    TAIL_SOLID: string_to_uint('" stroke="red"/>')
+};
+
+export function build_3d_svg(vertices:ArrayType, end:number, wireframe_mode:boolean,buffer:StringBuffer):string{
+    buffer.reset();
+    buffer.write_chunk(PATH_TOKENS.HEAD);
+    for(let i = 0; i < end; 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];
+        buffer.write_chunk(PATH_TOKENS.M);
+        push_pair(x1,y1,buffer);
+        buffer.write_chunk(PATH_TOKENS.L);
+        push_pair(x2,y2,buffer);
+        buffer.write_chunk(PATH_TOKENS.L);
+        push_pair(x3,y3,buffer);
+        buffer.write_chunk(PATH_TOKENS.Z);
+    }
+    if(wireframe_mode){
+        buffer.write_chunk(PATH_TOKENS.TAIL_WIREFRAME);
+    }
+    else{
+        buffer.write_chunk(PATH_TOKENS.TAIL_SOLID);
+    }
+    return decoder.decode(buffer.buffer.subarray(0,buffer.cursor));
+}