solved artifacts/seams where perpendicular planes intersect

[TheSkrapper]

Hello,

(working better in Chrome than Safari)

<edit> I have changed the background to white and it seems that the issue is not just the seems but that the transparent portions seem to show when viewed on edge.</edit>

I'm new to BabylonJS and have been working on different implementations of the Menger Sponge fractal to learn the framework.  I'm on my third implementation now which allows me to quickly generate an L4 Menger sponge using only 984 vertices!!!!  I accomplish this by using 81 planes in each dimension that have different parts of the Sierpinski carpet as materials. 

I'm having issues with artifacts/seams where perpendicular planes are intersecting and I'm not sure where to go with it. (artifact may be the wrong term)  I've Googled but may not be using the best search terms.  I've tried re-creating my textures in case the images were off by a few pixels but that doesn't seem to be the problem.

Moving the camera show the artifacts/seams blinking in and out, specifically around the hollow center.  It makes it look like it is assembled with small blocks but it isn't.  That is where the planes intersect.  At certain angles with certain lighting they seem to disappear which leads me to believe they are artifact related and not due to the texture images. https://playground.babylonjs.com/#MFTLRX#12

My goal is to make this into a single multi-material object that I can instance to get really intricate sponges utilizing very little resources.

Thanks for your time and any ideas/advice.

-mc

[Guest]

Hello and first of all congrats for your great code. This is really cool to see

can you try to make the planes overlap just a tiny bit? Just wondering if it is float precision issue or texture filtering issue

[TheSkrapper]

Thanks for the reply Deltakosh,

The planes are spaced from each other to simulate the edges of the boxes.   They only overlap/intersect perpendicularly.  Looking through the center is looking through 81*3 alpha textures which I think may be related to the problem.  I'm playing around with the material alpha types and rendering order options but it is all so new to me.  It really would be cool to solve the issue though.

As far as float issues,  I've tried to design it so that each plane is on a whole number.  

[jerome]

Not sure to understand well why you are using so many materials,  but I don't know this fractal.

Anyway, you could build exactly the same with the same algo (but not the same mesh) by using a SPS instead of several planes and several textures.

https://doc.babylonjs.com/how_to/solid_particle_system

Just replace your planes by quad planar particles built from a plane model.

Just set all your different texture images in a single big image (texture atlas) and then set planar particle uvs property values to match the related texture in the big image.

You'll get finally one mesh and one material, so one draw call only.

[TheSkrapper]

Thanks for the reply Jerome. 

I definitely have too many materials because they were auto generated with an x,y,z loop.  Most of them repeat but I ran into this rendering issue first and haven't taken the time to optimize them.  I will work on removing the repeated materials and it will probably drop to 10 or so.  Then I will map each layer to the correct material.  That was just the first basic programatic implementation for proof of concept.

Thank you for the particle idea.  I will look into that when I optimize my materials.  It almost sounds like dealing with sprites.

[Guest]

The seams seem to come from weird texture filtering but I even tried with no filter and I still can see them.

You are sure that there is nothing weird on your texture alpha?

[TheSkrapper]

Possibly, but I wouldn't know why.  The textures are created by starting with an empty 2D canvas and only drawing rects where I need texture.  Maybe I need to actually fill the empty spaces with an actual alpa rect.  I will give that a shot.  Thanks for the idea.

[TheSkrapper]

I recreated the textures first filling the canvas with an actual full alpha rect before drawing on my other rects.  I also minimized my textures down to the 8 unique ones.  There still seems to be the problem but it might not be as bad????  I can't tell. https://playground.babylonjs.com/#MFTLRX#12 . 

It's also published with github pages and has the same problem which rules out any possible playground issues.  https://mcoons.github.io/mengerplanes/

[Guest]

Do you have a way to reproduce it but with less planes (ideally 2)?

[TheSkrapper]

I do believe the issue may have to do with the following code that I got from another issue/post that I can't find it now:

var convertToFlat = function () {

for (var index = 0; index < scene.textures.length; index++) {

scene.textures[index].updateSamplingMode(BABYLON.Texture.NEAREST_SAMPLINGMODE);

}

}

 

scene.executeWhenReady(function() {

convertToFlat();

});

I used that code because my textures were being ??smoothed??  and not looking square but when that code is removed the alpha glitches seem to go away or at least minimize.  Although, my textures get messed up again and are not square.  It also produces a similar boxed built look but that has to do with the smoothing I think.

So updating the sampling mode seems to mess with the alpha?  Using BABYLON.Texture.NEAREST_LINEAR seems to clean it up the most but there are still issues.  Does that point to anything?

https://playground.babylonjs.com/#MFTLRX#12

I'll try to get an example with less planes.

[Guest]

yes nearest means no texture filtering. Let's see with a simpler sample

[TheSkrapper]

I've stripped things down.  Now you can only see the intersection problem which is now very minor.

https://playground.babylonjs.com/#MFTLRX#11

I think it is now just an issue where different texture pixels are occupying the same point and its a render ordering problem.  I'm not sure if there is a fix.

[Guest]

Well the remaining issue is a depth precision issue

If I moved the vertical plane a bit there is no more problem:

https://playground.babylonjs.com/#MFTLRX#13