How to change the gap of the sawtooth problem

[allyang007]

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
 `);

[allyang007]

I’ve set up the renderer

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

[Fyrestar]

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.

[prisoner849]

Functions smoothstep() and fwidth() can help.
Don’t forget to enable derivatives in shaders: planeMat.extensions = {derivatives: true};

[allyang007]

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

[allyang007]

planeMat.extensions = {derivatives: true};

What does it do?

[prisoner849]

Adds this line to the beginning of the shader:

#extension GL_OES_standard_derivatives : enable

this allows to use fwidth()

[allyang007]

@prisoner849

fwidth

ok!! vvvv

[Fyrestar]

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

[prisoner849]

@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;

[allyang007]

@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