Lighting working!

Author: Sekqies

index.html

@@ -10,7 +10,7 @@
 <center>
     <table border="1" >
         <tr>
-            <td colspan="2">
+            <td colspan="2" bgcolor="black">
                 <svg 
                     width="400px" 
                     height="300px" 

src/main.ts

@@ -21,8 +21,10 @@ export function main_3d() {
 
     const scene:Scene = new Scene([sun_mesh,planet_mesh],[vec3(1,0,0),vec3(0,0,1)]);
 
+
     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);
@@ -33,11 +35,26 @@ export function main_3d() {
     const sun_light = new Light(
         vec3(10,10,10),
         vec3(1.0,0.95,0.9),
-        8.0,
+        6.0,
+        200.0
+    );
+    const second_sun = new Light(
+        vec3(10,-10,-10),
+        vec3(0.2,0.95,0.2),
+        6.0,
         200.0
     );
+    const third_sun = new Light(
+        vec3(10,10,10),
+        vec3(0.3,0.6,0.9),
+        6.0,
+        200.0
+    );
+
 
     scene.add_light(sun_light);
+    scene.add_light(second_sun);
+    scene.add_light(third_sun);
 
     const loop = () => {
         time += 0.01;

src/rendering/render.ts

@@ -28,12 +28,22 @@ export function render_scene(scene:Scene, mvp:mat4[], invert_y:boolean = true){
     }
     let index = 0;
     let offset = 0;
+    let color_offset = 0;
     for(const mesh of scene.meshes){
-        for(let i = 0; i < mesh.raster_end; i+=9){
-            scene.draw_order[index] = i + offset;
+        const raster_size = mesh.raster_end; 
+        const raster_color = raster_size / 3;
+        const pos_view = mesh.raster_buffer.subarray(0, raster_size);
+        const col_view = mesh.raster_color.subarray(0, raster_color);
+
+        scene.scene_buffer.set(pos_view, offset);
+        scene.raster_color.set(col_view, color_offset);
+
+        for(let i = 0; i < raster_size; i+=9){
+            scene.draw_order[index] = offset + i;
             index++;
         }
-        offset += mesh.raster_buffer.length;
+        offset += raster_size;
+        color_offset += raster_color;
     }
     scene.draw_order.subarray(0,index).sort((a,b)=>get_z_value(scene.scene_buffer,b) - get_z_value(scene.scene_buffer,a));
     scene.draw_end = index;

src/rendering/types/scene.ts

@@ -3,6 +3,9 @@ import type { Geometry } from "./geometry";
 import type { Light } from "./light";
 import { Mesh } from "./mesh";
 
+
+const HUGE = 1024*1024 * 10;
+
 export class Scene{
     projected_buffer!:ArrayType;
     scene_buffer!:ArrayType;
@@ -72,14 +75,18 @@ export class Scene{
     add_mesh(geometry:Geometry, color:vec3 = vec3(0.2,0.2,0.2)):Mesh{
         const scene_size = geometry.indices.length * 4;
         const proj_size = geometry.vertices.length/3*4;
-        const color_size = geometry.vertices.length * 3;
-        const raster_color_size = geometry.indices.length * 3;
+        const color_size = geometry.vertices.length;
+        const raster_color_size = geometry.indices.length*3;
 
         const scene_view = this.scene_buffer.subarray(this.scene_cursor, this.scene_cursor + scene_size);
         const proj_view = this.projected_buffer.subarray(this.projected_cursor,this.projected_cursor + proj_size);
         const color_view = this.color_buffer.subarray(this.color_cursor,this.color_cursor + color_size);
         const raster_color = this.raster_color.subarray(this.raster_color_cursor,this.raster_color_cursor + raster_color_size);
 
+        console.log(`Cursors: ${[this.scene_cursor,this.projected_cursor,this.color_cursor,this.raster_color_cursor]}`);
+        console.log(`Scene_size for mesh: ${scene_size}, proj = ${proj_size}, color_size = ${color_size}, raster_color_size = ${raster_color_size}`)
+        console.log(`Full sizes: ${[this.scene_buffer.length,this.projected_buffer.length,this.color_buffer.length,this.raster_color.length]}`)
+
         this.scene_cursor += scene_size;
         this.projected_cursor += proj_size;
         this.color_cursor += color_size;