Shader effect cannot show behind transparent mesh

Questions
1

Hi, is there any way to show shader effect behind transparent mesh? I am not familiar with vertexShader and fragmentShader.
Here is my sample codepen link:
ripple_shader

sample
sample1252×740 125 KB

2

Hi!
Instead of having a separated mesh with the ripple effect on transparent material, I would go with modification of material of the blue mesh, adding that effect there (using .onBeforeCompile()). But it depends on your goal.

4

Thank you very much for your reply. But i just don’t how to edit

onBeforeCompile: shader => {
shader.vertexShader = ?
shader.fragmentShader = ?
}

I only have a basic understanding of shaders and find very limited resources about this function. If it does not bother you, can you offer me some advice? :smiling_face_with_tear:

5

Have a look at this SO answer:

There you’ll find an example of how to modify MeshLambertMaterial to have that moving circle.

1 Like
6

The example @prisoner849 is also in the Collection of examples from discourse.threejs.org

ProjectionOnTerrain

1 Like
7

Sorry, I tried your method, but the result is the same as the original.
codepen
I think [ transparent ] is the key. After adding [ transparent: true ] into material, ripple effect can show behind mesh.

let m = new THREE.MeshLambertMaterial({
  color: 0xffff64,
  side: THREE.DoubleSide,
  transparent: true,

but the color can’t set transparency anymore, and transparency is always 1.

gl_FragColor = vec4(vColor,0.); // alpha cannot work

Is there any other way to set the background transparency to 0 ?

8

I don’t know the goal, so using the approach, mentioned be me, is a wrong way.
But if you want to have kind of transparent area with transparent: false, then use discard.
And the part of replacing will be something like this:

.replace(
        `#include <dithering_fragment>`,
      `#include <dithering_fragment>
        vec3 vColor = u_tcolor;
        float uLength = distance(vPos, vec3(0.))/0.75;
        float hWidth = u_length * 0.5;
        if ( abs((u_r - hWidth) - uLength) > hWidth ) { discard ;} 
        
        gl_FragColor = vec4(vColor,1.);
      `
    );

In this case edges of the circle will be aliased.

1 Like
9

Sorry for not making the goal clear. Your solution is simple and works well. Thank you so much for such a quick reply ! :heart: :heart: :heart:

10

You’re welcome :handshake: