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

Questions
1

Hi ,
In TILE PLANE i m looking for border color for image texture ( example floor tiles grout ) like jointcolor option given in marble procedural texture.

2

Welcome aboard!

You can either update your texture to add borders or make a custom material to add borders:

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

Note that you could also use the NME to do the same thing.

1 Like
3

Thanks for solution

4

Note that my solution to blend the border with the texture is not optimal, it’s using a pow which is a relatively slow instruction.

Maybe @nasimiasl would have a better solution as he has a bag full of nice tricks :wink:

2 Likes
5

challenge accepted :))

1 Like
6

also you most look for this too
i dont know who make it before :slight_smile: but i will try myself too
https://doc.babylonjs.com/extensions/marbleproceduraltexture
https://www.babylonjs-playground.com/#HS1SK#4

7

Thanks for quick response . Can we update marble texture with any new texture.

8

The below link helped me to understand well. Thank u @nasimiasl

9

Here’s one that should have better performance:

https://playground.babylonjs.com/#IIURAR#2

1 Like
10

If thickness reduces like 0.3 or UVscal change to a large number like 10 lines are flickering on rotation

11

It does not flicker for me:

https://playground.babylonjs.com/#IIURAR#3

12

sorry plz use thickness 0.03

13

You are hitting the subpixel limit, which means you may need to enable a bit of antialiasing in your shader (that you need to write as it is custom code)

14

Other option: increase pixel density (But it will be more expensive to render):
https://playground.babylonjs.com/#IIURAR#4

1 Like
15

Other option: using an FXAA postprocess:
https://playground.babylonjs.com/#IIURAR#5

16

Thanks for solution

1 Like
17

https://playground.babylonjs.com/#IIURAR#6

1 Like
18

another control way
https://playground.babylonjs.com/#IIURAR#7

1 Like
19

Hi,
can you please explain how the below code is working

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, (b - 1.0 + borderThickness) / borderThickness);

                }

            `);

As I m new to Babylon the syntax like where vec2(0.5) etc

bs(fract(vDiffuseUV) - vec2(0.5)) * vec2(2.)

how these all work to make a line. a small brief really will help or can you post some links where I can find something?

i have gone through few links as placed below

20

This is not really Babylon related but more shader related: it is GLSL code.

Learnopengl is a good resource for everything related to OpenGL: LearnOpenGL - Shaders.

You also have a lot of samples on https://www.shadertoy.com/ and you can use it for your own experiments.