作為數(shù)字空間綜合解決方案引領(lǐng)者，如視一直致力于通過軟硬一體的解決方案，為用戶提供高精度、高效率、高穩(wěn)定性的服務(wù)。想要將這些服務(wù)真正做到落到實(shí)處，離不開如視在生產(chǎn)、處理、應(yīng)用各環(huán)節(jié)中的層層把關(guān)和精細(xì)打磨。
本期聚焦產(chǎn)品欄目，我們將深入如視產(chǎn)品背后的工程技術(shù)領(lǐng)域，聚焦應(yīng)用層，深度解析如視為保證整體服務(wù)穩(wěn)定性和優(yōu)質(zhì)性，如何通過瓦片加載、模型多細(xì)分層級(jí)以及圖像HDR處理等方法，讓用戶體驗(yàn)到更快速、清晰、流暢、細(xì)節(jié)好的數(shù)字空間。
全景圖：瓦片化漸進(jìn)加載
在數(shù)字空間中，高質(zhì)量全景圖需要占用較大的存儲(chǔ)/傳輸空間，為保證空間瀏覽穩(wěn)定性，如視采取瓦片化加載方式呈現(xiàn)全景圖，無論用戶使用何種終端設(shè)備，在當(dāng)下點(diǎn)擊和瀏覽數(shù)字空間時(shí)都能夠獲得匹配設(shè)備分辨率的內(nèi)容展示體驗(yàn)，清晰、快速、流暢；且通過未瀏覽區(qū)域暫緩加載的方式來釋放整體的存儲(chǔ)壓力。如視通過這種方式，改善設(shè)備的加載性能，提升了用戶交互體驗(yàn)。
在VR中縮放/點(diǎn)擊任何位置，都會(huì)顯示匹配當(dāng)下設(shè)備分辨率的高清內(nèi)容
瀏覽全景圖時(shí)，如視要解決什么問題
為了讓用戶擁有更真實(shí)的數(shù)字空間體驗(yàn)，如視不斷提升自身硬件采集能力。以專業(yè)級(jí)掃描設(shè)備伽羅華為例，其360°環(huán)繞拍攝后，可自動(dòng)生成分辨率高達(dá)16K——即16384?×?8192（1.34億像素）的彩色全景圖像。
圖像分辨率越高，占用的存儲(chǔ)/傳輸空間越大。單張16K分辨率的全景圖像大小約為40MB，以一套100平方米的房子為例，假設(shè)拍了25個(gè)點(diǎn)位（即25張全景圖），那么，該數(shù)字空間中全景圖所占用的存儲(chǔ)/傳輸空間就需要1個(gè)G。
要將如此像素量級(jí)的高畫質(zhì)圖像通過網(wǎng)絡(luò)“原封不動(dòng)”的呈現(xiàn)給用戶，對網(wǎng)絡(luò)環(huán)境和終端設(shè)備來說，都是一個(gè)不小的挑戰(zhàn)。因此，若想為每位用戶提供極致的數(shù)字空間瀏覽體驗(yàn)，如視需要解決以下幾個(gè)問題：
設(shè)備運(yùn)行要流暢
如視生成的全景圖像，需要能夠在多數(shù)用戶常用的終端設(shè)備，如智能手機(jī)、平板電腦、PC臺(tái)式機(jī)中流暢運(yùn)行，不卡頓。
圖像細(xì)節(jié)夠清晰
很多用戶會(huì)發(fā)現(xiàn)，手機(jī)相冊里清晰顯示的照片，上傳至某些社交平臺(tái)后細(xì)節(jié)卻變模糊了，這是因?yàn)槠脚_(tái)為了流暢度等對照片進(jìn)行了壓縮處理。在數(shù)字空間中，圖像壓縮則意味著空間細(xì)節(jié)缺失，因此，如視希望能夠?qū)⒉杉降母咔鍒D像1:1展示給用戶，不損失任何細(xì)節(jié)。
加載效率足夠高
從點(diǎn)擊進(jìn)入空間到步進(jìn)式游走各環(huán)節(jié)，如視都需要能夠讓用戶快速瀏覽和交互，得到絲滑、流暢的空間漫游體驗(yàn)。
顯然，在有限的網(wǎng)速和差異化終端設(shè)備條件下，將所有高像素全景圖片全部加載展示并不是一個(gè)好方案。那么，如視是怎樣解決這個(gè)問題的呢？
如視是如何做的
首先，如視通過對用戶查看全景圖這個(gè)場景進(jìn)行分析，得到了以下幾個(gè)條件：
當(dāng)用戶查看全景圖時(shí)，無論圖片存在多少像素，用戶終端設(shè)備的顯示分辨率是固定的。比如設(shè)備顯示分辨率為1920×?1080，那么無論圖片分辨率是3840×2160還是7680x4320，其最終顯示的實(shí)際像素都是1920×?1080。
當(dāng)用戶縮放圖片時(shí)，看到的圖像內(nèi)容占全景圖比例擴(kuò)大，而一旦用戶終端設(shè)備的顯示像素密度，不能夠承載圖像像素密度（像素點(diǎn)無法一一對應(yīng)），多余的像素會(huì)被浪費(fèi)，甚至出現(xiàn)摩爾紋等負(fù)面效果。
摩爾紋：細(xì)密線條或點(diǎn)陣疊加時(shí)產(chǎn)生的干擾圖案
當(dāng)用戶放大圖片時(shí)，看到的圖像內(nèi)容占全景圖比例縮小，用戶終端設(shè)備的顯示像素密度將逼近甚至超過承載圖像像素密度，此時(shí)就需要更大尺寸的圖像，否則顯示效果不夠清晰銳利，影響用戶體驗(yàn)。
基于以上條件，如視采取瓦片化漸進(jìn)加載全景圖，來達(dá)成設(shè)備運(yùn)行流暢、圖像細(xì)節(jié)清晰的效果。
什么是瓦片加載？
傳統(tǒng)瓦片加載是指在地圖服務(wù)中，通過預(yù)先在服務(wù)端將地圖瓦片分層（采用金字塔模型）并全量渲染，再根據(jù)地圖不同的顯示級(jí)別將瓦片切分為相應(yīng)圖片，用戶每次訪問時(shí)，這些圖片會(huì)按照順序逐步呈現(xiàn)。
如視前端團(tuán)隊(duì)借鑒了這種思路，使用瓦片加載的方式加載全景圖。如視將全景圖細(xì)分成多個(gè)遞進(jìn)的分辨率層級(jí)和分塊，通過quad-tree（4叉樹）管理。在用戶不同的終端設(shè)備、縮放比例下，加載屏幕區(qū)域內(nèi)適合層級(jí)的分塊，最終將加載/顯示的總像素?cái)?shù)近似于用戶終端設(shè)備的顯示像素?cái)?shù)。
如視將全景圖分為多個(gè)遞進(jìn)分辨率層級(jí)
瓦片漸進(jìn)式加載能帶來什么？
提升用戶體驗(yàn)
這種按需加載方式可以保證局部畫面的清晰效果，同時(shí)解決了加載速度問題。在加載時(shí)，先加載低分辨率層級(jí)分塊，后逐漸補(bǔ)足當(dāng)前屏幕需要的分辨率分塊，使用戶能夠更快、更清晰的看到圖像內(nèi)容，減少等待時(shí)間，極大提升用戶體驗(yàn)。
改善設(shè)備加載性能
在顯示策略上，瓦片僅在用戶視野范圍內(nèi)加載并展示，并根據(jù)屏幕的像素?cái)?shù)與視場角度（FOV）計(jì)算角分辨率（DPR）來控制顯示的瓦片層級(jí)。因此，在達(dá)成最佳顯示效果前提下無需下載過多的資源文件，能夠改善設(shè)備的加載性能。
適應(yīng)不同網(wǎng)絡(luò)環(huán)境
瓦片漸進(jìn)式加載可以根據(jù)不同網(wǎng)絡(luò)環(huán)境，動(dòng)態(tài)調(diào)整圖像加載速度和質(zhì)量。在網(wǎng)速較慢時(shí)，優(yōu)先加載低質(zhì)量圖像，為用戶提供基礎(chǔ)視覺內(nèi)容；在網(wǎng)速較快時(shí)，可以加載高質(zhì)量圖像，提供更清晰的視覺體驗(yàn)。
3D模型：模型的多細(xì)分層級(jí)（LOD）
如視的實(shí)景三維重建，離不開精細(xì)的3D模型。同全景圖類似，用戶在數(shù)字空間中實(shí)現(xiàn)對模型的旋轉(zhuǎn)、放大、縮小等任意操作，也離不開設(shè)備流暢、圖像清晰、加載效率高、占用資源少等必要條件。如視通過對3D模型的多細(xì)分層次（LOD）加載，利用自研3d-tiles 加載器，讓模型加載更快速、流暢。
如視的3D模型，可對其流暢操作
什么是LOD加載
LOD（Level Of Detail）即多細(xì)分層級(jí)，是一種多層次細(xì)節(jié)展示的技術(shù)，它根據(jù)物體與相機(jī)的距離來確定顯示哪個(gè)模型，減少計(jì)算負(fù)擔(dān)。
比如，我們利用LOD來展示一棟樓盤的3D模型，當(dāng)物體離相機(jī)近時(shí)，顯示高精度的模型，讓小區(qū)設(shè)施清晰可見；當(dāng)物體離相機(jī)遠(yuǎn)時(shí)，顯示低精度的模型，僅展示樓盤的大致構(gòu)造。
如視采用了這種思路進(jìn)行三維模型加載，與上述提到的瓦片加載類似，當(dāng)用戶需要查看局部細(xì)節(jié)時(shí)，可以加載更清晰的模型，同時(shí)提高加載效率。
什么是3d-tiles
3d-tiles（三維瓦片）是一種用于高效傳輸和渲染大規(guī)模 3D 地理空間數(shù)據(jù)的開放標(biāo)準(zhǔn)，由Cesium（一個(gè)開源的 JavaScript 庫，用于創(chuàng)建 3D 地球和地圖的可視化）開發(fā)，支持各種3D數(shù)據(jù)集，如城市模型、點(diǎn)云等。其主要特點(diǎn)就是采用了LOD加載，根據(jù)視圖距離調(diào)整渲染細(xì)節(jié)，提高了渲染效率，使得在 Web 上展示復(fù)雜的 3D 場景成為可能。
如視自研的3d-tiles 加載器
如果將3d-tiles比作商場櫥窗，那么3d-tiles 加載器就是將商品放進(jìn)櫥窗展臺(tái)的角色，而這些商品就是數(shù)據(jù)集，用戶透過櫥窗看到的整體效果就是3D可視化。
Cesium.js是最常用的庫之一，但不同于 Cesium.js，如視的采集內(nèi)容包含室內(nèi)場景、自然景觀等等，并不限定于 GIS 這種地理信息內(nèi)容，所以顯示內(nèi)容并不局限于地球/太陽光照等維度。
基于此，如視自主研發(fā)了基于 threejs 的 3d-tiles 加載器，相比 Loader.gl 等開源庫實(shí)現(xiàn)更全的 3d-tiles 的格式兼容支持。比如：
? skipLevelOfDetail 加載圖塊跨級(jí)渲染
? Glb / b3dm / pnts 等及以外的模型格式作為模型物料
? Glb 內(nèi)置支持對 ktx2, draco, meshpot 等優(yōu)化特征的支持
以及通過 WebAssembly 技術(shù)優(yōu)化密集任務(wù)的計(jì)算效率、 使用 Web Worker 處理并行計(jì)算任務(wù)等額外優(yōu)化手段，使模型加載更快速、流暢。
圖像的 HDR 處理
為什么要進(jìn)行圖像HDR處理
如視在采集全景圖時(shí)，需要將亮度控制在一定范圍內(nèi)，確保圖像中較亮的顏色比如燈光、墻壁等不過曝；較暗的部分如墻角等不漆黑一片。但由于全景圖覆蓋的場景范圍過大，如工業(yè)園區(qū)等，在空間亮度差異較大的情況下往往會(huì)顯得圖像動(dòng)態(tài)范圍（明暗差別）不足，這就使全景圖像丟失大量細(xì)節(jié)，令生成的數(shù)字空間不夠真實(shí)，用戶觀感差。因此，如視需要對圖像進(jìn)行HDR處理。
分別為圖像過暗、過曝、HDR顯示
如視如何做HDR處理
HDR（High Dynamic Range Imaging），又被稱為高動(dòng)態(tài)范圍成像，用于捕捉和顯示場景中最亮和最暗部分的更多細(xì)節(jié)。其特點(diǎn)是通過將不同曝光的多張照片合成為一張圖像，來同時(shí)呈現(xiàn)亮部和暗部細(xì)節(jié)。
HDR圖像同 jpg / png等格式圖像相比，細(xì)節(jié)展現(xiàn)更為豐富，但同時(shí)也占據(jù)更多存儲(chǔ)空間。如果直接使用.hdr格式來記錄更高動(dòng)態(tài)范圍的數(shù)據(jù)，因?yàn)閭鬏旙w積增大，無法采取瓦片化漸進(jìn)加載方式，會(huì)讓上文中對全景圖的優(yōu)化失效。同時(shí)，由于HDR終端設(shè)備顯示效果參差不齊，難以讓每位用戶都有極致的數(shù)字空間漫游體驗(yàn)。
如視通過運(yùn)用屏幕空間HDR方案來解決這個(gè)問題。
首先，如視利用 Luminance 圖像來記錄對應(yīng)像素的亮度權(quán)重。Luminance 圖像是一種灰度圖像，僅包含亮度信息，不包括顏色細(xì)節(jié)。它表示圖像中每個(gè)像素的光強(qiáng)度。
獲取亮度權(quán)重后，如視就可以通過亮度權(quán)重來計(jì)算圖像的Gamma校正（伽瑪校正：一種調(diào)整圖像亮度的技術(shù)，用于匹配顯示設(shè)備的非線性特性），來動(dòng)態(tài)改變畫面亮度，確保圖像在不同設(shè)備上顯示一致。
最后，通過設(shè)置一些延遲過度參數(shù)，來模擬人眼瞳孔收縮帶來的光暈變化，得到近乎真實(shí)世界的瀏覽體驗(yàn)。
如視HDR方案優(yōu)勢
如視的屏幕空間HDR方案，基于全景圖瓦片化漸進(jìn)加載，不僅運(yùn)行速度快、加載效率高，還極大提升了全景圖像的動(dòng)態(tài)范圍，能夠準(zhǔn)確還原數(shù)字空間內(nèi)部的明暗變化、顏色細(xì)節(jié)。
我們以一處室內(nèi)空間為例，未應(yīng)用屏幕空間HDR前，室內(nèi)陽光暗淡無變化，陰影處較為灰暗：
應(yīng)用屏幕空間HDR后，可以明顯感受到門前的陽光明暗變化，暗處細(xì)節(jié)也更為清晰。
“真實(shí)”藏在細(xì)節(jié)里，無論是針對二維全景圖的瓦片漸進(jìn)加載優(yōu)化、3D模型的多細(xì)分層級(jí)調(diào)整，還是圖像細(xì)節(jié)的HDR處理，如視的最終目標(biāo)都是為用戶提供更高效、穩(wěn)定的服務(wù)，讓用戶擁有更優(yōu)質(zhì)的數(shù)字空間漫游體驗(yàn)。
未來，如視會(huì)繼續(xù)打磨工程技術(shù)細(xì)節(jié)，讓生產(chǎn)、處理和應(yīng)用的每一個(gè)環(huán)節(jié)都更加優(yōu)質(zhì)和高效。
關(guān)鍵詞：
