UI overhaul

Sekqies · Sekqies · commit 86497b48280d · 2026-03-05T16:39:34.000-03:00
diff --git a/README.md b/README.md
diff --git a/assets/cow.png b/assets/cow.png
diff --git a/index.html b/index.html
@@ -5,63 +5,105 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Down with canvas!</title>
     <script type="module" src="/src/main.ts"></script>
+    <script>
+        function toggle_panel(id) {
+            const el = document.getElementById(id);
+            el.hidden = !el.hidden;
+            resize_workspace();
+            window.dispatchEvent(new Event('resize')); 
+        }
+
+        function resize_workspace() {
+            const svg = document.getElementById('container');
+            if (svg) {
+                svg.setAttribute("height", window.innerHeight - 36);
+            }
+        }
+
+        window.addEventListener('resize', resize_workspace);
+        window.addEventListener('load', resize_workspace);
+    </script>
 </head>
-<body bgcolor="grey" text="white">
-<center>
-    <h1><font face="Arial">Down with canvas</font></h1>
-    
-    <table border="1" cellpadding="10" cellspacing="0" width="900" bgcolor="#111111">
-        
+
+<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="#000000" text="white">
+
+    <table width="100%" height="35" border="0" cellpadding="0" cellspacing="0" bgcolor="#222222">
         <tr>
-            <td colspan="3" align="right" bgcolor="#222222">
-                <font face="monospace">Triangles: <b id="poly-count">0</b> / 100000</font>
+            <td width="300" align="left" valign="middle">
+                &nbsp;&nbsp;<button onclick="toggle_panel('left-panel')"><b>☰ Create Tools</b></button>
+            </td>
+            <td align="center" valign="middle">
+                <font face="Arial" size="4"><b>Down with canvas</b></font>
+                &nbsp;&nbsp;
+                            <a href="what.html" target="_blank" style="text-decoration: none;">
+                                <font face="Arial" size="2" color="#aaaaaa">[ What is this? ]</font>
+                            </a>
+                            
+                            &nbsp;&nbsp;
+                <font face="Arial" size="2" color="gray">|</font>
+                &nbsp;
+                <font face="Arial" size="2"><b>Wireframe:</b></font> 
+                <input type="checkbox" id="wireframe-mode">
+            </td>
+            <td width="300" align="right" valign="middle">
+                <font face="monospace" size="2" color="#aaaaaa">Triangles: <b id="poly-count"><font color="white">0</font></b> / 100000</font>
+                &nbsp;&nbsp;&nbsp;
+                <button onclick="toggle_panel('right-panel')"><b>☰ Inspector</b></button>&nbsp;&nbsp;
             </td>
         </tr>
+    </table>
+
+    <table width="100%" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333">
+        <tr><td></td></tr>
+    </table>
 
+    <table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr valign="top">
             
-            <td nowrap width="25%" bgcolor="#1a1a1a">
-                <h3><font face="Arial">Create</font></h3>
-                <div id="primitive-toolbar"></div>
-                <hr>
-                <div id="primitive-options"></div>
-                <hr>
+            <td id="left-panel" width="300" bgcolor="#1a1a1a">
+                <table width="300" border="0" cellpadding="0" cellspacing="0"><tr><td height="1"></td></tr></table>
+                
+                <table width="100%" cellpadding="15" cellspacing="0" border="0">
+                    <tr>
+                        <td>
+                            <h3><font face="Arial">Create</font></h3>
+                            <div id="primitive-toolbar"></div>
+                            <hr color="#333333" size="1">
+                            <div id="primitive-options"></div>
+                        </td>
+                    </tr>
+                </table>
             </td>
 
-            <td width="50%" align="center" bgcolor="black">
+            <td align="center" valign="top" bgcolor="black">
                 <svg 
-                    width="800px" 
-                    height="600px" 
+                    width="100%" 
                     viewBox="-1 -1 2 2" 
                     preserveAspectRatio="none"
-                    stroke-width ="0.01"
+                    stroke-width="0.01"
                     id="container"
-                    shape-rendering ="optimizeSpeed"
+                    shape-rendering="optimizeSpeed"
                 >
                     <path id="render-target" fill="none" stroke="white" stroke-width="0.005" stroke-linejoin="round" />
                 </svg>
-                <br><br>
-                <table border="0" width="100%">
+            </td>
+
+            <td id="right-panel" width="300" bgcolor="#1a1a1a">
+                <table width="300" border="0" cellpadding="0" cellspacing="0"><tr><td height="1"></td></tr></table>
+                
+                <table width="100%" cellpadding="15" cellspacing="0" border="0">
                     <tr>
-                        <td align="center">
-                            <font face="Arial">Wireframe mode?</font> <input type="checkbox" id="wireframe-mode">
+                        <td>
+                            <div id="inspector-panel">
+                                <font color="gray" face="Arial">Select an object to inspect.</font>
+                            </div>
                         </td>
                     </tr>
                 </table>
             </td>
 
-            <td width="25%" bgcolor="#1a1a1a">
-                <h3><font face="Arial">Inspector</font></h3>
-                <div id="inspector-panel">
-                    <font color="gray">Select an object to inspect.</font>
-                </div>
-            </td>
-
         </tr>
     </table>
 
-    <br><br>
-
-</center>
 </body>
 </html>
diff --git a/src/rendering/process_lighting.ts b/src/rendering/process_lighting.ts
@@ -14,16 +14,30 @@ export function process_lighting(mesh:Mesh, scene:Scene, inverse_models:mat4[],
     const specular_k = mesh.specular_coefficient;
     const shininess = 16;
     let index = 0;
-
+        
     for(let i = 0; i < world_coordinates.length; i+=4){
+        if(mesh.transparent){
+            mesh.color_buffer[index++] = mesh.albedo[0];
+            mesh.color_buffer[index++] = mesh.albedo[1];
+            mesh.color_buffer[index++] = mesh.albedo[2];
+            continue;
+        }
         vertex[0] = world_coordinates[i];
         vertex[1] = world_coordinates[i+1];
         vertex[2] = world_coordinates[i+2];
         const start = i/4*3;
-        const nx = mesh.normals[start];
-        const ny = mesh.normals[start+1];
-        const nz = mesh.normals[start+2];
 
+        let nx = mesh.normals[start];
+        let ny = mesh.normals[start+1];
+        let nz = mesh.normals[start+2];
+
+
+        const n_len = Math.sqrt(nx*nx + ny*ny + nz*nz);
+        if (n_len > 0.00001) {
+            nx /= n_len;
+            ny /= n_len;
+            nz /= n_len;
+        }
 
         let color = vec3(0,0,0);
         for(const light of lights){
diff --git a/src/ui/inspector.ts b/src/ui/inspector.ts
@@ -94,6 +94,33 @@ export class Inspector {
 
         this.add_divider(table);
 
+        const tr_del = document.createElement("tr");
+        const td_del = document.createElement("td");
+        td_del.setAttribute("colspan", "3");
+        
+        const btn_del = document.createElement("button");
+        const b_del = document.createElement("b");
+        const font_del = document.createElement("font");
+        font_del.setAttribute("color", "red");
+        font_del.setAttribute("face", "Arial");
+        font_del.innerText = "Delete Mesh";
+        b_del.appendChild(font_del);
+        btn_del.appendChild(b_del);
+        
+        btn_del.onclick = () => {
+            node.scale_vec[0] = 0;
+            node.scale_vec[1] = 0;
+            node.scale_vec[2] = 0;
+            node.update_matrix();
+            this.inspect(node);
+        };
+        
+        td_del.appendChild(btn_del);
+        tr_del.appendChild(td_del);
+        table.appendChild(tr_del);
+
+        this.add_divider(table);
+
         if (node.mesh && node.mesh.albedo && !node.light) {
             this.create_color_row(table, "Color", node.mesh.albedo, node.mesh.albedo);
         }
diff --git a/src/ui/scene_manager.ts b/src/ui/scene_manager.ts
@@ -101,7 +101,8 @@ export class SceneManager {
                 else if (type === "Orbit") any_node.animations.push(new Orbit(params[0], params[1], params[2], params[3]));
                 
                 this.inspector.inspect(this.selected_node);
-            }
+            },
+            () => {this.load_sample_scene()}
         );
     }
 
@@ -135,6 +136,32 @@ export class SceneManager {
         this.select_node(node);
     }
 
+    public load_sample_scene() {
+        const sun_geo = primitives.create_sphere(1.5, 16, 16);
+        this.add_node(sun_geo, [1.0, 0.8, 0.0]);
+        const sun = this.nodes[this.nodes.length - 1];
+        (sun as any).animations = [new Rotator(1, 0.5)];
+        
+        this.add_point_light(5.0, 50.0, [1.0, 0.9, 0.7], false);
+        
+        const planet1_geo = primitives.create_sphere(0.5, 12, 12);
+        this.add_node(planet1_geo, [0.0, 0.5, 1.0]);
+        const planet1 = this.nodes[this.nodes.length - 1];
+        (planet1 as any).animations = [new Orbit(1.0, 4.0, 0.0, 0.0), new Rotator(1, 2.0)];
+
+        const planet2_geo = primitives.create_3d_ngon(4, 0.8, 0.8);
+        this.add_node(planet2_geo, [1.0, 0.2, 0.2]);
+        const planet2 = this.nodes[this.nodes.length - 1];
+        (planet2 as any).animations = [
+            new Orbit(0.5, 7.0, 0.0, 0.0), 
+            new Rotator(0, 1.0), 
+            new Rotator(2, 1.0), 
+            new Oscillator(1, 2.0, 1.0, 0.0) 
+        ];
+
+        alert("Sample scene loaded! Press 'Play' in the Playback menu to see it move.");
+    }
+
     public add_point_light(intensity: number, radius: number, color_arr: number[] = [1.0, 1.0, 1.0], casts_shadow:boolean) {
         const light_color = vec3(color_arr[0], color_arr[1], color_arr[2]);
         const new_light = new Light(vec3(0, 0, 0), light_color, intensity, radius,casts_shadow);
diff --git a/src/ui/toolbar.ts b/src/ui/toolbar.ts
@@ -108,7 +108,8 @@ export function initialize_toolbar(
     on_create_geometry: (geo: Geometry, color: number[]) => void,
     on_create_light: (intensity: number, radius: number, color: number[], casts_shadow:boolean) => void,
     on_playback_action: (action: "play" | "pause" | "stop") => void,
-    on_add_animation: (type: string, params: number[]) => void
+    on_add_animation: (type: string, params: number[]) => void,
+    on_load_sample: () => void
 ): void {
     const toolbar_el = document.getElementById(toolbar_container_id);
     const options_el = document.getElementById(options_container_id);
@@ -415,4 +416,19 @@ export function initialize_toolbar(
         anim_container.appendChild(btn);
         anim_container.appendChild(document.createElement("br"));
     });
+
+    const samples_container = create_category(toolbar_el, "Samples", false);
+    
+    const sample_btn = document.createElement("button");
+    const b_sample = document.createElement("b");
+    b_sample.innerText = "Load Solar System Scene";
+    sample_btn.appendChild(b_sample);
+
+    sample_btn.addEventListener("click", () => {
+        options_el.innerHTML = `<h3><font face="Arial">Sample Scene</font></h3><font size="2" color="gray">Loading the animated sample scene...</font>`;
+        on_load_sample();
+    });
+
+    samples_container.appendChild(sample_btn);
+    samples_container.appendChild(document.createElement("br"));
 }
diff --git a/src/ui/viewport.ts b/src/ui/viewport.ts
@@ -9,17 +9,16 @@ export class Viewport {
     public theta: number = Math.PI / 4;
     public phi: number = Math.PI / 6;  
 
-    public projection:mat4 = perspective(60 * Math.PI / 180, 400 / 300, 0.1, 100);
+    public projection: mat4 = perspective(60 * Math.PI / 180, 400 / 300, 0.1, 100);
 
     private last_mouse_x = 0;
     private last_mouse_y = 0;
     private is_dragging = false;
 
-    private changed_projection = false;
+    private changed_projection = true;
 
     public container: HTMLElement;
     
-
     constructor(container_id: string) {
         const el = document.getElementById(container_id);
         if (!el) throw new Error(`Viewport container '${container_id}' not found.`);
@@ -43,19 +42,18 @@ export class Viewport {
         return look_at(this.camera_pos, this.target, vec3(0, 1, 0));
     }
 
-    public get_dimensions() : {width:number, height:number}{
-        this.changed_projection = true;
+    public get_dimensions(): {width: number, height: number} {
         return {
             width: this.container.clientWidth || 400,
-            height:this.container.clientHeight || 300
+            height: this.container.clientHeight || 300
         }
     }
 
-    public get_projection() : mat4 {
-        if(this.changed_projection){
+    public get_projection(): mat4 {
+        if(this.changed_projection) {
             const {width, height} = this.get_dimensions();
             const ratio = width / height;
-            this.projection = perspective(60 * Math.PI / 180, ratio, 0.1,100);
+            this.projection = perspective(60 * Math.PI / 180, ratio, 0.1, 100);
             this.changed_projection = false;
         }   
         return this.projection;
@@ -91,5 +89,9 @@ export class Viewport {
             
             this.update_camera_position();
         }, { passive: false });
+
+        window.addEventListener("resize", () => {
+            this.changed_projection = true;
+        });
     }
 }
diff --git a/src/utils/parser.ts b/src/utils/parser.ts
@@ -1,8 +1,7 @@
 import { ArrayType, IndexingType, vec3 } from "../math/types";
 import { Geometry } from "../rendering/types/geometry";
 
-function center_geometry(geo: Geometry): void {
-    const v = geo.vertices;
+function center_geometry(v:ArrayType): void {
     if (v.length === 0) return;
 
     let minX = Infinity, minY = Infinity, minZ = Infinity;
@@ -29,20 +28,20 @@ function center_geometry(geo: Geometry): void {
     }
 }
 
-export function normalize_geometry(geo:Geometry): void {
+export function normalize_geometry(v:ArrayType): void {
     let max = -Infinity;
-    for(let i = 0; i < geo.vertices.length; i+=3){
-        max = Math.max(max,geo.vertices[i])
-        max = Math.max(max,geo.vertices[i+1])
-        max = Math.max(max,geo.vertices[i+2])
+    for(let i = 0; i < v.length; i+=3){
+        max = Math.max(max,Math.abs(v[i]))
+        max = Math.max(max,Math.abs(v[i+1]))
+        max = Math.max(max,Math.abs(v[i+2]))
     }   
     if(max===0){
         max = 1;
     }
-    for(let i = 0; i < geo.vertices.length; i+=3){
-        geo.vertices[i] /= max;
-        geo.vertices[i+1] /= max;
-        geo.vertices[i+2] /= max;
+    for(let i = 0; i < v.length; i+=3){
+        v[i] /= max;
+        v[i+1] /= max;
+        v[i+2] /= max;
     }
 }
 
@@ -138,9 +137,8 @@ export function parse_obj(file:string):Geometry{
                 normals[i + 2] *= len;
             }
         }
-
+    center_geometry(vertices);
+    normalize_geometry(vertices);
     const geo = new Geometry(vertices,indices,normals);
-    center_geometry(geo);
-    normalize_geometry(geo);
     return geo;
 }
diff --git a/what.html b/what.html

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,7 @@`
`1`	`1`	`import { ArrayType, IndexingType, vec3 } from "../math/types";`
`2`	`2`	`import { Geometry } from "../rendering/types/geometry";`
`3`	`3`
`4`		`-function center_geometry(geo: Geometry): void {`
`5`		`- const v = geo.vertices;`
	`4`	`+function center_geometry(v:ArrayType): void {`
`6`	`5`	`if (v.length === 0) return;`
`7`	`6`
`8`	`7`	`let minX = Infinity, minY = Infinity, minZ = Infinity;`
`@@ -29,20 +28,20 @@ function center_geometry(geo: Geometry): void {`
`29`	`28`	`}`
`30`	`29`	`}`
`31`	`30`
`32`		`-export function normalize_geometry(geo:Geometry): void {`
	`31`	`+export function normalize_geometry(v:ArrayType): void {`
`33`	`32`	`let max = -Infinity;`
`34`		`- for(let i = 0; i < geo.vertices.length; i+=3){`
`35`		`- max = Math.max(max,geo.vertices[i])`
`36`		`- max = Math.max(max,geo.vertices[i+1])`
`37`		`- max = Math.max(max,geo.vertices[i+2])`
	`33`	`+ for(let i = 0; i < v.length; i+=3){`
	`34`	`+ max = Math.max(max,Math.abs(v[i]))`
	`35`	`+ max = Math.max(max,Math.abs(v[i+1]))`
	`36`	`+ max = Math.max(max,Math.abs(v[i+2]))`
`38`	`37`	`}`
`39`	`38`	`if(max===0){`
`40`	`39`	`max = 1;`
`41`	`40`	`}`
`42`		`- for(let i = 0; i < geo.vertices.length; i+=3){`
`43`		`- geo.vertices[i] /= max;`
`44`		`- geo.vertices[i+1] /= max;`
`45`		`- geo.vertices[i+2] /= max;`
	`41`	`+ for(let i = 0; i < v.length; i+=3){`
	`42`	`+ v[i] /= max;`
	`43`	`+ v[i+1] /= max;`
	`44`	`+ v[i+2] /= max;`
`46`	`45`	`}`
`47`	`46`	`}`
`48`	`47`
`@@ -138,9 +137,8 @@ export function parse_obj(file:string):Geometry{`
`138`	`137`	`normals[i + 2] *= len;`
`139`	`138`	`}`
`140`	`139`	`}`
`141`		`-`
	`140`	`+ center_geometry(vertices);`
	`141`	`+ normalize_geometry(vertices);`
`142`	`142`	`const geo = new Geometry(vertices,indices,normals);`
`143`		`- center_geometry(geo);`
`144`		`- normalize_geometry(geo);`
`145`	`143`	`return geo;`
`146`	`144`	`}`