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

相关推荐
YuJie14 小时前
JSBridge 基础知识
前端·javascript
默_笙14 小时前
🍕 后端接口还没写好,前端已经跑起来了?Mock 数据 + axios 接口层,前后端再也不互相"等"
前端·javascript
爱勇宝14 小时前
客户只想看个页面,我却做了一个静态演示发布系统
前端·javascript·后端
界面开发小八哥18 小时前
界面控件DevExpress Blazor v26.1新版亮点 - Navigation(导航)
javascript·.net·界面控件·blazor·devexpress·ui开发
SendTomo19 小时前
send.wang(私传网)基于网页P2P直连传输大文件的优势
javascript·网络·webrtc·html5·p2p
学习星球20 小时前
Astro 全栈实战:拆解 RealWorld 项目
前端·javascript·架构·系统架构·前端框架·c5全栈
张元清21 小时前
React useTimeout Hook:声明式 setTimeout 与自动清理 (2026)
javascript·react.js
禁止摆烂_才浅21 小时前
JavaScript 类型判断:instanceof 与 constructor 原理深度解析
前端·javascript·面试
Asize1 天前
HTTP 明明无状态,登录态怎么就保住了——React + Zustand + JWT 鉴权全流程拆解
前端·javascript
张人玉1 天前
基于 Vue 3 + ECharts + Three.js + Express + SQLite——智慧城市数字孪生可视化平台
javascript·vue.js·信息可视化·sqlite·echarts