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的内置函数或更高效的算法来优化的计算。

相关推荐
夏幻灵6 小时前
JavaScript this 面试:五种绑定规则、优先级与常见面试陷阱
开发语言·javascript·面试
三天不学习7 小时前
Egg.js 4 突然爆火,原因是否归结于AI 原生落地需求爆发?
前端·javascript·全栈·egg.js
xcs194057 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
小宋102113 小时前
A2UI从零实战:Agent安全生成交互界面与事件回传
javascript·人工智能·安全·交互
大包子13 小时前
structuredClone vs lodash.cloneDeep:核心差异与选型指南
javascript·vue.js
lerhxx13 小时前
AI 应用中的上下文管理 —— 从"上下文窗口"到"分层压缩"的工程实践
前端·javascript
Mahut14 小时前
我在 Mac 上做了个本地剪辑器
javascript·架构·产品
汉堡大王952714 小时前
GPT-6 上线 48 小时,我扒开了 Intelligent UI 的运行机制:DIL、沙箱 Worker 和一个 React 式协调器
前端·javascript·后端
hai_android14 小时前
Chat 聊天模块功能总结
前端·javascript·vue.js
创世虚拟世界15 小时前
我做了一个 3D 虚拟世界基底,基于这个再做 3D 虚拟世界或者元宇宙,会事半功倍
javascript·人工智能·3d·gitee·虚拟现实