220 lines
8.4 KiB
Vue
220 lines
8.4 KiB
Vue
<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;" />
|
|
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 >
|
|
Frame ID:
|
|
<span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["frame_id"] }}</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 />
|
|
<p style="font-size: 14px; font-weight: bold; color: #464c5b;" >
|
|
Depth(L)
|
|
</p >
|
|
<Card :style="{
|
|
marginTop: '5px',
|
|
marginBottom: '5px',
|
|
paddingBottom: rpCurrDepth ? '0' : '62.5%'
|
|
}">
|
|
<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/>
|
|
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
|
Mask(L)
|
|
</p>
|
|
<Card :style="{
|
|
marginTop: '5px',
|
|
marginBottom: '5px',
|
|
paddingBottom: rpCurrMask ? '0' : '62.5%'
|
|
}">
|
|
<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,
|
|
|
|
best_seq: null,
|
|
|
|
curr_frame_info: {
|
|
"step": 0,
|
|
"frame_id":0,
|
|
"coverage_rate": 0,
|
|
"delta_CR": 0,
|
|
"combined_point_cloud": [],
|
|
"new_point_cloud": [],
|
|
"new_added_pts": [],
|
|
},
|
|
|
|
|
|
};
|
|
},
|
|
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.curr_frame_info["new_added_pts"] = val[0]["data"]["new_added_pts"];
|
|
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.curr_frame_info["new_added_pts"] = this.seqFrameData[val]["data"]["new_added_pts"];
|
|
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);
|
|
}
|
|
if (this.newAddedPtsMesh) {
|
|
this.pts_scene.remove(this.newAddedPtsMesh);
|
|
}
|
|
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.newAddedPtsMesh = this.createPointCloud(this.curr_frame_info["new_added_pts"], 0x00ff00);
|
|
|
|
this.pts_scene.add(this.combinedPointCloudMesh);
|
|
this.pts_scene.add(this.newPointCloudMesh);
|
|
this.pts_scene.add(this.newAddedPtsMesh);
|
|
},
|
|
|
|
|
|
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> |