Finished Scene logic

Author: Sekqies

src/main.ts

@@ -1,8 +1,11 @@
 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, build_meshes } from "./rendering/render";
+import { build_mesh, render_scene } from "./rendering/render";
 import { StringBuffer } from "./utils/string_buffer";
+import { Mesh } from "./rendering/mesh";
+import { Scene } from "./rendering/scene";
+import { mul_mat4 } from "./math/matrix_operators";
 
 
 export function main_3d() {
@@ -12,23 +15,33 @@ export function main_3d() {
     const do_wireframe:boolean = wireframe_el?.checked; 
     const sun_mesh = create_sphere(1.5, 16, 16); 
     const planet_mesh = create_sphere(0.5, 12, 12);
+
+    const scene:Scene = new Scene([sun_mesh.vertices,planet_mesh.vertices],[sun_mesh.indices,planet_mesh.indices]);
+
+
+
     const y = vec3(0,1,0);
     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 vp = mul_mat4(projection,view);
     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,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_meshes([sun_mesh,planet_mesh],[sun_model,planet_model],[view,view],[projection,projection],string_buffer,do_wireframe,true);
+
+        const planet_mvp = mul_mat4(planet_model,vp);
+        const sun_mvp = mul_mat4(sun_model,vp);
+
+        render_scene(scene,[sun_mvp,planet_mvp],true);
+
         target!.innerHTML = frame_html;
         requestAnimationFrame(loop);
     }

src/rendering/depth_sorting.ts

@@ -1,24 +0,0 @@
-import type { Mesh } from "./mesh";
-
-
-export function depth_sort(mesh: Mesh, stride: number = 4): number {
-    const projected = mesh.projected_buffer;
-    const raster = mesh.raster_buffer;
-    const indices = mesh.indices;
-    const num_triangles = indices.length / 3;
-    let visible_count = 0;
-
-    for (let i = 0; i < num_triangles; i++) {
-        const i0 = indices[i * 3] * stride;
-        const i1 = indices[i * 3 + 1] * stride;
-        const i2 = indices[i * 3 + 2] * stride;
-        
-        const z_avg = (projected[i0 + 2] + projected[i1 + 2] + projected[i2 + 2]) / 3;
-    
-        raster[i] = z_avg; 
-        mesh.draw_order[visible_count] = i; 
-        visible_count++;
-    }
-
-    return visible_count;
-}

src/rendering/mesh.ts

@@ -6,7 +6,6 @@ export class Mesh{
     indices: IndexingType
     projected_buffer: ArrayType
     raster_buffer: ArrayType
-    draw_order:IndexingType
     raster_end:number
     visible_triangles_count:number
 
@@ -18,7 +17,6 @@ export class Mesh{
             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/primitive_assembler.ts

@@ -1,4 +1,3 @@
-import { depth_sort } from "./depth_sorting";
 import type { Mesh } from "./mesh";
 
 /**
@@ -7,16 +6,13 @@ import type { Mesh } from "./mesh";
  * @param stride 
  */
 export function assemble_primitives(mesh:Mesh):void{
-    const visible_count = depth_sort(mesh);
     const projected = mesh.projected_buffer;
     const indices = mesh.indices;
-    const order = mesh.draw_order;
 
     const out = mesh.raster_buffer
     let out_index = 0;
-    for(let i = 0; i < visible_count; ++i){
-        const index = order[i];
-
+    for(let i = 0; i < indices.length; ++i){
+        const index = indices[i];
         const v1 = indices[index * 3] * 4;
         const v2 = indices[index * 3 + 1] * 4;
         const v3 = indices[index * 3 + 2] * 4;
@@ -36,5 +32,4 @@ export function assemble_primitives(mesh:Mesh):void{
         out[out_index++] = projected[v3 + 2];
         out[out_index++] = projected[v3 + 3];
     }
-    mesh.visible_triangles_count = visible_count;
 }

src/rendering/primitives.ts

@@ -1,7 +1,7 @@
 import { ArrayType, IndexingType } from "../math/types";
 import { Mesh } from "./mesh";
 
-export function create_sphere(radius: number, rings: number, slices: number):Mesh {
+export function create_sphere(radius: number, rings: number, slices: number):{vertices:ArrayType, indices: IndexingType} {
     const vertice_count = (rings + 1) * (slices + 1) * 3;
     const vertices = new ArrayType(vertice_count);
     const indices = new IndexingType(rings * slices * 6);
@@ -40,5 +40,5 @@ export function create_sphere(radius: number, rings: number, slices: number):Mes
             indices[ind_i++] = first + 1
         }
     }
-    return new Mesh(vertices,indices);
+    return {vertices:vertices, indices: indices};
 }

src/rendering/rasterizer.ts

@@ -35,12 +35,15 @@ export function rasterize(mesh:Mesh, invert_y:boolean = true, stride:number = 4)
 
         const x1 = n1[0];
         const y1 = n1[1] * sign; 
+        const z1 = n1[2];
 
         const x2 = n2[0];
         const y2 = n2[1] * sign;
+        const z2 = n2[2];
 
         const x3 = n3[0];
         const y3 = n3[1] * sign;
+        const z3 = n3[2];
 
         const area = (x2 - x1) * (y3 - y1) - (y2 - y1) * (x3 - x1);
 
@@ -54,12 +57,15 @@ export function rasterize(mesh:Mesh, invert_y:boolean = true, stride:number = 4)
 
         out[out_index++] = x1;
         out[out_index++] = y1;
-        
+        out[out_index++] = z1;
+
         out[out_index++] = x2;
         out[out_index++] = y2;
+        out[out_index++] = z2;
 
         out[out_index++] = x3;
         out[out_index++] = y3;
+        out[out_index++] = z3;
     }
     mesh.raster_end = out_index;
 }

src/rendering/render.ts

@@ -15,13 +15,27 @@ export function render(mesh: Mesh, model:mat4, view:mat4, projection:mat4, inver
     rasterize(mesh, invert_y, stride);
 }
 
+function get_z_value(array:ArrayType, offset:number, z_offset:number = 2, stride:number = 3){
+    return (array[offset + z_offset] + array[offset + z_offset + stride] + array[offset + z_offset + stride*2]);
+}
+
 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);
     }
+    let index = 0;
+    let offset = 0;
+    for(const mesh of scene.meshes){
+        for(let i = 0; i < mesh.raster_end; i+=9){
+            scene.draw_order[index] = i + offset;
+            index++;
+        }
+        offset += mesh.raster_buffer.length;
+    }
+    scene.draw_order.subarray(0,index).sort((a,b)=>get_z_value(scene.scene_buffer,a) - get_z_value(scene.scene_buffer,b));
 }
 
 

src/rendering/scene.ts

@@ -1,8 +1,9 @@
-import { ArrayType, type IndexingType } from "../math/types";
+import { ArrayType, IndexingType } from "../math/types";
 import { Mesh } from "./mesh";
 
 export class Scene{
     scene_buffer:ArrayType;
+    draw_order: IndexingType;
     meshes:Mesh[];
 
     constructor(vertices:ArrayType[], indices:IndexingType[]){
@@ -16,10 +17,12 @@ export class Scene{
             index_size += indices[i].length;
         }
         this.scene_buffer = new ArrayType(index_size * 4);
+        this.draw_order = new IndexingType(vert_size/3);
         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));
+            this.meshes[i] = new Mesh(vertices[i],indices[i],this.scene_buffer.subarray(prev_length,prev_length + indices[i].length*4));
+            prev_length += indices[i].length * 4;
         }
     }
     resize(size:number){