Cesium自定义着色器构件三角面片【闪烁】问题,但是一移动视角就闪烁

问题:已知各个顶点的坐标信息、颜色和索引信息,并自定义绘制三角面片。

但是绘制的三角面片随着视角稍微改动就会出现闪烁现象!!!why?

Cesium数据类型的精度问题,例如下面为了获取能接收到高精度坐标信息,设置了两个attribute vec3 类型变量!!!依据此,若接收的顶点信息为高精度的信息,也需按照此类型设置!

复制代码
attribute vec3 position3DHigh;  
attribute vec3 position3DLow;  
attribute vec3 normal;  
attribute vec2 st;  
attribute float batchId; // 注意:batchId通常在着色器中不直接使用,除非有特定需求  
  
varying vec3 v_positionEC;  
varying vec3 v_normalEC;  
varying vec2 v_st;  
  
void main()  
{  
    // Cesium使用高精度的位置编码,但通常不建议在顶点着色器中直接拆分它们  
    // 这里我们假设Cesium的内置函数已经处理了这一点  
    vec4 positionWC = czm_computePosition(); // 使用Cesium的内置函数来获取世界坐标  
  
    // 如果你确实需要模型坐标(通常不需要,因为大多数渲染操作都在世界或相机坐标系中),  
    // 你可以通过世界坐标和模型矩阵的逆来计算,但Cesium通常不这样做  
    // vec4 positionMC = czm_inverseModel * positionWC; // 这行通常不是必需的  
  
    // 获取相机坐标下的位置  
    v_positionEC = (czm_modelViewRelativeToEye * positionWC).xyz;  
  
    // 获取相机坐标下的法线(注意:法线也需要考虑模型的变换,但Cesium通常通过切线空间来处理法线映射)  
    v_normalEC = czm_normal * normal; // 这里假设czm_normal已经包含了从模型到相机的变换  
  
    // 传递纹理坐标  
    v_st = st;  
  
    // 设置gl_Position为裁剪空间坐标  
    gl_Position = czm_modelViewProjectionRelativeToEye * positionWC;  
  
    // batchId通常用于在片元着色器中实现批处理或选择特定的渲染路径  
    // 但它不会在顶点着色器中直接使用,除非有特定的逻辑需要它  
}

注意

  1. 高精度位置Cesium使用position3DHigh和position3DLow来编码高精度位置 ,但通常你不需要在顶点着色器中直接处理它们。Cesium的czm_computePosition()函数会为你处理这些。

  2. 法线变换 :在上面的代码中,我假设czm_normal已经包含了从模型空间到相机空间的变换。然而,在法线映射的情况下,你可能需要使用不同的变换矩阵(通常是模型矩阵的逆的转置),这取决于你的具体需求和Cesium的版本。

  3. batchId :如果你的渲染逻辑依赖于批处理或需要根据不同的batchId选择不同的渲染路径,你可能需要在片元着色器中处理这个batchId

  4. 性能和最佳实践:在顶点着色器中避免不必要的计算,特别是那些可以通过Cesium的内置函数或更高效的算法来优化的计算。

相关推荐
蜡台1 小时前
Vue 打包优化
前端·javascript·vue.js·vite·vue-cli
卷帘依旧2 小时前
JavaScript中this绑定问题详解
前端·javascript
yaaakaaang3 小时前
(八)前端,如此简单!---五组结构
前端·javascript
EstherNi4 小时前
vue3仿照elementui样式的写法,并进行校验,并且有默认值的设置
javascript·elementui
gCode Teacher 格码致知4 小时前
Javascript提高:get和post等请求,对于汉字和空格信息进行编码的原则-由Deepseek产生
开发语言·前端·javascript·node.js·jquery
竹林8184 小时前
从ethers.js迁移到Viem:我在一个DeFi项目前端重构中踩过的坑
前端·javascript
晓13134 小时前
React篇——第三章 状态管理之 Redux 篇
前端·javascript·react.js
子兮曰4 小时前
🚀24k Star 的 Pretext 为何突然爆火:它不是排版库,而是在重写 Web 文本测量
前端·javascript·github
@大迁世界4 小时前
11.在 React.js 中,state 与 props 的差异体现在哪里?
前端·javascript·react.js·前端框架·ecmascript
Giant1005 小时前
🔥前端跨域封神解法:Vite Proxy + Express CORS,一篇搞定所有跨域坑!
前端·javascript·面试