​

var camera, scene, renderer;

var geometry, material, mesh;

var uniforms;

var setUniforms;

var dispUniforms;

var posUniforms;

var posTexture;

var buffer = 0;

var posScene;

var setScene;

var processCamera;

var dispSize = {x:window.innerWidth, y:window.innerHeight};

var start = false;

​

init();

animate();

​

function init() {

​

    camera = new THREE.PerspectiveCamera( 45, dispSize.x/dispSize.y, 0.1, 100 );

    camera.position.z = 1;

    camera.position.y = 0;

    camera.position.x = 0;

​

  scene = new THREE.Scene();

  posScene = new THREE.Scene();

  setScene = new THREE.Scene();

​

  posTexture = [];

  geometry = new THREE.SphereGeometry( 0.2, 15, 15 );

  console.log(geometry.vertices.length);

  var a = new Float32Array(geometry.vertices.length * 4);

  for(var k=0; k<geometry.vertices.length; k++) {

          a[ k*4 + 0 ] = geometry.vertices[k].x;

          a[ k*4 + 1 ] = geometry.vertices[k].y;

          a[ k*4 + 2 ] = geometry.vertices[k].z;

          a[ k*4 + 3 ] = 1; 

  }

    posTexture[2] = new THREE.DataTexture(a, 16, 16, THREE.RGBAFormat, THREE.FloatType);

    posTexture[2].needsUpdate = true;

        posTexture[2].minFilter = THREE.NearestFilter;

        posTexture[2].magFilter = THREE.NearestFilter;

        posTexture[2].flipY = false; 

    posTexture[0] = new THREE.WebGLRenderTarget(16, 16, {

        format: THREE.RGBFormat,

        generateMipmaps: false,

        magFilter: THREE.NearestFilter,

        type: THREE.FloatType

    });

    posTexture[1] = new THREE.WebGLRenderTarget(16, 16, {

        format: THREE.RGBFormat,

        generateMipmaps: false,

        magFilter: THREE.NearestFilter,

        type: THREE.FloatType

    });

​

  posUniforms = {

    posTexture: {

      type: "t", 

      value: posTexture[0]

    }

  }

​

    processCamera = new THREE.OrthographicCamera(-16/2,

                        16/2,

                        16/2,

                        -16/2,

                        -1,

                        0

        );

// Starting Shader

​

    setUniforms = {

        posTexture: {type: "t", value: posTexture[2]}

    };

​

  var setMaterial = new THREE.ShaderMaterial({

    uniforms: setUniforms,

    vertexShader:   document.getElementById('setVert').textContent,

    fragmentShader: document.getElementById('setFrag').textContent,

    wireframe: true

  });

​

  var setPlane = new THREE.Mesh(new THREE.PlaneGeometry(16,16), setMaterial);

    setScene.add(setPlane);

​

​

// POSITION SHADER

  var shaderMaterial = new THREE.ShaderMaterial({

    uniforms: posUniforms,

    vertexShader:   document.getElementById('vertexshader').textContent,

    fragmentShader: document.getElementById('fragmentshader').textContent,

    wireframe: true

  });

​

  var posPlane = new THREE.Mesh(new THREE.PlaneGeometry(16,16), shaderMaterial);

    posScene.add(posPlane);

​

​

// Display Shader

    var dispVert = document.getElementById('dispVert').textContent;

    var dispFrag = document.getElementById('dispFrag').textContent;

​

    dispUniforms = {

        posTexture: {type: "t", value: posTexture[0]}

​

    };

​

    var dispMaterial = new THREE.ShaderMaterial( {

        uniforms: dispUniforms,

        vertexShader:dispVert,

        fragmentShader:dispFrag,

        depthWrite: false,

        transparent: true,

        blending: THREE.AdditiveBlending

    });

​

  mesh = new THREE.ParticleSystem(geometry, dispMaterial);

  scene.add(mesh);

​

  renderer = new THREE.WebGLRenderer();

  renderer.setSize(window.innerWidth, window.innerHeight);

​

  document.body.appendChild(renderer.domElement);

​

}

​

var a, b;

​

function animate() {

​

  // note: three.js includes requestAnimationFrame shim

  requestAnimationFrame(animate);

  renderer.setViewport(0,0,16, 16);

  if(buffer == 0) {

    buffer = 1;

    a = 0;

    b = 1;

  } else {

    buffer = 0;

    a = 1;

    b = 0;

  }

​

  if(start) {

    renderer.render(setScene, processCamera, posTexture[a]);

    start = false;

  }

​

  posUniforms.posTexture.value = posTexture[a];

  renderer.render(posScene, processCamera, posTexture[b])

  dispUniforms.posTexture.value = posTexture[b];

  renderer.setViewport(0,0,dispSize.x, dispSize.y);

  renderer.render(scene, camera);

​

}

​

})();

​