據(jù))
Cesium 體素渲染 5 步上手在瀏覽器里畫出體積數(shù)據(jù)【免費(fèi)下載鏈接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ce/cesium本文以 Cesium 體素Voxel渲染為切入點(diǎn)從零講清楚引擎如何把三維網(wǎng)格變成可旋轉(zhuǎn)的體積讀完后你能在自己的項(xiàng)目里創(chuàng)建 VoxelPrimitive把風(fēng)場(chǎng)、地質(zhì)體這類體積數(shù)據(jù)直接畫進(jìn)瀏覽器。問題當(dāng)你想看到數(shù)據(jù)的內(nèi)部一個(gè)城市微氣候模擬的輸出結(jié)果是 64×64×32 的網(wǎng)格每個(gè)小格子里存著風(fēng)速和風(fēng)向。你需要向客戶展示的不是一張色塊圖而是一個(gè)能在三維里轉(zhuǎn)動(dòng)、能看到內(nèi)部渦流和遮擋區(qū)的風(fēng)體。傳統(tǒng)網(wǎng)格建模只能畫表面而這種網(wǎng)格數(shù)據(jù)天然是體積——它怎么畫進(jìn)地球場(chǎng)景里Cesium 的答案是把一條專門的體素渲染管線直接做進(jìn)了引擎。一杯冰咖啡體素渲染到底在做什么 體素渲染很像隔著一扇玻璃窗看冰咖啡你看不見咖啡的表面引擎從相機(jī)發(fā)射一條射線沿射線一格一格采樣把每小段吸走的顏色和不透明度疊起來(lái)路徑走得多深顏色就沉得多模擬的是光線在介質(zhì)里的散射。整個(gè)過程在一次片元著色器Fragment Shader遍歷中完成不生成任何幾何體。體素?cái)?shù)據(jù)同樣按塊Tileset切分、按需加載與下圖中的 3D Tiles 走的是同一套調(diào)度思路因此天然撐得住城市級(jí)規(guī)模。核心實(shí)現(xiàn)在 packages/engine/Source/Scene/VoxelPrimitive.js可交互的示例頁(yè)在 packages/sandcastle/gallery/voxels/。快速上手三步跑通一個(gè)體素場(chǎng)景先拿到代碼示例體素瓦片集隨倉(cāng)庫(kù)自帶無(wú)需額外依賴git clone https://gitcode.com/GitHub_Trending/ce/cesium在自己的頁(yè)面里寫下面這段最小示例// 加載倉(cāng)庫(kù)自帶的盒狀體素瓦片集 const provider await Cesium.Cesium3DTilesVoxelProvider.fromUrl( Apps/SampleData/Cesium3DTiles/Voxel/VoxelBox3DTiles/tileset.json ); // 創(chuàng)建體素圖元并加入場(chǎng)景 const primitive viewer.scene.primitives.add( new Cesium.VoxelPrimitive({ provider }) ); // 最近鄰采樣塊邊界銳利不發(fā)虛 primitive.nearestSampling true; // 相機(jī)直接飛到體積的包圍球 viewer.camera.flyToBoundingSphere(primitive.boundingSphere);各部分的作用provider是數(shù)據(jù)源聲明形狀、邊界和每塊數(shù)據(jù)怎么取VoxelPrimitive是負(fù)責(zé)渲染的圖元對(duì)象nearestSampling決定采樣用最近鄰還是插值最后一行只是把相機(jī)擺到正前方。跑起來(lái)就能看到一塊半透明的彩色體積倉(cāng)庫(kù)示例頁(yè)里還掛了 Voxel Inspector 面板可以邊調(diào)邊看參數(shù)。核心機(jī)制引擎一幀之內(nèi)如何把數(shù)據(jù)變成體積渲染管線步驟拆解解析 tileset 索引確定層級(jí)與塊數(shù)VoxelTraversal 挑出相機(jī)可見的塊VoxelProvider 異步請(qǐng)求對(duì)應(yīng)塊數(shù)據(jù)類型數(shù)組壓平上傳 GPU 當(dāng)紋理片元著色器沿射線累積顏色與不透明度形狀網(wǎng)格如何映射到空間VoxelShapeType提供三種映射BOX把網(wǎng)格原樣鋪成盒體ELLIPSOID把它卷到橢球面上適合裹住地球CYLINDER映射到圓柱面。形狀只改每個(gè)格子的位置不改數(shù)據(jù)本身。元數(shù)據(jù)數(shù)據(jù)與外觀之間的橋每個(gè)格子的取值以元數(shù)據(jù)Metadata通道存放由 names、types、componentTypes 聲明按 X→Y→Z 順序壓平。外觀由自定義著色器CustomShader決定用fsInput.metadata讀通道再結(jié)合射線行程算不透明度倉(cāng)庫(kù)示例里的寫法void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) { material.diffuse fsInput.metadata.color.rgb; // 路徑越深越不透明模擬光線散射 float thickness fsInput.voxel.travelDistance / 1e6; material.alpha 1.0 - pow(1.0 - fsInput.metadata.color.a, thickness); }形狀與加載策略怎么選一張表對(duì)照選項(xiàng)行為適用場(chǎng)景BOX網(wǎng)格原樣映射為盒體地質(zhì)體、城市網(wǎng)格等矩形區(qū)域數(shù)據(jù)ELLIPSOID網(wǎng)格卷到橢球面行星尺度、大氣層、洋流場(chǎng)CYLINDER網(wǎng)格卷到圓柱面立柱、井筒測(cè)井?dāng)?shù)據(jù)單瓦片availableLevels 1全部數(shù)據(jù)裝在一塊小規(guī)模數(shù)據(jù)、調(diào)試與演示多瓦片 tileset按層級(jí)切塊按需加載淘汰大體量數(shù)據(jù)、流式展示一句話選型形狀跟著數(shù)據(jù)的天然幾何走數(shù)據(jù)量大過一屏就切多瓦片。避坑與性能5 條實(shí)踐建議鎖版本、查實(shí)驗(yàn)標(biāo)記VoxelPrimitive 標(biāo)著 experimental接口可能不經(jīng)過棄期直接變更升級(jí) Cesium 前重跑一遍冒煙用例驗(yàn)證。給塊留邊距相鄰塊接縫處會(huì)出現(xiàn)黑線provider 上加 paddingBefore / paddingAfter 讓塊互相重疊一層放大到塊邊界處檢查是否還有接縫。讓不透明度隨行程變化寫死 alpha 會(huì)讓體積像玻璃按 travelDistance 計(jì)算繞著相機(jī)轉(zhuǎn)一圈看遠(yuǎn)近處的濃淡差是否合理。把 LOD 交給 tileset近處才請(qǐng)求高精度塊對(duì)不存在的層級(jí)顯式 reject用瀏覽器網(wǎng)絡(luò)面板核對(duì)塊加載數(shù)量與幀率。讓緩存替你干活引擎會(huì)把瓦片資源落盤緩存二次訪問直接進(jìn)入毫秒級(jí)。應(yīng)用延伸體素渲染最值錢的三個(gè)地方城市微氣候模擬風(fēng)場(chǎng)、熱島天然是矩形網(wǎng)格可疊在三維城市模型上讓規(guī)劃師直接看見風(fēng)被擋在了哪片樓群后面氣象與大氣可視化ELLIPSOID 形狀天然貼合地球云層和溫度層能與地形同場(chǎng)景展示無(wú)需額外投影井筒與地質(zhì)剖面CYLINDER 形狀貼合鉆孔測(cè)井?dāng)?shù)據(jù)鉆進(jìn)結(jié)構(gòu)可以切片查看內(nèi)部構(gòu)造?？偨Y(jié)與下一步讀完本文你可以? 三步創(chuàng)建 VoxelPrimitive 并加載體素瓦片集? 在 BOX / ELLIPSOID / CYLINDER 之間選對(duì)形狀? 用 CustomShader 自定義體積顏色與透明衰減? 用 padding 與多瓦片切分解決接縫和分層加載? 借助 Voxel Inspector 與網(wǎng)絡(luò)面板做性能自檢下一步可以關(guān)注體素 API 去掉實(shí)驗(yàn)標(biāo)記的進(jìn)度并嘗試把它擴(kuò)展到氣象場(chǎng)這類隨時(shí)間變化的動(dòng)態(tài)體積數(shù)據(jù)?！久赓M(fèi)下載鏈接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ce/cesium創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Cesium 體素渲染 5 步上手：在瀏覽器里畫出體積數(shù)據(jù)
Cesium 體素渲染 5 步上手在瀏覽器里畫出體積數(shù)據(jù)【免費(fèi)下載鏈接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ce/cesium本文以 Cesium 體素Voxel渲染為切入點(diǎn)從零講清楚引擎如何把三維網(wǎng)格變成可旋轉(zhuǎn)的體積讀完后你能在自己的項(xiàng)目里創(chuàng)建 VoxelPrimitive把風(fēng)場(chǎng)、地質(zhì)體這類體積數(shù)據(jù)直接畫進(jìn)瀏覽器。問題當(dāng)你想看到數(shù)據(jù)的內(nèi)部一個(gè)城市微氣候模擬的輸出結(jié)果是 64×64×32 的網(wǎng)格每個(gè)小格子里存著風(fēng)速和風(fēng)向。你需要向客戶展示的不是一張色塊圖而是一個(gè)能在三維里轉(zhuǎn)動(dòng)、能看到內(nèi)部渦流和遮擋區(qū)的風(fēng)體。傳統(tǒng)網(wǎng)格建模只能畫表面而這種網(wǎng)格數(shù)據(jù)天然是體積——它怎么畫進(jìn)地球場(chǎng)景里Cesium 的答案是把一條專門的體素渲染管線直接做進(jìn)了引擎。一杯冰咖啡體素渲染到底在做什么 體素渲染很像隔著一扇玻璃窗看冰咖啡你看不見咖啡的表面引擎從相機(jī)發(fā)射一條射線沿射線一格一格采樣把每小段吸走的顏色和不透明度疊起來(lái)路徑走得多深顏色就沉得多模擬的是光線在介質(zhì)里的散射。整個(gè)過程在一次片元著色器Fragment Shader遍歷中完成不生成任何幾何體。體素?cái)?shù)據(jù)同樣按塊Tileset切分、按需加載與下圖中的 3D Tiles 走的是同一套調(diào)度思路因此天然撐得住城市級(jí)規(guī)模。核心實(shí)現(xiàn)在 packages/engine/Source/Scene/VoxelPrimitive.js可交互的示例頁(yè)在 packages/sandcastle/gallery/voxels/。快速上手三步跑通一個(gè)體素場(chǎng)景先拿到代碼示例體素瓦片集隨倉(cāng)庫(kù)自帶無(wú)需額外依賴git clone https://gitcode.com/GitHub_Trending/ce/cesium在自己的頁(yè)面里寫下面這段最小示例// 加載倉(cāng)庫(kù)自帶的盒狀體素瓦片集 const provider await Cesium.Cesium3DTilesVoxelProvider.fromUrl( Apps/SampleData/Cesium3DTiles/Voxel/VoxelBox3DTiles/tileset.json ); // 創(chuàng)建體素圖元并加入場(chǎng)景 const primitive viewer.scene.primitives.add( new Cesium.VoxelPrimitive({ provider }) ); // 最近鄰采樣塊邊界銳利不發(fā)虛 primitive.nearestSampling true; // 相機(jī)直接飛到體積的包圍球 viewer.camera.flyToBoundingSphere(primitive.boundingSphere);各部分的作用provider是數(shù)據(jù)源聲明形狀、邊界和每塊數(shù)據(jù)怎么取VoxelPrimitive是負(fù)責(zé)渲染的圖元對(duì)象nearestSampling決定采樣用最近鄰還是插值最后一行只是把相機(jī)擺到正前方。跑起來(lái)就能看到一塊半透明的彩色體積倉(cāng)庫(kù)示例頁(yè)里還掛了 Voxel Inspector 面板可以邊調(diào)邊看參數(shù)。核心機(jī)制引擎一幀之內(nèi)如何把數(shù)據(jù)變成體積渲染管線步驟拆解解析 tileset 索引確定層級(jí)與塊數(shù)VoxelTraversal 挑出相機(jī)可見的塊VoxelProvider 異步請(qǐng)求對(duì)應(yīng)塊數(shù)據(jù)類型數(shù)組壓平上傳 GPU 當(dāng)紋理片元著色器沿射線累積顏色與不透明度形狀網(wǎng)格如何映射到空間VoxelShapeType提供三種映射BOX把網(wǎng)格原樣鋪成盒體ELLIPSOID把它卷到橢球面上適合裹住地球CYLINDER映射到圓柱面。形狀只改每個(gè)格子的位置不改數(shù)據(jù)本身。元數(shù)據(jù)數(shù)據(jù)與外觀之間的橋每個(gè)格子的取值以元數(shù)據(jù)Metadata通道存放由 names、types、componentTypes 聲明按 X→Y→Z 順序壓平。外觀由自定義著色器CustomShader決定用fsInput.metadata讀通道再結(jié)合射線行程算不透明度倉(cāng)庫(kù)示例里的寫法void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) { material.diffuse fsInput.metadata.color.rgb; // 路徑越深越不透明模擬光線散射 float thickness fsInput.voxel.travelDistance / 1e6; material.alpha 1.0 - pow(1.0 - fsInput.metadata.color.a, thickness); }形狀與加載策略怎么選一張表對(duì)照選項(xiàng)行為適用場(chǎng)景BOX網(wǎng)格原樣映射為盒體地質(zhì)體、城市網(wǎng)格等矩形區(qū)域數(shù)據(jù)ELLIPSOID網(wǎng)格卷到橢球面行星尺度、大氣層、洋流場(chǎng)CYLINDER網(wǎng)格卷到圓柱面立柱、井筒測(cè)井?dāng)?shù)據(jù)單瓦片availableLevels 1全部數(shù)據(jù)裝在一塊小規(guī)模數(shù)據(jù)、調(diào)試與演示多瓦片 tileset按層級(jí)切塊按需加載淘汰大體量數(shù)據(jù)、流式展示一句話選型形狀跟著數(shù)據(jù)的天然幾何走數(shù)據(jù)量大過一屏就切多瓦片。避坑與性能5 條實(shí)踐建議鎖版本、查實(shí)驗(yàn)標(biāo)記VoxelPrimitive 標(biāo)著 experimental接口可能不經(jīng)過棄期直接變更升級(jí) Cesium 前重跑一遍冒煙用例驗(yàn)證。給塊留邊距相鄰塊接縫處會(huì)出現(xiàn)黑線provider 上加 paddingBefore / paddingAfter 讓塊互相重疊一層放大到塊邊界處檢查是否還有接縫。讓不透明度隨行程變化寫死 alpha 會(huì)讓體積像玻璃按 travelDistance 計(jì)算繞著相機(jī)轉(zhuǎn)一圈看遠(yuǎn)近處的濃淡差是否合理。把 LOD 交給 tileset近處才請(qǐng)求高精度塊對(duì)不存在的層級(jí)顯式 reject用瀏覽器網(wǎng)絡(luò)面板核對(duì)塊加載數(shù)量與幀率。讓緩存替你干活引擎會(huì)把瓦片資源落盤緩存二次訪問直接進(jìn)入毫秒級(jí)。應(yīng)用延伸體素渲染最值錢的三個(gè)地方城市微氣候模擬風(fēng)場(chǎng)、熱島天然是矩形網(wǎng)格可疊在三維城市模型上讓規(guī)劃師直接看見風(fēng)被擋在了哪片樓群后面氣象與大氣可視化ELLIPSOID 形狀天然貼合地球云層和溫度層能與地形同場(chǎng)景展示無(wú)需額外投影井筒與地質(zhì)剖面CYLINDER 形狀貼合鉆孔測(cè)井?dāng)?shù)據(jù)鉆進(jìn)結(jié)構(gòu)可以切片查看內(nèi)部構(gòu)造?？偨Y(jié)與下一步讀完本文你可以? 三步創(chuàng)建 VoxelPrimitive 并加載體素瓦片集? 在 BOX / ELLIPSOID / CYLINDER 之間選對(duì)形狀? 用 CustomShader 自定義體積顏色與透明衰減? 用 padding 與多瓦片切分解決接縫和分層加載? 借助 Voxel Inspector 與網(wǎng)絡(luò)面板做性能自檢下一步可以關(guān)注體素 API 去掉實(shí)驗(yàn)標(biāo)記的進(jìn)度并嘗試把它擴(kuò)展到氣象場(chǎng)這類隨時(shí)間變化的動(dòng)態(tài)體積數(shù)據(jù)?！久赓M(fèi)下載鏈接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ce/cesium創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考