Skip to content

Commit

Permalink
Updated the second webgl demo using phong material with texture map t…
Browse files Browse the repository at this point in the history 
…o the latest release of Three.js r78

Updated the second webgl demo using phong material with texture map to
the latest release of Three.js r78
  • Loading branch information
@mmmovania
mmmovania committed Feb 26, 2016
1 parent 2df2e27 commit 5db9b1c
Showing 1 changed file with 86 additions and 71 deletions.
157 changes: 86 additions & 71 deletions OpenCloth_WebGL/WebGLOpenClothTextured.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,38 @@
<html>
<head>
<script src="js/Three.js"></script>
<script src="js/custom/ThreeExtras.js"></script>
<script src="js/Stats.js"></script>
<title>OpenCloth Textured WebGL Demo by Movania Muhammad Mobeen</title>
<head>
<meta charset="utf-8">
<script src="js/three.min.js"></script>
<script src="js/stats.min.js"></script>
<title>OpenCloth Textured WebGL Demo by Movania Muhammad Mobeen</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}

.info {
position: absolute;
background-color: black;
opacity: 0.8;
color: white;
text-align: center;
top: 0px;
width: 100%;
}

.info a {
color: #00ffff;
}
</style>
</head>
<body>
<div align=right><p><b>OpenCloth Textured WebGL Demo</b><br>
Integrator: Explicit Euler <br>
Step size: 1/60</p></div>
<body>
</body>
<script type="text/javascript">
var camera, scene, renderer,
geometry, material, mesh, plane,
material, mesh, plane,
light, cube;
var stats;
var oldX, oldY, rX, rY, dist, state, D2R;
Expand Down Expand Up @@ -48,7 +68,7 @@
spring.Ks=ks;
spring.Kd=kd;
var deltaP = new THREE.Vector3();
deltaP.sub(mesh.geometry.vertices[a].position,mesh.geometry.vertices[b].position);
deltaP.subVectors(mesh.geometry.vertices[a],mesh.geometry.vertices[b]);
spring.rest_length = Math.sqrt(deltaP.dot(deltaP));
springs.push(spring);
}
Expand All @@ -67,11 +87,11 @@
oldX = 0;
oldY = 0;
state = -1;
D2R = 0.0174532925199433;
D2R = 0.0174532925199433;
size = 4; //world space size of cloth
hsize = size/2;
u = numX +1;
v = numY +1;
u = numX +1;
v = numY +1;

KsStruct = 1000;
KdStruct = 0.5;
Expand All @@ -80,8 +100,7 @@
KsBend = 1000;
KdBend = 0.5;

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
scene = new THREE.Scene();
scene.add(camera);

Expand All @@ -90,14 +109,14 @@
var geoY = new THREE.Geometry();
var geoZ = new THREE.Geometry();

geoX.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 0, 0)));
geoX.vertices.push(new THREE.Vertex(new THREE.Vector3(1, 0, 0)));
geoX.vertices.push(new THREE.Vector3(0, 0, 0));
geoX.vertices.push(new THREE.Vector3(1, 0, 0));

geoY.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 0, 0)));
geoY.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 1, 0)));
geoY.vertices.push(new THREE.Vector3(0, 0, 0));
geoY.vertices.push(new THREE.Vector3(0, 1, 0));

geoZ.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 0, 0)));
geoZ.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 0, 1)));
geoZ.vertices.push(new THREE.Vector3(0, 0, 0));
geoZ.vertices.push(new THREE.Vector3(0, 0, 1));

var lineX = new THREE.Line(geoX, new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 3 }));
var lineY = new THREE.Line(geoY, new THREE.LineBasicMaterial({ color: 0x00ff00, linewidth: 3 }));
Expand All @@ -107,17 +126,19 @@
scene.add(lineY);
scene.add(lineZ);

geometry = new THREE.PlaneGeometry( -20, 20, 10, 10);
var geometry = new THREE.PlaneGeometry(-20, 20, 10, 10);

plane = new THREE.Mesh( geometry,new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe:true } ));
plane.rotation.x = 90 * D2R;
scene.add( plane );
scene.add(plane);

geometry = new THREE.Geometry();

//Fill in vertices of cloth mesh
for(var j=0;j<v;j++) {
for(var i=0;i<u;i++) {
var tmp = new THREE.Vertex(new THREE.Vector3( ((i/(u-1)) *2.0-1.)* hsize,size+1, ((j/(v-1.0) )* size)));
tmp.uv = new THREE.UV( i / (u-1), j / (v-1) );
var tmp = new THREE.Vector3( ((i/(u-1)) *2.0-1.)* hsize,size+1, ((j/(v-1.0) )* size));
tmp.uv = new THREE.Vector2( i / (u-1), 1.0-j / (v-1) );

F.push(new THREE.Vector3(0,0,0));
V.push(new THREE.Vector3(0,0,0));
Expand All @@ -132,40 +153,41 @@
i1 = i0 + 1;
i2 = i0 + (numX+1);
i3 = i2 + 1;
/*

if ((j+i)%2) {
var face1 = new THREE.Face3(i0, i2, i1);
var face2 = new THREE.Face3(i1, i2, i3);
geometry.faces.push(face1);
geometry.faces.push(face2);
geometry.faces.push(face1); geometry.faceVertexUvs[0].push([geometry.vertices[i0].uv, geometry.vertices[i2].uv, geometry.vertices[i1].uv]);
geometry.faces.push(face2); geometry.faceVertexUvs[0].push([geometry.vertices[i1].uv, geometry.vertices[i2].uv, geometry.vertices[i3].uv]);
} else {
var face1 = new THREE.Face3(i0, i2, i3);
var face2 = new THREE.Face3(i0, i3, i1);
geometry.faces.push(face1);
geometry.faces.push(face2);
geometry.faces.push(face1); geometry.faceVertexUvs[0].push([geometry.vertices[i0].uv, geometry.vertices[i2].uv, geometry.vertices[i3].uv]);
geometry.faces.push(face2); geometry.faceVertexUvs[0].push([geometry.vertices[i0].uv, geometry.vertices[i3].uv, geometry.vertices[i1].uv]);
}
*/

//using Face4 instead of Face3 based on suggestion of Mr.Doob
var face = new THREE.Face4(i0, i2, i3, i1);
geometry.faces.push(face);
geometry.faceVertexUvs[0].push([
geometry.vertices[i0].uv,
geometry.vertices[i2].uv,
geometry.vertices[i3].uv,
geometry.vertices[i1].uv
]);
//var face = new THREE.Face4(i0, i2, i3, i1);
//geometry.faces.push(face);
//geometry.faceVertexUvs[0].push([
//geometry.vertices[i0].uv,
//geometry.vertices[i2].uv,
//geometry.vertices[i3].uv,
//geometry.vertices[i1].uv
// ]);

}
}

geometry.computeFaceNormals();
geometry.computeVertexNormals();
geometry.computeCentroids();
//geometry.computeCentroids();

mesh = new THREE.Mesh( geometry,new THREE.MeshPhongMaterial( { ambient: 0xFFFFFF, map: THREE.ImageUtils.loadTexture( "opencloth.png" ) } )); //new THREE.MeshNormalMaterial() );
mesh = new THREE.Mesh( geometry,new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader().load( "opencloth.png" ) } )); //new THREE.MeshNormalMaterial() );
mesh.doubleSided = true;
mesh.geometry.dynamic = true; //for WebGL renderer
scene.add( mesh );

scene.add(mesh);

light = new THREE.PointLight(0xdddddd);
light.position.set(0, 3, 25);
Expand Down Expand Up @@ -211,7 +233,7 @@
console.log("Total velocities: "+V.length);

// renderer = new THREE.CanvasRenderer();
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );
Expand Down Expand Up @@ -266,49 +288,50 @@
F[i].y=0;
F[i].z=0;
if(i!=0 && i!= numX)
F[i].addSelf(GRAVITY);
F[i].add(GRAVITY);

F[i].subSelf( V[i].multiplyScalar(DEFAULT_DAMPING));
F[i].sub( V[i].multiplyScalar(DEFAULT_DAMPING));
}

//add spring forces
var deltaP = new THREE.Vector3();
var deltaV = new THREE.Vector3();
for(var i=0;i<springs.length;i++) {
var p1 = mesh.geometry.vertices[springs[i].p1].position;
var p2 = mesh.geometry.vertices[springs[i].p2].position;
var p1 = mesh.geometry.vertices[springs[i].p1];
var p2 = mesh.geometry.vertices[springs[i].p2];
var v1 = V[springs[i].p1];
var v2 = V[springs[i].p2];
deltaP.sub(p1,p2);
deltaV.sub(v1,v2);
deltaP.subVectors(p1,p2);
deltaV.subVectors(v1,v2);
var dist = deltaP.length();
//console.log("p1: "+p1+", p2: "+p2+" Dis: "+dist);
var leftTerm = -springs[i].Ks * (dist-springs[i].rest_length);
var rightTerm = -springs[i].Kd * ((deltaV.dot(deltaP))/dist);
var springForce = (deltaP.normalize()).multiplyScalar(leftTerm + rightTerm);
if(springs[i].p1 != 0 && springs[i].p1 != numX)
F[springs[i].p1].addSelf(springForce);
F[springs[i].p1].add(springForce);
if(springs[i].p2 != 0 && springs[i].p2 != numX )
F[springs[i].p2].subSelf(springForce);
F[springs[i].p2].sub(springForce);
}
}

function integrateEuler() {
var deltaTimeMass = dt/ mass;
var N = mesh.geometry.vertices.length;
var oldP = mesh.geometry.vertices[N-1].position.clone();
geometry.__dirtyVertices = true;
var oldP = mesh.geometry.vertices[N-1].clone();
mesh.geometry.verticesNeedUpdate = true;
mesh.geometry.normalsNeedUpdate = true;
for(var i=0;i<N;i++) {
var oldV = V[i];
V[i].addSelf(F[i].multiplyScalar(deltaTimeMass));
mesh.geometry.vertices[i].position.addSelf(oldV.multiplyScalar(dt));
if(mesh.geometry.vertices[i].position.y <0) {
mesh.geometry.vertices[i].position.y = 0;
V[i].add(F[i].multiplyScalar(deltaTimeMass));
mesh.geometry.vertices[i].add(oldV.multiplyScalar(dt));
if(mesh.geometry.vertices[i].y <0) {
mesh.geometry.vertices[i].y = 0;
}
}

var diff = new THREE.Vector3(0,0,0);
diff.sub(oldP, mesh.geometry.vertices[N - 1].position);
diff.subVectors(oldP, mesh.geometry.vertices[N - 1]);

simulate = (diff.lengthSq()> EPSILON2);
//
Expand All @@ -324,25 +347,17 @@
function animate() {
requestAnimationFrame(animate);
if (simulate) {
geometry.computeFaceNormals();
geometry.computeVertexNormals();
geometry.__dirtyNormals = true;
mesh.geometry.computeFaceNormals();
mesh.geometry.computeVertexNormals();
mesh.geometry.normalsNeedUpdate = true;
doPhysics();
}

render();
stats.update();
}

function render() {
/*
mesh.position.z = dist;
mesh.rotation.x = rX*D2R;
mesh.rotation.z = rY*D2R;
plane.position.z = dist;
plane.rotation.x = rX*D2R;
plane.rotation.z = rY*D2R;
*/
function render() {
var theta = rY * D2R;
var phi = rX * D2R;
var radius = dist;
Expand Down

0 comments on commit 5db9b1c

Please sign in to comment.