GN⁺: HN에 공개: JavaScript로 2천만 개 입자 시뮬레이션
(dgerrells.com)자바스크립트의 속도는 얼마나 빠를까? 2천만 개의 입자 시뮬레이션
도전 과제
- 휴대폰에서 CPU만 사용하여 60fps로 1,000,000개의 입자를 시뮬레이션하는 것
첫 번째 시도
- GPU를 사용하지 않고 CPU만 사용하여 자바스크립트로 입자를 시뮬레이션
- 자바스크립트의 배열은 항상 연속적인 데이터 배열이 아님
- TypedArray를 사용하여 메모리를 연속적으로 유지
첫 번째 구현
- Web Workers를 사용하여 멀티스레딩 구현
- SharedArrayBuffer를 사용하여 메모리를 공유
- 입자 데이터를 32비트 부동 소수점 숫자로 저장
- ImageData 객체를 사용하여 각 입자를 화면에 픽셀로 렌더링
두 번째 시도
- 입력 데이터를 작업자에게 전달하여 상호작용 추가
- 화면의 터치 포인트로 입자가 끌리도록 중력 근사치를 사용
세 번째 시도
- 작업자가 픽셀을 그리도록 하여 모든 CPU 코어를 더 많이 사용
- 메모리 사용량 증가를 감수하고 더 많은 속도 향상 기대
네 번째 시도
- 렌더링이 완료될 때까지 스레드 간의 동기화를 위해 메시징 사용
- flickering 문제 해결
다섯 번째 시도
- 더블 버퍼링을 사용하여 렌더링 중에 작업자가 다음 프레임을 준비할 수 있도록 함
- 메모리 사용량 증가
여섯 번째 시도
- 입자가 시작 위치로 돌아오도록 하는 새로운 상호작용 아이디어 추가
- 입자의 시작 위치를 저장하기 위해 2개의 숫자 추가
GN⁺의 정리
- 이 기사는 자바스크립트로 대규모 입자 시뮬레이션을 구현하는 방법을 설명함
- TypedArray와 Web Workers를 사용하여 CPU 성능을 최대한 활용하는 방법을 다룸
- 멀티스레딩과 메모리 관리의 중요성을 강조함
- 입자 시뮬레이션의 상호작용성을 높이기 위한 다양한 시도를 보여줌
- 비슷한 기능을 가진 프로젝트로는 Three.js와 Babylon.js가 있음
Hacker News 의견
-
블로그에 시뮬레이션을 직접 삽입하는 것을 제안함
- 오래된 휴대폰에서도 잘 작동하도록 값 조정 필요성 언급
- 기사 상단에 링크를 추가하는 것도 좋은 방법임
- ciechanow.ski 사이트를 예시로 제시함
- 과거에는 모든 웹사이트가 멋진 인터랙티브 요소를 포함했음을 언급함
-
WebGPU 없이도 GPU에서 파티클 시뮬레이션을 실행할 수 있다고 언급함
- 예시 링크 제공: 링크
-
모바일에서의 데모가 매우 인상적임을 언급함
- 데모 링크 제공: 링크
-
파티클 데이터를 단일 JS 숫자로 인코딩할 수 있는지 질문함
- x, y, dx, dy를 32비트 부동소수점으로 표현하는 방법에 대해 논의함
- JS의 MAX_SAFE_INTEGER 범위 내에서 데이터를 표현할 수 있는 가능성을 탐구함
- 데이터 인코딩/디코딩이 메모리 절약보다 느릴 수 있음을 언급함
-
Atomics API에 대한 질문 제기
- Atomics API가 프로미스를 사용하지 않는다고 언급함
- waitAsync를 제외하고는 프로미스를 사용하지 않음을 설명함
- 관련 링크 제공: 링크
-
거의 2천만 개의 파티클을 다루는 시뮬레이션 언급
- 관련 링크 제공: 링크
-
비디오가 멋지지만 MacOS Chrome 데스크탑에서 코드샌드박스 링크가 작동하지 않음을 언급함
- SharedArrayBuffer 정의되지 않음 오류와 CORS 오류 발생
-
UI 팀에게 JS의 빠른 성능을 보여주고 싶다고 언급함
- 특히 잘 작성된 JS는 매우 빠름
-
작성자의 뛰어난 엔지니어링과 훌륭한 글에 감사함
- 많은 팬을 얻었음을 언급함
-
비슷한 실험을 통해 많은 파티클을 기본 물리 시뮬레이션으로 처리한 경험을 공유함
- 관련 링크 제공: 링크
-
chrome://tracing이 더 많은 인사이트를 제공할 수 있음을 언급함
- 관련 링크 제공: 링크