Table of contents
This is an example created by frankieali with my adaptation for importmap. See the original example: https://playground.babylonjs.com/#JL3MT8#5, and issue.
Sandboxes:
GitHub - 8Observer8/debug-render-by-frankieali-rapier3dcompat-rollup-babylonjs-js This example contains an instruction how to build it with Rollup for Debug and Release modes. I use importmap with rapier3D-compat to make bundles with Rollup. This allows me to simply copy files to Playgrounds and save space on my laptop because I don’t have to install NPM packages for every example.
5 Likes
The main developer of the Rapier physics engine showed here examples of drawing colliders using Pixi.js (for rapier2d) and Three.js (for rapier3d): Add basic debug-render support by sebcrozet · Pull Request #119 · dimforge/rapier.js · GitHub People started adding examples of how to draw colliders for this physics engine using PlayCanvas, Canvas2D API and so on.
1 Like
I updated a step-by-step instruction in the README.md file on GitHub to build a project using Rollup and uglify-js:
- Install these packages globally with the command:
npm i -g http-server rollup uglify-js
- Run http-server in the project directory:
http-server -c-1
Note. The -c-1 key allows you to disable caching.
- Start development mode with the following command:
npm run dev
Note. Rollup will automatically keep track of saving changes to files and build a new index.js file ready for debugging. You can debug your project step by step in the browser by setting breakpoints.
-
Go to the browser and type the address: localhost:8080/index.html
-
Create a compressed file ready for publishing. Stop development mode, for example, with this command Ctrl + C in CMD, if it was launched before and enter the command:
npm run release
Note. After this command, Rollup will create a compressed index.js file. Compression is done using the uglify-js package.
I don’t like rapier because it contains this issue: The bounce of the ball between the left racket and the wall · Issue #240 · dimforge/rapier.js · GitHub
Fox example, box2d/core doesn’t have it. I wrote my simple version of Pong game very quickly - in 2-3 days from scratch in my spare time. But I would spend a lot of time to get around that issue.
Added. My info above is wrong. Box2D behaves exactly the same way:
1 Like
Perhaps I understood the problem and solved it. These local coordinate axes are very large. This means that the engine does not work with its size, so it starts to work incorrectly. For example, the Box2D documentation states that object sizes should be between 0.1 and 10.
I rewrote my example in Pixi.js. Picked up the normal size of the coordinate axes. I tried to adjust the racket close to the ball, but I don’t see this problem:
This code prints normal now when the collision occurs:
const eventQueue = new RAPIER.EventQueue(true);
function render() {
requestAnimationFrame(render);
world.step(eventQueue);
eventQueue.drainCollisionEvents((handle1, handle2, started) => {
/* Handle the collision event. */
// console.log(handle1);
world.narrowPhase.contactPair(handle1, handle2, (manifold, flipped) => {
console.log(manifold.normal());
});
});
debugDrawer.drawLines();
renderer.render(stage);
debugDrawer.clear();
}
The normal is needed in rapier, because it registers even such collisions when the ball flies very close, but does not bounce off the racket. But, for example, in Box2D-WASM such collisions are ignored. I don’t like it in rapier.
No, the problem was not completely solved by setting pixelPerMeter from 30 to 3 (and the ball’s velocity to (10, 0)) in the first example in pure WebGL 1.0. The ball bounces off the racket at the beginning and doesn’t bounce later: Plunker - [ball colliders ones and doesn't collider after] The Pong game using rapier2d-compat, pure WebGL 1.0, and JavaScript
Issue: The bounce of the ball between the left racket and the wall · Issue #240 · dimforge/rapier.js · GitHub
I don’t like rapier because it contains this issue : The bounce of the ball between the left racket and the wall · Issue #240 · dimforge/rapier.js · GitHub
My info above is wrong. Box2D behaves exactly the same way:
box2d-wasm:
rapier2d.js:
1 Like
Not exactly the same. The BeginContact() method in Box2D is only called once per contact, while in rapier2d.js the contact handler is called on every frame for the duration of the contact. But this is a completely different topic, which is not related to this topic.