Question

我正在尝试使用相对中心技术在THREEJS中渲染一个简单平面。当您开始在gpu上处理非常大的数字（例如6378137，地球的半径）时，由于GPU上的浮点计算精度错误，对象开始抖动。解决此问题的一种方法是通过渲染相对于对象中心的东西。

基本思想是

确保位置缓冲区包含相对于几何中心的顶点，默认情况下ThreeThree会这样做。例如对于一个点，0、0、0
使用cpu / double精度将中心乘以模型视图矩阵，将中心坐标转换为中心眼。

例如

（mv00，mv01，mv02，centerX，

mv10，mv11，mv12，centerY，

mv20，mv21，mv22，centerZ，

mv30，mv31，mv32，mv33）

在着色器中使用该矩阵，以避免任何双精度乘法（矩阵中的值保持较小，并消除了大多数对象的抖动）

我知道我的模型视图矩阵是正确的，因为我已经在不带RTC的着色器中使用它进行了测试，并简单地将x坐标转换为6378137。

  <script id="vertex_shader" type="x-shader/x-vertex">
uniform mat4 mv;
void main() {
  gl_Position = projectionMatrix * mv * vec4(position, 1.0);
}

  <script id="fragment_shader" type="x-shader/x-fragment">
void main() {
  gl_FragColor = vec4( 0.0, 1.0, 0.0, 1.0 );
}

var geometry = new THREE.PlaneBufferGeometry( 50, 50 );
let material = new THREE.ShaderMaterial( {
  side:THREE.DoubleSide,
  wireframe:true,
  vertexShader: document.getElementById('vertex_shader').textContent,
  fragmentShader: document.getElementById('fragment_shader').textContent
})
material.uniforms.mv = {
  type:'m4',
  value: new THREE.Matrix4()
}
var plane = new THREE.Mesh( geometry, material );
plane.onBeforeRender = (renderer, scene, camera, geometry, material) => {
  let mv = new THREE.Matrix4();
  //calculate modelview matrix w/ view x modelmatrix
  mv = mv.multiplyMatrices(camera.matrixWorldInverse, plane.matrixWorld);
  let center = new THREE.Vector4(6378137, 0.0, 0.0, 1.0);
  //multiply mv by center
  center.applyMatrix4(mv);
  let newMV = new THREE.Matrix4().set(mv.elements[0], mv.elements[4], mv.elements[8], center.x,
                              mv.elements[1], mv.elements[5], mv.elements[9], center.y,
                              mv.elements[2], mv.elements[6], mv.elements[10], center.z,
                              mv.elements[3], mv.elements[7], mv.elements[11], mv.elements[15]);

  material.uniforms.mv.value = newMV;
}
scene.add( plane );

由于某种原因，这会使场景以错误的方向面向平面渲染，因此它看起来像一条直线。

*该错误是在我的matrix4的set（）方法中，我只需要读取以列为主的格式的modelview矩阵的值。我更新了代码，所以现在是正确的。

我在使用RTC渲染技术渲染对象时遇到麻烦

0 个答案: