How to make a cubemap image with perlin noise?

Question

Recently I just finished a program which makes a plane image using perlin noise. Now I want to make that image a cubemap 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.

I am using the Javascript library P5.js

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? — DMGregory, Apr 19 '22 at 15:15
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. — Pikalek, Apr 19 '22 at 15:18
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? — nicolas osorio bustos, Apr 19 '22 at 15:21
It appears that p5.js has support for generating noise from 1d to 3d. — Pikalek, Apr 19 '22 at 15:22
@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. — KdotJPG, Jun 07 '22 at 08:01

KdotJPG · Answer 1 · 2022-06-07T07:53:54.073

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.

How to make a cubemap image with perlin noise?

1 Answers1