I modified MeshPhysicalMaterial through shader to achieve the effect of seam after material placement. However, the gap is serrated. How to achieve the anti-serrated effect?

```
material.userData.uniforms={
gap:{value:0.01},
gapColor:{value:new THREE.Color("#000000")}
}
material.onBeforeCompile=function(shader){
shader.uniforms.gap=material.userData.uniforms.gap;
shader.uniforms.gapColor=material.userData.uniforms.gapColor;
shader.fragmentShader =
`
uniform float gap;
uniform vec3 gapColor;
` + shader.fragmentShader;
shader.fragmentShader = shader.fragmentShader.replace(
`#include <map_fragment>`,
`
#ifdef USE_MAP
vec4 texelColor = abs(mod(vUv.x,1.))>1.-gap || abs(mod(vUv.x,1.))<gap || abs(mod(vUv.y,1.))>1.-gap || abs(mod(vUv.y,1.))<gap ? vec4(gapColor, 1):texture2D( map, vUv ) ;
texelColor = mapTexelToLinear( texelColor );
diffuseColor *= texelColor;
#endif
`);
```

Iβve set up the renderer

```
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
```

I would recommend adding a 1 pixel transparent border around your texture and shift that by your gap as you need in the shader, mipmaps donβt cover your approach.

1 Like

Functions `smoothstep()`

and `fwidth()`

can help.
Donβt forget to enable derivatives in shaders: `planeMat.extensions = {derivatives: true};`

3 Likes

Thank you very much for your solution. I have been trying to solve this problem all afternoon. But I think your code will be better. I will continue to improve!

#ifdef USE_MAP
vec4 texelColor = texture2D( map, vUv );
texelColor = abs(mod(vUv.x,1.))>1.-gap || abs(mod(vUv.x,1.))<gap || abs(mod(vUv.y,1.))>1.-gap || abs(mod(vUv.y,1.))<gap ? vec4(gapColor, 0.5):texelColor;
texelColor=vec4(mix(gapColor,texelColor.xyz,smoothstep(0.0,0.005,abs(mod(vUv.x,1.)-gap))),0.0);
texelColor=vec4(mix(gapColor,texelColor.xyz,smoothstep(0.0,0.005,abs(mod(vUv.x,1.)-(1.-gap)))),0.0);
texelColor=vec4(mix(gapColor,texelColor.xyz,smoothstep(0.0,0.005,abs(mod(vUv.y,1.)-gap))),0.0);
texelColor=vec4(mix(gapColor,texelColor.xyz,smoothstep(0.0,0.005,abs(mod(vUv.y,1.)-(1.-gap)))),0.0);
texelColor = mapTexelToLinear( texelColor );
diffuseColor *= texelColor;

#endif

planeMat.extensions = {derivatives: true};

What does it do?

1 Like

Adds this line to the beginning of the shader:

```
#extension GL_OES_standard_derivatives : enable
```

this allows to use `fwidth()`

1 Like

Canβt properly look into it as iβm mobile right now, but i still get choppy edges

@Fyrestar
I have them too at small angles of view, but not as bad as on your pic

UPD
Slight change:

`float e = length(fe) * 0.5; //min(fe.x, fe.y) * 0.5;`

2 Likes

prisoner849:

length(fe) * 0.5;

1γ float e = length(fe) * 0.5;

2γmin(fe.x, fe.y) * 0.5;

The first one looks better than the second one

2 Likes