Textured terrain created via submeshes has starkly visible seams between tiles?

Questions
1

Greetings!

I’ve finally managed created my terrain by creating a single mesh, adding all vertices/positions/uvs/colors and then defining one submesh region for each texture that is used. I now have unsightly seams in the resulting rendering, which occur on the border of each surface (consisting of two triangles each to form a square) that is assigned one textured rectangle via uv coordinates.

Screenshot: https://i.imgur.com/qFuum8y.png (too complicated to reproduce in a PG :()

Things I have tried so far:

  • Set edgesWidth property of the groundMesh to 0 (no effect, as edges renderer is disabled?)
  • Set u/vOffset of the textures (causes more visible seams, but also removed some of them on walls?)
  • Changing the texture material to Standard from Background (no effect, only reintroduces irritating reflection)
  • Increase anisotropicFilteringLevel of the material (hides some parts of the seams, but doesn’t fix it)
  • Change the level property of the textures (only highlights the seams more and messes up the textures)
  • Change wrapU/V/R property of the material (changes seams a bit but doesn’t fix it)
  • Change sampling mode via updateSamplingMode (no discernible effect)
  • Re-enable backfaceCulling (it’s off normally because the terrain has holes otherwise, but this doesn’t change anything either and is probably a different issue)

If zooming really close the seam doesn’t appear to be a solid color, but rather use the same texture but at different coordinates: https://i.imgur.com/5bldaz6.png

The only thing that changed anything appears to be related to the UVs. They’re given as fractions and can be 0, 0.25, 0.5, 0.75 and 1.0 respectively, but I don’t know if that’s a problem?

Google suggests that it might be texture bleeding, though I don’t see how since I only have one mesh and the adjacent tiles don’t normally look very different at their edges. The individual tiles are created separately like in the example here: Vertex Normals - Babylon.js Documentation (So each adjoining corner does indeed have two overlapping vertices)

Any ideas? This must be a common problem, but I haven’t found anything useful applicable to BJS. Thank you for your time!

2

It’s prolly how your calculating your normals I would assume, (common problem with stuff like this).

Are you doing LOD chunking or just plane planes?

How are you calculating your normals after merging your meshes?

A PG would help.

3

Hi guys.

I got a 16-tiler that I once worked-with a bit. (4 verts at same position… on SOME corners!).

Colors only, no textures applied.

https://playground.babylonjs.com/#21TQJT#55 (for gaps between tiles - #54)

I once pondered averaging the normals across the seams… but I guess I lost interest along the trail. :slight_smile: Hack-up that playground, as wanted… have a good time… I’ll watch. heh.

Besides, averaging “norms” across borders… well… that’s a culture and heritage concern. And cross-seam marriages? Be careful. You might need some sheep and oxen… to average THOSE norms. :slight_smile: It is best that each mixed-culture tile… TRY to maintain their individual (and national) cultures and traditions.

Phew, Wingy working pretty hard for THAT laugh… erf. :slight_smile:

4

Hey, thanks for the pointer!

I haven’t actually done anything with normals and just been using whatever BJS does when you don’t give it a normals array. It doesn’t look great with the StandardMaterial, which is why I used BackgroundMaterial instead. Either way, I played around with normals and it caused some artifacts similar to these seams, but they appear based on camera angle and lighting instead of always being present.

I managed to fix this problem by modifying the UV values and reducing them by what amounts to 1 pixel on each side. After coloring the surrounding parts of the texture in bright colors I realized that BJS seems to pick the wrong (?) area from the provided UV coords.

When passing it UV coordinates, I assumed it would work like this: https://i.imgur.com/cX53ds5.png
In reality, this is what happened: https://i.imgur.com/UM6ZRJ8.png

Is this the intended behaviour? My texture is 256px, and I wanted the 64px slice defined by the square from (0.75, 0) to (1, 0.25). Instead I got that slice plus 1 px on each side, which caused the artifacts in the screenshots. It seems a bit strange that I’d have to add or subtract 1/256 depending on the exact UV values to get the desired result.