【cesium】打造科技感建築泛光效果

疯子110發表於2024-11-26

一些智慧城市專案經常需要載入建築白膜資料（3dtiles），並製作炫酷的炫光效果，在cesium中可以使用自定義著色器修改白膜建築的外觀。

1.首先，載入3Dtiles格式的建築白膜資料，這裡我們使用一個免費的資料連結：

data.mars3d.cn/3dtiles/jzw…

這是mars3D提供的一個連結，傳送請求就會返回3Dtiles建築資料，我們用cesium提供的方法載入一下：

js
程式碼解讀
複製程式碼
var viewer = new Cesium.Viewer("cesiumContainer", {
        geocoder: false, //是否顯示地名查詢工具
        homeButton: false, //是否顯示首頁位置工具
        sceneModePicker: false, //是否顯示視角模式切換工具
        baseLayerPicker: false, //是否顯示預設圖層選擇工具
        navigationHelpButton: false, //是否顯示導航幫助工具
        animation: false, //是否顯示動畫工具
        timeline: false, //是否顯示時間軸工具
        fullscreenButton: false, //是否顯示全屏按鈕工具
});
//啟用實驗性功能
Cesium.ExperimentalFeatures.enableModelExperimental = true;


//載入建築資料，賦給變數tilesets
let tilesets = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
                url: "http://data.mars3d.cn/3dtiles/jzw-hefei/tileset.json", 
        })
);

可以看到，建築已經有了一定的顏色，這是被提前設定好的，但是這個效果遠遠不能滿足我們的需求，我們先改一下它的顏色：

js
程式碼解讀
複製程式碼
tilesets.readyPromise.then(function (tileset) {
        tileset.style = new Cesium.Cesium3DTileStyle({
                color: {
                        conditions: [["true", "color('rgb(51, 153, 255)',1)"]],
                },
        });
        viewer.flyTo(tileset);
});

然後就是最重要的，我們需要使用cesium1.87+提供的customShaderAPI，來自定義shader

js
程式碼解讀
複製程式碼

var customShader = new Cesium.CustomShader({
//不考慮光照模型
lightingModel: Cesium.LightingModel.UNLIT,
//修改片元著色器
fragmentShaderText: `
    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
            float _baseHeight = 0.0; // 物體的基礎高度，需要修改成一個合適的建築基礎高度
            float _heightRange = 60.0; // 高亮的範圍(_baseHeight ~ _baseHeight + _      heightRange) 預設是 0-60米
            float _glowRange = 300.0; // 光環的移動範圍(高度)
        float vtxf_height = fsInput.attributes.positionMC.z-_baseHeight;
        float vtxf_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
        float vtxf_a12 = vtxf_height / _heightRange + sin(vtxf_a11) * 0.1;
        material.diffuse*= vec3(vtxf_a12, vtxf_a12, vtxf_a12);
        float vtxf_a13 = fract(czm_frameNumber / 360.0);
        float vtxf_h = clamp(vtxf_height / _glowRange, 0.0, 1.0);
        vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;
        float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13));
        material.diffuse += material.diffuse * (1.0 - vtxf_diff);
    }
    `,
});
//將定義好的著色器作用域建築tilesets
tilesets.customShader = customShader;

這個時候再看效果，明顯就不一樣了：

當然，這個影像地面不好看，也需要改一改，這裡可以借用我上一篇文章寫的方法

# 修改底圖顏色為藍色科技範兒

修改完地圖顏色後，再看效果：

這感覺明顯就不一樣了。


作者：小前端端
連結：https://juejin.cn/post/7277802797473644578
來源：稀土掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

相關文章