Alpha not working on Shader Material

Questions
1

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
image640Ă—558 46.9 KB

image without visibility

image
image575Ă—591 66.4 KB 

  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;
2

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.

1 Like
3

Hello,

I have made a repro in Playground,

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 :slight_smile:

Thank You

4

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

5

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.

6

You can change the alpha value of the imagePlane texture:

https://playground.babylonjs.com/#7TN2CG#5

1 Like
7

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 :slight_smile:
or even have any similar reference to the effect on the dribble above :see_no_evil:

Thank you very very much though, really appreciate it :slight_smile:

8

We have a small introduction to shaders in our docs (Introduction to Shaders | Babylon.js Documentation), but you will need to refer to some online resources for more in-depth coverage (try to search for “shader tutorial”).