Return to 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?

Related:

• Add scene lights to custom vertex/fragment shaders and shader materials?
• the last shader I added point lights

Add scene lights to custom vertex/fragment shaders and shader materials?

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?

Related:

• Add scene lights to custom vertex/fragment shaders and shader materials?
• the last shader I added point lights
• threejs Adding lighting to ShaderMaterial
• How do you “combine”a ShaderMaterial and LambertMaterial?

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?

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?

Related:

• Add scene lights to custom vertex/fragment shaders and shader materials?
• the last shader I added point lights

Add scene lights to custom vertex/fragment shaders and shader materials?

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?

Can anyone help me out?

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?