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