Maximum distance of visible objects in p5.js WebGL

Question

I want have some very large objects present on canvas, but there seems to be a distance limit of about 2000 and anything further is not visible at all.

Is there a way to disable this option or reassign the border value?

I couldn't find any mention in any documentation.

In the picture I am almost in the center of a ball with radius 4000 and the grey circle in the middle grows or shrinks based on me zooming in or out.

Answer 1

You might be experiencing camera clipping: geometry that gets cuts off when it's to close (near clipping plane) or too far (far clipping plane) from the view frustum (imagine the base section of a pyramid with the center of the camera as the tip).

(Image credits: MithrandirMage - Own work This W3C-unspecified vector image was created with Inkscape.)

You can play with the frustum() or perspective() methods to adjust the near/far clipping distance: which ever makes more sense for your setup