Merge pull request #7 from saaaji/feature_transform_gizmo

gizmo added

src/assets/shaders/axesFrag.glsl

@@ -0,0 +1,12 @@
+#version 300 es
+
+// precision qualifiers
+precision mediump float;
+
+// fragment I/O
+layout(location = 0) out vec4 out_color;
+in vec3 v_color;
+
+void main() {
+  out_color = vec4(v_color, 1);
+}

src/assets/shaders/axesVert.glsl

@@ -0,0 +1,36 @@
+#version 300 es
+
+in vec3 a_position;
+in vec3 a_color;
+
+uniform mat4 u_projectionMatrix;
+uniform mat4 u_viewMatrix;
+uniform mat4 u_worldMatrix;
+
+uniform int u_axis;
+
+out vec3 v_color;
+
+const float SCALE = 0.2;
+
+void main() {
+  mat4 worldMatrix = u_worldMatrix;
+
+  worldMatrix[0] = normalize(worldMatrix[0]);
+  worldMatrix[1] = normalize(worldMatrix[1]);
+  worldMatrix[2] = normalize(worldMatrix[2]);
+
+  float depth = (u_viewMatrix * vec4(worldMatrix[3].xyz, 1)).z;
+  depth = max(abs(depth), 1.0);
+  vec4 position = worldMatrix * vec4(a_position * depth * SCALE, 1);
+
+  if (u_axis < 0) {
+    v_color = a_color;
+  } else {
+    int index = gl_VertexID / 2;
+    if (u_axis != index) v_color = vec3(0.5);
+    else v_color = a_color;
+  }
+
+  gl_Position = u_projectionMatrix * u_viewMatrix * position;
+}

src/js/index.js

@@ -4,7 +4,7 @@ import { ActiveNodeEditor } from './utilities/ActiveNodeEditor.js';
 import { HydraModel } from './model.js';
 import { encodeHydra } from './loading/hydra.js';
 import { SHADER_DEFINES } from './utilities/constants.js';
-import { assert, jsonToBlob, blobToImage } from './utilities/util.js';
+import { assert, jsonToBlob, blobToImage, generateUv } from './utilities/util.js';
 import { FrameGraph } from './utilities/RenderGraph.js';
 import { Fits, Node, Histogram } from './plugin/fits/fits.js';
 
@@ -177,9 +177,16 @@ class HydraController extends EventTarget {
         case 'hydra':
           this.mode = HydraController.Mode.RASTER;
 
-          keyBindingsDown = (function({key}) {
+          keyBindingsDown = (function(event) {
+            const {key, shiftKey, altKey, ctrlKey} = event;
             this.keyMap[key] = true;
 
+            // this.keyMap.shiftKey = shiftKey;
+            // this.keyMap.altKey = altKey;
+            // this.keyMap.ctrlKey = ctrlKey;
+
+            // if (this.keyMap.Shift || this.keyMap.Control || this.keyMap.Alt) return;
+
             switch (key) {
               case 'p':
                 this.togglePaused();
@@ -207,14 +214,31 @@ class HydraController extends EventTarget {
               case 't':
                 view.keyBindings.classList.remove('hidden');
                 break;
+              case 'q':
+              case 'w':
+              case 'e':
+                model.focusedAxis = ({'q': 0, 'w': 1, 'e': 2})[key];
+                if (altKey) event.preventDefault();
+                break;
             }
           }).bind(this);
 
-          keyBindingsUp = (function({key}) {
+          keyBindingsUp = (function({key, shiftKey, altKey, ctrlKey}) {
+            // this.keyMap.shiftKey = shiftKey;
+            // this.keyMap.altKey = altKey;
+            // this.keyMap.ctrlKey = ctrlKey;
+
+            // if (this.keyMap.Shift || this.keyMap.Control || this.keyMap.Alt) return;
+
             switch (key) {
               case 't':
                 view.keyBindings.classList.add('hidden');
                 break;
+              case 'q':
+              case 'w':
+              case 'e':
+                model.focusedAxis = -1;
+                break;
             }
           }).bind(this);
 
@@ -227,6 +251,9 @@ class HydraController extends EventTarget {
           // updating scene graph
           model.addEventListener('hydra_update_scene_graph', sceneGraph => {
             view.nodeTree.tree = sceneGraph;
+            model.focusedNode = view.nodeEditor.activeNode = null;
+            model.focusedNodes = [];
+            model.focusedAxis = -1;
           });
 
           view.nodeTree.addEventListener('change', ({target}) => {
@@ -235,8 +262,8 @@ class HydraController extends EventTarget {
           });
 
           view.nodeEditor.updateCallback = () => {
-            if (this.mode === HydraController.Mode.TRACE) {
-              model.uploadTlas().then(() => {
+            if (true /*this.mode === HydraController.Mode.TRACE*/) {
+              model.uploadTlas(this.mode === HydraController.Mode.TRACE).then(() => {
                 this.reset();
               });
             }
@@ -526,7 +553,22 @@ class HydraController extends EventTarget {
         this.scrollDown = false;
     });
 
-    view.canvas.addEventListener('mousemove', ({movementX: dx, movementY: dy, offsetX: x, offsetY: y}) => {
+    view.canvas.addEventListener('mousemove', ({target, movementX: dx, movementY: dy, clientX, clientY}) => {
+      if (!this.paused && (this.keyMap.q || this.keyMap.w || this.keyMap.e) &&
+          this.mouseDown &&
+          this.mode === HydraController.Mode.RASTER && view.nodeEditor.activeNode) {
+
+        let axis = 0;
+        if (this.keyMap.w) axis = 1;
+        else if (this.keyMap.e) axis = 2;
+
+        const [u0, v0] = generateUv(target, clientX, clientY);
+        const [u1, v1] = generateUv(target, clientX + dx, clientY + dy);
+
+        model.grab(u0, v0, u1, v1, axis, this.keyMap.Alt);
+        return;
+      }
+
       if (!this.paused && (this.keyMap['g'] || this.mouseDown) && 
           (this.mode === HydraController.Mode.RASTER || this.mode === HydraController.Mode.TRACE && model.preferEditorCam)) {
         model.orbitalControls.pan(dx, dy);

src/js/math/Matrix4.js

@@ -195,7 +195,7 @@ export class Matrix4 {
 
 		m1.elements[8] *= invZ;
 		m1.elements[9] *= invZ;
-		m1.elements[1] *= invZ;
+		m1.elements[10] *= invZ;
 
 		quaternion.setFromRotationMatrix(m1);
 

src/js/math/Quaternion.js

@@ -59,23 +59,15 @@ export class Quaternion {
     return this.multiplyQuaternions(q, this);
   }
 
-  multiplyQuaternions(q, p) {
-
-    const qx = q.x,
-          qy = q.y,
-          qz = q.z,
-          qw = q.w;
-
-    const px = p.x,
-          py = p.y,
-          pz = p.z,
-          pw = p.w;
-
-    this._x = qw * px + pw * qx + qy * pz - py * qz;
-    this._y = qw * qy + pw * qy + qz * px - pz * qz;
-    this._z = qw * pz + pw * qz + qx * py - px * qy;
-    this._w = qw * pw - qx * px - qy * py - qz * pz;
-
+  multiplyQuaternions(a, b) {
+    const qax = a._x, qay = a._y, qaz = a._z, qaw = a._w;
+		const qbx = b._x, qby = b._y, qbz = b._z, qbw = b._w;
+
+		this._x = qax * qbw + qaw * qbx + qay * qbz - qaz * qby;
+		this._y = qay * qbw + qaw * qby + qaz * qbx - qax * qbz;
+		this._z = qaz * qbw + qaw * qbz + qax * qby - qay * qbx;
+		this._w = qaw * qbw - qax * qbx - qay * qby - qaz * qbz;
+
     this.onchange?.();
 
     return this;
@@ -182,6 +174,9 @@ export class Quaternion {
    );
   }
 
+  get inverse() {
+    return this.conjugate;
+  }
 }
 
 ['x', 'y', 'z', 'w'].forEach(publicName => {

src/js/math/Ray.js

@@ -28,6 +28,12 @@ export class Ray {
     return ray;
   }
 
+  at(t) {
+    const point = this.direction.clone().scale(t);
+    point.addVectors(point, this.origin);
+    return point;
+  }
+
   applyMatrix4(matrix) {
     this.origin.applyMatrix4(matrix, 1, false);
     this.direction.applyMatrix4(matrix, 0, false);
@@ -75,4 +81,12 @@ export class Ray {
 
     return [tMin < tMax, tMin];
   }
+
+  intersectsPlane(point, normal, tMin = Number.EPSILON, tMax = +Infinity) {
+    const diff = point.clone();
+    diff.subVectors(diff, this.origin);
+    const t = diff.dot(normal) / this.direction.dot(normal);
+
+    return [t > tMin && t < tMax, t];
+  }
 }

src/js/math/Vector3.js

@@ -1,4 +1,11 @@
 import { ActiveNodeEditor } from '../utilities/ActiveNodeEditor.js';
+import { clamp } from '../utilities/util.js';
+
+const axisMap = {
+  0: [1, 0, 0],
+  1: [0, 1, 0],
+  2: [0, 0, 1],
+};
 
 export class Vector3 {
   #halfFlag = false;
@@ -10,6 +17,10 @@ export class Vector3 {
     this.onchange = function(){};
   }
 
+  static axis(index) {
+    return new Vector3().setFromArray(axisMap[index]);
+  }
+
   setHalfFlag(flag) {
     this.#halfFlag = flag;
   }
@@ -230,6 +241,10 @@ export class Vector3 {
 
     return aX * bX + aY * bY + aZ * bZ;
   }
+
+  angleBetween(b) {
+    return Math.acos(clamp(this.dot(b) / (this.length * b.length), -1, +1));
+  }
 
   // https://en.wikipedia.org/wiki/Conversion_between_quaternions_and_Euler_angles
   setFromQuaternion(q, triggerCallback = true) {
@@ -263,6 +278,24 @@ export class Vector3 {
 
     return this;
   }
+
+  applyQuaternion(q) {
+		const [vx, vy, vz] = this;
+    const [qx, qy, qz, qw] = q;
+
+		// t = 2 * cross( q.xyz, v );
+		const tx = 2 * ( qy * vz - qz * vy );
+		const ty = 2 * ( qz * vx - qx * vz );
+		const tz = 2 * ( qx * vy - qy * vx );
+
+		// v + q.w * t + cross( q.xyz, t );
+		this._x = vx + qw * tx + qy * tz - qz * ty;
+		this._y = vy + qw * ty + qz * tx - qx * tz;
+		this._z = vz + qw * tz + qx * ty - qy * tx;
+
+    this.onchange?.();
+		return this;
+  }
 
   *[Symbol.iterator]() {
     yield this._x;