function display({ width: w = width, height: h = 500 } = {}) { const width = w; const height = h; /* * Cloth Simulation using a relaxed constraints solver */ // Suggested Readings // Advanced Character Physics by Thomas Jakobsen Character // http://freespace.virgin.net/hugo.elias/models/m_cloth.htm // http://en.wikipedia.org/wiki/Cloth_modeling // http://cg.alexandra.dk/tag/spring-mass-system/ // Real-time Cloth Animation http://www.darwin3d.com/gamedev/articles/col0599.pdf const DAMPING = 0.03; const DRAG = 1 - DAMPING; const MASS = 0.1; const restDistance = 25; const xSegs = 10; const ySegs = 10; const clothFunction = plane(restDistance * xSegs, restDistance * ySegs); const cloth = new Cloth(xSegs, ySegs); const GRAVITY = 981 * 1.4; const gravity = new THREE.Vector3(0, -GRAVITY, 0).multiplyScalar(MASS); const TIMESTEP = 18 / 1000; const TIMESTEP_SQ = TIMESTEP * TIMESTEP; let pins = []; const windForce = new THREE.Vector3(0, 0, 0); const tmpForce = new THREE.Vector3(); function plane(width, height) { return function(u, v, target) { const x = (u - 0.5) * width; const y = (v + 0.5) * height; const z = 0; target.set(x, y, z); }; } function Particle(x, y, z, mass) { this.position = new THREE.Vector3(); this.previous = new THREE.Vector3(); this.original = new THREE.Vector3(); this.a = new THREE.Vector3(0, 0, 0); // acceleration this.mass = mass; this.invMass = 1 / mass; this.tmp = new THREE.Vector3(); this.tmp2 = new THREE.Vector3(); // init clothFunction(x, y, this.position); // position clothFunction(x, y, this.previous); // previous clothFunction(x, y, this.original); } // Force -> Acceleration Particle.prototype.addForce = function(force) { this.a.add(this.tmp2.copy(force).multiplyScalar(this.invMass)); }; // Performs Verlet integration Particle.prototype.integrate = function(timesq) { const newPos = this.tmp.subVectors(this.position, this.previous); newPos.multiplyScalar(DRAG).add(this.position); newPos.add(this.a.multiplyScalar(timesq)); this.tmp = this.previous; this.previous = this.position; this.position = newPos; this.a.set(0, 0, 0); }; const diff = new THREE.Vector3(); function satisfyConstraints(p1, p2, distance) { diff.subVectors(p2.position, p1.position); const currentDist = diff.length(); if (currentDist === 0) return; // prevents division by 0 const correction = diff.multiplyScalar(1 - distance / currentDist); const correctionHalf = correction.multiplyScalar(0.5); p1.position.add(correctionHalf); p2.position.sub(correctionHalf); } function Cloth(w, h) { w = w || 10; h = h || 10; this.w = w; this.h = h; const particles = []; const constraints = []; // Create particles for (let v = 0; v <= h; v++) { for (let u = 0; u <= w; u++) { particles.push(new Particle(u / w, v / h, 0, MASS)); } } // Structural for (let v = 0; v < h; v++) { for (let u = 0; u < w; u++) { constraints.push([ particles[index(u, v)], particles[index(u, v + 1)], restDistance ]); constraints.push([ particles[index(u, v)], particles[index(u + 1, v)], restDistance ]); } } for (let u = w, v = 0; v < h; v++) { constraints.push([ particles[index(u, v)], particles[index(u, v + 1)], restDistance ]); } for (let v = h, u = 0; u < w; u++) { constraints.push([ particles[index(u, v)], particles[index(u + 1, v)], restDistance ]); } // While many systems use shear and bend springs, // the relaxed constraints model seems to be just fine // using structural springs. // Shear // const diagonalDist = Math.sqrt(restDistance * restDistance * 2); // for (v=0;v Math.random() * (i & 1 ? voronoiParams.height : voronoiParams.width) ); const colorIdxs = Int8Array.from( { length: voronoiParams.n }, (_, i) => Math.random() * colorPalette.length ); const velocities = new Float64Array(voronoiParams.n * 2); const voronoi = new d3.Delaunay(positions).voronoi([ 0, 0, voronoiParams.width, voronoiParams.height ]); const canvas = DOM.canvas(voronoiParams.width, voronoiParams.height); const ctx = canvas.getContext('2d'); ctx.strokeStyle = 'black'; //colorPalette[0]; ctx.lineWidth = 2; const clothTexture = new THREE.CanvasTexture(ctx.canvas); function simulateVoronoi() { const { n, margin, velocityFactor1, velocityFactor2 } = voronoiParams; ctx.save(); ctx.fillStyle = '#FFF'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); for (let i = 0; i < n; ++i) { ctx.beginPath(); ctx.fillStyle = colorPalette[colorIdxs[i]]; voronoi.renderCell(i, ctx); ctx.fill(); const x = i << 1; const y = x + 1; positions[x] += velocities[x]; positions[y] += velocities[y]; if (positions[x] < -margin) positions[x] += width + margin * 2; else if (positions[x] > width + margin) positions[x] -= width + margin * 2; if (positions[y] < -margin) positions[y] += height + margin * 2; else if (positions[y] > height + margin) positions[y] -= height + margin * 2; velocities[x] += velocityFactor1 * (Math.random() - 0.5) - velocityFactor2 * velocities[x]; velocities[y] += velocityFactor1 * (Math.random() - 0.5) - velocityFactor2 * velocities[y]; } ctx.beginPath(); voronoi.render(ctx); ctx.stroke(); ctx.fillStyle = 'black'; //colorPalette[0]; ctx.beginPath(); voronoi.delaunay.renderPoints(ctx); ctx.fill(); voronoi.update(); } function init() { // scene scene = new THREE.Scene(); scene.background = new THREE.Color(0xcce0ff); scene.fog = new THREE.Fog(0xcce0ff, 500, 10000); // camera camera = new THREE.PerspectiveCamera(20, width / height, 1, 10000); camera.position.set(1000, 50, 1500); // lights scene.add(new THREE.AmbientLight(0x666666)); const light = new THREE.DirectionalLight(0xdfebff, 1); light.position.set(50, 200, 100); light.position.multiplyScalar(1.3); light.castShadow = true; light.shadow.mapSize.width = 1024; light.shadow.mapSize.height = 1024; const d = 300; light.shadow.camera.left = -d; light.shadow.camera.right = d; light.shadow.camera.top = d; light.shadow.camera.bottom = -d; light.shadow.camera.far = 1000; scene.add(light); // cloth material const loader = new THREE.TextureLoader(); clothTexture.anisotropy = 16; const clothMaterial = new THREE.MeshLambertMaterial({ map: clothTexture, side: THREE.DoubleSide, alphaTest: 0.5 }); // cloth geometry clothGeometry = new THREE.ParametricBufferGeometry( clothFunction, cloth.w, cloth.h ); // cloth mesh object = new THREE.Mesh(clothGeometry, clothMaterial); object.position.set(0, 0, 0); object.castShadow = true; scene.add(object); object.customDepthMaterial = new THREE.MeshDepthMaterial({ depthPacking: THREE.RGBADepthPacking, map: clothTexture, alphaTest: 0.5 }); // ground const groundTexture = loader.load(groundTextureUrl); groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping; groundTexture.repeat.set(25, 25); groundTexture.anisotropy = 16; groundTexture.encoding = THREE.sRGBEncoding; const groundMaterial = new THREE.MeshLambertMaterial({ map: groundTexture }); let mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry(20000, 20000), groundMaterial ); mesh.position.y = -250; mesh.rotation.x = -Math.PI / 2; mesh.receiveShadow = true; scene.add(mesh); // poles const poleGeo = new THREE.BoxBufferGeometry(5, 375, 5); const poleMat = new THREE.MeshLambertMaterial(); mesh = new THREE.Mesh(poleGeo, poleMat); mesh.position.x = -125; mesh.position.y = -62; mesh.receiveShadow = true; mesh.castShadow = true; scene.add(mesh); mesh = new THREE.Mesh(poleGeo, poleMat); mesh.position.x = 125; mesh.position.y = -62; mesh.receiveShadow = true; mesh.castShadow = true; scene.add(mesh); mesh = new THREE.Mesh(new THREE.BoxBufferGeometry(255, 5, 5), poleMat); mesh.position.y = -250 + 750 / 2; mesh.position.x = 0; mesh.receiveShadow = true; mesh.castShadow = true; scene.add(mesh); const gg = new THREE.BoxBufferGeometry(10, 10, 10); mesh = new THREE.Mesh(gg, poleMat); mesh.position.y = -250; mesh.position.x = 125; mesh.receiveShadow = true; mesh.castShadow = true; scene.add(mesh); mesh = new THREE.Mesh(gg, poleMat); mesh.position.y = -250; mesh.position.x = -125; mesh.receiveShadow = true; mesh.castShadow = true; scene.add(mesh); // renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); renderer.outputEncoding = THREE.sRGBEncoding; renderer.shadowMap.enabled = true; // controls const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.maxPolarAngle = Math.PI * 0.5; controls.minDistance = 1000; controls.maxDistance = 5000; return renderer.domElement; } // let lastRequest; function animate(now) { lastRequest = requestAnimationFrame(animate); simulateCloth(now); simulateVoronoi(); clothTexture.needsUpdate = true; render(); } function render() { const p = cloth.particles; for (let i = 0, il = p.length; i < il; i++) { const v = p[i].position; clothGeometry.attributes.position.setXYZ(i, v.x, v.y, v.z); } clothGeometry.attributes.position.needsUpdate = true; clothGeometry.computeVertexNormals(); renderer.render(scene, camera); } const container = html`

`; container.appendChild(init()); animate(0); invalidation.then(() => cancelAnimationFrame(lastRequest)); return container; }