Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@baku89
baku89 committed Oct 26, 2023
1 parent 2007f43 commit d119cc6
Show file tree
Hide file tree
Showing 10 changed files with 224 additions and 113 deletions.
2 changes: 1 addition & 1 deletion dev_modules/tweeq
Submodule tweeq updated 4 files
+2 −2 src/InputRadio.vue
+62 −0 src/ParameterGrid/ParameterGroup.vue
+2 −1 src/ParameterGrid/index.ts
+7 −1 src/index.ts
53 changes: 44 additions & 9 deletions src/components/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {ref, watch} from 'vue'
import {useCameraStore} from '@/stores/camera'
import {Shot, useProjectStore} from '@/stores/project'
import {useShootAlertsStore} from '@/stores/shootAlerts'
import {useTimelineStore} from '@/stores/timeline'
import {useTimerStore} from '@/stores/timer'
import {useTrackerStore} from '@/stores/tracker'
import {useViewportStore} from '@/stores/viewport'
Expand All @@ -29,6 +30,7 @@ useTweeq('com.baku89.koma', {
const actions = useActionsStore()
const viewport = useViewportStore()
const timeline = useTimelineStore()
const project = useProjectStore()
const camera = useCameraStore()
const timer = useTimerStore()
Expand Down Expand Up @@ -439,6 +441,20 @@ actions.register([
project.$patch(result)
},
},
{
id: 'enable_timeline_marker_tool',
input: 'm',
perform() {
timeline.currentTool = 'marker'
},
},
{
id: 'enable_timeline_select_tool',
input: 'v',
perform() {
timeline.currentTool = null
},
},
])
</script>

Expand Down Expand Up @@ -468,19 +484,38 @@ actions.register([
<template #first>
<div class="control">
<Tq.ParameterGrid>
<CameraControl />
<Tq.ParameterHeading>Viewport</Tq.ParameterHeading>
<Tq.Parameter
icon="fluent-emoji-high-contrast:onion"
label="Onion"
label="Tool"
icon="fluent:inking-tool-16-filled"
>
<Tq.InputNumber
v-model="project.onionskin"
:max="0"
:min="-3"
:step="0.1"
<Tq.InputRadio
v-model="timeline.currentTool"
:options="[null, 'marker']"
:labels="['None', 'Marker']"
/>
</Tq.Parameter>
<CameraControl />
<Tq.ParameterGroup label="Viewport" name="viewportSettings">
<Tq.Parameter
icon="fluent-emoji-high-contrast:onion"
label="Onion"
>
<Tq.InputNumber
v-model="project.onionskin"
:max="0"
:min="-3"
:step="0.1"
/>
</Tq.Parameter>
<Tq.Parameter label="Traj. Ave." icon="ooui:map-trail">
<Tq.InputNumber
v-model="tracker.averageSamples"
:min="0"
:max="3"
:step="1"
/>
</Tq.Parameter>
</Tq.ParameterGroup>
<MarkerSettings />
</Tq.ParameterGrid>
</div>
Expand Down
61 changes: 30 additions & 31 deletions src/components/CameraControl.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,43 +71,42 @@ function setConfigColor(name: ConfigName, value: string) {
</script>

<template>
<Tq.ParameterHeading>
Camera Control
<template #right>
<Tq.ParameterGroup name="cameraControl" label="Camera Control">
<template #headingRight>
<button class="show-all-button" @click="showAll = !showAll">
{{ showAll ? 'Collapse' : 'Show All' }}
</button>
</template>
</Tq.ParameterHeading>

<template v-for="name in configNames">
<Tq.Parameter
v-if="showAll || getConfigVisibility(name)"
:key="name"
:label="configLabels[name].label"
>
<template #label>
<Icon
v-if="showAll"
class="visibility"
:icon="getConfigVisibility(name) ? 'mdi:eye' : 'mdi:eye-closed'"
@click="toggleConfigVisibility(name)"
/>
<Tq.InputColor
class="color"
:modelValue="getConfigColor(name)"
@update:modelValue="setConfigColor(name, $event)"
>

<template v-for="name in configNames">
<Tq.Parameter
v-if="showAll || getConfigVisibility(name)"
:key="name"
:label="configLabels[name].label"
>
<template #label>
<Icon
:icon="configLabels[name].icon"
:style="{color: getConfigColor(name)}"
v-if="showAll"
class="visibility"
:icon="getConfigVisibility(name) ? 'mdi:eye' : 'mdi:eye-closed'"
@click="toggleConfigVisibility(name)"
/>
</Tq.InputColor>
{{ configLabels[name].label }}
</template>
<TethrConfig :config="(camera as any)[name]" :name="name" />
</Tq.Parameter>
</template>
<Tq.InputColor
class="color"
:modelValue="getConfigColor(name)"
@update:modelValue="setConfigColor(name, $event)"
>
<Icon
:icon="configLabels[name].icon"
:style="{color: getConfigColor(name)}"
/>
</Tq.InputColor>
{{ configLabels[name].label }}
</template>
<TethrConfig :config="(camera as any)[name]" :name="name" />
</Tq.Parameter>
</template>
</Tq.ParameterGroup>
</template>

<style lang="stylus" scoped>
Expand Down
121 changes: 65 additions & 56 deletions src/components/CameraTrajectoryVisualizer/CameraTrajectory.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script setup lang="ts">
import {vec3} from 'linearly'
import * as THREE from 'three'
import {Group, Sphere} from 'troisjs'
import {BasicMaterial, Group, Sphere} from 'troisjs'
import {computed, onMounted, ref, watch} from 'vue'
import {useProjectStore} from '@/stores/project'
Expand All @@ -17,41 +18,30 @@ onMounted(() => {
group.add(polyline)
group.add(heights)
group.add(orientations)
})
const positions = computed(() => {
const positions: (THREE.Vector3 | null)[] = []
for (const koma of project.previewKomas) {
const shot = koma.shots[0]
const position = shot?.tracker?.position
if (position) {
positions.push(new THREE.Vector3(...position))
} else {
positions.push(null)
}
}
return positions
})
const realtimePositions = computed(() => {
const trackers = computed(() => {
const [inPoint, outPoint] = project.previewRange
const currentFrame = project.captureShot.frame
if (!tracker.enabled || currentFrame < inPoint || outPoint < currentFrame) {
return positions.value.filter(isntNil)
}
const trackers = project.previewKomas.map(
koma => koma.shots[0]?.tracker ?? null
)
const pos = [...positions.value]
pos[currentFrame - inPoint] = new THREE.Vector3(...tracker.position)
if (tracker.enabled || inPoint <= currentFrame || currentFrame <= outPoint) {
trackers[currentFrame - inPoint] = {
position: tracker.position,
rotation: tracker.rotation,
}
}
return pos.filter(isntNil)
return trackers.filter(isntNil)
})
function isntNil<T>(value: T): value is NonNullable<T> {
return value !== null && value !== undefined
}
const positions = computed(() => {
return trackers.value.map(d => new THREE.Vector3(...d.position))
})
//------------------------------------------------------------------------------
// Trajectory
Expand All @@ -63,9 +53,9 @@ const polyline = new THREE.Line(
)
watch(
realtimePositions,
realtimePositions => {
polylineGeo.setFromPoints(realtimePositions)
positions,
positions => {
polylineGeo.setFromPoints(positions)
polylineGeo.computeBoundingSphere()
},
{immediate: true}
Expand All @@ -77,13 +67,13 @@ watch(
const heightsGeo = new THREE.BufferGeometry()
const heights = new THREE.LineSegments(
heightsGeo,
new THREE.LineBasicMaterial({color: 0x00ffff})
new THREE.LineBasicMaterial({color: 0x66ff66})
)
watch(
() => [realtimePositions.value, tracker.groundLevel] as const,
([realtimePositions, groundLevel]) => {
const points = realtimePositions.flatMap(p => [
() => [positions.value, tracker.groundLevel] as const,
([positions, groundLevel]) => {
const points = positions.flatMap(p => [
p,
new THREE.Vector3(p.x, groundLevel, p.z),
])
Expand All @@ -96,33 +86,52 @@ watch(
//------------------------------------------------------------------------------
// Orientations
// const orientationsGeo = new THREE.BufferGeometry()
// const orientations = new THREE.LineSegments(
// orientationsGeo,
// new THREE.LineBasicMaterial({color: 0x00ffff})
// )
// watch(
// () => [realtimePositions.value, tracker.groundLevel] as const,
// ([realtimePositions, groundLevel]) => {
// const points = realtimePositions.flatMap(p => [
// p,
// new THREE.Vector3(p.x, groundLevel, p.z),
// ])
// heightsGeo.setFromPoints(points)
// heightsGeo.computeBoundingSphere()
// },
// {immediate: true}
// )
//
const orientationsGeo = new THREE.BufferGeometry()
const orientations = new THREE.LineSegments(
orientationsGeo,
new THREE.LineBasicMaterial({color: 0x6666ff})
)
watch(
trackers,
trackers => {
const points = trackers.flatMap((t, i) => {
return [
positions.value[i],
new THREE.Vector3(
...vec3.add(t.position, vec3.transformQuat([0, 0, 1], t.rotation))
),
new THREE.Vector3(
...vec3.add(t.position, vec3.transformQuat([-0.08, 0, 0], t.rotation))
),
new THREE.Vector3(
...vec3.add(t.position, vec3.transformQuat([0.08, 0, 0], t.rotation))
),
]
})
orientationsGeo.setFromPoints(points)
orientationsGeo.computeBoundingSphere()
},
{immediate: true}
)
//------------------------------------------------------------------------------
// Utils
function isntNil<T>(value: T): value is NonNullable<T> {
return value !== null && value !== undefined
}
</script>

<template>
<Group ref="$group">
<Sphere v-for="(p, i) in positions" :key="i" :position="p" :radius="0.01" />
<Sphere
v-for="(p, i) in realtimePositions"
:key="i"
:position="p"
v-if="tracker.averageTarget"
:position="new THREE.Vector3(...tracker.averageTarget.position)"
:radius="0.01"
/>
>
<BasicMaterial color="#f66" />
</Sphere>
</Group>
</template>
2 changes: 1 addition & 1 deletion src/components/CameraTrajectoryVisualizer/CameraTrajectoryVisualizer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ watch(
function onLoadCameraModel(group: THREE.Group) {
const mesh = group.children[0] as THREE.Mesh
const material = mesh.material as THREE.MeshPhongMaterial
material.opacity = 0.7
material.opacity = 0.5
material.transparent = true
}
Expand Down
21 changes: 11 additions & 10 deletions src/components/MarkerSettings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,17 @@ const markers = useMarkersStore()
</script>

<template>
<Tq.ParameterHeading> Marker Settings </Tq.ParameterHeading>
<Tq.Parameter label="Label">
<Tq.InputString v-model="markers.cursor.label" />
</Tq.Parameter>
<Tq.Parameter label="Color">
<Tq.InputColor v-model="markers.cursor.color" />
</Tq.Parameter>
<Tq.Parameter label="Duration">
<Tq.InputNumber v-model="markers.cursor.duration" :min="0" :step="1" />
</Tq.Parameter>
<Tq.ParameterGroup label="Marker Settings" name="markerSettings">
<Tq.Parameter label="Label">
<Tq.InputString v-model="markers.cursor.label" />
</Tq.Parameter>
<Tq.Parameter label="Color">
<Tq.InputColor v-model="markers.cursor.color" />
</Tq.Parameter>
<Tq.Parameter label="Duration">
<Tq.InputNumber v-model="markers.cursor.duration" :min="0" :step="1" />
</Tq.Parameter>
</Tq.ParameterGroup>
</template>

<style lang="stylus" scoped>
Expand Down
1 change: 1 addition & 0 deletions src/components/TimelineGraph.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,4 +279,5 @@ const viewBox = computed(() => {
height 100%
object-fit fill
overflow visible
z-index 20
</style>
Loading

0 comments on commit d119cc6

Please sign in to comment.