Lighting almost finished

Author: Sekqies

src/main.ts

@@ -7,6 +7,8 @@ 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";
+import { process_world_coordinates } from "./rendering/process_lighting";
+import { Light } from "./rendering/types/light";
 
 
 export function main_3d() {
@@ -17,31 +19,45 @@ export function main_3d() {
     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,planet_mesh]);
+    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);
     let time = 0;
     const string_buffer = new StringBuffer(scene.scene_buffer.length * 50);
     const vp = mul_mat4(projection,view);
+
+    const sun_light = new Light(
+        vec3(10,10,10),
+        vec3(1.0,0.95,0.9),
+        8.0,
+        200.0
+    );
+
+    scene.add_light(sun_light);
+
     const loop = () => {
         time += 0.01;
 
         let frame_html = "";
         let sun_model = identity();
         sun_model = rotate(sun_model, time * 0.5, y);
         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));
 
         const planet_mvp = mul_mat4(vp,planet_model);
         const sun_mvp = mul_mat4(vp,sun_model);
-
+        const ar = [sun_model,planet_model]
+        for(let i = 0; i < 2; ++i){
+            scene.meshes[i].update_normals(ar[i]);
+        }
+        process_world_coordinates(scene,ar);
         render_scene(scene,[sun_mvp,planet_mvp],true);
         frame_html = build_scene(scene,do_wireframe,string_buffer);
 

…ring/screen_space/primitive_assembler.ts …dering/clip_space/primitive_assembler.tssrc/rendering/screen_space/primitive_assembler.ts renamed to src/rendering/clip_space/primitive_assembler.ts src/rendering/screen_space/primitive_assembler.ts renamed to src/rendering/clip_space/primitive_assembler.ts

@@ -9,15 +9,22 @@ export function assemble_primitives(mesh:Mesh):void{
     const projected = mesh.projected_buffer;
     const indices = mesh.indices;
 
-    const out = mesh.raster_buffer
+    const out = mesh.raster_buffer;
+    const out_color = mesh.raster_color;
     let out_index = 0;
+    let out_color_index = 0;
     for(let i = 0; i < indices.length; ++i){
         const index = indices[i];
-const p_base = index * 4;
+        const p_base = index * 4;
+        const c_base = index * 3;
 
         out[out_index++] = projected[p_base];
         out[out_index++] = projected[p_base + 1];
         out[out_index++] = projected[p_base + 2];
         out[out_index++] = projected[p_base + 3];
+
+        out_color[out_color_index++] = mesh.color_buffer[c_base];
+        out_color[out_color_index++] = mesh.color_buffer[c_base + 1];
+        out_color[out_color_index++] = mesh.color_buffer[c_base + 2];
     }
 }

src/rendering/process_lighting.ts

@@ -1,4 +1,4 @@
-import { length_vec3, mul_mat4_vec4, mul_mat4_vec4_mut, sub_vec3 } from "../math/matrix_operators";
+import { dot_vec3, length_vec3, mul_mat4_vec4, mul_mat4_vec4_mut, sub_vec3 } from "../math/matrix_operators";
 import { ArrayType, mat4, vec3, vec4 } from "../math/types";
 import type { Light } from "./types/light";
 import type { Mesh } from "./types/mesh";
@@ -10,36 +10,59 @@ export function process_lighting(mesh:Mesh, scene:Scene){
     const lights = scene.lights;
     let vertex:vec3 = vec3(0,0,0);
     const k = 0.01;
+    let index = 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);
+        const start = i/4*3;
+        const nx = mesh.normals[start];
+        const ny = mesh.normals[start+1];
+        const nz = mesh.normals[start+2];
+
+
+        let color = vec3(mesh.albedo[0],mesh.albedo[1],mesh.albedo[2]);
         for(const light of lights){
-            const L = sub_vec3(vertex,light.position);
-            const dist = length_vec3(L);
-            if (dist > light.radius) continue;
-            
+            const L = sub_vec3(light.position,vertex);
+            const dist = length_vec3(L) || k;
+            L[0]/=dist;
+            L[1]/=dist;
+            L[2]/=dist;
+            if (dist > light.radius){
+                continue;
+            }
+            const dot = L[0] * nx + L[1] * ny + L[2] * nz;
+            const diffuse = Math.max(0,dot);
+            const window = 1//*Math.pow(Math.max(0, 1 - Math.pow(dist / light.radius, 4)), 2)
+            const attenuation = light.intensity/(1.0 + k*(dist*dist)) * window;
+            const strength = diffuse * attenuation;
+            color[0] += light.color[0] * strength;
+            color[1] += light.color[1] * strength;
+            color[2] += light.color[2] * strength;
         }
+        mesh.color_buffer[index++] = Math.min(1.0, color[0]);
+        mesh.color_buffer[index++] = Math.min(1.0, color[1]);
+        mesh.color_buffer[index++] = Math.min(1.0, color[2]);
     }
 }
 
 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){
+        let out_index = 0 ;
         const mesh_model = model[mesh_index++];
         const vertices = mesh.vertices;
-        for(let i = 0; i < vertices.length; i+=4){
+        for(let i = 0; i < vertices.length; i+=3){
             v[0] = vertices[i];
             v[1] = vertices[i+1];
             v[2] = vertices[i+2];
-            v[3] = vertices[i+3];
+            v[3] = 1.0;
             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];
+            mesh.projected_buffer[out_index++] = v[0];
+            mesh.projected_buffer[out_index++] = v[1];
+            mesh.projected_buffer[out_index++] = v[2];
+            mesh.projected_buffer[out_index++] = v[3];
         }
         process_lighting(mesh,scene);
     }

src/rendering/render.ts

@@ -4,7 +4,7 @@ import type { Mesh } from "./types/mesh";
 import { mul_mat4 } from "../math/matrix_operators";
 import { ArrayType, type mat4 } from "../math/types";
 import { transform_vertices } from "./clip_space/vertex";
-import { assemble_primitives } from "./screen_space/primitive_assembler";
+import { assemble_primitives } from "./clip_space/primitive_assembler";
 import type { StringBuffer } from "../utils/string_buffer";
 import type { Scene } from "./types/scene";
 

src/rendering/screen_space/rasterizer.ts

@@ -11,6 +11,9 @@ import { process_perspective_mutate} from "../clip_space/vertex";
 export function rasterize(mesh:Mesh, invert_y:boolean = true, stride:number = 4):void {
     const vertices = mesh.raster_buffer;
     const out = mesh.raster_buffer;
+    const out_c = mesh.raster_color;
+    const colors = mesh.raster_color;
+    let out_color_index = 0;
     let out_index = 0;
     let c1:vec4, c2:vec4, c3:vec4;
     c1 = vec4(0,0,0,0);
@@ -64,6 +67,22 @@ export function rasterize(mesh:Mesh, invert_y:boolean = true, stride:number = 4)
         out[out_index++] = x3;
         out[out_index++] = y3;
         out[out_index++] = z3;
+
+        const color_base = i * 9;
+        
+        const r = (colors[color_base] + colors[color_base + 3] + colors[color_base + 6]) / 3;
+        const g = (colors[color_base + 1] + colors[color_base + 4] + colors[color_base + 7]) / 3;
+        const b = (colors[color_base + 2] + colors[color_base + 5] + colors[color_base + 8]) / 3;
+
+
+        if(isNaN(r) || isNaN(g) || isNaN(b)){
+            console.log(`(${r},${g},${b}) in ${color_base}`)
+            console.log(colors.subarray(color_base,color_base+9));
+        }
+
+        out_c[out_color_index++] = r;
+        out_c[out_color_index++] = g;
+        out_c[out_color_index++] = b;
     }
     mesh.raster_end = out_index;
 }

src/rendering/types/mesh.ts

@@ -10,16 +10,18 @@ export class Mesh{
     projected_buffer: ArrayType
     raster_buffer: ArrayType
     color_buffer: ArrayType
+    raster_color: ArrayType
     normals: ArrayType;
     albedo: vec3;
     raster_end:number
     visible_triangles_count:number
 
-    constructor(geometry:Geometry, albedo:vec3 = vec3(0,0,0), raster_buffer:ArrayType | null = null, projected_buffer:ArrayType | null = null, color_buffer:ArrayType | null = null){
+    constructor(geometry:Geometry, albedo:vec3 = vec3(0,0,0), raster_color:ArrayType, raster_buffer:ArrayType | null = null, projected_buffer:ArrayType | null = null, color_buffer:ArrayType | null = null){
         this.vertices = geometry.vertices;
         this.indices = geometry.indices;
+        this.raster_color = raster_color;
         this.local_normals = geometry.normals;
-        this.normals = new ArrayType(geometry.normals.length);
+        this.normals = new ArrayType(geometry.indices.length*3);
         if(projected_buffer === null)
             this.projected_buffer = new ArrayType(this.vertices.length * 4 / 3);
         else

src/rendering/types/scene.ts

@@ -8,20 +8,22 @@ export class Scene{
     scene_buffer!:ArrayType;
     color_buffer!:ArrayType
     draw_order!: IndexingType;
+    raster_color!: ArrayType;
     draw_end!:number;
     meshes!:Mesh[];
     lights!:Light[];
 
     private scene_cursor = 0;
     private projected_cursor = 0;
     private color_cursor = 0;
+    private raster_color_cursor = 0;
 
     /**
      * Initialize a Scene instance
      * @param geometry If you want a static scene, provide a list of Geometries of all present meshes. If you want a scene that grows to a dynamically large value, provide the maximum number of triangles Scene will store.
      * @returns Nothing
      */
-    constructor(geometry: Geometry[] | number) {
+    constructor(geometry: Geometry[] | number, colors:vec3[] | null = null) {
         if (typeof geometry === "number") {
             this.reserve(geometry);
             return;
@@ -34,8 +36,13 @@ export class Scene{
             total_verts += g.vertices.length / 3;
         }
         this.reserve(total_tris);
-        for (let g of geometry) {
-            this.add_mesh(g);
+        if(colors === null){
+            colors = new Array(geometry.length);
+            colors.fill(vec3(0.2,0.2,0.2));
+        }
+        for (let i = 0; i < geometry.length; ++i) {
+            const g = geometry[i];
+            this.add_mesh(g,colors[i]);
         }
     }
     /**
@@ -46,7 +53,8 @@ export class Scene{
         this.scene_buffer = new ArrayType(max_triangles * 12);
         this.projected_buffer = new ArrayType(max_triangles * 12);
         this.draw_order = new IndexingType(max_triangles);
-        this.color_buffer = new ArrayType(max_triangles*3);
+        this.color_buffer = new ArrayType(max_triangles * 9);
+        this.raster_color = new ArrayType(max_triangles * 9);
         this.draw_end = 0;
         this.meshes = [];
         this.lights = [];
@@ -56,25 +64,28 @@ export class Scene{
         this.scene_cursor = 0;
         this.projected_cursor = 0;
         this.color_cursor = 0;
+        this.raster_color_cursor = 0;
         this.meshes = [];
         this.lights = [];
     }
 
-    add_mesh(geometry:Geometry, color:vec3 = vec3(0,0,0)):Mesh{
+    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;
+        const color_size = geometry.vertices.length * 3;
+        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);
 
         this.scene_cursor += scene_size;
         this.projected_cursor += proj_size;
         this.color_cursor += color_size;
+        this.raster_color_cursor += raster_color_size;
 
-        const mesh = new Mesh(geometry,color,scene_view,proj_view,color_view);
+        const mesh = new Mesh(geometry,color,raster_color,scene_view,proj_view,color_view);
         this.meshes.push(mesh);
         return mesh;
     }

src/to_html.ts

@@ -162,8 +162,11 @@ const PATH_TOKENS = {
     M: string_to_uint('M '),
     L: string_to_uint('L '),
     Z: string_to_uint('Z '),
+    COLOR_HEAD: string_to_uint('"fill="rgb('),
+    COMMA: character_to_uint(","),
+    RPAREN: character_to_uint(")"),
     TAIL_WIREFRAME: string_to_uint('" fill="none" stroke = "black" stroke-width = "0.005"/>'),
-    TAIL_SOLID: string_to_uint('" stroke="red" stroke-width = "0.005"/>')
+    TAIL_SOLID: string_to_uint('"stroke-width = "0.005"/>')
 };
 
 export function build_3d_svg(vertices:ArrayType, end:number, wireframe_mode:boolean,buffer:StringBuffer):string{
@@ -184,7 +187,7 @@ export function build_3d_svg(vertices:ArrayType, end:number, wireframe_mode:bool
         push_pair(x2,y2,buffer);
         buffer.write_chunk(PATH_TOKENS.L);
         push_pair(x3,y3,buffer);
-        buffer.write_chunk(PATH_TOKENS.Z);
+        buffer.write_chunk(PATH_TOKENS.Z); 
     }
     if(wireframe_mode){
         buffer.write_chunk(PATH_TOKENS.TAIL_WIREFRAME);
@@ -204,8 +207,12 @@ export function build_scene(scene:Scene, wireframe_mode: boolean, buffer:StringB
     if(wireframe_mode)
         buffer.write_chunk(PATH_TOKENS.HEAD);
     const vertices = scene.scene_buffer;
+    const colors = scene.raster_color;
     for(let i = 0; i < scene.draw_end; i++){
+        if(!wireframe_mode) 
+            buffer.write_chunk(PATH_TOKENS.HEAD);
         const index = scene.draw_order[i];
+        const c_index = index/3;
         const x1 = vertices[index];
         const y1 = vertices[index+1];
 
@@ -214,16 +221,29 @@ export function build_scene(scene:Scene, wireframe_mode: boolean, buffer:StringB
 
         const x3 = vertices[index+6];
         const y3 = vertices[index+7];
+        
+        const r = Math.floor(colors[c_index] * 255) || 0;
+        const g = Math.floor(colors[c_index + 1] * 255) || 0;
+        const b = Math.floor(colors[c_index + 2] * 255) || 0;
 
         if(!wireframe_mode)
-            buffer.write_chunk(PATH_TOKENS.HEAD);
         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);
+
+        buffer.write_chunk(PATH_TOKENS.COLOR_HEAD);
+        buffer.write_float(r);
+        buffer.push(PATH_TOKENS.COMMA);
+        buffer.write_float(g);
+        buffer.push(PATH_TOKENS.COMMA);
+        buffer.write_float(b);
+        buffer.push(PATH_TOKENS.RPAREN);
+        
+
         if(!wireframe_mode)
             buffer.write_chunk(PATH_TOKENS.TAIL_SOLID);
     }