【无标题】

在浏览器中渲染大尺寸 3D 模型:Speckle 处理空间抖动的方法

WebGL/Cesium 大空间相机抖动 RTE(Relative to Eye)实现原理赏析

注: 相机空间视图空间 概念等效混用

1、实现的关键代码
js 复制代码
const material = new THREE.RawShaderMaterial({
  uniforms: {
    cameraPostion: { value: null },
    modelViewMatrixRTE: { value: null },
  },
  vertexShader: `
    attribute vec3 position;
    uniform vec3 cameraPostion;
    uniform mat4 modelViewMatrixRTE;
    uniform mat4 projectionMatrix;

    void main() {
      // key1
      vec4 mvPosition = vec4(position.xyz - cameraPostion, 1.);
      gl_Position = projectionMatrix * modelViewMatrixRTE * mvPosition;
    }`,
  fragmentShader: `
    void main() {
      gl_FragColor = vec4(vec3(0.5),1.);
    }`
});

// 模型视图矩阵相对于相机。
const modelViewMatrixRTE = new THREE.Matrix4();
function updateMat(box) {
  camera.updateMatrixWorld();
  modelViewMatrixRTE.multiplyMatrices(camera.matrixWorldInverse, box.matrixWorld);
  // key2
  modelViewMatrixRTE.elements[12] = 0;
  modelViewMatrixRTE.elements[13] = 0;
  modelViewMatrixRTE.elements[14] = 0;

  box.material.uniforms.cameraPostion.value = camera.position;
  box.material.uniforms.modelViewMatrixRTE.value = modelViewMatrixRTE;
}
2、原理赏析

顶点的变换流程依然满足这个流程。

正常的矩阵变换过程, 模型顶点都是是基于原点(0,0,0)进行的变换。但是大场景会出现抖动情况。于是将顶点位置改为基于相机位置进行后面的变换。

那么每个顶点都应该减去相机位置。但是这个工作完全可以在顶点着色器中完成, 于是将该操作延迟。那么这里假设已经完成了世界空间视图空间的平移变换。

modelViewMatrixRTE 依然是用于将模型空间中的点转换到视图空间中。但是因为模型顶点已经是相对于相机位置了(该操作被延迟执行), 因此不需要再进行平移操作。

js 复制代码
modelViewMatrixRTE.elements[12] = 0;
modelViewMatrixRTE.elements[13] = 0;
modelViewMatrixRTE.elements[14] = 0;

最后, 将世界空间相机空间的平移操作延迟到顶点着色器中执行。

js 复制代码
vec4 mvPosition = vec4(position.xyz - cameraPostion, 1.);
  gl_Position = projectionMatrix * modelViewMatrixRTE * mvPosition;
相关推荐
阿铎前端5 小时前
Cesium系列:从入门到实践,打造属于你的3D地球应用
vue·cesium
放逐者-保持本心,方可放逐4 天前
Cesium 核心思想及基础概念应用
scene·cesium·camera·entity·primitive·viewer
该怎么办呢10 天前
Cesium双击放大地图
javascript·cesium·webgis
DragonBallSuper11 天前
在Cesium中使用ThreeJs材质(不是场景融合哦)
webgl·材质·threejs·cesium·可视化渲染
前端付杰11 天前
轻松搞定 TIFF:基于 Three.js 和 Cesium 的渲染技巧分享
前端·three.js·cesium
汪洪墩13 天前
知道自己鼠标在某个竖直平面上的经纬度信息在这个竖直的平面上的实时坐标
服务器·前端·cesium
GISBox14 天前
PLY格式文件如何转换成3DTiles格式——使用GISBox软件实现高效转换
arcgis·信息可视化·node.js·gis·webgl·cesium
瑾凌15 天前
Cesium 自定义路径导航材质
前端·javascript·vue.js·vue·材质·cesium
幸会同学21 天前
使用three-to-cesium.js轻松融合Three和Cesium场景
three.js·cesium
GISBox1 个月前
高斯泼溅文件如何转换成3DTiles?GISBox帮你轻松实现在Cesium上的应用
gis·cesium