CODEWITHSUNDEEP
javascriptthree.jsrendering
Forepick
Forepick

Reputation: 937

Three JS: Weird rendering issues in close planes

I'm using Three.js to render some a few planes with textures, one or top of another. The distance between the planes is 10 units (which I'm not sure what are these exactly).

All the planes are MeshBasicMaterial, with the following configuration:

let frontMaterial = new THREE.MeshBasicMaterial( {
    map: getFrontCover(),
    side: THREE.FrontSide
});

When the planes are placed at the regular distance of 10, I can see strange stripes rendered, like in the picture:

enter image description here

Assuming that the distance is mandatory, how can I solve this issue?

Thanks

Upvotes: 0

Views: 251

Answers (1)

user128511
user128511

Reputation:

There are a few things you can do.

  1. make the near and far settings of your perspective camera as tight fitting to your content as possible.

    For example let's assume the camera is 2 units from the book and the book is 1 unit deep. In that case setting your near and far setting to 0.5 and 3.5 would possibly solve the issue. In other words

    .... new THREE.PerspectiveCamera(fieldOfView, aspect, 0.5 /* near /, 3.5 / far */

    If those numbers are orders of magnitude off you'll get this issue

  2. Use a logarithmic depth buffer

    See this example: https://threejs.org/examples/?q=log#webgl_camera_logarithmicdepthbuffer

  3. Set the material's polygon offset

    You want to set this on the material for the mesh that is supposed to be behind

           material.polygonOffset = true;
       material.polygonOffsetFactor = 1;
       material.polygonOffsetUnits = 1;

Upvotes: 2

Related Questions