本公開(kāi)涉及計(jì)算機(jī)，尤其涉及一種基于mapbox的三維模型渲染方法、裝置、設(shè)備及介質(zhì)。

背景技術(shù)：

1、前端web技術(shù)發(fā)展日益迅速，使用webgl渲染3d模型已成為常見(jiàn)需求。尤其是結(jié)合地圖渲染3d模型，如樓宇、橋梁、管道等成為項(xiàng)目的實(shí)際要求。由于webgl的復(fù)雜性，實(shí)際應(yīng)用中多使用threejs庫(kù)來(lái)渲染3d模型，并且在mapbox官方示例中，也使用threejs來(lái)舉例。

2、目前在mapbox中使用threejs渲染3d模型的方法是利用自定義圖層實(shí)現(xiàn)，然而，使用常規(guī)自定義圖層有如下不足：初始化threejs過(guò)程需要在mapbox加載完成之后進(jìn)行，也就是說(shuō)初始化mapbox和初始化threejs是串行流程；mapbox加載地圖瓦片圖需要大量并行http請(qǐng)求，而瀏覽器同域下并行http數(shù)量有限制，導(dǎo)致加載3d模型文件的請(qǐng)求會(huì)被延遲；由于實(shí)際業(yè)務(wù)中并非只有簡(jiǎn)單的地圖圖層，還會(huì)有其他點(diǎn)數(shù)據(jù)、多邊形和地形等圖層，同樣會(huì)導(dǎo)致3d模型圖層被延遲加載。

3、由于上述原因，導(dǎo)致mapbox在渲染出地圖之后很長(zhǎng)一段時(shí)間才能渲染出來(lái)3d模型，用戶體驗(yàn)較差。

技術(shù)實(shí)現(xiàn)思路

1、為了解決上述技術(shù)問(wèn)題，本公開(kāi)提供了一種基于mapbox的三維模型渲染方法、裝置、設(shè)備及介質(zhì)。

2、根據(jù)本公開(kāi)的一方面，提供了一種基于mapbox的三維模型渲染方法，包括：

3、在主線程中初始化mapbox畫(huà)布和離屏模式的3d模型畫(huà)布，并將所述離屏模式的3d模型畫(huà)布傳遞給web?worker；

4、在所述web?worker中初始化threejs，通過(guò)所述threejs在所述3d模型畫(huà)布中加載并渲染目標(biāo)3d模型；

5、在所述主線程中添加空?qǐng)D層，并通過(guò)所述空?qǐng)D層向所述web?worker發(fā)送相機(jī)參數(shù)；

6、所述web?worker根據(jù)所述相機(jī)參數(shù)在所述3d模型畫(huà)布中重新渲染所述目標(biāo)3d模型；

7、通過(guò)所述主線程在所述mapbox畫(huà)布中加載并渲染地圖底層數(shù)據(jù)。

8、根據(jù)本公開(kāi)的另一方面，提供了一種基于mapbox的三維模型渲染裝置，包括：

9、第一初始化模塊，用于在主線程中初始化mapbox畫(huà)布和離屏模式的3d模型畫(huà)布，并將所述離屏模式的3d模型畫(huà)布傳遞給web?worker；

10、第二初始化模塊，用于在所述web?worker中初始化threejs，以及通過(guò)所述threejs在所述3d模型畫(huà)布中加載并渲染目標(biāo)3d模型；

11、相機(jī)參數(shù)同步模塊，用于在所述主線程中添加空?qǐng)D層，并通過(guò)所述空?qǐng)D層向所述web?worker發(fā)送相機(jī)參數(shù)；

12、3d模型渲染模塊，用于所述web?worker根據(jù)所述相機(jī)參數(shù)在所述3d模型畫(huà)布中重新渲染所述目標(biāo)3d模型；

13、地圖渲染模塊，用于通過(guò)所述主線程在所述mapbox畫(huà)布中加載并渲染地圖底層數(shù)據(jù)。

14、根據(jù)本公開(kāi)的另一方面，提供了一種電子設(shè)備，所述電子設(shè)備包括：

15、處理器；

16、用于存儲(chǔ)所述處理器可執(zhí)行指令的存儲(chǔ)器；

17、所述處理器，用于從所述存儲(chǔ)器中讀取所述可執(zhí)行指令，并執(zhí)行所述指令以實(shí)現(xiàn)上述方法。

18、根據(jù)本公開(kāi)的另一方面，提供了一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，所述存儲(chǔ)介質(zhì)存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序用于執(zhí)行上述方法。

19、本公開(kāi)實(shí)施例提供的技術(shù)方案與現(xiàn)有技術(shù)相比具有如下優(yōu)點(diǎn)：

20、本公開(kāi)實(shí)施例提供的技術(shù)方案，在主線程中初始化mapbox畫(huà)布和離屏模式的3d模型畫(huà)布，在web?worker中初始化threejs，將初始化畫(huà)布(包括mapbox畫(huà)布和3d模型畫(huà)布)以及初始化threejs的邏輯在兩個(gè)工作線程中并行執(zhí)行，避免了傳統(tǒng)單線程模式下的串行阻塞，最大限度利用了cpu多核并行計(jì)算能力，提升了整體代碼執(zhí)行效率。采用mapbox畫(huà)布和離屏模式的3d模型畫(huà)布這種雙層離屏畫(huà)布，只需要mapbox空?qǐng)D層向web?worker中傳遞相機(jī)參數(shù)，不但能夠保證用戶視角的同步，而且，目標(biāo)3d模型的渲染完全在web?worker中進(jìn)行，這種渲染負(fù)載的分離設(shè)計(jì)，避免了傳統(tǒng)模式下大量3d頂點(diǎn)計(jì)算導(dǎo)致的主線程阻塞，確保了頁(yè)面交互的流暢性。以及，采用雙層離屏畫(huà)布分別渲染地圖底層數(shù)據(jù)和目標(biāo)3d模型，有效隔離了兩者的渲染過(guò)程。因此，本方案通過(guò)多線程并行計(jì)算以及合理的線程負(fù)載分離等方式，有效實(shí)現(xiàn)了mapbox地圖和3d模型的高效渲染，為用戶帶來(lái)卓越的交互體驗(yàn)，能夠有效改善現(xiàn)有技術(shù)中3d模型渲染效率低下、界面交互卡頓等痛點(diǎn)問(wèn)題。

技術(shù)特征：

1.一種基于mapbox的三維模型渲染方法，其特征在于，包括：

2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述在主線程中初始化mapbox畫(huà)布和離屏模式的3d模型畫(huà)布，包括：

3.根據(jù)權(quán)利要求1或2所述的方法，其特征在于，所述方法還包括：

4.根據(jù)權(quán)利要求3所述的方法，其特征在于，所述通過(guò)所述threejs在所述3d模型畫(huà)布中加載并渲染目標(biāo)3d模型，包括：

5.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述在所述web?worker中初始化threejs，包括：

6.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述通過(guò)所述空?qǐng)D層向所述web?worker發(fā)送相機(jī)參數(shù)，包括：

7.根據(jù)權(quán)利要求1所述的方法，其特征在于，在主線程中初始化mapbox畫(huà)布之后，所述方法還包括：

8.一種基于mapbox的三維模型渲染裝置，其特征在于，包括：

9.一種電子設(shè)備，其特征在于，所述電子設(shè)備包括：

10.一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其特征在于，所述計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)中存儲(chǔ)有指令，當(dāng)所述指令在終端設(shè)備上運(yùn)行時(shí)，使得所述終端設(shè)備實(shí)現(xiàn)如權(quán)利要求1-7中任一所述的方法。

技術(shù)總結(jié)
本公開(kāi)涉及一種基于Mapbox的三維模型渲染方法、裝置、設(shè)備及介質(zhì)，該方法包括：在主線程中初始化Mapbox畫(huà)布和離屏模式的3D模型畫(huà)布，并將離屏模式的3D模型畫(huà)布傳遞給Web?Worker；在Web?Worker中初始化ThreeJS，通過(guò)ThreeJS在3D模型畫(huà)布中加載并渲染目標(biāo)3D模型；在主線程中添加空?qǐng)D層，并通過(guò)空?qǐng)D層向Web?Worker發(fā)送相機(jī)參數(shù)；Web?Worker根據(jù)相機(jī)參數(shù)在3D模型畫(huà)布中重新渲染目標(biāo)3D模型；通過(guò)主線程在Mapbox畫(huà)布中加載并渲染地圖底層數(shù)據(jù)。本公開(kāi)能夠有效改善現(xiàn)有技術(shù)中3D模型渲染效率低下等問(wèn)題。

技術(shù)研發(fā)人員：姜俊杰,張宏杰
受保護(hù)的技術(shù)使用者：中電云計(jì)算技術(shù)有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2024/10/21