Potree 001 Potree介紹

mytudousi發表於2022-12-30

1、Potree是什麼

Potree是一種基於WebGL的點雲資料視覺化解決方案,包含點雲資料轉化,以及進行視覺化的原始碼。該解決方案的主要優勢在於對點雲資料進行了多尺度的管理,在資料傳輸和視覺化上都做了最佳化。它是一套開源的系統,基於Three.js,由奧地利維也納理工大學的Harvest4D專案貢獻。

2、獲取Potree原始碼

Potree的git地址為https://github.com/potree,開啟後,如下圖所示截圖.png

目前我們的目的是做一套可部署到本地點雲載入顯示軟體,需要關注potree和PotreeDesktop兩個內容。其中potree是核心,使用jsvascript開發,PotreeDesktop使用electron,把Web程式包裝成了桌面程式,於是我們就可以使用javascript基於potree開發桌面軟體了。

如果從頭開始搭建開發環境,肯定會很複雜,例如需要下載部署好Potree環境,需要搭建electron環境。有個比較簡單的辦法就是,我們把官方的PotreeDesktop部署包下載下來,在此基礎上修改擴充套件即可。

3、獲取PotreeDesktop

在potree主頁,點選PotreeDesktop,進入該模組的主頁面,如下圖所示截圖.png

右側會有PotreeDesktop的釋出包,點選進入,下載最新的部署包(PotreeDesktop_1.8.1_x64_windows.zip)即可。下載後,解壓出內容,會發現PotreeDesktop並沒有做多少實質性的內容,只是把Potree做好的主頁面包成了桌面程式,並把開發桌面使用的環境進行了整理。不過做到這些就足夠了,這樣就為我們提供了很大的方便,讓我們把更多的精力放到了解Potree上。

原始碼根目錄的內容如下圖所示。截圖.png

我們開發的桌面程式,可雙擊執行PotreeDesktop.bat,執行系統。PotreeDesktop.bat檔案用記事本開啟,內容如下。

start ./node_modules/electron/dist/electron.exe ./main

意思是啟動指定目錄下的electron.exe檔案,後面跟了一個引數,./main,我感覺這個引數應該指的是根目錄下的main.js檔案。這個沒有仔細研究過,基本上PotreeDesktop為我們搭建好的執行環境不太用修改,直接擴充套件即可。而實時上,整個系統也是從main.js啟動。

雙擊執行PotreeDesktop.bat,執行系統,彈出的主介面如下圖所示截圖.png

4、PotreeDesktop結構介紹

在根目錄下,有幾個重要的單檔案,main.js、index.html、PotreeDesktop.bat。其中PotreeDesktop.bat我們已經說過了,是系統啟動的快捷方式檔案,main.js是系統啟動後,首先執行的檔案。在這個檔案裡面主要設定了和electron相關的一些內容,例如electron的選單、系統標題以及載入哪個主頁面等。

index.html就是系統啟動後,包裝顯示的主頁面,我們開發的內容以及頁面,都是透過該頁面展示出來,從這個頁面開始,就正式進入普通的Web開發了。

除了檔案之外,還有幾個資料夾,src、node_modules和libs。其中src為PotreeDesktop自己的原始碼,裡面包含desktop.js和desktop.css兩個檔案。看了下這連兩個檔案,主要實現了把las檔案拖到點雲主顯示區,並呼叫轉換工具對點雲資料進行轉換操作,並載入顯示的流程,程式碼很容易看明白。

node_modules目錄感覺主要包含了electron和nodejs的一些環境以及依賴項。該模組組織的非常清晰,執行也正常,所以我一直是沒有動過該目錄下的內容。截圖.png

libs目錄是我們用到的一些js庫。包括Potree庫、Threejs庫以及用到的點雲轉換可執行程式等。該目錄直接按照設定好的使用即可,不用做任何修改。

截圖.png