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

相关推荐
覆水难收呀7 分钟前
三、(JS)JS中常见的表单事件
开发语言·前端·javascript
WebGIS皮卡茂3 小时前
【数据可视化】Arcgis api4.x 热力图、时间动态热力图、timeSlider时间滑块控件应用 (超详细、附免费教学数据、收藏!)
javascript·vue.js·arcgis·信息可视化
Sca_杰3 小时前
vue2使用npm引入依赖(例如axios),报错Module parse failed: Unexpected token解决方案
前端·javascript·vue
waterHBO3 小时前
js 3个事件监听器 EventListeners
开发语言·javascript·ecmascript
荔枝味-5 小时前
html详细知识
前端·javascript·html
帅过二硕ฅ8 小时前
uniapp点击跳转到对应位置
前端·javascript·uni-app
正小安10 小时前
URL.createObjectURL 与 FileReader:Web 文件处理两大法宝的对比
前端·javascript
A黄俊辉A11 小时前
vue3中把封装svg图标为全局组件
前端·javascript·vue.js
老贾爱编程11 小时前
VUE实现刻度尺进度条
前端·javascript·vue.js
F2E_Zhangmo11 小时前
vue如何做到计算属性传参?
前端·javascript·vue.js