add IRV card
This commit is contained in:
hofee
parent
eafda625ef
commit
84520ef566
@ -17,12 +17,12 @@
|
||||
|
||||
<Col span="16" style="padding-left: 10px;">
|
||||
|
||||
<ViewDistributionCard
|
||||
<ViewDistributionCard_IRV
|
||||
:seqFrameData="seq_frame_data"
|
||||
:objInfo="obj_info"
|
||||
@show-img="showImage"
|
||||
/>
|
||||
<RecProcessCard
|
||||
<RecProcessCard_IRV
|
||||
:seqFrameData="seq_frame_data"
|
||||
:modelPts="model_pts"
|
||||
@show-img="showImage"
|
||||
@ -39,16 +39,16 @@
|
||||
<script>
|
||||
|
||||
import UploadInferenceCard from './cards/UploadInferenceCard.vue';
|
||||
import ViewDistributionCard from './cards/ViewDistributionCard.vue';
|
||||
import RecProcessCard from './cards/RecProcessCard.vue';
|
||||
import ViewDistributionCard_IRV from './cards/ViewDistributionCard_IRV.vue';
|
||||
import RecProcessCard_IRV from './cards/RecProcessCard_IRV.vue';
|
||||
|
||||
|
||||
export default {
|
||||
name: "SeqInferenceResultVisualize",
|
||||
components: {
|
||||
UploadInferenceCard,
|
||||
ViewDistributionCard,
|
||||
RecProcessCard,
|
||||
ViewDistributionCard_IRV,
|
||||
RecProcessCard_IRV,
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
@ -60,7 +60,6 @@ export default {
|
||||
obj_info: null,
|
||||
seq_frame_data: [],
|
||||
model_pts: null,
|
||||
|
||||
loading: false,
|
||||
|
||||
selectedImage: null,
|
||||
|
||||
@ -40,10 +40,10 @@
|
||||
<span style="color: green; font-size: 14px;font-weight: bold;">+{{ curr_frame_info["delta_CR"] }}%</span>
|
||||
</div>
|
||||
</Card>
|
||||
<Divider/>
|
||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
||||
<Divider />
|
||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;" >
|
||||
Depth(L)
|
||||
</p>
|
||||
</p >
|
||||
<Card :style="{
|
||||
marginTop: '5px',
|
||||
marginBottom: '5px',
|
||||
|
||||
212
src/components/content/cards/RecProcessCard_IRV.vue
Normal file
212
src/components/content/cards/RecProcessCard_IRV.vue
Normal file
@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<Card style="width: 100%; margin-bottom: 10px">
|
||||
|
||||
<p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
|
||||
<Icon type="md-code-working" size="20" style="color: #464c5b;" />
|
||||
Inference Reconstruction Process
|
||||
</p>
|
||||
<Row style="height: 100%;">
|
||||
<Col span="18" style="height: 100%;">
|
||||
<Card
|
||||
style="position: relative; height: 100%; "
|
||||
dis-hover>
|
||||
<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>
|
||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
||||
Reconstruction Process: [<span style="color: green;">{{ curr_step }}</span>/<span>{{ seqFrameData.length -1 }}</span>]
|
||||
</p>
|
||||
<Slider v-model="curr_step" :step="1" style="width: 100%;" :max="seqFrameData.length-1 >=0 ? seqFrameData.length-1:0"></Slider>
|
||||
</Row>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
||||
export default {
|
||||
props: {
|
||||
seqFrameData: Array,
|
||||
modelPts: Array,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rpCurrDepth: null,
|
||||
rpCurrMask: null,
|
||||
|
||||
pts_scene: null,
|
||||
pts_camera: null,
|
||||
pts_renderer: null,
|
||||
pts_controls: null,
|
||||
|
||||
curr_step: 0,
|
||||
|
||||
model_pts: null,
|
||||
|
||||
combined_point_cloud: [],
|
||||
new_point_cloud: [],
|
||||
|
||||
best_seq: null,
|
||||
|
||||
curr_frame_info: {
|
||||
"step": 0,
|
||||
"frame_id":0,
|
||||
"coverage_rate": 0,
|
||||
"delta_CR": 0,
|
||||
"combined_points": [],
|
||||
"new_points": [],
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
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"];
|
||||
this.curr_frame_info["coverage_rate"] = val[0]["data"]["coverage_rate"];
|
||||
this.curr_frame_info["delta_CR"] = val[0]["data"]["delta_CR"];
|
||||
this.curr_frame_info["combined_point_cloud"] = val[0]["data"]["combined_point_cloud"];
|
||||
this.curr_frame_info["new_point_cloud"] = val[0]["data"]["new_point_cloud"];
|
||||
this.updatePointCloud();
|
||||
this.view_cam_pose_list = [];
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
this.view_cam_pose_list.push(val[i].data.cam_to_world);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
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"];
|
||||
this.curr_frame_info["delta_CR"] = this.seqFrameData[val]["data"]["delta_CR"];
|
||||
this.curr_frame_info["combined_point_cloud"] = this.seqFrameData[val]["data"]["combined_point_cloud"];
|
||||
this.curr_frame_info["new_point_cloud"] = this.seqFrameData[val]["data"]["new_point_cloud"];
|
||||
this.updatePointCloud();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initThreeJS_pts();
|
||||
this.animate_pts();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initThreeJS_pts() {
|
||||
const width = this.$refs.threeCanvas_pts.clientWidth;
|
||||
const height = this.$refs.threeCanvas_pts.clientHeight;
|
||||
|
||||
this.pts_scene = new THREE.Scene();
|
||||
|
||||
this.pts_camera = new THREE.PerspectiveCamera(75, width / height, 0.001, 1000);
|
||||
this.pts_camera.position.z = 2;
|
||||
|
||||
this.pts_renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_pts });
|
||||
this.pts_renderer.setSize(width, height);
|
||||
|
||||
this.pts_controls = new OrbitControls(this.pts_camera, this.pts_renderer.domElement);
|
||||
|
||||
|
||||
this.pts_scene.rotation.x = -Math.PI / 2;
|
||||
const axesHelper = new THREE.AxesHelper(5);
|
||||
this.pts_scene.add(axesHelper);
|
||||
},
|
||||
|
||||
animate_pts() {
|
||||
requestAnimationFrame(() => this.animate_pts());
|
||||
this.pts_renderer.render(this.pts_scene, this.pts_camera);
|
||||
},
|
||||
|
||||
updatePointCloud() {
|
||||
|
||||
if (this.combinedPointCloudMesh) {
|
||||
this.pts_scene.remove(this.combinedPointCloudMesh);
|
||||
}
|
||||
if (this.newPointCloudMesh) {
|
||||
this.pts_scene.remove(this.newPointCloudMesh);
|
||||
}
|
||||
this.combinedPointCloudMesh = this.createPointCloud(this.curr_frame_info["combined_point_cloud"], 0x0000ff);
|
||||
this.newPointCloudMesh = this.createPointCloud(this.curr_frame_info["new_point_cloud"], 0xff0000);
|
||||
|
||||
this.pts_scene.add(this.combinedPointCloudMesh);
|
||||
this.pts_scene.add(this.newPointCloudMesh);
|
||||
|
||||
},
|
||||
|
||||
|
||||
createPointCloud(pointCloudData, color) {
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
const vertices = new Float32Array(pointCloudData.flat());
|
||||
|
||||
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
|
||||
|
||||
const material = new THREE.PointsMaterial({
|
||||
size: 0.005,
|
||||
color: color,
|
||||
});
|
||||
|
||||
return new THREE.Points(geometry, material);
|
||||
},
|
||||
showImage(url){
|
||||
this.$emit('show-img', url);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
@ -8,64 +8,79 @@
|
||||
Current Visualization Website is in Demo Version
|
||||
<span slot="desc">The dataset directory is restricted to the sample dataset.</span>
|
||||
</Alert>
|
||||
|
||||
|
||||
<Row style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
|
||||
<Col span="10">
|
||||
<p style="font-size: 16px; color: #464c5b; font-weight: bold;">Input Root Directory:</p>
|
||||
<p style="font-size: 16px; color: #464c5b; font-weight: bold;">Input Root Directory:</p>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<Input v-model="localDatasetName" style="width: 100%;" disabled />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<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 Inference Result:</p>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<Select v-model="localSceneName" style="width: 100%;" @on-change="handleSceneChange" placeholder="please select..." :disabled="localDisableBtn">
|
||||
<Option v-for="item in sceneNameList" :value="item" :key="item">{{ item }}</Option>
|
||||
</Select>
|
||||
<Input v-model="localDatasetName" style="width: 100%;" disabled />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Upload
|
||||
multiple
|
||||
type="drag"
|
||||
action="//jsonplaceholder.typicode.com/posts/">
|
||||
<div style="padding: 20px 0">
|
||||
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
|
||||
<p>Click or drag inference result here to upload</p>
|
||||
<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 Inference Result:</p>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<Select v-model="localSceneName" style="width: 100%;" @on-change="handleSceneChange"
|
||||
placeholder="please select..." :disabled="localDisableBtn" disabled>
|
||||
<Option v-for="item in sceneNameList" :value="item" :key="item">{{ item }}</Option>
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Upload multiple type="drag" action="" accept=".pkl" :before-upload="beforeUploadInferenceResultFile"
|
||||
style="width: 100%; position: relative;">
|
||||
<div style="padding: 20px 0">
|
||||
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff" v-if="!loading">
|
||||
</Icon>
|
||||
<p v-if="!loading">Select or drag the inference result file(.pkl) here to upload
|
||||
</p>
|
||||
<div class="demo-spin-container" v-if="loading">
|
||||
<Spin fix size="large"></Spin>
|
||||
</div>
|
||||
<p v-if="loading">Waiting for server response...</p>
|
||||
</div>
|
||||
</Upload>
|
||||
|
||||
|
||||
<Divider v-if="localSceneName" />
|
||||
|
||||
|
||||
<Card v-if="localSceneName" 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;">sequence length</span>: {{ localSeqLen }}</p>
|
||||
<p><Badge status="success" /><span style="font-weight: bold;">max coverage rate</span>: {{ localMaxCoverageRate }}%</p>
|
||||
<p><Badge status="success" /><span style="font-weight: bold;">best sequence length</span>: {{ localBestSeqLen }}</p>
|
||||
<p><Badge status="success" /><span style="font-weight: bold;">best sequence</span>:</p>
|
||||
|
||||
<Card style="margin:10px;max-height: 200px; overflow-y: auto;">
|
||||
<Row v-for="(item, index) in localBestSeq" :key="item['frame']" style="margin-left: 20px;">
|
||||
<p style="width: 10%;">[<span style="color: red;">{{ index }}</span>]</p>
|
||||
<p style="width: 30%;">frame id: <span style="color: green;">{{ item['frame'] }}</span></p>
|
||||
<p style="width: 40%;">coverage rate: <span style="color: blue;">{{ item['coverage_rate'] }}%</span></p>
|
||||
</Row>
|
||||
</Card>
|
||||
<p>
|
||||
<Badge status="success" /><span style="font-weight: bold;">sequence length</span>: {{ localSeqLen }}
|
||||
</p>
|
||||
<p>
|
||||
<Badge status="success" /><span style="font-weight: bold;">max coverage rate</span>: {{ localMaxCoverageRate
|
||||
}}%
|
||||
</p>
|
||||
<p>
|
||||
<Badge status="success" /><span style="font-weight: bold;">best sequence length</span>: {{ localBestSeqLen }}
|
||||
</p>
|
||||
<p>
|
||||
<Badge status="success" /><span style="font-weight: bold;">best sequence</span>:
|
||||
</p>
|
||||
|
||||
<Card style="margin:10px;max-height: 200px; overflow-y: auto;">
|
||||
<Row v-for="(item, index) in localBestSeq" :key="item['frame']" style="margin-left: 20px;">
|
||||
<p style="width: 10%;">[<span style="color: red;">{{ index }}</span>]</p>
|
||||
<p style="width: 30%;">frame id: <span style="color: green;">{{ item['frame'] }}</span></p>
|
||||
<p style="width: 40%;">coverage rate: <span style="color: blue;">{{ item['coverage_rate'] }}%</span></p>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
|
||||
<Divider />
|
||||
<Row type="flex" justify="center">
|
||||
<Button type="success" style="width:60%" :disabled="!localSceneName || localDisableBtn" @click="handleLoadSeq" :loading="localDisableBtn">
|
||||
<Button type="success" style="width:60%" :disabled="!localSceneName || localDisableBtn" @click="handleLoadSeq"
|
||||
:loading="localDisableBtn">
|
||||
Load Sequence
|
||||
</Button>
|
||||
</Row>
|
||||
@ -86,6 +101,8 @@ export default {
|
||||
localBestSeq: null,
|
||||
localDisableBtn: false,
|
||||
sceneNameList: null,
|
||||
loading: false,
|
||||
|
||||
seqFrameData: []
|
||||
};
|
||||
},
|
||||
@ -96,47 +113,81 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getSceneList() {
|
||||
const params = {dataset_name: this.localDatasetName};
|
||||
const params = { dataset_name: this.localDatasetName };
|
||||
this.$ajax.postjson('/get_scene_list', params)
|
||||
.then((data) => {
|
||||
if (data.success == true) {
|
||||
this.sceneNameList = data.scene_list;
|
||||
} else {
|
||||
this.$Message.error("error");
|
||||
}
|
||||
});
|
||||
},
|
||||
.then((data) => {
|
||||
if (data.success == true) {
|
||||
this.sceneNameList = data.scene_list;
|
||||
} else {
|
||||
this.$Message.error("error");
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSceneChange(val) {
|
||||
this.localSceneName = val;
|
||||
const params = {dataset_name: this.localDatasetName, scene_name: val};
|
||||
const params = { dataset_name: this.localDatasetName, scene_name: val };
|
||||
this.$ajax.postjson('/get_scene_info', params)
|
||||
.then((data) => {
|
||||
if (data.success == true) {
|
||||
this.localSeqLen = data.sequence_length;
|
||||
this.localMaxCoverageRate = data.max_coverage_rate;
|
||||
this.localBestSeqLen = data.best_sequence_length;
|
||||
this.localBestSeq = data.best_sequence;
|
||||
} else {
|
||||
this.$Message.error("error");
|
||||
}
|
||||
});
|
||||
.then((data) => {
|
||||
if (data.success == true) {
|
||||
this.localSeqLen = data.sequence_length;
|
||||
this.localMaxCoverageRate = data.max_coverage_rate;
|
||||
this.localBestSeqLen = data.best_sequence_length;
|
||||
this.localBestSeq = data.best_sequence;
|
||||
} else {
|
||||
this.$Message.error("error");
|
||||
}
|
||||
});
|
||||
},
|
||||
handleLoadSeq() {
|
||||
const params = {dataset_name: this.localDatasetName, scene_name: this.localSceneName, sequence: this.localBestSeq};
|
||||
const params = { dataset_name: this.localDatasetName, scene_name: this.localSceneName, sequence: this.localBestSeq };
|
||||
this.localDisableBtn = true;
|
||||
this.$emit('set-loading', true);
|
||||
this.$ajax.postjson('/get_frame_data', params)
|
||||
.then((data) => {
|
||||
if (data.success == true) {
|
||||
this.seqFrameData = data.seq_frame_data;
|
||||
} else {
|
||||
this.$Message.error("error");
|
||||
}
|
||||
this.localDisableBtn = false;
|
||||
this.$emit('update-seq', data);
|
||||
this.$emit('set-loading', false);
|
||||
});
|
||||
|
||||
.then((data) => {
|
||||
if (data.success == true) {
|
||||
this.seqFrameData = data.seq_frame_data;
|
||||
} else {
|
||||
this.$Message.error("error");
|
||||
}
|
||||
this.localDisableBtn = false;
|
||||
this.$emit('update-seq', data);
|
||||
this.$emit('set-loading', false);
|
||||
});
|
||||
|
||||
},
|
||||
beforeUploadInferenceResultFile(file) {
|
||||
this.loading = true;
|
||||
const isPkl = file.name.endsWith('.pkl');
|
||||
if (!isPkl) {
|
||||
this.$Notice.warning({
|
||||
title: 'File format error',
|
||||
desc: 'You can only upload a .pkl file'
|
||||
});
|
||||
this.loading = false;
|
||||
return false;
|
||||
}
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
this.$ajax.postfile('/analysis_inference_result', formData)
|
||||
.then((data) => {
|
||||
if (data.success == true) {
|
||||
|
||||
this.$Notice.success({
|
||||
title: 'Successfully parsed the file',
|
||||
desc: 'inference results are found in the uploaded file.'
|
||||
});
|
||||
this.loading = false;
|
||||
} else {
|
||||
console.log(data.success, data.message)
|
||||
this.$Notice.error({
|
||||
title: 'Failed to parse the file',
|
||||
desc: 'Error message: ' + data.message
|
||||
});
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
349
src/components/content/cards/ViewDistributionCard_IRV.vue
Normal file
349
src/components/content/cards/ViewDistributionCard_IRV.vue
Normal file
@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<Card style="width: 100%; margin-bottom: 10px">
|
||||
|
||||
<p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
|
||||
<Icon type="ios-image" size="20" style="color: #464c5b;"/>
|
||||
View Distribution
|
||||
</p>
|
||||
<Row>
|
||||
<Col span="18">
|
||||
<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>
|
||||
|
||||
<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}`)"/>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
<Divider/>
|
||||
<Row>
|
||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
||||
NBV Sequence: [<span style="color: green;">{{ selected_idx }}</span>/<span>{{ seqFrameData.length -1 }}</span>]
|
||||
</p>
|
||||
<Slider v-model="selected_idx" :step="1" style="width: 100%;" :max="seqFrameData.length-1 >=0 ? seqFrameData.length-1:0"></Slider>
|
||||
</Row>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
||||
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
|
||||
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
seqFrameData: Array,
|
||||
objInfo: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vdCurrDepth: null,
|
||||
vdCurrMask: null,
|
||||
chosen_frame_id: null,
|
||||
selected_idx: 0,
|
||||
|
||||
scene: null,
|
||||
camera: null,
|
||||
renderer: null,
|
||||
controls: null,
|
||||
raycaster: new THREE.Raycaster(),
|
||||
mouse: new THREE.Vector2(),
|
||||
selectedFrustum: null,
|
||||
hoveredFrustum: null,
|
||||
target: new THREE.Vector3(0, 0, 0.85),
|
||||
view_cam_pose_list: [],
|
||||
view_cam_pose_matrix_list: [],
|
||||
frustums: [],
|
||||
loadedObject: null,
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
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]);
|
||||
}
|
||||
this.view_cam_pose_list = [];
|
||||
this.view_cam_pose_matrix_list = [];
|
||||
this.frustums = [];
|
||||
this.selectedFrustum = null;
|
||||
this.selected_idx = 0;
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
this.view_cam_pose_list.push(val[i].data.cam_to_world);
|
||||
}
|
||||
this.getCameras();
|
||||
this.selectCamera(this.selected_idx);
|
||||
}
|
||||
},
|
||||
objInfo(val) {
|
||||
if (val) {
|
||||
const objURL = val.obj_path;
|
||||
const mtlURL = val.mtl_path;
|
||||
|
||||
this.loadMesh(objURL, mtlURL);
|
||||
}
|
||||
},
|
||||
selected_idx(val) {
|
||||
if (val != null) {
|
||||
this.selectCamera(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initThreeJS_view();
|
||||
|
||||
this.animate();
|
||||
window.addEventListener('mousemove', this.onMouseMove, false);
|
||||
window.addEventListener('click', this.onMouseClick, false);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('mousemove', this.onMouseMove);
|
||||
window.removeEventListener('click', this.onMouseClick);
|
||||
},
|
||||
methods: {
|
||||
initThreeJS_view() {
|
||||
|
||||
this.scene = new THREE.Scene();
|
||||
|
||||
const width = this.$refs.threeCanvas_view.clientWidth;
|
||||
const height = this.$refs.threeCanvas_view.clientHeight;
|
||||
|
||||
this.camera = new THREE.PerspectiveCamera(75, width / height, 0.09, 1000);
|
||||
|
||||
this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_view });
|
||||
this.renderer.setSize(width, height);
|
||||
this.scene.rotation.x = -Math.PI / 2;
|
||||
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
||||
const axesHelper = new THREE.AxesHelper(5);
|
||||
this.scene.add(axesHelper);
|
||||
const light = new THREE.AmbientLight(0xffffff, 1);
|
||||
this.scene.add(light);
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
|
||||
directionalLight.position.set(5, 5, 5).normalize();
|
||||
this.scene.add(directionalLight);
|
||||
this.camera.position.set(0.5, 1.5, 0);
|
||||
this.camera.lookAt(this.target);
|
||||
|
||||
},
|
||||
selectCamera(index) {
|
||||
if (index >= 0 && index < this.frustums.length) {
|
||||
const frustum = this.frustums[index];
|
||||
if (this.selectedFrustum) {
|
||||
this.selectedFrustum.material.color.set(0xff0000); // 恢复之前选中四棱锥的颜色
|
||||
}
|
||||
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() {
|
||||
if (this.loadedObject) {
|
||||
this.scene.remove(this.loadedObject);
|
||||
this.loadedObject.traverse(child => {
|
||||
if (child.material) child.material.dispose();
|
||||
if (child.geometry) child.geometry.dispose();
|
||||
});
|
||||
this.loadedObject = null;
|
||||
}
|
||||
},
|
||||
|
||||
loadMesh(objURL, mtlURL) {
|
||||
this.clearLoadedObject();
|
||||
const objLoader = new OBJLoader();
|
||||
const mtlLoader = new MTLLoader();
|
||||
|
||||
mtlLoader.load(mtlURL, materials => {
|
||||
materials.preload();
|
||||
objLoader.setMaterials(materials);
|
||||
objLoader.load(objURL, object => {
|
||||
this.loadedObject = object;
|
||||
this.scene.add(object);
|
||||
});
|
||||
});
|
||||
},
|
||||
getCameras() {
|
||||
for (let i = 0; i < this.view_cam_pose_list.length; i++) {
|
||||
const view_cam_pose = this.view_cam_pose_list[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.view_cam_pose_matrix_list.push(camera.matrixWorld);
|
||||
camera.updateProjectionMatrix();
|
||||
const frustum = this.createFrustum(camera);
|
||||
this.frustums.push(frustum);
|
||||
}
|
||||
|
||||
},
|
||||
createFrustum(camera) {
|
||||
const frustumGeometry = new THREE.BufferGeometry();
|
||||
const near = camera.near;
|
||||
const far = camera.far;
|
||||
const aspect = camera.aspect;
|
||||
const fov = camera.fov * (Math.PI / 180); // 角度转弧度
|
||||
|
||||
// 计算近平面的高度和宽度
|
||||
const hNear = 2 * Math.tan(fov / 2) * near;
|
||||
const wNear = hNear * aspect;
|
||||
|
||||
// 获取相机的世界矩阵和相机方向
|
||||
const worldMatrix = new THREE.Matrix4().makeRotationFromEuler(camera.rotation);
|
||||
const camPos = new THREE.Vector3().copy(camera.position);
|
||||
const camDir = new THREE.Vector3(0, 0, 1).applyMatrix4(worldMatrix).normalize();
|
||||
const camUp = new THREE.Vector3(0, -1, 0).applyMatrix4(worldMatrix).normalize();
|
||||
const camRight = new THREE.Vector3(1, 0, 0).applyMatrix4(worldMatrix).normalize();
|
||||
|
||||
// 计算近平面中心
|
||||
const nearCenter = camPos.clone().add(camDir.clone().multiplyScalar(near));
|
||||
|
||||
// 计算近平面四个角的顶点
|
||||
const nearTopLeft = nearCenter.clone().add(camUp.clone().multiplyScalar(hNear / 2)).sub(camRight.clone().multiplyScalar(wNear / 2));
|
||||
const nearTopRight = nearCenter.clone().add(camUp.clone().multiplyScalar(hNear / 2)).add(camRight.clone().multiplyScalar(wNear / 2));
|
||||
const nearBottomLeft = nearCenter.clone().sub(camUp.clone().multiplyScalar(hNear / 2)).sub(camRight.clone().multiplyScalar(wNear / 2));
|
||||
const nearBottomRight = nearCenter.clone().sub(camUp.clone().multiplyScalar(hNear / 2)).add(camRight.clone().multiplyScalar(wNear / 2));
|
||||
|
||||
const vertices = new Float32Array([
|
||||
// 近平面四个角
|
||||
...nearTopLeft.toArray(),
|
||||
...nearTopRight.toArray(),
|
||||
...nearBottomRight.toArray(),
|
||||
...nearBottomLeft.toArray(),
|
||||
// 相机位置（四个重复的点）
|
||||
...camPos.toArray(),
|
||||
...camPos.toArray(),
|
||||
...camPos.toArray(),
|
||||
...camPos.toArray()
|
||||
]);
|
||||
|
||||
const index = [
|
||||
// 近平面
|
||||
0, 1, 2, 0, 2, 3,
|
||||
// 侧面
|
||||
0, 1, 4,
|
||||
1, 2, 4,
|
||||
2, 3, 4,
|
||||
3, 0, 4
|
||||
];
|
||||
|
||||
frustumGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
|
||||
frustumGeometry.setIndex(index);
|
||||
|
||||
const frustumMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
|
||||
const frustum = new THREE.Mesh(frustumGeometry, frustumMaterial);
|
||||
this.scene.add(frustum);
|
||||
|
||||
return frustum;
|
||||
},
|
||||
onMouseMove(event) {
|
||||
const rect = this.$refs.threeCanvas_view.getBoundingClientRect();
|
||||
this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
|
||||
this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
|
||||
|
||||
this.raycaster.setFromCamera(this.mouse, this.camera);
|
||||
const intersects = this.raycaster.intersectObjects(this.frustums);
|
||||
|
||||
if (intersects.length > 0) {
|
||||
const frustum = intersects[0].object;
|
||||
|
||||
|
||||
if (this.hoveredFrustum !== frustum) {
|
||||
if (this.hoveredFrustum) {
|
||||
|
||||
if (this.hoveredFrustum !== this.selectedFrustum) {
|
||||
this.hoveredFrustum.material.color.set(0xff0000);
|
||||
}
|
||||
}
|
||||
|
||||
if (frustum !== this.selectedFrustum) {
|
||||
frustum.material.color.set(0xffff00);
|
||||
}
|
||||
this.hoveredFrustum = frustum;
|
||||
}
|
||||
} else {
|
||||
|
||||
if (this.hoveredFrustum && this.hoveredFrustum !== this.selectedFrustum) {
|
||||
this.hoveredFrustum.material.color.set(0xff0000);
|
||||
this.hoveredFrustum = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseClick() {
|
||||
|
||||
this.raycaster.setFromCamera(this.mouse, this.camera);
|
||||
const intersects = this.raycaster.intersectObjects(this.frustums);
|
||||
|
||||
if (intersects.length > 0) {
|
||||
const frustum = intersects[0].object;
|
||||
const index = this.frustums.indexOf(frustum);
|
||||
if (index !== -1) {
|
||||
this.selected_idx = index;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
animate() {
|
||||
requestAnimationFrame(this.animate);
|
||||
this.controls.update();
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
},
|
||||
|
||||
showImage(url){
|
||||
this.$emit('show-img', url);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -51,6 +51,7 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
||||
export default {
|
||||
props: {
|
||||
seqFrameData: Array,
|
||||
hasImg: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Loading…
x
Reference in New Issue
Block a user