Commit 0b0f2a15 authored by amandaghassaei's avatar amandaghassaei

moving particles

parent 93d30e31
...@@ -296,12 +296,14 @@ ...@@ -296,12 +296,14 @@
<script id="moveParticlesShader" type="x-shader/x-fragment"> <script id="moveParticlesShader" type="x-shader/x-fragment">
precision mediump float; precision mediump float;
uniform sampler2D u_velocity;
uniform sampler2D u_particles; uniform sampler2D u_particles;
uniform sampler2D u_velocity;
uniform vec2 u_textureSize; uniform vec2 u_textureSize;
uniform vec2 u_velocityTextureSize; uniform vec2 u_velocityTextureSize;
uniform float u_dt;
uniform float u_scale; uniform float u_scale;
vec2 bilinearInterp(vec2 pos, sampler2D texture, vec2 size){ vec2 bilinearInterp(vec2 pos, sampler2D texture, vec2 size){
...@@ -332,10 +334,10 @@ ...@@ -332,10 +334,10 @@
vec2 fragCoord = gl_FragCoord.xy; vec2 fragCoord = gl_FragCoord.xy;
vec2 particleCoord = texture2D(u_particles, fragCoord/u_textureSize).xy; vec2 particleCoord = texture2D(u_particles, fragCoord/u_textureSize).xy;
vec2 currentVelocity = 1.0/u_scale*bilinearInterp(vec2(1.0, 1.0) + particleCoord/u_velocityTextureSize*(u_velocityTextureSize-vec2(3.0, 3.0)), u_velocity, u_velocityTextureSize); vec2 currentVelocity = 1.0/u_scale*bilinearInterp(vec2(1.0, 1.0) + particleCoord*u_scale/u_velocityTextureSize*(u_velocityTextureSize-vec2(3.0, 3.0)), u_velocity, u_velocityTextureSize);
//explicitly solve advection //explicitly solve advection
gl_FragColor = vec4(particlePos+currentVelocity*0.5, 0, 0); gl_FragColor = vec4(particleCoord+currentVelocity*u_dt, 0, 0);
} }
</script> </script>
......
...@@ -21,10 +21,12 @@ var GPU; ...@@ -21,10 +21,12 @@ var GPU;
var threeView; var threeView;
var numParticles = 100;//perfect sq var numParticles = 25;//perfect sq
var particlesTextureDim = 10;//sqrt(numParticles) var particlesTextureDim = 5;//sqrt(numParticles)
var particleData = new Float32Array(numParticles*4);//[position.x, position.y, velocity.x, velocity.y] var particleData = new Float32Array(numParticles*4);//[position.x, position.y, velocity.x, velocity.y]
var particles; var particles;
var particlesVertices;
var vectorLength = 2;//num floats to parse
window.onload = init; window.onload = init;
...@@ -85,6 +87,13 @@ function init() { ...@@ -85,6 +87,13 @@ function init() {
GPU.setUniformForProgram("boundary", "u_texture", 0, "1i"); GPU.setUniformForProgram("boundary", "u_texture", 0, "1i");
GPU.createProgram("packToBytes", "2d-vertex-shader", "packToBytesShader"); GPU.createProgram("packToBytes", "2d-vertex-shader", "packToBytesShader");
GPU.setUniformForProgram("packToBytes", "u_floatTextureDim", [particlesTextureDim, particlesTextureDim], "2f");
GPU.createProgram("moveParticles", "2d-vertex-shader", "moveParticlesShader");
GPU.setUniformForProgram("moveParticles", "u_particles", 0, "1i");
GPU.setUniformForProgram("moveParticles", "u_velocity", 1, "1i");
GPU.setUniformForProgram("moveParticles", "u_textureSize", [particlesTextureDim, particlesTextureDim], "2f");
GPU.setUniformForProgram("moveParticles", "u_dt", 0.5, "1f");
resetWindow(); resetWindow();
...@@ -92,6 +101,7 @@ function init() { ...@@ -92,6 +101,7 @@ function init() {
var geo = new THREE.Geometry(); var geo = new THREE.Geometry();
geo.dynamic = true; geo.dynamic = true;
particlesVertices = geo.vertices;
for (var i=0;i<numParticles;i++){ for (var i=0;i<numParticles;i++){
var vertex = new THREE.Vector3(Math.random()*actualWidth, Math.random()*actualHeight, 0); var vertex = new THREE.Vector3(Math.random()*actualWidth, Math.random()*actualHeight, 0);
particleData[i*4] = vertex.x; particleData[i*4] = vertex.x;
...@@ -108,8 +118,8 @@ function init() { ...@@ -108,8 +118,8 @@ function init() {
GPU.initTextureFromData("nextParticles", particlesTextureDim, particlesTextureDim, "FLOAT", particleData, true); GPU.initTextureFromData("nextParticles", particlesTextureDim, particlesTextureDim, "FLOAT", particleData, true);
GPU.initFrameBufferForTexture("nextParticles", true); GPU.initFrameBufferForTexture("nextParticles", true);
GPU.initTextureFromData("outputParticleBytes", particlesTextureDim*2, particlesTextureDim, "UNSIGNED_BYTE", null);//2 comp vector [x,y] GPU.initTextureFromData("outputParticleBytes", particlesTextureDim*vectorLength, particlesTextureDim, "UNSIGNED_BYTE", null);//2 comp vector [x,y]
GPU.initFrameBufferForTexture("outputParticleBytes"); GPU.initFrameBufferForTexture("outputParticleBytes", true);
render(); render();
} }
...@@ -199,16 +209,24 @@ function render(){ ...@@ -199,16 +209,24 @@ function render(){
} else resetWindow(); } else resetWindow();
//move particles //move particles
var vectorLength = 2; GPU.setSize(particlesTextureDim, particlesTextureDim);
GPU.step("moveParticles", ["particles", "velocity"], "nextParticles");
GPU.step("moveParticles", ["nextParticles", "velocity"], "particles");
GPU.setSize(particlesTextureDim*vectorLength, particlesTextureDim);
GPU.setProgram("packToBytes"); GPU.setProgram("packToBytes");
GPU.setUniformForProgram("packToBytes", "u_vectorLength", vectorLength, "1f"); GPU.setUniformForProgram("packToBytes", "u_vectorLength", vectorLength, "1f");
GPU.setSize(width, height);
GPU.step("packToBytes", ["particles"], "outputParticleBytes"); GPU.step("packToBytes", ["particles"], "outputParticleBytes");
var pixels = new Uint8Array(width*height*4*vectorLength); var pixels = new Uint8Array(numParticles*4*vectorLength);
if (GPU.readyToRead()) { if (GPU.readyToRead()) {
GPU.readPixels(0, 0, width * vectorLength, height, pixels); GPU.readPixels(0, 0, particlesTextureDim * vectorLength, particlesTextureDim, pixels);
var parsedPixels = new Float32Array(pixels.buffer); var parsedPixels = new Float32Array(pixels.buffer);
// console.log(parsedPixels); for (var i=0;i<numParticles;i++){
particlesVertices[i].x = parsedPixels[vectorLength*i];
particlesVertices[i].y = parsedPixels[vectorLength*i+1];
}
particles.geometry.verticesNeedUpdate = true;
threeView.render();
} }
window.requestAnimationFrame(render); window.requestAnimationFrame(render);
...@@ -256,6 +274,9 @@ function resetWindow(){ ...@@ -256,6 +274,9 @@ function resetWindow(){
GPU.setUniformForProgram("render" ,"u_textureSize", [actualWidth, actualHeight], "2f"); GPU.setUniformForProgram("render" ,"u_textureSize", [actualWidth, actualHeight], "2f");
GPU.setProgram("boundary"); GPU.setProgram("boundary");
GPU.setUniformForProgram("boundary" ,"u_textureSize", [width, height], "2f"); GPU.setUniformForProgram("boundary" ,"u_textureSize", [width, height], "2f");
GPU.setProgram("moveParticles");
GPU.setUniformForProgram("moveParticles", "u_velocityTextureSize", [width, height], "2f");
GPU.setUniformForProgram("moveParticles" ,"u_scale", scale, "1f");
var velocity = new Float32Array(width*height*4); var velocity = new Float32Array(width*height*4);
// for (var i=0;i<height;i++){ // for (var i=0;i<height;i++){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment