1

When rendering a mesh in WebGL with Regl I noticed visual artifacts start to appear as the mesh increases in size in terms of its coordinates.

See the live example at https://jsfiddle.net/yxzuo2aq/2/ or the screenshot below.

visual artifacts

Visually nothing should change as you increase x since the camera and persective are updated accordingly but as x goes above 1000 the artifacts start to appear.

I assume this has something to do with WebGL?

Is the best way to avoid those kind of artifacts by downsizing the mesh's coordinates prior to rendering?

F Lekschas
  • 12,481
  • 10
  • 60
  • 72
  • 2
    The flickering effects are a floating point precision issues. This occurs if the depth range (distance between near plane and far plane) is too far. Fragments which have a mathematically different depth, get a depth which can not be distinguished because of the limited precision of floating point values. This causes [Z-fighting](https://en.wikipedia.org/wiki/Z-fighting). To avoid this issue the near plane and far plane should be as close to the geometry as possible. – Rabbid76 Dec 16 '18 at 22:46
  • @Rabbid76 Thanks! That makes a lot of sense. Do you mind adding it as an answer? :) So I guess the best way to avoid this issue is to scale down the mesh coordinates? Out of curiosity: are there any guidelines as to which view distance is considered safe? – F Lekschas Dec 16 '18 at 23:19
  • 3
    The best way to solve the issue is to set your zNear and zFar settings in your projection matrix (usually when calling some function call `projection`). Set them to something appropriate for the size of your scene. – gman Dec 17 '18 at 02:21

0 Answers0