How To Make Seamless Custom CubeMap?

I’m currently working on a Three.js project, and I’m aiming to create a seamless cube map. To achieve this, I created six planes and assembled them into a cube. Then, I utilized a shader to generate noise (these are not textures) on the cube’s faces.

you can already see the distortion between the cube faces.

I also implemented a process in the shader to undo the transforms for each mesh, which effectively keeps the noise in place, resulting in a cube map-like object as you can see in the first image below.

At first glance, the cube map appears seamless,

but upon closer inspection, slight distortions are visible at the edges. This becomes a bigger issue when I attempt to convert it to a normal map, resulting in poor lighting. Regardless of the method I try, I always end up with seams where the edges of each face of the cube touch.

(front bottom edge and bottom top edge distortion):

zoomed-in look, you can see how to start to converge.

Any guidance or solutions to achieve a truly seamless cube map would be highly appreciated. I’ve looked through various resources, but I couldn’t find a comprehensive explanation or tutorial specifically tailored to creating seamless cube maps in Three.js

It took some time to put together but here is a working example of my code: EXAMPLE

:bulb: After doing some more research, when you get extremely close to a seam it appears that the meshes never actually touch (I don’t why I was under the assumption they did); they don’t share the same position at each face edge. Despite my efforts to position them as close as possible without overlapping, there remains a tiny space between the meshes, as indicated by the dotted white line.

I believe that the discontinuity is likely caused by the noise function lacking the necessary additional information to bridge this gap.

Here is another idea, that you might want to investigate. I’ve made the lower face slightly bluish. See the red lines – these are “tangents” to the the isolines of the noise. Would it be possible to make tangents parallel? I.e. the angle an isoline approaches an edge should be the same with the angle it departs from the other side…

For debug purposes, my suggestion is to visualize the isolines with zebra stripes, this will make discontinuty much easier to see. Just add one line in the fragment shader:

void main() {
    float n = snoise3D(normalize(;
    n = sin(100.0*n); // add this line
    gl_FragColor = vec4(vec3(n), 1.0);

And here is the result:

And if zoomed you can also see a diagonal line of discontinuity (see the red arrow):

So, I think the noise function (or how it is calculated) causes the issue, because the diagonal discontinuity is not on the edge of a triangle.

If I understand you correctly, you’re telling me to try another noise function? If that’s the case, I doubt it’s a matter of swapping one noise function for another because I have tried a few different noise functions: Perlin, Perlin classic, warp, Voronoi, fractal, and tiltable noise (noise that repeats), etc…

I even coded a cube map in JavaScript using the canvas and still, the output has seams.
[canvas cube map]

I can across this post Procedural planetary surfaces that says
“Sampling noise along a circumference in 2D space is seamless”

the explanation makes sense: “sample the noise along a circumference embedded in this two-dimensional space, we get seamless, tileable noise.”

It’s just that The math is going over my head.

No. I was just pointing out a better (or easier) way to visualize discontinuities. As for the noise function, I do not know the details of the function that you use, so any of these might be possible:

  • the function is not good
  • the function is OK for 2D noise, but is not suitable for 3D noise
  • the implementation has a bug
  • there is numerical problem (precision of calculations)

So, it would not be fair to blame the function itself, before knowing what actually is going on.