聚焦产品：让数字空间体验更快速、清晰、流畅，如视都做了什么？

　　作为数字空间综合解决方案引领者,如视一直致力于通过软硬一体的解决方案,为用户提供高精度、高效率、高稳定性的服务。想要将这些服务真正做到落到实处,离不开如视在生产、处理、应用各环节中的层层把关和精细打磨。

　　本期聚焦产品栏目,我们将深入如视产品背后的工程技术领域,聚焦应用层,深度解析如视为保证整体服务稳定性和优质性,如何通过瓦片加载、模型多细分层级以及图像HDR处理等方法,让用户体验到更快速、清晰、流畅、细节好的数字空间。

　　全景图:瓦片化渐进加载

　　在数字空间中,高质量全景图需要占用较大的存储/传输空间,为保证空间浏览稳定性,如视采取瓦片化加载方式呈现全景图,无论用户使用何种终端设备,在当下点击和浏览数字空间时都能够获得匹配设备分辨率的内容展示体验,清晰、快速、流畅;且通过未浏览区域暂缓加载的方式来释放整体的存储压力。如视通过这种方式,改善设备的加载性能,提升了用户交互体验。

　　在VR中缩放/点击任何位置,都会显示匹配当下设备分辨率的高清内容

　　浏览全景图时,如视要解决什么问题

　　为了让用户拥有更真实的数字空间体验,如视不断提升自身硬件采集能力。以专业级扫描设备伽罗华为例,其360°环绕拍摄后,可自动生成分辨率高达16K——即16384 × 8192(1.34亿像素)的彩色全景图像。

　　图像分辨率越高,占用的存储/传输空间越大。单张16K分辨率的全景图像大小约为40MB,以一套100平方米的房子为例,假设拍了25个点位(即25张全景图),那么,该数字空间中全景图所占用的存储/传输空间就需要1个G。

　　要将如此像素量级的高画质图像通过网络“原封不动”的呈现给用户,对网络环境和终端设备来说,都是一个不小的挑战。因此,若想为每位用户提供极致的数字空间浏览体验,如视需要解决以下几个问题:

　　设备运行要流畅

　　如视生成的全景图像,需要能够在多数用户常用的终端设备,如智能手机、平板电脑、PC台式机中流畅运行,不卡顿。

　　图像细节够清晰

　　很多用户会发现,手机相册里清晰显示的照片,上传至某些社交平台后细节却变模糊了,这是因为平台为了流畅度等对照片进行了压缩处理。在数字空间中,图像压缩则意味着空间细节缺失,因此,如视希望能够将采集到的高清图像1:1展示给用户,不损失任何细节。

　　加载效率足够高

　　从点击进入空间到步进式游走各环节,如视都需要能够让用户快速浏览和交互,得到丝滑、流畅的空间漫游体验。

　　显然,在有限的网速和差异化终端设备条件下,将所有高像素全景图片全部加载展示并不是一个好方案。那么,如视是怎样解决这个问题的呢?

　　如视是如何做的

　　首先,如视通过对用户查看全景图这个场景进行分析,得到了以下几个条件:

　　当用户查看全景图时,无论图片存在多少像素,用户终端设备的显示分辨率是固定的。比如设备显示分辨率为1920× 1080,那么无论图片分辨率是3840×2160还是7680x4320,其最终显示的实际像素都是1920× 1080。

　　当用户缩放图片时,看到的图像内容占全景图比例扩大,而一旦用户终端设备的显示像素密度,不能够承载图像像素密度(像素点无法一一对应),多余的像素会被浪费,甚至出现摩尔纹等负面效果。

　　摩尔纹:细密线条或点阵叠加时产生的干扰图案

　　当用户放大图片时,看到的图像内容占全景图比例缩小,用户终端设备的显示像素密度将逼近甚至超过承载图像像素密度,此时就需要更大尺寸的图像,否则显示效果不够清晰锐利,影响用户体验。

　　基于以上条件,如视采取瓦片化渐进加载全景图,来达成设备运行流畅、图像细节清晰的效果。

　　什么是瓦片加载?

　　传统瓦片加载是指在地图服务中,通过预先在服务端将地图瓦片分层(采用金字塔模型)并全量渲染,再根据地图不同的显示级别将瓦片切分为相应图片,用户每次访问时,这些图片会按照顺序逐步呈现。

　　如视前端团队借鉴了这种思路,使用瓦片加载的方式加载全景图。如视将全景图细分成多个递进的分辨率层级和分块,通过quad-tree(4叉树)管理。在用户不同的终端设备、缩放比例下,加载屏幕区域内适合层级的分块,最终将加载/显示的总像素数近似于用户终端设备的显示像素数。

　　如视将全景图分为多个递进分辨率层级

　　瓦片渐进式加载能带来什么?

　　提升用户体验这种按需加载方式可以保证局部画面的清晰效果,同时解决了加载速度问题。在加载时,先加载低分辨率层级分块,后逐渐补足当前屏幕需要的分辨率分块,使用户能够更快、更清晰的看到图像内容,减少等待时间,极大提升用户体验。

　　改善设备加载性能在显示策略上,瓦片仅在用户视野范围内加载并展示,并根据屏幕的像素数与视场角度(FOV)计算角分辨率(DPR)来控制显示的瓦片层级。因此,在达成最佳显示效果前提下无需下载过多的资源文件,能够改善设备的加载性能。

　　适应不同网络环境

　　瓦片渐进式加载可以根据不同网络环境,动态调整图像加载速度和质量。在网速较慢时,优先加载低质量图像,为用户提供基础视觉内容;在网速较快时,可以加载高质量图像,提供更清晰的视觉体验。

　　3D模型:模型的多细分层级(LOD)

　　如视的实景三维重建,离不开精细的3D模型。同全景图类似,用户在数字空间中实现对模型的旋转、放大、缩小等任意操作,也离不开设备流畅、图像清晰、加载效率高、占用资源少等必要条件。如视通过对3D模型的多细分层次(LOD)加载,利用自研3d-tiles 加载器,让模型加载更快速、流畅。

　　如视的3D模型,可对其流畅操作

　　什么是LOD加载

　　LOD(Level Of Detail)即多细分层级,是一种多层次细节展示的技术,它根据物体与相机的距离来确定显示哪个模型,减少计算负担。

　　比如,我们利用LOD来展示一栋楼盘的3D模型,当物体离相机近时,显示高精度的模型,让小区设施清晰可见;当物体离相机远时,显示低精度的模型,仅展示楼盘的大致构造。

　　如视采用了这种思路进行三维模型加载,与上述提到的瓦片加载类似,当用户需要查看局部细节时,可以加载更清晰的模型,同时提高加载效率。

　　什么是3d-tiles

　　3d-tiles(三维瓦片)是一种用于高效传输和渲染大规模 3D 地理空间数据的开放标准,由Cesium(一个开源的 JavaScript 库,用于创建 3D 地球和地图的可视化)开发,支持各种3D数据集,如城市模型、点云等。其主要特点就是采用了LOD加载,根据视图距离调整渲染细节,提高了渲染效率,使得在 Web 上展示复杂的 3D 场景成为可能。

　　如视自研的3d-tiles 加载器

　　如果将3d-tiles比作商场橱窗,那么3d-tiles 加载器就是将商品放进橱窗展台的角色,而这些商品就是数据集,用户透过橱窗看到的整体效果就是3D可视化。

　　Cesium.js是最常用的库之一,但不同于 Cesium.js,如视的采集内容包含室内场景、自然景观等等,并不限定于 GIS 这种地理信息内容,所以显示内容并不局限于地球/太阳光照等维度。

　　基于此,如视自主研发了基于 threejs 的 3d-tiles 加载器,相比 Loader.gl 等开源库实现更全的 3d-tiles 的格式兼容支持。比如:

　　• skipLevelOfDetail 加载图块跨级渲染

　　• Glb / b3dm / pnts 等及以外的模型格式作为模型物料

　　• Glb 内置支持对 ktx2, draco, meshpot 等优化特征的支持

　　以及通过 WebAssembly 技术优化密集任务的计算效率、 使用 Web Worker 处理并行计算任务等额外优化手段,使模型加载更快速、流畅。

　　图像的 HDR 处理

　　为什么要进行图像HDR处理

　　如视在采集全景图时,需要将亮度控制在一定范围内,确保图像中较亮的颜色比如灯光、墙壁等不过曝;较暗的部分如墙角等不漆黑一片。但由于全景图覆盖的场景范围过大,如工业园区等,在空间亮度差异较大的情况下往往会显得图像动态范围(明暗差别)不足,这就使全景图像丢失大量细节,令生成的数字空间不够真实,用户观感差。因此,如视需要对图像进行HDR处理。

　　分别为图像过暗、过曝、HDR显示

　　如视如何做HDR处理

　　HDR(High Dynamic Range Imaging),又被称为高动态范围成像,用于捕捉和显示场景中最亮和最暗部分的更多细节。其特点是通过将不同曝光的多张照片合成为一张图像,来同时呈现亮部和暗部细节。

　　HDR图像同 jpg / png等格式图像相比,细节展现更为丰富,但同时也占据更多存储空间。如果直接使用.hdr格式来记录更高动态范围的数据,因为传输体积增大,无法采取瓦片化渐进加载方式,会让上文中对全景图的优化失效。同时,由于HDR终端设备显示效果参差不齐,难以让每位用户都有极致的数字空间漫游体验。

　　如视通过运用屏幕空间HDR方案来解决这个问题。

　　首先,如视利用 Luminance 图像来记录对应像素的亮度权重。Luminance 图像是一种灰度图像,仅包含亮度信息,不包括颜色细节。它表示图像中每个像素的光强度。

　　获取亮度权重后,如视就可以通过亮度权重来计算图像的Gamma校正(伽玛校正:一种调整图像亮度的技术,用于匹配显示设备的非线性特性),来动态改变画面亮度,确保图像在不同设备上显示一致。

　　最后,通过设置一些延迟过度参数,来模拟人眼瞳孔收缩带来的光晕变化,得到近乎真实世界的浏览体验。

　　如视HDR方案优势

　　如视的屏幕空间HDR方案,基于全景图瓦片化渐进加载,不仅运行速度快、加载效率高,还极大提升了全景图像的动态范围,能够准确还原数字空间内部的明暗变化、颜色细节。

　　我们以一处室内空间为例,未应用屏幕空间HDR前,室内阳光暗淡无变化,阴影处较为灰暗:

　　应用屏幕空间HDR后,可以明显感受到门前的阳光明暗变化,暗处细节也更为清晰。

　　“真实”藏在细节里,无论是针对二维全景图的瓦片渐进加载优化、3D模型的多细分层级调整,还是图像细节的HDR处理,如视的最终目标都是为用户提供更高效、稳定的服务,让用户拥有更优质的数字空间漫游体验。

　　未来,如视会继续打磨工程技术细节,让生产、处理和应用的每一个环节都更加优质和高效。