add duplicated and error view
This commit is contained in:
parent
e8d1e88e13
commit
8061c1d2a9
@ -20,6 +20,8 @@
|
||||
<ViewDistributionCard_IRV
|
||||
:seqFrameData="seq_frame_data"
|
||||
:objInfo="obj_info"
|
||||
:duplicatedFrame="duplicated_frame"
|
||||
:errorFrame="error_frame"
|
||||
@show-img="showImage"
|
||||
/>
|
||||
<RecProcessCard_IRV
|
||||
@ -59,6 +61,8 @@ export default {
|
||||
return {
|
||||
obj_info: null,
|
||||
seq_frame_data: [],
|
||||
duplicated_frame: [],
|
||||
error_frame: [],
|
||||
model_pts: null,
|
||||
loading: false,
|
||||
|
||||
@ -88,6 +92,9 @@ export default {
|
||||
"mtl_path": seqData.mtl_path,
|
||||
}
|
||||
this.seq_frame_data = seqData.seq_frame_data;
|
||||
this.duplicated_frame = seqData.retry_duplication_pose;
|
||||
this.error_frame = seqData.retry_no_pts_pose;
|
||||
|
||||
//this.model_pts = seqData.model_pts;
|
||||
},
|
||||
|
||||
|
||||
@ -6,59 +6,29 @@
|
||||
Inference Reconstruction Process
|
||||
</p>
|
||||
<Row style="height: 100%;">
|
||||
<Col span="18" style="height: 100%;">
|
||||
<Col span="24" style="height: 100%;">
|
||||
<Card
|
||||
style="position: relative; height: 100%; "
|
||||
dis-hover>
|
||||
<Card style="margin-top: 5px; margin-bottom: 5px; width: 100%;">
|
||||
<div >
|
||||
Step:
|
||||
<span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["step"] }}</span>
|
||||
</div>
|
||||
<div >
|
||||
Coverage Rate(CR):
|
||||
<span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["coverage_rate"] }}%</span>
|
||||
</div>
|
||||
<div >
|
||||
Delta CR:
|
||||
<span style="color: green; font-size: 14px;font-weight: bold;">+{{ curr_frame_info["delta_CR"] }}%</span>
|
||||
</div>
|
||||
</Card>
|
||||
<div style="width: 100%; height: 100%;">
|
||||
<canvas ref="threeCanvas_pts" style="width: 100%; height: 600px;"></canvas>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span="1" style="display: flex; align-items: center; justify-content: center;">
|
||||
<Divider type="vertical" style="height: 100%;" />
|
||||
</Col>
|
||||
<Col span="5">
|
||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
||||
Current Frame Information
|
||||
</p>
|
||||
<Card style="margin-top: 5px; margin-bottom: 5px; width: 100%;">
|
||||
<div >
|
||||
Step:
|
||||
<span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["step"] }}</span>
|
||||
</div>
|
||||
<div >
|
||||
Coverage Rate(CR):
|
||||
<span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["coverage_rate"] }}%</span>
|
||||
</div>
|
||||
<div >
|
||||
Delta CR:
|
||||
<span style="color: green; font-size: 14px;font-weight: bold;">+{{ curr_frame_info["delta_CR"] }}%</span>
|
||||
</div>
|
||||
</Card>
|
||||
<Divider v-if="hasImg"/>
|
||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
|
||||
Depth(L)
|
||||
</p >
|
||||
<Card :style="{
|
||||
marginTop: '5px',
|
||||
marginBottom: '5px',
|
||||
paddingBottom: rpCurrDepth ? '0' : '62.5%'
|
||||
}" v-if="hasImg">
|
||||
<img :src="`data:image/png;base64,${rpCurrDepth}`" alt="Depth Image" style="width: 100%;" v-if="rpCurrDepth" @click="showImage(`data:image/png;base64,${rpCurrDepth}`)"/>
|
||||
</Card>
|
||||
<Divider v-if="hasImg" />
|
||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
|
||||
Mask(L)
|
||||
</p>
|
||||
<Card :style="{
|
||||
marginTop: '5px',
|
||||
marginBottom: '5px',
|
||||
paddingBottom: rpCurrMask ? '0' : '62.5%'
|
||||
}" v-if="hasImg">
|
||||
<img :src="`data:image/png;base64,${rpCurrMask}`" alt="Depth Image" style="width: 100%;" v-if="rpCurrMask" @click="showImage(`data:image/png;base64,${rpCurrMask}`)"/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider/>
|
||||
<Row>
|
||||
@ -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"];
|
||||
|
||||
@ -29,12 +29,52 @@
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Divider v-if="localSceneName" />
|
||||
<Divider v-if="localLabelList" />
|
||||
|
||||
<Card v-if="localSceneName" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
|
||||
<Card v-if="localLabelList" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
|
||||
<p slot="title" style="font-size: 16px; color: #464c5b; font-weight: bold;">
|
||||
Selected Scene: <span style="color: green;">{{ localSceneName }} </span>
|
||||
</p>
|
||||
<Row style="width: 100%;">
|
||||
<Col style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px; width: 100%;">
|
||||
<p><Badge status="success" /><span style="font-weight: bold;">label num</span>: {{ localLabelList.length }}</p>
|
||||
<p><Badge status="success" /><span style="font-weight: bold;">max sequence coverage rate</span>: {{ localTotalMaxCoverageRate }}%</p>
|
||||
<p><Badge status="success" /><span style="font-weight: bold;">min sequence coverage rate</span>: {{ localTotalMinCoverageRate }}%</p>
|
||||
<p><Badge status="success" /><span style="font-weight: bold;">mean sequence coverage rate</span>: {{ localTotalMeanCoverageRate }}%</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
<Row style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
|
||||
<Col span="10">
|
||||
<p style="font-size: 16px; color: #464c5b; font-weight: bold;">Select Label:</p>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<Select v-model="selectedOption" style="width: 100%;" @input="handleLabelChange" placeholder="please select..." :disabled="!localSceneName">
|
||||
<Option v-for="item in localLabelList" :value="item['label_name']" :key="item['label_name']">
|
||||
{{ item["label_name"] }} | max coverage rate =
|
||||
<span style="color: green;" v-if="item['max_coverage_rate'] >= localTotalMeanCoverageRate">
|
||||
{{ item["max_coverage_rate"] }}%
|
||||
</span>
|
||||
<span style="color: red;" v-if="item['max_coverage_rate'] < localTotalMeanCoverageRate">
|
||||
{{ item["max_coverage_rate"] }}%
|
||||
</span>
|
||||
</Option>
|
||||
</Select>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider v-if="localLabelName" />
|
||||
<Card v-if="localLabelName" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
|
||||
<p slot="title" style="font-size: 16px; color: #464c5b; font-weight: bold;">
|
||||
Selected Label: <span style="color: green;">{{ localLabelName }} </span> (
|
||||
<span style="color: green;" v-if="localMaxCoverageRate >= localTotalMeanCoverageRate">
|
||||
{{ localMaxCoverageRate}}%
|
||||
</span>
|
||||
<span style="color: red;" v-if="localMaxCoverageRate < localTotalMeanCoverageRate">
|
||||
{{ localMaxCoverageRate }}%
|
||||
</span>
|
||||
)
|
||||
</p>
|
||||
<Row style="width: 100%;">
|
||||
<Col style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px; width: 100%;">
|
||||
<p><Badge status="success" /><span style="font-weight: bold;">sequence length</span>: {{ localSeqLen }}</p>
|
||||
@ -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) {
|
||||
|
||||
@ -6,45 +6,35 @@
|
||||
View Distribution
|
||||
</p>
|
||||
<Row>
|
||||
<Col span="18">
|
||||
<Col span="24">
|
||||
<Card
|
||||
style="position: relative; padding-bottom: 62.5%; min-height: 100px; height: 0; overflow: hidden;"
|
||||
dis-hover>
|
||||
<canvas ref="threeCanvas_view" style="width: 100%; height:100%"></canvas>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span="1" style="display: flex; align-items: center; justify-content: center;">
|
||||
<Divider type="vertical" style="height: 100%;" />
|
||||
</Col>
|
||||
<Col span="5">
|
||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
||||
Current Frame ID:
|
||||
</p>
|
||||
<Row>
|
||||
<Col span="8">
|
||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
||||
Current Frame ID:
|
||||
</p>
|
||||
<div style="text-align: center;">
|
||||
<span style="color: red; font-size: 16px;font-weight: bold;">{{ chosen_frame_id == null?"no camera is selected": chosen_frame_id }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="1">
|
||||
<Divider type="vertical" style="height: 100%;"/>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
||||
Label Color:
|
||||
|
||||
<div style="text-align: center;">
|
||||
<span style="color: red; font-size: 16px;font-weight: bold;">{{ chosen_frame_id == null?"no camera is selected": chosen_frame_id }}</span>
|
||||
</div>
|
||||
<Divider/>
|
||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
|
||||
Depth(L)
|
||||
</p>
|
||||
<Card :style="{
|
||||
marginTop: '5px',
|
||||
marginBottom: '5px',
|
||||
minHeight: '30%'
|
||||
}" v-if="hasImg">
|
||||
<img :src="`data:image/png;base64,${vdCurrDepth}`" alt="Depth Image" style="width: 100%;" v-if="vdCurrDepth" @click="showImage(`data:image/png;base64,${vdCurrDepth}`)"/>
|
||||
</Card>
|
||||
<Divider v-if="hasImg"/>
|
||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
|
||||
Mask(L)
|
||||
</p>
|
||||
<Card :style="{
|
||||
marginTop: '5px',
|
||||
marginBottom: '5px',
|
||||
minHeight: '30%'
|
||||
}" v-if="hasImg">
|
||||
<img :src="`data:image/png;base64,${vdCurrMask}`" alt="Mask Image" style="width: 100%;" v-if="vdCurrMask" @click="showImage(`data:image/png;base64,${vdCurrMask}`)"/>
|
||||
</p>
|
||||
<Tag type="dot" color="#FF0000">predicted view</Tag>
|
||||
<Tag type="dot" color="#00FF00">current predicted view</Tag>
|
||||
<Tag type="dot" color="#6789AB">duplicated view</Tag>
|
||||
<Tag type="dot" color="#DC1298">error view</Tag>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider/>
|
||||
<canvas ref="threeCanvas_view" style="width: 100%; height:100%"></canvas>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user