title: How to set Transparency properly in webgl
body: <p>I am new to graphics and webgl. i am facing problem in setting proper transparency for the model in webgl 1.0.
  Model contains more than one part (geometry).</p>
  
  <p>shader code is</p>
  
  <pre><code>"if (usetransparency &gt; 0.0) {\n" +
          "gl_FragColor = vec4(( diffuse - 0.2) * diffColor, 1.0); \n" +
          "gl_FragColor.w = transparency;  \n" +
      "}  \n" 
  </code></pre>
  
  <p>Js code is </p>
  
  <pre><code> shader.setUseTransparency(1.0);
   shader.setTransparency(transparencyValue);
   GL.clearColor(0.5, 0.5, 0.5, 0.0);
   GL.enable(GL.DEPTH_TEST);
   GL.depthFunc(GL.LEQUAL)
   GL.depthMask(false);
   GL.enable(GL.BLEND);
   GL.blendFunc(GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA);
  </code></pre>
  
  <p>After rendering each part i will make the depthMask true.</p>
  
  <p>Below is the required rendering image</p>
  
  <p><a href="https://i.stack.imgur.com/8aaJf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8aaJf.jpg" alt="enter image description here"></a></p>
  
  <p>Below is the actual rendering image what i am getting in webgl.</p>
  
  <p><a href="https://i.stack.imgur.com/8LspA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8LspA.jpg" alt="enter image description here"></a></p>
  
  <p>i am not using any webgl libraries like threejs.</p>
  
  <p>Please help me in this issue.</p>