Skip to content

Commit

Permalink
clean up code
Browse files Browse the repository at this point in the history
  • Loading branch information
ZIWEI authored and ZIWEI committed Dec 11, 2015
1 parent 1c77d9e commit 4258275
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 88 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@

WebGl 2 Cloth-Simulation.
Using Brandon Jones's [WebGL 2 Particle Simulation](https://github.com/toji/webgl2-particles) as framework.

![](Image/image.PNG)

**Feature:**

(1)Implementation of WebGL transform feedback cloth simulation and ping-pong texture method cloth simulation.
Expand Down
48 changes: 12 additions & 36 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,11 +191,9 @@
var pinPongData;
var roomMaterial;
var guiStep = false;
//var controls;

var fboParticles, rtTexturePos, rtTexturePos2, simulationShader;

//var width = getQueryValue('width', 1024);
//var height = getQueryValue('height', 1024);
var pointSize = getQueryValue('pointSize', 3.0);

var maxFingers = 42;
Expand Down Expand Up @@ -351,9 +349,9 @@
scene.add(textMesh);


var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x00008B });
var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x00008B }); //TODO(fix): no cloth while using THREE's materails
var sphereGeom = new THREE.SphereGeometry(0.3, 100, 100);
//sphereMesh = new THREE.Mesh(sphereGeom, sphereMaterial);

sphereMesh = new THREE.Mesh(sphereGeom, roomMaterial);
sphereMesh.position.x = 0.5;
sphereMesh.position.y = 0.45;
Expand All @@ -369,7 +367,7 @@
//https://www.script-tutorials.com/webgl-with-three-js-lesson-10/
var testDragGeo = new THREE.SphereGeometry(0.03, 10, 10);
var testDragMat = new THREE.MeshPhongMaterial({ color: 0xEE00EE });
//usrControl.testDragMesh = new THREE.Mesh(testDragGeo, testDragMat);
//usrControl.testDragMesh = new THREE.Mesh(testDragGeo, testDragMat); //TODO(fix): no cloth while using THREE's materails
usrControl.testDragMesh = new THREE.Mesh(testDragGeo, roomMaterial);
usrControl.testDragMesh.position.x = 0.0;
usrControl.testDragMesh.position.y = 1.0;
Expand All @@ -390,7 +388,7 @@
for (var y = 0; y < cloth_h; y++) {
data[i + 0] = x * 1.0 / cloth_w;
data[i + 1] = 1.0;
data[i + 2] = y * 1.0 / cloth_h; //-y * 1.0 / cloth_h;
data[i + 2] = y * 1.0 / cloth_h;
data[i + 3] = 0.1;

vtxIds[i + 0] = t;
Expand Down Expand Up @@ -433,22 +431,6 @@
mesh = new THREE.PointCloud(vbo_pos, material);
} else {
//Try triangle:
var triangleMat = new THREE.ShaderMaterial({
vertexShader: [
'void main() {',
//'position.x+=0.1;',
' gl_Position = projectionMatrix * modelViewMatrix * vec4( position + vec3(2.5,0.0,0.0), 1.0 );',
'}',
].join('\n'),
fragmentShader: [
'void main() {',
' gl_FragColor = vec4(1.0,0.0,1.0,1.0);',
'}',
].join('\n'),
});

// var triangleMesh = new THREE.Mesh(triangleGeo, triangleMat);
// scene.add(triangleMesh);

//WebGL 1+
texture = new THREE.DataTexture(data, cloth_w, cloth_h, THREE.RGBAFormat, THREE.FloatType);
Expand Down Expand Up @@ -514,12 +496,9 @@
//transparent: true
});
//WebGl 1 Mesh
// mesh = new THREE.PointCloud(geometry, material);//triangleMat
mesh = new THREE.Mesh(geometry, material);
}


//mesh = new THREE.Points(vbo_pos, material);
scene.add(mesh);

window.addEventListener('start-simulation', onStartSimulation);
Expand All @@ -536,14 +515,14 @@
var vector = new THREE.Vector3(mouseX, mouseY, 1);
vector.unproject(camera);
raycaster.set(camera.position, vector.sub(camera.position).normalize());
//var intersects = raycaster.intersectObjects(scene.children);

var intersects = raycaster.intersectObjects(usrControl.pinObjects);
if (intersects.length > 0) {
camControl.enabled = false;

usrControl.selection = intersects[0].object;
var intersects = raycaster.intersectObject(usrControl.plane);
usrControl.itrOffset.copy(intersects[0].point).sub(usrControl.plane.position);//???!!
usrControl.itrOffset.copy(intersects[0].point).sub(usrControl.plane.position);
}
}
function onMouseUp(event) {
Expand All @@ -552,8 +531,7 @@

}
function onStartSimulation(event) {
//TODO: reset and start simulation
//cfg_ui.setPause(false);
//TODO: cfg_ui.setPause(false);
usrControl.testDragMesh.position.x = 0.0;
usrControl.testDragMesh.position.y = 1.0;
usrControl.testDragMesh.position.z = 0.0;
Expand All @@ -567,7 +545,7 @@
for (var y = 0; y < cloth_h; y++) {
data[i + 0] = x * 1.0 / cloth_w;
data[i + 1] = 1.0;
data[i + 2] = y * 1.0 / cloth_h; //-y * 1.0 / cloth_h;
data[i + 2] = y * 1.0 / cloth_h;
data[i + 3] = 0.1;

vtxIds[i + 0] = t;
Expand Down Expand Up @@ -611,8 +589,6 @@
texture.magFilter = THREE.NearestFilter;
texture.needsUpdate = true;

// zz85 - fbo init

rtTexturePos = new THREE.WebGLRenderTarget(cloth_w, cloth_h, {
wrapS: THREE.RepeatWrapping,
wrapT: THREE.RepeatWrapping,
Expand All @@ -629,15 +605,16 @@
simulationShader = new GPGPU.SimulationShader();
simulationShader.setOriginsTexture(texture);
simulationShader.setClothDim(cloth_w);
//*

geometry = new THREE.Geometry();

for (var i = 0, l = cloth_w * cloth_h; i < l; i++) {
var vertex = new THREE.Vector3();
vertex.x = (i % cloth_w) / cloth_w;
vertex.y = Math.floor(i / cloth_w) / cloth_h;
geometry.vertices.push(vertex);
}//*/
}
//TODO: faces

material = new THREE.ShaderMaterial({
uniforms: {
Expand Down Expand Up @@ -679,7 +656,6 @@

sphereMesh.visible = (cfg_ui.getRigid() == 0);

//*/
if ((!cfg_ui.getPause()) || guiStep) {
simulationShader.setTimer(cfg_ui.getTimeStep());

Expand Down
12 changes: 2 additions & 10 deletions js/GPGPU.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,7 @@ var GPGPU2 = function (renderer,cloth_w,cloth_h) {

var sourceAttrib = source.attributes['position'];
if (target.attributes['position'].buffer && sourceAttrib.buffer) {

//posData = new Float32Array(sourceAttrib.array);

//gl.getBufferSubData(gl.ARRAY_BUFFER,tempData,sourceAttrib.buffer);


shader.bind(posData, prevposData, cfg, usrCtrl);
prevposData = new Float32Array(posData);

Expand All @@ -36,8 +32,7 @@ var GPGPU2 = function (renderer,cloth_w,cloth_h) {

gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, target.attributes['position'].buffer);
//gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, target.attributes['prev_pos'].buffer);


gl.enable(gl.RASTERIZER_DISCARD);
gl.beginTransformFeedback(gl.POINTS);

Expand Down Expand Up @@ -97,7 +92,6 @@ var GPGPU = function (renderer) {

this.pass = function (shader, target,cfg, usrCtrl) {

//this.initVel(shader);
shader.setCfgSettings(cfg);
shader.setPrevVelocityTexture( prevVelTexture);
mesh.material = shader.updateVelMat;
Expand All @@ -110,8 +104,6 @@ var GPGPU = function (renderer) {
var a = velTexture;
velTexture = prevVelTexture;
prevVelTexture = a;

//renderer.render(scene, camera, target, false);

};
/*
Expand Down
52 changes: 11 additions & 41 deletions js/gpgpu/SimulationShader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,10 +172,9 @@ GPGPU2.SimulationShader2 = function (renderer,c_w,c_h) {

function createProgram () {

//Sadly, it seems that WebGL doesn't support gl_VertexID.... T^T
//WebGL doesn't support gl_VertexID
//http://max-limper.de/tech/batchedrendering.html

//well....uniform block..
//TODO:uniform block
//https://www.opengl.org/wiki/Interface_Block_(GLSL)
var vertexShader = gl.createShader( gl.VERTEX_SHADER );
var fragmentShader = gl.createShader( gl.FRAGMENT_SHADER );
Expand All @@ -200,7 +199,7 @@ GPGPU2.SimulationShader2 = function (renderer,c_w,c_h) {
'precision ' + renderer.getPrecision() + ' float;',
'in vec4 v_prevpos;',
'void main() {',
//'gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);',??????
//'gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);'//TODO: error
'}'
].join('\n'));

Expand Down Expand Up @@ -266,7 +265,7 @@ GPGPU2.SimulationShader2 = function (renderer,c_w,c_h) {
attributes: attributes,

bind: function (tempData, prevData, cfg, usrCtrl) {
//!!! VBO -> Texture ?????
//TODO: VBO -> Texture
//http://stackoverflow.com/questions/17262574/packing-vertex-data-into-a-webgl-texture
//TODO: don't need to re-create texture every frame.....put those into init
gl.useProgram(program);
Expand Down Expand Up @@ -311,31 +310,6 @@ GPGPU2.SimulationShader2 = function (renderer,c_w,c_h) {

gl.uniform4f(uniforms.u_pins, cfg.getPin1(), cfg.getPin2(), cfg.getPin3(), cfg.getPin4());
gl.uniform4f(uniforms.u_newPinPos, usrCtrl.uniformPins[0], usrCtrl.uniformPins[1], usrCtrl.uniformPins[2], usrCtrl.uniformPins[3]);
/*
//UBO:
//https://www.packtpub.com/books/content/opengl-40-using-uniform-blocks-and-uniform-buffer-objects
//1. get index of uniform block
var blockIdx = gl.getUniformBlockIndex(program, "u_tryUBO");
//2. allocate space for buffer
var blockSize = gl.getActiveUniformBlockParameter(program, blockIdx, gl.UNIFORM_BLOCK_DATA_SIZE);
var blockBuffer = gl.createBuffer();
//3. Query for the offset of each variable within the block
var names = ["uboTry1", "uboTry2"];
//var indices = new Int16Array(2);
var indices = gl.getUniformIndices(program, names);
var offset = gl.getActiveUniforms(program, indices, gl.UNIFORM_OFFSET);
debugger;
//4. Place the data into buffer
var try1 = [0.1, 0.2, 0.3, 0.4];
var try2 = [0.5, 0.6, 0.7, 0.8];
//5. Create the OpenGL buffer object and copy data into it
//6. bind the buffer object to the uniform block
'layout (std140) uniform u_tryUBO{',
' vec4 uboTry1;',
' vec4 uboTry2;',
'};',
*/
},

setTimer: function ( timer ) {
Expand Down Expand Up @@ -411,32 +385,29 @@ GPGPU.SimulationShader = function () {
getNeighbor(),
'void main() {',
' vec4 pos = texture2D( tPositions, vUv );',
' vec3 F = vec3(0.0,-9.8*0.1,0.0);',//mass
' vec3 F = vec3(0.0,-9.8*0.1,0.0);',//TODO:mass
addWind(),
' vec4 vel = texture2D( tVelocity, vUv );',
'F+=DAMPING*vel.xyz;',

/****************
** SIMULATION **
*****************/
//k=2: up

'for (int k = 0; k < 12; k++)',
'{',
' vec3 tempVel = vel.xyz;',
' float ks, kd;',
' vec2 nCoord = getNeighbor(k, ks, kd);',

' float inv_cloth_size = 1.0 / cloth_w;',//LATER
' float inv_cloth_size = 1.0 / cloth_w;',
' float rest_length = length(nCoord*inv_cloth_size);',

' nCoord *=(1.0/cloth_w);',//LATER
' nCoord *=(1.0/cloth_w);',
' vec2 newCoord = vUv+nCoord;',
' if( '+ boarderCondition() +') continue;',

' vec3 posNP = texture2D( tPositions, newCoord).xyz;',
//' vec3 prevNP = texture(u_texPrevPos, nCoord).xyz;',

//' vec3 v2 = (posNP - prevNP) / timestep;',
' vec3 v2 = texture2D( tVelocity, newCoord ).xyz;',
' vec3 deltaP = pos.xyz - posNP;',

Expand All @@ -451,10 +422,9 @@ GPGPU.SimulationShader = function () {
'};',
/****************
*****************/
' vec3 acc = F/0.1;',//mass
'if('+pinCondition()+') vel.xyz = vec3(0.0);else vel.xyz += acc*timestep;', //MARK
' vec3 acc = F/0.1;',//TODO:mass
'if('+pinCondition()+') vel.xyz = vec3(0.0);else vel.xyz += acc*timestep;',
' gl_FragColor = vec4(vel.xyz,1.0);',
//' gl_FragColor = vec4(0.2,-0.2,0.0,1.0);',
'}',
].join('\n'),
});
Expand Down Expand Up @@ -501,7 +471,7 @@ GPGPU.SimulationShader = function () {
' pos = vec4(texture2D( origin, vUv ).xyz, 0.1);',
'}',
'else{',
'if('+pinCondition()+') ; else pos.xyz+=vel.xyz*timer;',//MARK
'if('+pinCondition()+') ; else pos.xyz+=vel.xyz*timer;',
'if(u_rigid==0) sphereCollision(pos.xyz,vec3(0.5,0.45,0.4),0.3);',
'}',

Expand Down
2 changes: 1 addition & 1 deletion server.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
from http.server import SimpleHTTPRequestHandler
from socketserver import TCPServer

PORT = 10242
PORT = 10252

Handler = SimpleHTTPRequestHandler

Expand Down

0 comments on commit 4258275

Please sign in to comment.