Add Axis

src/components/Axis.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {Mat4, mat4} from 'linearly'
+import {Euler, Quaternion, Vector3} from 'three'
+import {BasicMaterial, Box} from 'troisjs'
+import {computed} from 'vue'
+
+interface Props {
+	matrix: Mat4
+}
+
+const props = defineProps<Props>()
+
+const position = computed(() => {
+	return new Vector3(...mat4.getTranslation(props.matrix))
+})
+
+const rotation = computed(() => {
+	const q = mat4.getRotation(props.matrix)
+	const quat = new Quaternion(...q)
+
+	const euler = new Euler().setFromQuaternion(quat)
+	const [x, y, z] = euler.toArray()
+	return {x, y, z}
+})
+</script>
+
+<template>
+	<Group :position="position" :rotation="rotation">
+		<Box :scale="{x: 0.2, y: 0.01, z: 0.01}" :position="{x: 0.1}">
+			<BasicMaterial color="#ff0000" />
+		</Box>
+		<Box :scale="{x: 0.01, y: 0.2, z: 0.01}" :position="{y: 0.1}">
+			<BasicMaterial color="#00ff00" />
+		</Box>
+		<Box :scale="{x: 0.01, y: 0.01, z: 0.2}" :position="{z: 0.1}">
+			<BasicMaterial color="#0000ff" />
+		</Box>
+	</Group>
+</template>

src/components/CameraTrajectoryVisualizer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {mat3, Mat4, mat4, quat, Vec3, vec3} from 'linearly'
+import {Mat4, mat4, Vec3, vec3} from 'linearly'
 import * as THREE from 'three'
 import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
 import {
@@ -20,6 +20,9 @@ import {computed, onMounted, shallowRef} from 'vue'
 import {useAuxStore} from '@/stores/aux'
 import {useOscStore} from '@/stores/osc'
 
+import {MutableMat4} from '../../dev_modules/linearly/src/mat4'
+import Axis from './Axis.vue'
+
 const {tracker} = useAuxStore()
 const osc = useOscStore()
 const appConfig = useAppConfigStore()
@@ -33,34 +36,30 @@ const cameraControlPosition = appConfig.ref('cameraControl.position', [
 // Tracker
 
 const matrix = computed(() => {
-	const m = mat4.fromQuat(tracker.rotation)
-	mat4.translate(m, tracker.position)
-	return m
+	return mat4.mul(
+		mat4.fromTranslation(tracker.position),
+		mat4.fromQuat(tracker.rotation)
+	)
 })
 
 const position = computed(() => {
-	return toThree(vec3.transformMat4(tracker.position, calibrationMatrix.value))
+	return toThree(tracker.position)
 })
 
 const euler = computed(() => {
-	const calib = quat.fromMat3(mat3.fromMat4(calibrationMatrix.value))
-
-	const q = new THREE.Quaternion(...quat.mul(calib, tracker.rotation))
+	const q = new THREE.Quaternion(...tracker.rotation)
 
 	const euler = new THREE.Euler().setFromQuaternion(q)
 	const [x, y, z] = euler.toArray().slice(0, 3) as any
 	return {x, y, z}
 })
 
 const $trois = shallowRef<any>()
-
-const $scene = shallowRef<any>()
 const $guide = shallowRef<any>()
 
 onMounted(() => {
-	const guide: THREE.Group = $guide.value.group
-
 	const cameraControl: OrbitControls = $trois.value.three.cameraCtrl
+	const guide: THREE.Group = $guide.value.group
 
 	cameraControl.object.position.set(...cameraControlPosition.value)
 
@@ -76,59 +75,63 @@ onMounted(() => {
 // Calibration
 
 const groundLevel = appConfig.ref('groundLevel', 0)
-const origin = appConfig.ref<Vec3>('tracker.origin', vec3.zero)
-const yAxis = appConfig.ref<Vec3>('tracker.yAxis', vec3.yAxis)
-const xAxis = appConfig.ref<Vec3>('tracker.xAxis', vec3.xAxis)
-
-const pan = appConfig.ref('tracker.pan', Math.PI)
-
-setInterval(() => {
-	pan.value += (Math.PI / 180) * 5
-}, 100)
-
-const calibrationMatrix = computed(() => {
-	const zAxis = vec3.cross(xAxis.value, yAxis.value)
-
-	const m = mat4.of(
-		...xAxis.value,
-		0,
-		...yAxis.value,
-		0,
-		...zAxis,
-		0,
-		...origin.value,
-		1
-	)
+const origin = appConfig.ref<Mat4>('tracker.origin', mat4.ident)
 
-	return mat4.invert(m) ?? mat4.identity
-})
+// Camera coordinate system relative to the tracker
+const cameraAxisY = appConfig.ref<Vec3>('tracker.yAxis', vec3.yAxis)
+const cameraAxisX = appConfig.ref<Vec3>('tracker.xAxis', vec3.xAxis)
+
+// const calibrationMatrix = computed(() => {
+// const zAxis = vec3.cross(cameraAxisX.value, cameraAxisY.value)
+
+// 	const m = mat4.of(
+// 		...cameraAxisX.value,
+// 		0,
+// 		...cameraAxisY.value,
+// 		0,
+// 		...zAxis,
+// 		0,
+// 		...origin.value,
+// 		1
+// 	)
 
-let originMatrix: Mat4 = mat4.identity
+// 	return mat4.invert(m) ?? mat4.identity
+// })
 
 function setOrigin() {
-	origin.value = tracker.position
-	originMatrix = matrix.value
+	origin.value = matrix.value
 }
 function setPan() {
-	const p0 = vec3.transformMat4(vec3.xAxis, originMatrix)
-	const p1 = vec3.transformMat4(vec3.xAxis, matrix.value)
+	const p0 = vec3.transformQuat(vec3.xAxis, mat4.getRotation(origin.value))
+	const p1 = vec3.transformQuat(vec3.xAxis, mat4.getRotation(matrix.value))
 
-	let up = vec3.normalize(vec3.cross(p0, p1))
+	const up = vec3.normalize(vec3.cross(p0, p1))
 
-	if (up[1] < 0) {
-		up = vec3.negate(up)
-	}
+	const originInv = [
+		...(mat4.invert(origin.value) ?? mat4.identity),
+	] as MutableMat4
 
-	yAxis.value = up
+	originInv[12] = 0
+	originInv[13] = 0
+	originInv[14] = 0
+
+	cameraAxisY.value = vec3.transformMat4(up, originInv)
+	// cameraAxisY.value = up
 }
 
 function setTilt() {
-	const p0 = vec3.transformMat4(vec3.xAxis, originMatrix)
-	const p1 = vec3.transformMat4(vec3.xAxis, matrix.value)
+	const p0 = vec3.transformQuat(
+		cameraAxisY.value,
+		mat4.getRotation(origin.value)
+	)
+	const p1 = vec3.transformQuat(
+		cameraAxisY.value,
+		mat4.getRotation(matrix.value)
+	)
 
 	const left = vec3.normalize(vec3.cross(p0, p1))
 
-	xAxis.value = left
+	cameraAxisX.value = left
 }
 
 function toThree(v: Vec3) {
@@ -149,10 +152,12 @@ function toThree(v: Vec3) {
 			<Scene ref="$scene" :background="theme.colorBackground">
 				<PointLight :color="theme.colorOnBackground" :position="{y: 10}" />
 				<AmbientLight :color="theme.colorOnBackground" :intensity="0.5" />
-				<Sphere :radius="0.02" :position="toThree(yAxis)">
+				<Sphere :radius="0.02" :position="toThree(cameraAxisY)">
 					<BasicMaterial color="#00ff00" />
 				</Sphere>
-				<Sphere :radius="0.02" :position="toThree(xAxis)">
+				<Axis :matrix="origin" />
+				<Axis :matrix="matrix" />
+				<Sphere :radius="0.02" :position="toThree(cameraAxisX)">
 					<BasicMaterial color="#ff0000" />
 				</Sphere>
 				<Group :rotation="euler" :position="position">
@@ -161,16 +166,12 @@ function toThree(v: Vec3) {
 				<Group ref="$guide" :position="{y: groundLevel}" />
 			</Scene>
 		</Renderer>
-		<div class="info">
+		<div class="info tq-font-numeric">
 			<Tq.InputButton label="Set Origin" @click="setOrigin" />
 			<Tq.InputButton label="Set Pan" @click="setPan" />
 			<Tq.InputButton label="Set Tilt" @click="setTilt" />
 			OSC Connected = {{ osc.connected }} <br />
-			<br />
 			Tracker Enabled = {{ tracker.enabled }} <br />
-			Position = {{ tracker.position.map(v => v.toFixed(3)).join(', ') }}
-			<br />
-			Rotation = {{ tracker.rotation.map(v => v.toFixed(3)).join(', ') }}
 		</div>
 	</div>
 </template>