Line like NodeMaterial

Hi

I got a problem with creating NodeMaterial that will keep its visibility like the lines Shader is doing. I will like it always to be visible in the distance as well.

The left one is a LineMesh and the right one is a thin GroundMesh with NodeMaterial. It’s getting blurry in the distance. I will like to have NodeMaterial on the GroundMesh behave like a line in the distance with NodeMaterial.

I do know that outline and glow exist but they do not look like they should.

Startup Playground:

https://playground.babylonjs.com/#1IC7KJ

Regards
Peter

Hi @peterimg, maybe @PatrickRyan has an idea?

Hi @thomlucc @PatrickRyan

Or diferently :slight_smile:

Is there a way to apply LineShader to a mesh :slight_smile: That will also work for me :slight_smile:

Regards
Peter

Maybe you want to use material.wireframe = true? You can also try to set the material.fillMode property but you can get some artefacts depending on your geometry, see the plane in this PG:

https://playground.babylonjs.com/#DAP1QY

1 Like

hi @Evgeni_Popov

I want the mesh to have some shape initially but be visible in the distance so the wireframe is not good.

That’s I pointed out that I need to do it in a shader.

I know that LineShader is a shader. So is there a way to mimic that in NodeMaterial?

Or apply a Line Shader To a line as long I can have a lot more thickness of a line when I zoom in. And 1 px always thinkness when it’s far away.

So glow shadows outlines wireframes and mesh settings are not too good solutions for me. I already tested them before I opened that ticket. (Wireframe I did not but I did know about it and the result that its products)

Regards
Peter

LineShader is a simple color shader because the fact that a line is drawn comes from the fill mode of the draw call: line instead of triangle.

Maybe this can help:

or:

You would need to convert it to a node material and make the thickness depends on the depth.

1 Like

@Evgeni_Popov

OK. So I get it and now my question is how to convert it to NodeMaterial?

I do not know how to do it. I do get it that there are shaders that do it. But I do not know how and I need help with that?

Maybe you can try to lean using the NME (starting at Node Material | Babylon.js Documentation) or someone will be willing to create it for you.

However I’m not sure you will be able to do what you want with a simple shader: it’s because the geometry is very thin that some pixels are not drawn when far. Even with a shader, if a pixel is not drawn you won’t see anything. You would need to draw each side as two triangles instead, a bit like what the edge renderer is doing:

https://playground.babylonjs.com/#1IC7KJ#1

2 Likes

@peterimg, I agree with @Evgeni_Popov that the shader approach to triangles will not approximate a line renderer. The simple fact that you have a quad with a width of 0.005 means you have very little screen area covered by that mesh when it is near the camera and while it recedes from the camera, the perspective of the camera will make the mesh appear thinner as the width remains constant while the distance to camera increases.

Whereas the line renderer just renders a line between two points on the screen, it doesn’t matter what the distance from the camera the world coordinates are because those coordinates are projected to screen space and a 2D line is drawn between them. This is why the line remains a constant width no matter where the endpoint coordinates are.

The only way to achieve this with a quad is to create the quad as a trapezoid so that the end further from the camera is wider than the end near the camera. This will serve as a counterbalance for the projection distance in perspective from appearing to converge and not render once the width is smaller than a pixel.

However, I have to ask what you are trying to achieve with this technique as we can talk about how render this correctly in an abstract way, but we may not actually be solving your problem unless we know a little more context. I am not convinced about why you need a custom shader for a mesh material on a quad that thin. Other than color, there is not much to be gained with a custom shader on a quad that small. What is it you are trying to achieve? Do you need to be working with depth like this? Can a 2D approach work for you in case you are doing something like UI overlays drawing lines to meshes in a scene to label them? Are you creating a track for a racing game? Even a little more context into what you are doing may unlock a solution we aren’t thinking of when trying to solve this particular problem.

2 Likes