개발 · 컴퓨터공학/Physical Simulation

three.js GPGPU SPH lineSegments, gui

파티클 큐브 생성무작위 배열로 설정하였지만, 그래도 cube의 각 cell안에 들어있는 형태로 변경해보자. function spawnParticlesInBox( particleMesh: THREE.InstancedMesh, numToSpawn: THREE.Vector3, // x, y, z로 몇 개씩 스폰할지 설정 spawnCenter: THREE.Vector3, // 스폰할 박스의 중심 particleRadius: number, // 입자의 반지름 spawnJitter: number // 입자가 얼마나 엇나가도록 할지 설정 (jitter)) { let index = 0; for (let x = 0; x 여기서 jitter를 0으로 하고 출력하면, 반듯하게 나온다.다만..

2024. 10. 19. 11:38

개발 · 컴퓨터공학/Physical Simulation

three.js GPGPU SPH 파티클 instanced mesh 생성하기

Unity Fluid Simulationunity로 구현된 SPH fluid simulation을 GPU computation을 three.js 상의 GPGPU를 사용하는 방법으로 구현해볼 것이다. 과정을 하나하나 팔로우 하면서 차근차근해보자. particle class 우선 파티클 객체를 만들어야한다.기존 unity C#의 방식을 참고해서 three.js 에서 이용하는 방식으로 변경하는게많은 부분에서 걸릴 것 같다.  vector3class Particle{ pressure: number; // 4 density: number; // 8 currentForce: vec3}vector3를 선언하는데 벌써 고민이다.gl-matrix의 vec3타입과 three.js의 Vector3 타입이 둘 다 있다...

2024. 10. 18. 11:27

개발 · 컴퓨터공학/Physical Simulation

three.js GPGPU로 SPH 유체 시뮬레이션 개발 계획

three.js GPGPU예전에 공부삼아 unity로 SPH를 구현해본 적이 있다.three.js에서는 shader를 사용하기 위해서 webGL을 사용하지만최근 들어 three.js 에서도 compute shader 연산을 사용할 수 있다는 것을 알았다. 그래서 webGL로 three.js 상에서파티클 시뮬레이션을 구현해보고 가능하다면 webGPU로도 성능향상이 되는지 어떤지 측정해보면 좋겠다.   three.js에서 webgpu를 지원하나?webgpu의 출시나는 three.js를 재작년에 프로젝트로 처음 사용했었다. 한창 작년에 webgpu가 브라우저에서 정식 지원한다는 말을 들었을 때까지는 three.js가 webgl 기반 라이브러리라서, webgpu보다는 퍼like-grapejuice.tistory..

2024. 10. 6. 11:04

개발 · 컴퓨터공학/Physical Simulation

Threejs Cloth Tailor 개발일지 - 물리 시뮬레이션 PhysicsObject class 디버깅, PBD cloth simulation 동작

이전 포스팅 보러가기 물리 시뮬레이션 코드 디버깅하기cloth 객체에서 constraint를 생성하는 부분을 디버깅하면서 어디서부터 잘못되었는지 보자보니까 cloth 객체의 물리 시뮬레이션 필요 요소들이 제대로 초기화가 되지 않은 것 같다 physics object의 초기화 부분을 찾다보니 indices가 0개인 것부터 numTris가 0으로 초기화 되는 것을 확인했다 이 부분은 threejs의 mesh type으로 바꾸는 과정에서 임의로 설정한 부분인데 역시 여기서 문제가 생겼다 공교롭게도 index가 null이라서 indices에 0 배열이 들어간 것이다 즉 threejs의 Mesh형으로 변환하는 것과, 기존 코드에서 object를 parsing할 때 indices 로직이 달라서 생긴 문제다 thre..

2024. 6. 2. 09:38

개발 · 컴퓨터공학/Physical Simulation

PBD cloth simulation 코드 분석 (draw, PhysicsObject, ClothPhysicsObject, updateVertexNormals, register constraints, Cloth class) [Threejs Cloth Tailor 개발일지]

이전 포스팅 보러가기 PhysicsObject이전에 preSolve, solve, postSolve에 대해서 보았으니 나머지 물리 시뮬레이션에 필요한 기능을 보자update vertex normalsvertex normal은 mesh가 눈에 보여질 때 주로 사용된다gpuCanvas.device.queue.writeBuffer( meshBuffers.position.data, 0, cloth.positions, 0, meshBuffers.position.length);gpuCanvas.device.queue.writeBuffer( meshBuffers.normals.data, 0, cloth.normals, 0, meshBuffers.normals.length);여기서는 cloth 객체의..

2024. 5. 26. 09:22

개발 · 컴퓨터공학/Physical Simulation

PBD cloth simulation 코드 분석 (draw, PhysicsObject, ClothPhysicsObject, preSolve, solve, postSolve) [Threejs Cloth Tailor 개발일지]

이전 포스팅 보러가기 PhysicsObject이전에 다루어던 constraint와 collision의 solve, hashing을 이용한 preIntegration 등의 기능들이이 physics object class에서 호출되고 관리된다 결국 시뮬레이션의 큰 흐름을 보기 위해서는 physics object class를 봐야한다 export default abstract class PhysicsObject { ... constructor(mesh: Mesh) { this.numParticles = mesh.positions.length / 3; this.positions = new Float32Array(mesh.positions); this.normals = new Float32Ar..

2024. 5. 25. 09:09