이 잘 알려지지 않은 자바스크립트 물리학 라이브러리는 제 마음을 사로잡았습니다!

자바스크립트를 사용한 이전 게임 개발 시도에서 나는 항상 물리 엔진 성능에 어려움을 겪었습니다. 나는 항상 matter.js를 기본값으로 사용했습니다. 좋은 문서이고 풍부한 예제가 다른 사용 가능한 라이브러리의 성능 향상보다 중요했습니다. WASM과 WASM이 제공하는 네이티브에 가까운 성능에 대해 처음 알게 되었을 때 매우 기뻤지만, 오랫동안 Box2D는 해당 영역에서 실행 가능한 유일한 선택이었고 사용하는 것이 정말 싫었습니다. 문서가 형편없고 사용하기에 매우 고풍스러운 느낌이 들었습니다.

이제 내 고민은 끝난 것 같다. 새로운 경쟁자인 Rapier.rs가 등장합니다.


Rapier home

Rapier.rs는 javscript 바인딩과 좋은 문서로 WASM으로 컴파일된 녹슨 물리 라이브러리입니다. 약 30분 만에 설정할 수 있었고 앱 성능을 즉각적으로 크게 향상시켰습니다.

레이피어는 더 안정적이었고 수천 개의 더 많은 활성 물리체를 세계에 추가할 수 있었습니다.

연결:

문제 대신 Rapier.rs를 사용한 지난 기사의 예 +300% 성능LIVE

Github repo

활성체
물질 FPS
레이피어 FPS


4500
38
120

6000
21
79

7500
4
60

9000
0 - 충돌
42

10000
0 - 충돌
31

12000
0 - 충돌
22

15000
0 - 충돌
16

js 물리 요구 사항에 대해 Rapier를 고려해야 하는 이유

1. 성능

Javascript는 WASM으로 컴파일된 최적화된 Rust 라이브러리와 비교할 수 없습니다.
WASM is just this fast

2. 문서화

Rapier 페이지는 주요 기능에 대한 좋은 개요, 시작하는 방법에 대한 정보 및 심층 API 설명서를 제공합니다. 이 모든 것은 Rust, Rust+bevy 및 Javascript를 위한 것입니다.

3. 최신 개발자 경험

나는 Rapier API가 작업하기에 매우 직관적이라는 것을 알았고, 몇 안 되는 성능 중에서 단연코 최고의 선택이었습니다. 타이프 스크립트 지원과 함께 제공됩니다. 결과 코드는 읽기 쉽고 추론하기 쉽습니다.

import("@dimforge/rapier2d").then((RAPIER) => {
  // Use the RAPIER module here.
  let gravity = { x: 0.0, y: 9.81 };
  let world = new RAPIER.World(gravity);

  // Create the ground
  let groundColliderDesc = RAPIER.ColliderDesc.cuboid(10.0, 0.1);
  world.createCollider(groundColliderDesc);

  // Create a dynamic rigid-body.
  let rigidBodyDesc = RAPIER.RigidBodyDesc.newDynamic().setTranslation(
    0.0,
    1.0
  );
  let rigidBody = world.createRigidBody(rigidBodyDesc);

  // Create a cuboid collider attached to the dynamic rigidBody.
  let colliderDesc = RAPIER.ColliderDesc.cuboid(0.5, 0.5);
  let collider = world.createCollider(colliderDesc, rigidBody.handle);

  // Game loop. Replace by your own game loop system.
  let gameLoop = () => {
    // Step the simulation forward.
    world.step();

    // Get and print the rigid-body's position.
    let position = rigidBody.translation();
    console.log("Rigid-body position: ", position.x, position.y);

    setTimeout(gameLoop, 16);
  };

  gameLoop();
});

4. 플랫폼 간 결정론 및 스냅샷 생성

서로 다른 시스템 또는 Rapier 배포판(rust/bevy/js)에서 동일한 초기 조건으로 동일한 시뮬레이션을 실행하면 동일한 결과가 나타납니다.

간편한 데이터 저장 및 복원. - world.takeSnapshot로 전체 물리학 세계의 스냅샷을 찍을 수 있습니다. 그 결과 디스크에 저장하거나 네트워크를 통해 전송할 수 있는 Uint8Array 유형의 바이트 배열이 생성됩니다. 그런 다음 let world = World.restoreSnapshot(snapshot); 를 사용하여 스냅샷을 복원할 수 있습니다.

무엇 향후 계획?

나는 Rapier와 계속 일하게 되어 기쁘지만 그 사이에 적절한 물리학 벤치마크가 필요하다고 생각합니다. 내가 연구를 하면서 발견한 것들은 약간 오래된 것이었습니다.

기타: Vite 사용 오류

내 Vite 프로젝트에 Rapier를 추가하는 데 몇 가지 문제가 발생했습니다. 해결책은 여기에서 찾을 수 있습니다. https://github.com/dimforge/rapier.js/issues/49