Finished gizmos implementation

Author: Sekqies

src/ui/scene_manager.ts

@@ -179,6 +179,8 @@ export class SceneManager {
             if (e.button !== 0) return;
 
             this.is_dragging = true;
+            this.last_mx = e.clientX;
+            this.last_my = e.clientY;
 
             const rect = this.target_element.getBoundingClientRect();
             const mouse_x = e.clientX - rect.left;
@@ -188,7 +190,7 @@ export class SceneManager {
             const y_ndc = 1.0 - (2.0 * mouse_y) / rect.height; 
 
             const view = this.viewport.get_view_matrix();
-            const projection = this.viewport.get_view_matrix();
+            const projection = this.viewport.get_projection();
             const vp = mul_mat4(projection, view);
             const inv_vp = inverse_mat4(vp);
 
@@ -235,7 +237,12 @@ export class SceneManager {
             this.last_my = e.clientY;
 
             if (this.editor_state.mode !== "IDLE") {
-                this.editor_state.handle_mouse_move(e.clientX, e.clientY);
+                const view = this.viewport.get_view_matrix();
+                const projection = this.viewport.get_projection();
+                const vp = mul_mat4(projection,view);
+
+                const {width,height} = this.viewport.get_dimensions();
+                this.editor_state.handle_mouse_move(e.clientX, e.clientY,vp,width,height);
             } else {
                 this.viewport.orbit(dx, dy);
             }

src/ui/state_manager.ts

@@ -1,10 +1,11 @@
 import { Node } from "../rendering/types/node";
-import { vec3 } from "../math/types";
-import type { Line } from "../math/types";
+import { vec3, vec4 } from "../math/types";
+import type { Line, mat4 } from "../math/types";
 import { Inspector } from "./inspector";
 import { create_arrow } from "../rendering/utils/primitives";
 import type { Scene } from "../rendering/types/scene";
 import { scale } from "../math/transformations";
+import { mul_mat4_vec4, scalar_mult_vec3 } from "../math/matrix_operators";
 
 export type EditorMode = "IDLE" | "TRANSLATE_X" | "TRANSLATE_Y" | "TRANSLATE_Z";
 
@@ -52,10 +53,16 @@ export class EditorState {
         this.inspector.inspect(node);
 
         if (node) {
-            const scale_amount = node.scale_vec;
-            this.gizmo_x.scale_vec = scale_amount;
-            this.gizmo_y.scale_vec = scale_amount;
-            this.gizmo_z.scale_vec = scale_amount;
+            let extent = 0
+            for(let i = 0; i < 3; ++i){
+                extent = Math.max(node.radius[i] * Math.abs(node.scale_vec[i]),extent);
+            }
+            const gizmo_size = extent + 0.2;
+
+            
+            this.gizmo_x.scale_vec = vec3(gizmo_size, gizmo_size, gizmo_size);
+            this.gizmo_y.scale_vec = vec3(gizmo_size, gizmo_size, gizmo_size);
+            this.gizmo_z.scale_vec = vec3(gizmo_size, gizmo_size, gizmo_size);
             this.update_gizmo_transforms();
         } else {
             this.gizmo_x.scale_vec = vec3(0, 0, 0);
@@ -112,26 +119,45 @@ export class EditorState {
         this.select(null);
     }
 
-    public handle_mouse_move(mouse_x: number, mouse_y: number) {
+public handle_mouse_move(mouse_x: number, mouse_y: number, vp: mat4, width: number, height: number) {
         if (!this.is_dragging) return;
 
         const dx = mouse_x - this.last_x;
         const dy = mouse_y - this.last_y;
-        
         this.last_x = mouse_x;
         this.last_y = mouse_y;
 
         if (!this.selected_node || this.mode === "IDLE") return;
 
-        const sensitivity = 0.02;
+        const pos = this.selected_node.position;
+        
+        let axis_3d = vec3(0, 0, 0);
+        if (this.mode === "TRANSLATE_X") axis_3d = vec3(1, 0, 0);
+        else if (this.mode === "TRANSLATE_Y") axis_3d = vec3(0, 1, 0);
+        else if (this.mode === "TRANSLATE_Z") axis_3d = vec3(0, 0, 1);
 
-        if (this.mode === "TRANSLATE_X") {
-            this.selected_node.position[0] += dx * sensitivity;
-        } else if (this.mode === "TRANSLATE_Y") {
-            this.selected_node.position[1] -= dy * sensitivity; 
-        } else if (this.mode === "TRANSLATE_Z") {
-            this.selected_node.position[2] -= (dx + dy) * sensitivity;
+        const origin_screen = this.project_to_screen(pos, vp, width, height);
+        
+        const point_on_axis = vec3(pos[0] + axis_3d[0], pos[1] + axis_3d[1], pos[2] + axis_3d[2]);
+        const axis_screen = this.project_to_screen(point_on_axis, vp, width, height);
+
+        let dir_x = axis_screen[0] - origin_screen[0];
+        let dir_y = axis_screen[1] - origin_screen[1];
+
+        const len = Math.sqrt(dir_x * dir_x + dir_y * dir_y);
+        if (len > 0.0001) {
+            dir_x /= len;
+            dir_y /= len;
         }
+        const move_amount = (dx * dir_x) + (dy * dir_y);
+
+        const sensitivity = 1 / len;    
+        const total_move = move_amount * sensitivity;
+
+
+        this.selected_node.position[0] += axis_3d[0] * total_move;
+        this.selected_node.position[1] += axis_3d[1] * total_move;
+        this.selected_node.position[2] += axis_3d[2] * total_move;
 
         this.selected_node.update_matrix();
         this.update_gizmo_transforms();
@@ -148,4 +174,18 @@ export class EditorState {
         if (!this.selected_node) return [];
         return [this.gizmo_x, this.gizmo_y, this.gizmo_z];
     }
+
+    private project_to_screen(p:vec3, vp:mat4, width:number, height:number): [number,number]{
+        const p_clip = mul_mat4_vec4(vp,vec4(p[0],p[1],p[2],1.0));
+
+        const ndc_x = p_clip[0] / p_clip[3];
+        const ndc_y = p_clip[1] / p_clip[3];
+
+
+        const screen_x = (ndc_x + 1.0) * width / 2; 
+        const screen_y = (1.0 - ndc_y) * height / 2;
+        
+        return [screen_x, screen_y];
+
+    }
 }

src/utils/parser.ts

@@ -29,7 +29,7 @@ function center_geometry(geo: Geometry): void {
     }
 }
 
-function normalize_geometry(geo:Geometry): void {
+export function normalize_geometry(geo:Geometry): void {
     let max = -Infinity;
     for(let i = 0; i < geo.vertices.length; i+=3){
         max = Math.max(max,geo.vertices[i])