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