Adding lighting

Author: Sekqies

devlog.md

@@ -1,13 +1,21 @@
-We got some new optimizations, one of which provides a visual effect. Also, news!
+We are now doing things with `path` and `fill` (and properly depth sorting)
 
-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.
+Since we couldn't draw anything that wasn't either a black silhuette or a wireframe outline, the order in which things are drawn never really mattered. Now, it does.
+In the previous devlog, I "fixed" this by sorting triangles in such a way that what is _further_ from the screen is drawn first, and what is closer, last. This way, if everything is behind this object, it will be covered by it. It was to my horror, however, that when I went to try rendering the two rotating spheres, that this _did not work, at all._
 
-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). 
+This was due to me sorting the triangles in each mesh individually rather than as global "scene" context. In simple terms:
+- What we were doing: `[3,1],[5,0] => [1,3],[0,5] => [1,3,0,5]` 
+- What we were _supposed_ to do: `[3,1],[5,0] => [3,1,5,0] => [0,1,3,5]`
 
-And, one last optimization: backface culling. We simply don't draw vertices facing away from the camera.
+At a high level, this is an obvious enough fix: just merge all meshes into one huge array, and sort it. But it comes with a huge problem (for a memory nut, like me): we'll be _doubling_ the memory we allocate. 
+Thankfully, Javascript kindly provides us with the `subarray` method, that gives us a "view", or a reference, to a memory chunk of a larger array. Consequentially, we can create a large buffer with all the data we'll need, and give each mesh a chunk of it. 
+In our program, we call that large buffer a `Scene`.
+
+After doing all of this, I went to render the two overlapping spheres and... it didn't work? I quickly learned that this was due to the way that `<path>` works in SVG: if we want depth, we need different DOM objects, rather than a single, large one. It is bad for performance, but ultimately necessary.
+
+With all this, we got our vertex engine done! Attached, lots of triangles!
 
 **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
+[Commit eaaa1ea](https://url.jam06452.uk/1r26kdk): Created Scene object
+[Commit 06e157a](https://url.jam06452.uk/vnhdm7): Finished Scene logic
+[Commit df1a013](https://url.jam06452.uk/bygzl): Depth working!

index.html

@@ -17,7 +17,9 @@
                     viewBox="-1 -1 2 2" 
                     preserveAspectRatio="none"
                     stroke-width ="0.01"
-                    id="container">
+                    id="container"
+                    shape-rendering ="optimizeSpeed"
+                    >
                     <path id="render-target" fill="none" stroke="black" stroke-width="0.005" stroke-linejoin="round" />
                 </svg>
             </td>

src/main.ts

@@ -1,10 +1,10 @@
 import { mat4, vec3 } from "./math/types";
 import { perspective, identity, look_at, rotate, translate } from "./math/transformations";
-import { create_sphere } from "./rendering/primitives";
+import { create_sphere } from "./rendering/utils/primitives";
 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 { Mesh } from "./rendering/types/mesh";
+import { Scene } from "./rendering/types/scene";
 import { mul_mat4 } from "./math/matrix_operators";
 import { build_scene } from "./to_html";
 
@@ -14,18 +14,19 @@ export function main_3d() {
     if (!target) return;
     const wireframe_el = document.getElementById('wireframe-mode') as HTMLInputElement;
     const do_wireframe:boolean = wireframe_el?.checked; 
-    const sun_mesh = create_sphere(1.5, 10, 10); 
-    const planet_mesh = create_sphere(0.5, 10, 10);
+    const sun_mesh = create_sphere(1.5, 32, 32); 
+    const planet_mesh = create_sphere(0.5, 16, 16);
 
     const scene:Scene = new Scene([sun_mesh.vertices,planet_mesh.vertices],[sun_mesh.indices,planet_mesh.indices]);
 
+    console.log(scene.draw_end)
 
 
     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 string_buffer = new StringBuffer(scene.scene_buffer.length * 50);
     const vp = mul_mat4(projection,view);
     const loop = () => {
         time += 0.01;

src/math/matrix_operators.ts

@@ -100,6 +100,17 @@ export function mul_mat4_vec4(A: mat4, u: vec4): vec4 {
     );
 }
 
+export function mul_mat4_vec4_mut(A:mat4, u:vec4):void{
+    const a = A[0] * u[0] + A[4] * u[1] + A[8] * u[2] + A[12] * u[3];
+    const b = A[1] * u[0] + A[5] * u[1] + A[9] * u[2] + A[13] * u[3];
+    const c =  A[2] * u[0] + A[6] * u[1] + A[10] * u[2] + A[14] * u[3];
+    const d = A[3] * u[0] + A[7] * u[1] + A[11] * u[2] + A[15] * u[3];
+    u[0] = a;
+    u[1] = b;
+    u[2] = c;
+    u[3] = d;
+}
+
 export function invert_mat2(A: mat2): mat2 | null {
     const a0 = A[0], a1 = A[1], a2 = A[2], a3 = A[3];
     let det = a0 * a3 - a2 * a1;
@@ -211,6 +222,7 @@ export function add_vec3(u:vec3, v:vec3): vec3{
     return vec3(u[0]+v[0],u[1]+v[1],u[2]+v[2]);
 }
 
+
 export function add_mat(u:ArrayType, v:ArrayType):ArrayType{
     const out:ArrayType = new ArrayType(u.length);
     for(let i = 0; i < u.length; ++i){

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

@@ -1,6 +1,6 @@
-import { mul_mat4_vec4, scalar_mult_vec3 } from "../math/matrix_operators";
-import { mat4, vec4, vec3, EPSILON, vec2 } from "../math/types";
-import type { Mesh } from "./mesh";
+import { mul_mat4_vec4, scalar_mult_vec3 } from "../../math/matrix_operators";
+import { mat4, vec4, vec3, EPSILON, vec2 } from "../../math/types";
+import type { Mesh } from "../types/mesh";
 
 export function transform_vertex(mvp:mat4, vertex:vec3):vec4{
     return mul_mat4_vec4(mvp,vertex);

src/rendering/depth_sorting.ts

@@ -0,0 +1,47 @@
+import { length_vec3, mul_mat4_vec4, mul_mat4_vec4_mut } from "../math/matrix_operators";
+import { ArrayType, mat4, vec3, vec4 } from "../math/types";
+import type { Light } from "./types/light";
+import type { Mesh } from "./types/mesh";
+import type { Scene } from "./types/scene";
+
+
+export function process_lighting(mesh:Mesh, scene:Scene){
+    const world_coordinates = mesh.projected_buffer;
+    const lights = scene.lights;
+    let vertex:vec3 = vec3(0,0,0);
+    for(let i = 0; i < world_coordinates.length; i+=4){
+        vertex[0] = world_coordinates[i];
+        vertex[1] = world_coordinates[i+1];
+        vertex[2] = world_coordinates[i+2];
+        let color = vec3(0,0,0);
+        let intensity = 0;
+        for(const light of lights){
+            vertex[0] -= light.position[0];
+            vertex[1] -= light.position[1];
+            vertex[2] -= light.position[2];
+            const dist = length_vec3(vertex);
+
+        }
+    }
+}
+
+export function process_world_coordinates(scene:Scene, model:mat4[]){
+    let v:vec4 = vec4(0,0,0,0);
+    let mesh_index = 0;
+    for(const mesh of scene.meshes){
+        const mesh_model = model[mesh_index++];
+        const vertices = mesh.vertices;
+        for(let i = 0; i < vertices.length; i+=4){
+            v[0] = vertices[i];
+            v[1] = vertices[i+1];
+            v[2] = vertices[i+2];
+            v[3] = vertices[i+3];
+            mul_mat4_vec4_mut(mesh_model,v);
+            mesh.projected_buffer[i] = v[0];
+            mesh.projected_buffer[i+1] = v[1];
+            mesh.projected_buffer[i+2] = v[2];
+            mesh.projected_buffer[i+3] = v[3];
+        }
+        process_lighting(mesh,scene);
+    }
+}

src/rendering/mesh.ts

@@ -1,12 +1,12 @@
-import { rasterize } from "./rasterizer";
+import { rasterize } from "./screen_space/rasterizer";
 import { build_3d_svg } from "../to_html";
-import type { Mesh } from "./mesh";
+import type { Mesh } from "./types/mesh";
 import { mul_mat4 } from "../math/matrix_operators";
 import { ArrayType, type mat4 } from "../math/types";
-import { transform_vertices } from "./vertex";
-import { assemble_primitives } from "./primitive_assembler";
+import { transform_vertices } from "./clip_space/vertex";
+import { assemble_primitives } from "./screen_space/primitive_assembler";
 import type { StringBuffer } from "../utils/string_buffer";
-import type { Scene } from "./scene";
+import type { Scene } from "./types/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);