From 8061c1d2a97ccf5b5349751527dbd1210fe948de Mon Sep 17 00:00:00 2001 From: hofee Date: Mon, 23 Sep 2024 15:07:43 +0800 Subject: [PATCH] add duplicated and error view --- .../content/SeqInferenceResultVisualize.vue | 7 + .../content/cards/RecProcessCard_IRV.vue | 66 ++------ .../content/cards/SelectSeqCard.vue | 65 +++++++- .../cards/ViewDistributionCard_IRV.vue | 151 ++++++++++++------ 4 files changed, 190 insertions(+), 99 deletions(-) diff --git a/src/components/content/SeqInferenceResultVisualize.vue b/src/components/content/SeqInferenceResultVisualize.vue index a073d63..030fe43 100644 --- a/src/components/content/SeqInferenceResultVisualize.vue +++ b/src/components/content/SeqInferenceResultVisualize.vue @@ -20,6 +20,8 @@ - + + +
+ Step: + {{ curr_frame_info["step"] }} +
+
+ Coverage Rate(CR): + {{ curr_frame_info["coverage_rate"] }}% +
+
+ Delta CR: + +{{ curr_frame_info["delta_CR"] }}% +
+
- - - - -

- Current Frame Information -

- -
- Step: - {{ curr_frame_info["step"] }} -
-
- Coverage Rate(CR): - {{ curr_frame_info["coverage_rate"] }}% -
-
- Delta CR: - +{{ curr_frame_info["delta_CR"] }}% -
- - -

- Depth(L) -

- - Depth Image - - -

- Mask(L) -

- - Depth Image - - @@ -113,8 +83,7 @@ export default { watch: { seqFrameData(val) { if (val.length > 0) { - // this.rpCurrDepth = val[0].data.depth; - // this.rpCurrMask = val[0].data.mask; + this.curr_step = 0; this.curr_frame_info["step"] = 0; this.curr_frame_info["frame_id"] = val[0]["frame_id"]; @@ -132,8 +101,7 @@ export default { }, curr_step (val) { - // this.rpCurrDepth = this.seqFrameData[val]["data"]["depth"]; - // this.rpCurrMask = this.seqFrameData[val]["data"]["mask"]; + this.curr_frame_info["step"] = val; this.curr_frame_info["frame_id"] = this.seqFrameData[val]["frame_id"]; this.curr_frame_info["coverage_rate"] = this.seqFrameData[val]["data"]["coverage_rate"]; diff --git a/src/components/content/cards/SelectSeqCard.vue b/src/components/content/cards/SelectSeqCard.vue index 7742373..fffc2ca 100644 --- a/src/components/content/cards/SelectSeqCard.vue +++ b/src/components/content/cards/SelectSeqCard.vue @@ -29,12 +29,52 @@ - + - +

Selected Scene: {{ localSceneName }}

+ + +

label num: {{ localLabelList.length }}

+

max sequence coverage rate: {{ localTotalMaxCoverageRate }}%

+

min sequence coverage rate: {{ localTotalMinCoverageRate }}%

+

mean sequence coverage rate: {{ localTotalMeanCoverageRate }}%

+ + + + + +

Select Label:

+ + + + + + + + +

+ Selected Label: {{ localLabelName }} ( + + {{ localMaxCoverageRate}}% + + + {{ localMaxCoverageRate }}% + + ) +

sequence length: {{ localSeqLen }}

@@ -70,11 +110,17 @@ export default { return { localDatasetName: "sample", localSceneName: null, + localLabelName: null, + selectedOption: null, localSeqLen: 0, localMaxCoverageRate: 0, + localTotalMaxCoverageRate: 0, + localTotalMinCoverageRate: 0, + localTotalMeanCoverageRate: 0, localBestSeqLen: 0, localBestSeq: null, localDisableBtn: false, + localLabelList: null, sceneNameList: null, seqFrameData: [] }; @@ -99,6 +145,21 @@ export default { handleSceneChange(val) { this.localSceneName = val; const params = {dataset_name: this.localDatasetName, scene_name: val}; + this.$ajax.postjson('/get_label_list', params) + .then((data) => { + if (data.success == true) { + this.localLabelList = data.label_list; + this.localTotalMaxCoverageRate = data.total_max_coverage_rate; + this.localTotalMinCoverageRate = data.total_min_coverage_rate; + this.localTotalMeanCoverageRate = data.total_mean_coverage_rate; + } else { + this.$Message.error("error"); + } + }); + }, + handleLabelChange(val) { + this.localLabelName = val; + const params = {dataset_name: this.localDatasetName, scene_name: this.localSceneName, label_name: this.localLabelName}; this.$ajax.postjson('/get_scene_info', params) .then((data) => { if (data.success == true) { diff --git a/src/components/content/cards/ViewDistributionCard_IRV.vue b/src/components/content/cards/ViewDistributionCard_IRV.vue index c3f9b8c..aa7170a 100644 --- a/src/components/content/cards/ViewDistributionCard_IRV.vue +++ b/src/components/content/cards/ViewDistributionCard_IRV.vue @@ -6,47 +6,37 @@ View Distribution

- + + + +

+ Current Frame ID: +

+
+ {{ chosen_frame_id == null?"no camera is selected": chosen_frame_id }} +
+ + + + + +

+ Label Color: + +

+ predicted view + current predicted view + duplicated view + error view + + + - - - - -

- Current Frame ID: -

- -
- {{ chosen_frame_id == null?"no camera is selected": chosen_frame_id }} -
- -

- Depth(L) -

- - Depth Image - - -

- Mask(L) -

- - Mask Image - - @@ -70,12 +60,12 @@ import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'; export default { props: { seqFrameData: Array, - objInfo: Object + objInfo: Object, + duplicatedFrame: Array, + errorFrame: Array, }, data() { return { - vdCurrDepth: null, - vdCurrMask: null, chosen_frame_id: null, selected_idx: 0, hasImg: false, @@ -94,14 +84,18 @@ export default { frustums: [], loadedObject: null, + duplicated_frustums: [], + duplicated_view_cam_pose_matrix_list : [], + + error_frustums: [], + error_view_cam_pose_matrix_list : [], + }; }, watch: { seqFrameData(val) { if (val.length > 0) { - // this.vdCurrDepth = val[0].data.depth; - // this.vdCurrMask = val[0].data.mask; for (let i = 0; i < this.frustums.length; i++) { this.scene.remove(this.frustums[i]); } @@ -117,6 +111,26 @@ export default { this.selectCamera(this.selected_idx); } }, + duplicatedFrame(val) { + + for (let i = 0; i < this.duplicated_frustums.length; i++) { + this.scene.remove(this.duplicated_frustums[i]); + } + this.duplicated_frustums = []; + this.duplicated_view_cam_pose_matrix_list = []; + this.getDuplicatedCameras(); + + }, + errorFrame(val) { + + for (let i = 0; i < this.error_frustums.length; i++) { + this.scene.remove(this.error_frustums[i]); + } + this.error_frustums = []; + this.error_view_cam_pose_matrix_list = []; + this.getErrorCameras(); + + }, objInfo(val) { if (val) { const objURL = val.obj_path; @@ -171,15 +185,11 @@ export default { if (index >= 0 && index < this.frustums.length) { const frustum = this.frustums[index]; if (this.selectedFrustum) { - this.selectedFrustum.material.color.set(0xff0000); // 恢复之前选中四棱锥的颜色 + this.selectedFrustum.material.color.set(0xff0000); } - frustum.material.color.set(0x00ff00); // 选中的四棱锥颜色 + frustum.material.color.set(0x00ff00); this.selectedFrustum = frustum; - - // 更新 chosen_frame_id 和其他相关信息 this.chosen_frame_id = this.seqFrameData[index].frame_id; - this.vdCurrDepth = this.seqFrameData[index].data.depth; - this.vdCurrMask = this.seqFrameData[index].data.mask; } }, clearLoadedObject() { @@ -230,7 +240,52 @@ export default { } }, - createFrustum(camera) { + getDuplicatedCameras(){ + for (let i = 0; i < this.duplicatedFrame.length; i++) { + console.log(this.duplicatedFrame[i]) + const view_cam_pose = this.duplicatedFrame[i]; + const camera = new THREE.PerspectiveCamera(45, 1280 / 800, 0.1, 1000); + + const camMatrix = new THREE.Matrix4().fromArray([ + view_cam_pose[0][0], view_cam_pose[1][0], view_cam_pose[2][0], view_cam_pose[3][0], + view_cam_pose[0][1], view_cam_pose[1][1], view_cam_pose[2][1], view_cam_pose[3][1], + view_cam_pose[0][2], view_cam_pose[1][2], view_cam_pose[2][2], view_cam_pose[3][2], + view_cam_pose[0][3], view_cam_pose[1][3], view_cam_pose[2][3], view_cam_pose[3][3] + ]); + camera.matrixWorld.copy(camMatrix); + //camera.matrixWorldInverse.copy(camMatrix).invert(); + camera.position.setFromMatrixPosition(camMatrix); + camera.rotation.setFromRotationMatrix(camMatrix); + + this.duplicated_view_cam_pose_matrix_list.push(camera.matrixWorld); + camera.updateProjectionMatrix(); + const frustum = this.createFrustum(camera, 0x6789ab); + this.duplicated_frustums.push(frustum); + } + }, + getErrorCameras(){ + for (let i = 0; i < this.errorFrame.length; i++) { + const view_cam_pose = this.errorFrame[i]; + const camera = new THREE.PerspectiveCamera(45, 1280 / 800, 0.1, 1000); + + const camMatrix = new THREE.Matrix4().fromArray([ + view_cam_pose[0][0], view_cam_pose[1][0], view_cam_pose[2][0], view_cam_pose[3][0], + view_cam_pose[0][1], view_cam_pose[1][1], view_cam_pose[2][1], view_cam_pose[3][1], + view_cam_pose[0][2], view_cam_pose[1][2], view_cam_pose[2][2], view_cam_pose[3][2], + view_cam_pose[0][3], view_cam_pose[1][3], view_cam_pose[2][3], view_cam_pose[3][3] + ]); + camera.matrixWorld.copy(camMatrix); + //camera.matrixWorldInverse.copy(camMatrix).invert(); + camera.position.setFromMatrixPosition(camMatrix); + camera.rotation.setFromRotationMatrix(camMatrix); + + this.error_view_cam_pose_matrix_list.push(camera.matrixWorld); + camera.updateProjectionMatrix(); + const frustum = this.createFrustum(camera, 0xdc1298); + this.error_frustums.push(frustum); + } + }, + createFrustum(camera, frustum_color=0xff0000) { const frustumGeometry = new THREE.BufferGeometry(); const near = camera.near; const far = camera.far; @@ -283,7 +338,7 @@ export default { frustumGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); frustumGeometry.setIndex(index); - const frustumMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); + const frustumMaterial = new THREE.MeshBasicMaterial({ color: frustum_color, wireframe: true }); const frustum = new THREE.Mesh(frustumGeometry, frustumMaterial); this.scene.add(frustum);