Hi guys,
edit: here is a playground I made showing the problem if you want to skip the long description: summary: I’m 95% sure it’s a problem with the texture I prepared.
https://playground.babylonjs.com/#3U5QYS
I’ve been stuck on this problem all day. Here’s a screenshot of the problem, followed by an explanation … it’s a little complex but will try to keep it clear and minimal.
I’ve prepared a mix texture and heightmap, and sliced them into smaller pieces, and generated a number of grounds from heightmap using MeshBuilder.CreateGroundFromHeightMap. I then use TerrainMaterial, with rock, beach, and grass layers for each ground material using the corresponding sliced mix texture.
terrainMaterial.diffuseTexture1 = new Texture(landscapeRockUrl, scene);
terrainMaterial.diffuseTexture2 = new Texture(landscapeBeachUrl, scene);
terrainMaterial.diffuseTexture3 = new Texture(landscapeGrassUrl, scene);
I then position the generated ground meshes so they are aligned. Though the mix textures and heightmaps are aligned, this line is appearing at the edge of each mesh (see above image). What I have learned:
-
The problem seems to be with the mixTextures I’ve prepared. here are 2 example mix textures that I am using, these textures meet on the vertical axis, the beach layer is green, the grass is blue, and the mountains are red:
-
The line which appears on the edge takes the color of the beach layer. If I swap the textures:
terrainMaterial.diffuseTexture1 = new Texture(landscapeBeachUrl, scene);
terrainMaterial.diffuseTexture2 = new Texture(landscapeRockUrl, scene); // just swapping the layers
terrainMaterial.diffuseTexture3 = new Texture(landscapeGrassUrl, scene);
in this case, the line takes the color of the mountain layer
- when I swap around the colors of the mixmap, replace the green with blue and vice versa, and swap the layers accordingly, the problem persists and confusingly still takes the color of the beach layer eventhough the colours are swapped. For example, here is the first mixtexture with the colors swapped:
terrainMaterial.diffuseTexture1 = new Texture(landscapeRockUrl, scene);
terrainMaterial.diffuseTexture3 = new Texture(landscapeBeachUrl, scene); // swapped
terrainMaterial.diffuseTexture2 = new Texture(landscapeGrassUrl, scene);
-
if I use https://playground.babylonjs.com/textures/mixMap.png … then the overlap lines disappear. This is really confusing me, and leads me to believe something is wrong with the textures I prepared (see uploads) … is it a render setting I’m missing?
-
it’s not dependent on the mesh placement, because still appears on the edge of each mesh when they’re separated. In fact here, we can see it’s just a very thin amount of ‘beach layer’ interfering with the grass layer … it’s not a clean line …
If anyone can offer any clarity as to why this is happening, I would much appreciate it, as I’ve really hit a dead-end with my current understanding of the problem, and it’s taken all day with preparing images etc.etc. to debug. I’m 95% sure it’s a problem with the texture I’m uploading, and the export settings. I’m using GIMP by the way, and these images are compressed with GIMP exported as 8bpc rgb.
Sorry that was so long …