修改Batch3DModelContent的片元着色器:讓白模穿品如的衣服


參考自 DC-SDK 中關於 shp白模生成 3dTiles 自定義着色器。

效果:

效果有關的着色器,必然要改動 片元着色器

片元着色器

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(值越小越暗淡,越大越亮)。

當掃描線達到建築頂部時,頂面會有閃爍的 bug,讀者可以自行思考如何修復。

着色器如何作用

作用鏈

Cesium3DTile
  Cesium3DTileContent -> (@private API) Batch3DModel3DTileContent/...
    Model
      ._sourcePrograms、._rendererResources、

作用在每個 Cesium3DTileContent 的具體子類(例如 Batch3DModel3DTileContent)的 _model 字段上。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM