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

问题:

在片段着色器中使用世界坐标来渲染网格时，我遇到了渲染 Artifact 。在将要渲染的平面上移动时，网格不会均匀移动(一个“半”移动，而另一个不移动)。

见gif:


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

如果网格仅每隔一格移动一次，只要它均匀地移动 ，那将是非常好的。

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

内容:

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

最少的代码可重现

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>

最佳答案

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

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

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

还有这个:

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

关于javascript - 如何避免由于WebGL中不正确的世界坐标而导致呈现伪像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55531292/