How to create border color in tiled plane texture like jointcolor in Marble procedural texture

Questions
21

can we achieve same on using a submesh of different size over exiting mesh. Playground will be helpfull

22

The code will also work for meshes with submeshes if it’s what you mean.

23

I m trying to place texture using decal like shown in this https://youtu.be/MjFEoTi7JoI. here while placing the texture its picked info points also changing after rotation.
so, i m trying to fix this with submesh. as texture are also of different size when I pick for laying. the coverage also should be defined

screenshot_20-9-15_16-17
screenshot_20-9-15_16-17796×612 297 KB

24

You don’t need submeshes to use decals, just create the decal and apply it on your ground mesh. You will simply need to scale the decal according to the size you want it to be on the ground.

See the decal example https://www.babylonjs-playground.com/#1BAPRM#73 and the decalSize vector3.

25

Thanks for guiding. Its seems i am getting what i need

27

Hey,
@Evgeni_Popov trying to replicate this tiles with border color in node material editor but i’m getting a different output can you please point me in a right direction where i’m doing wrong…

Node material links:

https://nme.babylonjs.com/#QE99I4

https://nme.babylonjs.com/#QE99I4#1

one more thing which i wanted was the borders or grout whatever, it is not crisp actually…
is there any way we can fix this issue

28

It seems to me that your second link is ok? The thinness value is a bit too small, setting 0.2 produces the expected result.

I had come up myself with https://nme.babylonjs.com/#QE99I4#3 which is essentially the same thing.

29

cool thanks for the heads up is there a way where we can make this grout look more crisp even when we increase the thinness value???

30

You can either remove the mix: https://playground.babylonjs.com/#IIURAR#10

Or use a non linear mix factor: https://playground.babylonjs.com/#IIURAR#11

31

var mat = new BABYLON.CustomMaterial(“mat”, scene);

mat.AddUniform("borderColor", "vec3");
mat.AddUniform("borderThickness", "float");

mat.Fragment_Before_FragColor(`
    vec2 buv = abs(fract(vDiffuseUV) - vec2(0.5)) * vec2(2.);
    float b = max(buv.x, buv.y);
    if (b >= 1.0 - borderThickness) {
        color.rgb = mix(color.rgb, borderColor, pow((b - 1.0 + borderThickness) / borderThickness, 0.2));
    }
`);

mat.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);
mat.diffuseTexture.uScale = 3;
mat.diffuseTexture.vScale = 3;

const borderColor = new BABYLON.Color3(1, 1, 1);
const thickness = 0.025;

Why this code not suitable for AlbedoTexture? is any possibility

32

Can you setup a repro in the Playground? It will be easier to check what could be wrong.

1 Like