# Alpha not working on Shader Material

**URL:** <https://forum.babylonjs.com/t/alpha-not-working-on-shader-material/20755>\
**Category:** Questions\
**Tags:** shader\
**Created:** [May 12, 2021, 3:55am UTC](https://forum.babylonjs.com/t/alpha-not-working-on-shader-material/20755 "2021-05-12T03:55:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![night\_fury](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/night_fury/32/10571_2.png) [@night\_fury](https://forum.babylonjs.com/u/night_fury)\
**Post date:** [May 12, 2021, 3:55am UTC](https://forum.babylonjs.com/t/alpha-not-working-on-shader-material/20755/1 "2021-05-12T03:55:20Z")

</div>

Hi I have the below shadermaterial with the fs and vs as below, I am using a plane to display the output of the below shader material. so far it is working properly. After doing so I have added refraction on a 3D glb object which is refracting the plane.

When I set the plane to visibility to 0, it still shows on the refraction, is there a way to not show it on the refraction as well? Any help would be appreciated

image with visibility

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/c/fcbd55618356331b5270b82a69b9c931eafe1278.jpeg)

image without visibility

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/e/3e243a0df1c4e54367e46a31aec41c8504c6a0d1.png)

```
  BABYLON.Effect.ShadersStore["customVertexShader"] = `
      precision highp float;

      attribute vec3 position;
      attribute vec2 uv;

      uniform mat4 worldViewProjection;

      varying vec2 vUv;

      void main(void) {
          vUv = uv;

          gl_Position = worldViewProjection * vec4( position, 1.0 );
      }`;

    BABYLON.Effect.ShadersStore["customFragmentShader"] = `

      uniform float time;
      uniform float progress;
      uniform float intensity;
      uniform float width;
      uniform float scaleX;
      uniform float scaleY;
      uniform float transition;
      uniform float radius;
      uniform float swipe;
      uniform sampler2D texture1;
      uniform sampler2D texture2;
      uniform sampler2D displacement;
      uniform float opacity;
      uniform vec4 resolution;
      varying vec2 vUv;

      mat2 getRotM(float angle) {
          float s = sin(angle);
          float c = cos(angle);
          return mat2(c, -s, s, c);
      }
      const float PI = 3.1415;
      const float angle1 = PI *0.25;
      const float angle2 = -PI *0.75;

      void main()	{
        vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);

        vec4 disp = texture2D(displacement, newUV);
        vec2 dispVec = vec2(disp.r, disp.g);

        vec2 distortedPosition1 = newUV + getRotM(angle1) * dispVec * intensity * progress;
        vec4 t1 = texture2D(texture1, distortedPosition1);

        vec2 distortedPosition2 = newUV + getRotM(angle2) * dispVec * intensity * (1.0 - progress);
        vec4 t2 = texture2D(texture2, distortedPosition2);

        gl_FragColor = mix(t1, t2, progress);

      }`;

    material = new BABYLON.ShaderMaterial('', scene, {
      vertex: 'custom',
      fragment: 'custom',
    }, {
      needAlphaBlending: true,
      needAlphaTesting: true,
      attributes: ["position", "uv"],
      uniforms: [
        "worldViewProjection",
        "time",
        "progress",
        "border",
        "intensity",
        "scaleX",
        "scaleY",
        "transition",
        "swipe",
        "width",
        "radius",
        "texture1",
        "texture2",
        "displacement",
        "resolution"
      ],
      define: [
        "time",
        "progress",
        "border",
        "intensity",
        "scaleX",
        "scaleY",
        "transition",
        "swipe",
        "width",
        "radius",
        "texture1",
        "texture2",
        "displacement",
        "resolution",
        "opacity"
      ]
    });

    material.setFloat("time", 0);
    material.setFloat("progress", 0);
    material.setFloat("border", 0);
    material.setFloat("intensity", 0.1);
    material.setFloat("scaleX", 40);
    material.setFloat("scaleY", 40);
    material.setFloat("transition", 40);
    material.setFloat("swipe", 0);
    material.setFloat("width", 0);
    material.setFloat("radius", 0);
    var texture1 = new BABYLON.Texture(textures[0].url, scene);
    material.setTexture("texture1", texture1);
    var texture2 = new BABYLON.Texture(textures[1].url, scene);
    material.setTexture("texture2", texture2);
    var displacement = new BABYLON.Texture('./img/disp1.jpg', scene);
    material.setTexture("displacement", displacement);
    material.setVector4("resolution", new BABYLON.Vector4());

    imagePlane = BABYLON.MeshBuilder.CreatePlane("imagePlane", {
      width: 100,
      height: 100
    }, scene);

    imagePlane.material = material;
    imagePlane.position.y = 0;
    imagePlane.position.z = 0;
```

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 12, 2021, 9:22am UTC](https://forum.babylonjs.com/t/alpha-not-working-on-shader-material/20755/2 "2021-05-12T09:22:52Z")

</div>

You can try to use `setEnable(false)` instead of `visibility = 0`.

If it does not work, I think we will need a repro in the Playground to be able to help more.

---

<div class="post-metadata">

**Author:** ![night\_fury](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/night_fury/32/10571_2.png) [@night\_fury](https://forum.babylonjs.com/u/night_fury)\
**Post date:** [May 12, 2021, 10:25pm UTC](https://forum.babylonjs.com/t/alpha-not-working-on-shader-material/20755/3 "2021-05-12T22:25:22Z")

</div>

Hello,

I have made a repro in Playground,

[https://playground.babylonjs.com/#7TN2CG#4](https://playground.babylonjs.com/#7TN2CG#4)

So basically I have a 3d object refracting the textplane, on scroll when I reach end of page I have to Fade In the imageplane which is refracting the image which im using a shader for the texture as I have to on the project Im working on. But as you see when I set visibility to 0 the refraction is still showing.

Are you able to have a look on this 🙂

Thank You

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 12, 2021, 10:54pm UTC](https://forum.babylonjs.com/t/alpha-not-working-on-shader-material/20755/4 "2021-05-12T22:54:19Z")

</div>

If you use `imagePlane.setEnabled(false)` or `imagePlane.isVisible = false` instead of `imagePlane.visibility = 0` it does work.

---

<div class="post-metadata">

**Author:** ![night\_fury](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/night_fury/32/10571_2.png) [@night\_fury](https://forum.babylonjs.com/u/night_fury)\
**Post date:** [May 12, 2021, 10:58pm UTC](https://forum.babylonjs.com/t/alpha-not-working-on-shader-material/20755/5 "2021-05-12T22:58:30Z")

</div>

yepppp it does, but I am trying to use the visibility as a fade in when you scroll down. the imagePlane as whole.

because if i use the` imagePlane.isVisible = false` and enable it at some point when i reach down it will cause a jump from 0 - 1 visibility and not smoothly.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 12, 2021, 11:02pm UTC](https://forum.babylonjs.com/t/alpha-not-working-on-shader-material/20755/6 "2021-05-12T23:02:58Z")

</div>

You can change the alpha value of the imagePlane texture:

[https://playground.babylonjs.com/#7TN2CG#5](https://playground.babylonjs.com/#7TN2CG#5)

---

<div class="post-metadata">

**Author:** ![night\_fury](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/night_fury/32/10571_2.png) [@night\_fury](https://forum.babylonjs.com/u/night_fury)\
**Post date:** [May 12, 2021, 11:16pm UTC](https://forum.babylonjs.com/t/alpha-not-working-on-shader-material/20755/7 "2021-05-12T23:16:00Z")

</div>

Ahhhh yesss, im also kinda a noob in shaders, very new, the project I am working on is very big and I have to learn shaders and aren’t able to understand the concept of how it is working. basically the designer of the company where i work at actually needs this type of fade in or out

but maybe I can try to play around with the shader and understand how they work add this kinda effect on the image.

If you might have any reference on shaders for a noob like me, please kindly let me know 🙂  
or even have any similar reference to the effect on the dribble above 🙈

Thank you very very much though, really appreciate it 🙂

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 12, 2021, 11:59pm UTC](https://forum.babylonjs.com/t/alpha-not-working-on-shader-material/20755/8 "2021-05-12T23:59:47Z")

</div>

We have a small introduction to shaders in our docs ([Introduction to Shaders | Babylon.js Documentation](https://doc.babylonjs.com/advanced_topics/shaders/introToShaders)), but you will need to refer to some online resources for more in-depth coverage (try to search for “shader tutorial”).