title: Transparent textures behaviour in WebGL
body: <p>Environment: WebGL, Chrome. I have the following behavior when using transparent png's as textures for models:</p>
  
  <ol>
  <li>Image A - the tree hides the building behind it and I see the world box texture. It also hides itself (back branches are not visible)</li>
  <li>At the same time - Image B - works properly, the window is transparent and I see what's behind</li>
  </ol>
  
  <p>A: <a href="https://i.stack.imgur.com/LGKc1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LGKc1.png" alt="Tree over house"></a>
  B: <a href="https://i.stack.imgur.com/oEKrx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oEKrx.png" alt="Window transparency"></a></p>
  
  <p>Both screenshots were made on same the scene at the same time from different camera positions. Textures are produced by the same algorithm.</p>
  
  <p>I can't understand what's the difference between window and branches transparency. My main question is - how to fix the branches so as to not hide the objects behind them? Shader code is:</p>
  
  <pre><code>gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);
  </code></pre>
  
  <p>I played with enable/disable blending and depth_test, sometimes getting the desired results, but not sure if it's the proper way to do things.</p>