TheSkrapper

artifacts/seams where perpendicular planes intersect

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.  

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.