From 0b0f2a1592a13b63fe512430d9a3196a9a9656e8 Mon Sep 17 00:00:00 2001
From: amandaghassaei <amandaghassaei@gmail.com>
Date: Tue, 4 Apr 2017 02:28:03 -0400
Subject: [PATCH] moving particles
---
index.html | 8 +++++---
js/main.js | 39 ++++++++++++++++++++++++++++++---------
2 files changed, 35 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index 21764dd..91df6a5 100644
--- a/index.html
+++ b/index.html
@@ -296,12 +296,14 @@
<script id="moveParticlesShader" type="x-shader/x-fragment">
precision mediump float;
- uniform sampler2D u_velocity;
uniform sampler2D u_particles;
+ uniform sampler2D u_velocity;
uniform vec2 u_textureSize;
uniform vec2 u_velocityTextureSize;
+ uniform float u_dt;
+
uniform float u_scale;
vec2 bilinearInterp(vec2 pos, sampler2D texture, vec2 size){
@@ -332,10 +334,10 @@
vec2 fragCoord = gl_FragCoord.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
- gl_FragColor = vec4(particlePos+currentVelocity*0.5, 0, 0);
+ gl_FragColor = vec4(particleCoord+currentVelocity*u_dt, 0, 0);
}
</script>
diff --git a/js/main.js b/js/main.js
index fc5b5d3..9cdf6ae 100755
--- a/js/main.js
+++ b/js/main.js
@@ -21,10 +21,12 @@ var GPU;
var threeView;
-var numParticles = 100;//perfect sq
-var particlesTextureDim = 10;//sqrt(numParticles)
+var numParticles = 25;//perfect sq
+var particlesTextureDim = 5;//sqrt(numParticles)
var particleData = new Float32Array(numParticles*4);//[position.x, position.y, velocity.x, velocity.y]
var particles;
+var particlesVertices;
+var vectorLength = 2;//num floats to parse
window.onload = init;
@@ -85,6 +87,13 @@ function init() {
GPU.setUniformForProgram("boundary", "u_texture", 0, "1i");
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();
@@ -92,6 +101,7 @@ function init() {
var geo = new THREE.Geometry();
geo.dynamic = true;
+ particlesVertices = geo.vertices;
for (var i=0;i<numParticles;i++){
var vertex = new THREE.Vector3(Math.random()*actualWidth, Math.random()*actualHeight, 0);
particleData[i*4] = vertex.x;
@@ -108,8 +118,8 @@ function init() {
GPU.initTextureFromData("nextParticles", particlesTextureDim, particlesTextureDim, "FLOAT", particleData, true);
GPU.initFrameBufferForTexture("nextParticles", true);
- GPU.initTextureFromData("outputParticleBytes", particlesTextureDim*2, particlesTextureDim, "UNSIGNED_BYTE", null);//2 comp vector [x,y]
- GPU.initFrameBufferForTexture("outputParticleBytes");
+ GPU.initTextureFromData("outputParticleBytes", particlesTextureDim*vectorLength, particlesTextureDim, "UNSIGNED_BYTE", null);//2 comp vector [x,y]
+ GPU.initFrameBufferForTexture("outputParticleBytes", true);
render();
}
@@ -199,16 +209,24 @@ function render(){
} else resetWindow();
//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.setUniformForProgram("packToBytes", "u_vectorLength", vectorLength, "1f");
- GPU.setSize(width, height);
GPU.step("packToBytes", ["particles"], "outputParticleBytes");
- var pixels = new Uint8Array(width*height*4*vectorLength);
+ var pixels = new Uint8Array(numParticles*4*vectorLength);
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);
- // 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);
@@ -256,6 +274,9 @@ function resetWindow(){
GPU.setUniformForProgram("render" ,"u_textureSize", [actualWidth, actualHeight], "2f");
GPU.setProgram("boundary");
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);
// for (var i=0;i<height;i++){
--
GitLab