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


  • \$\begingroup\$ 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. \$\endgroup\$
    – DMGregory
    Commented May 3, 2020 at 15:32
  • \$\begingroup\$ 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: \$\endgroup\$
    – samm
    Commented May 8, 2020 at 15:52
  • \$\begingroup\$ * Online example demo (code) * Material: Added onBeforeCompile() #11475 \$\endgroup\$
    – samm
    Commented May 8, 2020 at 15:52
  • \$\begingroup\$ 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. \$\endgroup\$
    – samm
    Commented May 8, 2020 at 15:53


You must log in to answer this question.

Browse other questions tagged .