卜若的代码笔记-webgl系列-第二十一章：glsl的应用(一)>实现透明效果

1 在网页中，我们可能会有这种需求：比如我想让一张图里面指定的某张图片的某些颜色给透明掉：

比如：我希望这张图

白色部分不可见：如以下效果：

 

那么，我们就可以通过webgl来实现：

glsl的基础部分请看前面的系列内如，现在我们单独把shader拎出来讲：

首先，要使用透明，那么必然要开启混合：

            glContext.enable(glContext.BLEND);
            glContext.blendFunc(glContext.SRC_ALPHA, glContext.ONE_MINUS_SRC_ALPHA);

接下来，我们需要针对采样做一些事情了。

需要注意的是：我们将纹理绑定到webgl的context中，可以直接通过sampler2D和texture的方式，逐uv进行像素的赋值：比如这种：

 这个时候的gl_FragColor其实是一vec4类型，也就是传说中的像素类型(r,g,b,a)

这时候已经完成了赋值，其实，gl_FragColor就为当前已经赋值的像素值。

我只需要判断该像素值是否为白色：

如果是：那么就让该处的gl_FragColor透明掉，就是让a = 0;最后我们实现了这个效果：

 <script id="fragment_shader" type="x-shader/x-fragment">


             uniform sampler2D u_Sampler;
             varying vec2 v_TexCoord;
             vec4 tp = vec4(1.0,1.0,1.0,1.0);
             void main() {

              gl_FragColor = texture2D(u_Sampler, v_TexCoord);
              if(gl_FragColor == tp){
              gl_FragColor = vec4(1.0,1.0,1.0,0.0);
              }


             }

    </script>
    <script id="vertexShader" type="x-shader/x-vertex">

          uniform float vt;
          uniform mat4 u_MvpMatrix;
          varying vec2 v_TexCoord;
          void main() {

           vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );


           v_TexCoord = mvPosition.xy*0.2;
           gl_Position = projectionMatrix * mvPosition;


         }

    </script>