0
\$\begingroup\$

Recently I just finished a program which makes a plane image using perlin noise. Now I want to make that image a cubemap image.

Perlin noise image

This because I want to apply it to a planet (which was made from a cube). I have been trying to generate this cubemap, but there are a lot of discontinuities on the image. Do you know any way to generate this cubemap without these "gaps"? Thank you in advance.

My cubemap

I am using the Javascript library P5.js

\$\endgroup\$
5
  • 2
    \$\begingroup\$ The conventional approach here would be to use a 3D Perlin noise rather than 2D, and sample a spherical shell from that 3D volume. Do you need any particular help achieving that? \$\endgroup\$
    – DMGregory ♦
    Commented Apr 19, 2022 at 15:15
  • \$\begingroup\$ We also have this post which covers extending perlin noise to wrap in multiple directions. That particular question focuses on hexes, but the principles for a square grid are touched on. \$\endgroup\$
    – Pikalek
    Commented Apr 19, 2022 at 15:18
  • \$\begingroup\$ Hello @DMGregory, Thank you for your feedback. As I was told to do it this way, I have not thought of it. However what would you recommend to me If I do it in 3d? \$\endgroup\$
    – nicolas osorio bustos
    Commented Apr 19, 2022 at 15:21
  • 1
    \$\begingroup\$ It appears that p5.js has support for generating noise from 1d to 3d. \$\endgroup\$
    – Pikalek
    Commented Apr 19, 2022 at 15:22
  • \$\begingroup\$ @DMGregory should use 3D noise, but not necessarily Perlin. I expanded on that more in my answer and its link. Agree 100% with the spherical mapping point in any case. \$\endgroup\$
    – KdotJPG
    Commented Jun 7, 2022 at 8:01

1 Answer 1

Reset to default
2
\$\begingroup\$

DMGregory's comment is correct in that the proper and canonical solution is to use 3D noise. If you get the coordinates of each cube face in 3D space, you can iterate over them and sample the noise in such a way that the the cube faces connect naturally. Be sure to transform the cube coordinates to what they would be on the actual sphere you're mapping to, e.g. by normalizing the vector from the center.

Additionally, please note:

  • There are many noise algorithms out there. Perlin is only one such, and it's an older one with significant square alignment problems. We would do best to move past counting unmitigated Perlin noise as default, and to also do our due-diligence to address this when answering queries framed around unmitigated Perlin.
  • P5.js noise isn't even Perlin -- it's the further artifact-prone "Value noise" algorithm with fractal summation built in. My first step when using noise in P5 would always be to import an external library.

I recommend the JS port of FastNoiseLite, with one of the Simplex-type options. Disclosure: I contributed substantially to this library's development.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .