Comments (8)
I took a crack at this by taking the same approach that this person did in their repo, where this is the commit they migrate from raiper3d-compat to the wasm build.
Applying the changes in that repo - mainly adding wasm & top level await plugins to vite.config, and then refactoring all the imports in the library - seemed to make the demo work successfully with the WASM build. Problem is, the wasm build doesn't seem to play nice with vitest, as whenever I changed any of the test imports to use the WASM build I got the following error:
Error: Failed to resolve entry for package "@dimforge/rapier3d". The package may have incorrect main/module/exports specified in its package.json.
I believe this is due to an incompatibility with the vite-wasm-plugin and the vitest environment, as detailed in this issue.
I have made a draft PR for visibility of the issue if it is helpful, as I'm not sure how to proceed from here: #385
from react-three-rapier.
Indeed @isaac-mason, I had the same idea. Ideally one could choose something like import { Physics } from '@react-three/rapier/wasm'
if one's setup supports it.
I haven't thought too much about how that could work, but in general since everything is created via factories coming from the world
instance, it might not be too painful to switch out just the core context with the wasm equivalent π€
from react-three-rapier.
Using the -compat
version shouldn't affect determinism. Beyond a small difference in how the library is initialised, there aren't any functional differences.
-compat
is the exact same wasm, just encoded as a base64 string, rather than as a separate wasm file
from react-three-rapier.
I did a little asking on the Rapier Discord. People seem to be using the non-compat packages successfully with Webpack 5, using a config like the following:
const path = require('path');
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: 'auto',
},
experiments: {
asyncWebAssembly: true
}
}
module.exports = (env, argv) => {
if (argv.mode === 'development') {
config.mode = 'development';
config.output.filename = 'physics.debug.js';
config.output.webassemblyModuleFilename = 'rapier3d.debug.wasm';
}
if (argv.mode === 'production') {
config.mode = 'production';
config.output.filename = 'physics.js',
config.output.webassemblyModuleFilename = 'rapier3d.wasm';
}
return config;
};
Maybe we can reconstruct a similar setup for Vite. Vite seems to have a maintained plugin here:
https://github.com/Menci/vite-plugin-wasm
from react-three-rapier.
Thanks for spending time on this @balraj-johal! I had a very brief look at your PR -
In my mind, ideally we would have 2 flavours of @react-three/rapier
- one that still uses @dimforge/rapier3d-compat
, and a new one that uses @dimforge/rapier3d
(which has the external wasm file).
I think maintaining a flavour that doesn't require folks to set up a wasm friendly build config is important for keeping the library accessible. Otherwise, I fear we're going to have a lot of folks sticking on the old versions.
I'm not exactly sure how this should look, there's a few ways to approach it. e.g.
- two separate packages
- one package with entrypoints
- one package with support for both
@dimforge/rapier3d
and@dimforge/rapier3d-compat
+ tree shaking support to remove the unused dependency
That last one could be interesting, as it could solve some problems around how we handle this with respect to the new addons package.
This is a bit of a tricky problem to solve, but I think it's worth solving π
from react-three-rapier.
has this issue received any more traction? would like to not use the compat variation of rapier with react-three, so my bundle size isn't so bloated upfront. thanks!
from react-three-rapier.
another question i just realized as well: does using the -compat
version prevent the deterministic claim that rapier has? the way i read it required using the wasm variant, but i might've misunderstood that section of the documentation
from react-three-rapier.
awesome news! thanks for the clarification
from react-three-rapier.
Related Issues (20)
- RigidBody Colliders are not updated. HOT 2
- Colliders on PathExtrusionGeometry
- Ghost RigidBody after using setNextKinematicRotation HOT 2
- Does react-three-rapier support RN app? HOT 10
- <CuboidCollider /> component doesn't get rerender! HOT 2
- Can i get the complete control of "when Rapier does run"? HOT 1
- Collider Scale and Position to RigidBody having no effect HOT 4
- Website is broken. HOT 2
- Some Demos are laggy in Edge browser. Is it only me? HOT 3
- PrismaticJointParams donβt match up with usePrismaticJoint HOT 3
- How can I apply RigidBody to extrudeGeometry? HOT 1
- Restore world from snapshot HOT 3
- How i can load RigidBody in order HOT 2
- How to apply forces to dynamically created RigidBodies? HOT 1
- Ball Collider Fails to Interact with HeightfieldCollider in React Three Rapier
- CollisionPayload - event and other types not directly available. HOT 5
- is there an option to recompute the world base on fiber's scene change?
- Make Rapier instance available outside React/hooks HOT 1
- Suggestion: 'Inverted Collider' Option HOT 2
- One-way-platforms by adding PhysicsHooks to world.step issue
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-three-rapier.