title: Transparency within instanced shapes
body: <p>I've been playing with <code>THREE.InstancedBufferGeometry</code>. I finally got an example to work, and have now been playing with the shader. The first thing I tried was setting transparency. My example code is below.</p>
  
  <p>The initial state, and from a host of other camera angles (e.g. drag your mouse to the left), the transparency doesn't seem to have any effect. But then at other camera angles (e.g. reload and drag your mouse to the right), the shapes clearly overlap, which is what I was expecting.</p>
  
  <p>Is depth-sorting handled differently for instanced shapes, or am I doing something wrong, or missing something? Do I somehow need to update the shapes so the camera knows their proper depth in the scene?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var cubeGeo = new THREE.InstancedBufferGeometry().copy(new THREE.BoxBufferGeometry(10, 10, 10));
  //cubeGeo.maxInstancedCount = 8;
  
  cubeGeo.addAttribute("cubePos", new THREE.InstancedBufferAttribute(new Float32Array([
    25, 25, 25,
    25, 25, -25, -25, 25, 25, -25, 25, -25,
    25, -25, 25,
    25, -25, -25, -25, -25, 25, -25, -25, -25
  ]), 3, 1));
  
  var vertexShader = [
    "precision highp float;",
    "",
    "uniform mat4 modelViewMatrix;",
    "uniform mat4 projectionMatrix;",
    "",
    "attribute vec3 position;",
    "attribute vec3 cubePos;",
    "",
    "void main() {",
    "",
    " gl_Position = projectionMatrix * modelViewMatrix * vec4( cubePos + position, 1.0 );",
    "",
    "}"
  ].join("\n");
  var fragmentShader = [
    "precision highp float;",
    "",
    "void main() {",
    "",
    " gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);",
    "",
    "}"
  ].join("\n");
  
  var mat = new THREE.RawShaderMaterial({
    uniforms: {},
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    transparent: true
  });
  
  var mesh = new THREE.Mesh(cubeGeo, mat);
  
  scene.add(mesh);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html * {
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
  }
  
  #host {
    width: 100%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://threejs.org/build/three.js"&gt;&lt;/script&gt;
  &lt;script src="http://threejs.org/examples/js/controls/TrackballControls.js"&gt;&lt;/script&gt;
  &lt;script src="http://threejs.org/examples/js/libs/stats.min.js"&gt;&lt;/script&gt;
  &lt;div id="host"&gt;&lt;/div&gt;
  
  &lt;script&gt;
    var WIDTH = window.innerWidth,
      HEIGHT = window.innerHeight,
      FOV = 35,
      NEAR = 1,
      FAR = 1000;
  
    var renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setSize(WIDTH, HEIGHT);
    document.getElementById('host').appendChild(renderer.domElement);
  
    var stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0';
    document.body.appendChild(stats.domElement);
  
  
    var camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
    camera.position.z = 250;
  
    var trackballControl = new THREE.TrackballControls(camera, renderer.domElement);
    trackballControl.rotateSpeed = 2.0; // need to speed it up a little
  
    var scene = new THREE.Scene();
  
    var light = new THREE.PointLight(0xffffff, 1, Infinity);
    camera.add(light);
  
    scene.add(light);
  
    function render() {
      if (typeof updateVertices !== "undefined") {
        updateVertices();
      }
      renderer.render(scene, camera);
      stats.update();
    }
  
    function animate() {
      requestAnimationFrame(animate);
      trackballControl.update();
      render();
    }
  
    animate();
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>