title: Three.js, custom shader and png texture with transparency
body: <p>I have an extremely simple PNG texture: a grey circle with a transparent background.</p>
  
  <p><img src="https://i.stack.imgur.com/ma4sx.png" alt="PNG image with transparency"></p>
  
  <p>I use it as a uniform <code>map</code> for a <code>THREE.ShaderMaterial</code>:</p>
  
  <pre><code>var uniforms = THREE.UniformsUtils.merge( [basicShader.uniforms] );
  uniforms['map'].value = THREE.ImageUtils.loadTexture( "img/particle.png" );
  uniforms['size'].value = 100;
  uniforms['opacity'].value = 0.5;
  uniforms['psColor'].value = new THREE.Color( 0xffffff );
  </code></pre>
  
  <p>Here is my fragment shader (just part of it):</p>
  
  <pre><code>gl_FragColor = vec4( psColor, vOpacity );
  gl_FragColor = gl_FragColor * texture2D( map,vec2( gl_PointCoord.x, 1.0 - gl_PointCoord.y ) );
  gl_FragColor = gl_FragColor * vec4( vColor, 1.0 );
  </code></pre>
  
  <p>I applied the material to some particles (<code>THREE.PointCloud</code> mesh) and it works quite well:</p>
  
  <p><img src="https://i.stack.imgur.com/zPjzE.png" alt="Particles texture with transparency: OK!"></p>
  
  <p>But if i turn the camera of more than 180 degrees I see this:</p>
  
  <p><img src="https://i.stack.imgur.com/bT400.png" alt="Particles texture without transparency"></p>
  
  <p>I understand that the fragment shader is not correctly taking into account the alpha value of the PNG texture. </p>
  
  <p>What is the best approach in this case, to get the right color and opacity (from custom attributes) and still get the alpha right from the PNG? </p>
  
  <p>And why is it behaving correctly on one side?</p>