Jump to content

artifacts/seams where perpendicular planes intersect


TheSkrapper
 Share

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

Link to comment
Share on other sites

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

Link to comment
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.  

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

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?

Link to comment
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/

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...