title: Alpha color with ShaderMaterial
body: <p>I am trying to write a shader material for displaying THREE.Points() objects with rounded points. I am doing this by controlling the alpha value in a fragment shader.</p>
  
  <p>Below is a fully working version of my code. I am getting the desired effect of only colouring pixels within the circle. Outside, however, I am getting white instead of the background colour.</p>
  
  <p>This <a href="https://stackoverflow.com/questions/15285287/threejs-shader-gl-fragcolor-with-alpha-opacity-not-changing">question</a> is related to mine. I tried setting <code>material.transparent = true</code> but it did not have any effect.</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;THREEJS alpha shader&lt;/title&gt;
          &lt;style&gt;
              body { margin: 0; }
              canvas { width: 100%; height: 100% }
          &lt;/style&gt;
          &lt;script type="text/javascript" src="http://threejs.org/build/three.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!-- Shaders --&gt;
          &lt;script type="x-shader/x-vertex" id="vertexshader"&gt;
              void main() {
                  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                  gl_PointSize = 40.0; // pixels
              }
          &lt;/script&gt;
  
          &lt;script type="x-shader/x-fragment" id="fragmentshader"&gt;
              varying vec4 color;
  
              void main() {
                  // radius
                  float r = length(gl_PointCoord - vec2(0.5, 0.5));
  
                  if(r &lt; 0.5) {
                      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
                  } else {
                      gl_FragColor = vec4(1.0, 1.0, 1.0, 0.0);
                  }
              }
          &lt;/script&gt;
  
          &lt;script&gt;
              var scene = new THREE.Scene();
              var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
              var renderer = new THREE.WebGLRenderer();
              renderer.setSize( window.innerWidth, window.innerHeight );
              document.body.appendChild( renderer.domElement );
  
              var buffer = new Float32Array(3);   // single point located at (0, 0, 0)
              var geometry = new THREE.BufferGeometry();
              geometry.addAttribute('position', new THREE.BufferAttribute(buffer,3) );
  
              // create shader material
              var material = new THREE.ShaderMaterial({
                  vertexShader : $('#vertexshader').text(),
                  fragmentShader : $('#fragmentshader').text(),
                  });
  
              var point = new THREE.Points(geometry, material);
              scene.add(point);
              camera.position.z = 2;
  
              var render = function () {
                  requestAnimationFrame( render );
                  renderer.render(scene, camera);
              };
              render();
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>