Issue:
Encountering rendering glitches while using world coordinates in the fragment shader to display a grid. The grid does not move uniformly when the plane it is rendered on is moved, resulting in one "half" moving while the other remains idle.
Refer to the GIF: https://i.sstatic.net/nzC5y.gif
Suspecting that the 0.05 "move value" might be too small, causing imprecisions and rendering glitches. However, finding it challenging to constrain the value to prevent glitches as it depends on various factors like camera zoom and user-defined movement speed.
Even if the grid moves only every second move-tick, it should move uniformly.
Is there a recommended approach to effectively avoid such rendering glitches?
Context:
Working on an application that renders image data onto a plane. Each texel on the plane corresponds to a world coordinate for rendering the data. The camera is orthographic and directly faces the plane. The observed "wobbling" rendering glitches seem to stem from imprecisions in the world coordinates.
Code Snippet for Reproduction
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>