THREE.ShaderMaterial cannot perform antialiasing

Question

I created a ShaderMaterial to draw a box in three.js using the following key code:

//magnetic orientation
let magnetMaterial = new THREE.ShaderMaterial({
    uniforms: { orientation: { value: new THREE.Vector3(1) } },
    vertexShader: `varying vec3 vPos;
void main() {
    vPos = position;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}`,
    //https://stackoverflow.com/questions/15688232/check-which-side-of-a-plane-points-are-on
    fragmentShader: `#extension GL_OES_standard_derivatives : enable
varying vec3 vPos;
uniform vec3 orientation;
void main() {
    float a = dot(orientation, vPos);
    gl_FragColor = vec4(step(a, 0.), 0, step(0., a), 1.0);
}`});

See also online Demo. Even if I set WebGLRenderer.antialias to true, there's a heavy aliasing if the box is not axis-aligned.

I found Point Sampled AA and How do I implement anti-aliasing in OpenGL?, but I didn't how to do?

In addition, the custom shader cannot work with the light if any. In order to make custom color work with the built-in effect (light). I want to try post-processing via EffectComposer.

Can anyone help me out?

It looks like you're drawing your edge in the shader, not with the edge of your geometry. That type of edge is invisible to antialiasing techniques like MSAA, so it won't get antialiased automatically. Fortunately, you can do your own antialiasing in the shader, by replacing the sharp cutoff of the step function with something more like we'd use with a signed distance field. — DMGregory, May 03 '20 at 15:32
Maybe you are right. I haven't tried it in three.js, but just tried to draw 2D shapes using glsl with gl_FragCoord rather than with various THREE.Geometry after reading The Book of Shaders and 2D Distance Functions before. After posted this question, I subsequently found some other potentially useful references, but I haven't gone through them: — samm, May 08 '20 at 15:52
As Mugen87 said:

It's important to know that the three.js material system was not designed for easy enhancements of custom shader code. Meaning you have to study the system, the respective shader chunks and their semantics so you are able to enhance a custom material with shader code from the built-in materials. There is no simple "plug and play" mechanism. — samm, May 08 '20 at 15:53

THREE.ShaderMaterial cannot perform antialiasing

0 Answers0