UV-based Grid Material?

[pcace]

Hi there, i am trying to find a way to get a grid-Material similar to the one here:

Babylon.js docs

but not depending on worldspace, but on UV space.
Is tehre any prefered way to achieve this?

Here is an example of what i would like to avoid:

Babylon.js Playground

here i have the gridmaterial, but it uses world (?) coordinates, i would like to have this grid aligned to uv.

thanks a lot for ideas!

[HiGreg]

I’m not exactly sure what you mean. Would mixing textures, one of which is a grid pattern, accomplish the same thing? A texture is, by definition(?), “aligned to uv.”

Multiple texture layers

Hi everyone, How to construct in NME new material that have multiple (for example 3) texture layers one over another with layers that are above that have some transparent parts? Thanks

Blend 2 textures

I want to blend 2 textures, basically overlay texture 2 on top of texture 1 and only those parts of texture 1 should be visible where texture 2 has black colour or the alpha is 0. I know this can be done using shaders but not sure how to write them yet.

[pcace]

I see - my question was very unclear sorry!

i meant, a grid that behaves more like the one here on the right:

(left one and right one would represnt a grid material on a rectangular plane, but the middle one is the one i am trying to achieve)

thanks a lot!

[alexchuber]

Check out this thread: How to show UV grid in Sandbox?

[pcace]

Hi, that does go in the right direction, but i am wondering how i would get this with just lines - and preferably procedural.

thanks a lot for ideas!!

[pcace]

Hi there, i have found a nodematerial definition which almost does what i need.

Babylon.js Node Material Editor

how would i make the white an alpha channel? so that i only see the lines here?

EDIT:

got it i think:

Babylon.js Node Material Editor

but now there is a new question: how can i antialiase or smooth the output? currently it looks like this when zoomed out a bit:

how can i fix this?

Thanks alot!

[Deltakosh]

cc @PatrickRyan (please be patient he is on vacation)

[HiGreg]

You have four different constants in the NodeMaterial. I can change the line thickness to get it to look good when zoomed out, but then it looks too thick when zoomed in.

I can think of two ways to improve it: 1) somehow modify the thickness based on how close you’re zoomed in (or how close the lines are on-screen), or 2) implement a different kind of anti-aliasing in the min/max/lerping thing you’re doing. I can’t decode what anti-aliasing you’ve implemented, or how to change it (or what to change it to).

You might be able to implement a sort of “minimum black” so the anti-aliasing doesn’t make thin lines disappear.

Sorry I can’t help more.

[PatrickRyan]

@pcace one of the things you can do is to make your grid lines’ thickness scalable so that you can increase the weight of the line based on distance from camera. An example of this can be seen in this node material. Basically, you can set the resolution of the grid to whatever you like by multiplying UV space by a scalar. Then we are creating a gradient for each set of lines (horizontal and vertical) using a sin node. Then it’s simply adding a smooth step node with a scalar value and a falloff value. Changing those two scalars will allow you to thicken the weight of the grid lines. Then it’s a simple matter of setting up some rules that when your camera radius changes, you scale your line thickness by a certain amount based on distance to the camera. Hope this helps.