rapier.js icon indicating copy to clipboard operation
rapier.js copied to clipboard

about ams.js version of rapier

Open 313364973 opened this issue 3 years ago • 3 comments

My js environment is not support for webassembly ,but I still want use rapier。 So is it posible to compile webassembly version to ams.js version。 If so and the Cross-platform determinism feature of the ams.js version still work? thanks a lot

313364973 avatar Oct 21 '22 03:10 313364973

Compiling to asm.js should be possible. But I never attempted this, so I’m not sure what kind of output you will get by doing so. I’m pretty sure that the typescript wrappers from rapier.js wouldn’t work out-of-the box, so you may end up with a much lower-level API.

The cross-platform determinism feature should still work as long as you enable that feature when building rapier.

sebcrozet avatar Oct 26 '22 08:10 sebcrozet

This is the most relevant, existing issue on the repo to post this. Followed the documentation at Getting started > Using Rapier without a bundler, attempting to use rapier.js without building a node app. Instead I want to use rapier.js as a locally stored JavaScript library. Here are some of my attempts and associated error messages. If I am having these issues, then likely others are as well.

Here is the raw HTML:

<!-- PASS. -->
<script>console.log("Test Javascript compilation in HTML browser: PASS.");</script>

<!-- ERROR: Uncaught SyntaxError: Cannot use import statement outside a module (at index.html:22:7) -->
<!-- <script>
    import RAPIER from 'https://cdn.skypack.dev/@dimforge/rapier3d-compat';
    console.log("Test rapier3d module CDN import: PASS.");

    RAPIER.init().then(() => {
        // Run the simulation.
    });

    // OR using the await syntax:
    async function run_simulation() {
        await RAPIER.init();
        // Run the simulation.
    }
</script> -->

<!-- ERROR: test.js:2 Uncaught (in promise) TypeError: Failed to resolve module specifier '@dimforge/rapier3d'. The base URL is about:blank because import() is called from a CORS-cross-origin script. -->
<!-- <script src="test.js"></script> -->

<!-- ERROR: Uncaught (in promise) TypeError: Failed to resolve module specifier '@dimforge/rapier3d' -->
<!-- <script>
  console.log("Test rapier3d module local import: PASS.");
  import('@dimforge/rapier3d').then(RAPIER => {
    // Use the RAPIER module here.
    let gravity = { x: 0.0, y: -9.81, z: 0.0 };
    let world = new RAPIER.World(gravity);
  
    // Create the ground
    let groundColliderDesc = RAPIER.ColliderDesc.cuboid(10.0, 0.1, 10.0);
    world.createCollider(groundColliderDesc);
  
    // Create a dynamic rigid-body.
    let rigidBodyDesc = RAPIER.RigidBodyDesc.dynamic()
            .setTranslation(0.0, 1.0, 0.0);
    let rigidBody = world.createRigidBody(rigidBodyDesc);
  
    // Create a cuboid collider attached to the dynamic rigidBody.
    let colliderDesc = RAPIER.ColliderDesc.cuboid(0.5, 0.5, 0.5);
    let collider = world.createCollider(colliderDesc, rigidBody);
  
    // 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, position.z);
  
      setTimeout(gameLoop, 16);
    };
  
    gameLoop();
  })
</script> -->

<!-- NO ERROR, NO COMPILE. -->
<!-- <script src="/path/to/node_modules/rapier/build/rapier.js">
  console.log("Test rapier3d module local import: PASS.");

  function run_simulation() {
    let gravity = new RAPIER.Vector2(0.0, -9.81);
    let world = new RAPIER.World(gravity);

    // Create the ground
    let groundRigidBodyDesc = new RAPIER.RigidBodyDesc(RAPIER.BodyStatus.Static);
    let groundRigidBody = world.createRigidBody(groundRigidBodyDesc);
    let groundColliderDesc = RAPIER.ColliderDesc.cuboid(10.0, 0.1);
    world.createCollider(groundColliderDesc, groundRigidBody.handle);

    // Create a dynamic rigid-body.
    // Use "static" for a static rigid-body instead.
    let rigidBodyDesc = new RAPIER.RigidBodyDesc(RAPIER.BodyStatus.Dynamic)
      .setTranslation(0.0, 1.0);
    let rigidBody = world.createRigidBody(rigidBodyDesc);

    // Create a cuboid collider attached to rigidBody.
    let colliderDesc = RAPIER.ColliderDesc.cuboid(0.5, 0.5)
      .setDensity(2.0); // The default density is 1.0.
    let collider = world.createCollider(colliderDesc, rigidBody.handle);

    // Game loop. Replace by your own game loop system.
    let gameLoop = () => {
      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();
  }

  RAPIER.init().then(run_simulation);
</script> -->

And here is the test.js file from above, copied from the documentation:

// console.log("Test rapier3d module local import: PASS.");
import('@dimforge/rapier3d').then(RAPIER => {
    // Use the RAPIER module here.
    let gravity = { x: 0.0, y: -9.81, z: 0.0 };
    let world = new RAPIER.World(gravity);

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

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

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

    // 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, position.z);

    setTimeout(gameLoop, 16);
    };

    gameLoop();
})

// import RAPIER from 'https://cdn.skypack.dev/@dimforge/rapier3d-compat';
// console.log("Test rapier3d module CDN import: PASS.");
// 
// RAPIER.init().then(() => {
//     // Run the simulation.
// });
// 
// // OR using the await syntax:
// async function run_simulation() {
//     await RAPIER.init();
//     // Run the simulation.
// }

The Browser Parsing Demo is working in a local HTML file when built with yarn. Will update progress here, hoping it saves others time.

robotjsorg avatar Jul 28 '23 14:07 robotjsorg

The Browser Parsing Demo is working in a local HTML file when built with yarn. Will update progress here, hoping it saves others time.

This is related terminology: https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import

Basically, trying to load a 3d rapier.js scene without running http-server or a bundler, is the best way I can say it.

robotjsorg avatar Aug 09 '23 18:08 robotjsorg