參考自 DC-SDK 中關於 shp白模生成 3dTiles 自定義着色器。函數
效果:3d
效果有關的着色器,必然要改動 片元着色器。code
varying vec3 v_positionEC; // 相機座標系的模型座標 void main() { /** 漸變效果 */ vec4 position = czm_inverseModelView * vec4(v_positionEC, 1); // 解算出模型座標 float glowRange = 200.0; // 光環的移動範圍(高度),最高到200米 gl_FragColor = vec4(0.2, 0.5, 1.0, 1.0); // 基礎藍色 gl_FragColor *= vec4(vec3(position.z / 100.0), 1.0); // 按模型高度進行顏色變暗處理 /** 掃描線 */ float time = fract(czm_frameNumber / 360.0); // 計算當前着色器的時間,幀率/(6*60),即時間放慢6倍 float diff = step(0.005, abs(clamp(position.z / glowRange, 0.0, 1.0) - time)); // 根據時間來計算顏色差別,比例 gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff); // 原有顏色加上顏色差別值提升亮度 }
其基本知識即根據高度來控制 rgb(值越小越暗淡,越大越亮)。blog
當掃描線達到建築頂部時,頂面會有閃爍的 bug,讀者能夠自行思考如何修復。字符串
做用鏈get
Cesium3DTile Cesium3DTileContent -> (@private API) Batch3DModel3DTileContent/... Model ._sourcePrograms、._rendererResources、
做用在每一個 Cesium3DTileContent 的具體子類(例如 Batch3DModel3DTileContent)的 _model 字段上。it
const model = /*從content 中獲取model*/ Object.keys(model._sourcePrograms).forEach(key => { // 對 model 的每一個着色器程序 let program = model._sourcePrograms[key] // 使用本身的片元着色器代碼字符串**替代**原有片元着色器 model._rendererResources.sourceShaders[ program.fragmentShader ] = `你想加的頂點着色器徹底代碼,包含 main()函數` }) // 讓系統從新編譯着色器 model._shouldRegenerateShaders = true