三维实景业务中的前端技术

简介

随着近年来人工智能与机器学习技术的不断发展和进步，在视觉AI技术方面也产生了规模化的应用，在实景方向的业务中细分了技术应用方向，包括三维空间重建、三维物体重建、三维人体重建等。三维技术可以为用户提供全方位的服务，720度无死角的观察整个产品细节，最大限度保留场景的真实性，使用户可以更加真实全面的了解产品信息，提升用户的体验，满足用户个性化需求。在实景业务的拓展中， 融入人工智能的重建算法给三维建模行业带来了全链式的优化升级，实现智能数据预处理、智能重建与智能化数据应用。

产品化解决方案

使用普通全景相机将拍摄的全景图片做为数据输入，经过空间矫正、结构化识别、深度估计等算法，结合机器学习的训练优化，快速构建出3D空问模型。整个解决方案包含数据采集、数据标注、引擎渲染、模型后处理、效果投放等完整一套定制化方案，体系流程如下圈所示。第一步数据采集：通过专业定制化的工具进行全景图像和视频的采集工作；第二步数据标注：将采集数据经过算法预处理（图片校正，切图，结构预测等步骤)获得标注数据，对于算法不能处理的异性空间，前端需要提供可视化的辅助标注工具作为重建的兜底方案；第三步数据渲染：将第二步完成的标注数据对全景图进行建模、纹理优化、切图等三维重建操作，在前端进行重建视图的展示；第四步模型后处理：在完成模型的基础上对模型进行打标，设置角度等后处理操作：第五步效果投放：完成后进行PC端、移动端、大屏等多端的投放。除了第一步以外，其他环节都法及到webGL技术。

技术解决方案

在整个技术方案中涉及多个3D技术方案，包含相机控制器、3D鼠标交互、坐标系（3D/2D坐标系）转换、ECS架构等多项技术。本文将从标注–>渲染–>后处理–>投放这4个主要流程来依次介绍这些技术内容

3D标注

首先，从标注部分来说，数据标注分为基于Canvas的二维标注和Three.js三维标注体系两个部分，通过全景数据SDK为衔接，构成全景标注、3D标注、实时演算、平面图等四个相互联动、紧密连接的四个展示模块。

三维的标注体系区别于ORC、图像等一般的二维视觉标注系统，需要在实景空间中用三维的点线面进行实景的勾勒。它的主要结构分为下图的三个部分：

• 相机：Threejs三大模块（相机、渲染器、场景）中的相机模块，作用是取景，通过相机参数的配置获取整个三维场景中需要被渲染呈现的部分。
• 全景视图：在标注体系中的背景底图，利用球模型进行加载渲染。
• 标注对象：在标注体系中构成墙线、墙面、门、玻璃、凹凸墙等物体的点（Point）、线（Line）、面（Plane）、体（Cube）等对象。
  

全景展示

常规的全景展示分为两种：单张全景图的球模型贴图和六张全景图的贴在六面体的盒模型贴图。在数据标注部分中使用全景图进行底图展示，在渲染引擎部分漫游点位除使用六面体展示高清图像。

球模型全景图

// 伪代码
createPanorama = imageUrl => {
   
	// 创建个球体
	const geometry = new THREE.SphereBufferGeometry(1000, 60, 40);
	// 翻转x轴，使其球体表面向内
	geometry.scale(-1, 1, 1)
	// 声明材质并加载图片
	const material = new THREE.MeshBasicMaterial({
   
		map: new THREE.TextureLoader().load(imageUrl)
	})
	const mesh = new THREE.Mesh(geometry, material);
	// 将创建好的球模型加载
	scene.add(mesh)
} 

六面图全景图

// 伪代码
createPanorama = imageUrlList