如何避免由于WebGL中不正确的世界坐标而导致呈现伪像？

Question

问题：

在片段着色器中使用世界坐标来渲染网格时，我正在经历渲染伪像。在将要渲染的平面上移动时，网格不会均匀移动（一个“半”移动，而另一个不移动）。

查看gif：

我假设0.05的“移动值”太小，这会触发不确定性，从而引发渲染伪像。但是，我不确定如何限制该值，以免引起伪影，因为移动值取决于许多其他因素（相机缩放到场景中，用户定义的移动速度等）。 / p>

如果网格仅在均匀移动的情况下每隔一秒钟移动一次，那将是非常好的。

是否有最佳实践来可靠地避免此类渲染伪像？

上下文：

我正在开发一个将图像数据渲染到平面上的应用程序。对于渲染平面的每个纹理像素，将查找相应的世界坐标以渲染数据。 照相机是正交的，并且直接在所述平面上看。 当我注意到“摆动”的渲染伪像时，我将原点追溯到（假设）世界坐标（？）中的不精确度。

要复制的最小代码

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(window.innerWidth / -50, window.innerWidth / 20, window.innerHeight / 50, window.innerHeight / -20, 1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
const material = new THREE.ShaderMaterial({
  vertexShader: `
precision highp float;

varying vec4 worldCoord;

void main() {
  worldCoord = modelMatrix * vec4(position, 1.0);
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
  fragmentShader: `
varying vec4 worldCoord;
void main() {
  gl_FragColor = mod(floor(worldCoord), 2.0) / 2.0; 
}
`
});

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

let i = 0;
let moveValue = 0.05;
let render = function() {
  i++;
  if (i % 5 === 0) {
    moveValue *= -1.0;
  }

  cube.position.x += moveValue;
  camera.position.x += moveValue;
  
  renderer.render(scene, camera);
};

setInterval(render, 400);

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>

Answer 1

我认为您可能正在经历一种“混叠”形式。

您可能会发现这篇文章很有用：

http://madebyevan.com/shaders/grid/

这：

https://fgiesen.wordpress.com/2011/07/10/a-trip-through-the-graphics-pipeline-2011-part-8/