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.
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):
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
.
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(worldPosition.xyz-center));
n = sin(100.0*n); // add this line
gl_FragColor = vec4(vec3(n), 1.0);
}
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]
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.
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.
