Next.js Discord

Discord Forum

Using Wasm with NextJs

Unanswered
Atlantic cod posted this in #help-forum
Open in Discord
Atlantic codOP
hi, I was wondering how I could use wasm with nextjs, google wasn't any help so here I am.

I am currently using threejs to render my 3d scenes but performance hit is a real problem on mobile devices, just mobiles. It's still workable but I have plans for heavy renderings in the future so it'll be better to just start from now.

webpack/async/experimentals/bluhbluh.... like I said google was no help, so I'm up for any suggestions that work.

I'm on nextjs 13.5.4 & plan on using rust, bevy engine to render my scenes, if it's possible to use wasm in the first place.

32 Replies

Giant panda
In your next.config.mjs file you just enable the WASM flags then you can call into your entrypoint of the module. For Bevy I think it was just a single function to attach to a canvas or, it has been a year or so since last I did it using Bevy.
  webpack: function (config) {
    config.experiments = {
      ...config.experiments,
      asyncWebAssembly: true,
      syncWebAssembly: true
    };
    return config;
  }
Bevy itself should have some examples on how to call into the module if I am not mistaken.
Marchy
I'm curious because I'm using r3f with next and trying to avoid wasm - what performance issues are you seeing on mobile? I get a max of 60fps on mobile and 144fps on desktop
@Marchy I'm curious because I'm using r3f with next and trying to avoid wasm - what performance issues are you seeing on mobile? I get a max of 60fps on mobile and 144fps on desktop
Atlantic codOP
navigation lag, not much but you know..... I use 'raw' three js, tried r3f once... but didn't stick to it, I write raw shaders so I've just stuck to 3js.. framerate's fine so that's not a problem;
I'm trying to use wasm cause I have plans to work with bevy.
@Giant panda In your `next.config.mjs` file you just enable the WASM flags then you can call into your entrypoint of the module. For Bevy I think it was just a single function to attach to a canvas or, it has been a year or so since last I did it using Bevy. js webpack: function (config) { config.experiments = { ...config.experiments, asyncWebAssembly: true, syncWebAssembly: true }; return config; }
Atlantic codOP
alright thanks, webpack isn't screaming at me now, but you got any example repo or anything? cause I'm having problem while rendering the thing. It just wouldn't work, it's compiling just fine but no output.
I'll try again tomorrow morning, gotta get some sleep. again thanks
Marchy
I've been using GLTF's in combination with tunnel-rat and R3F and have been getting some decent performance with webworkers. Also you can do raw glsl and frag/vert shaders
I have like 15 repos where I've been testing things individually but I need to put them together 😂
@Marchy I've been using GLTF's in combination with tunnel-rat and R3F and have been getting some decent performance with webworkers. Also you can do raw glsl and frag/vert shaders
Atlantic codOP
ya ya, I just didn't go deeper. It's a pain to use useffect and what not, I'll prolly try out r3f later.
Marchy
Games are one of the few instances where it's more performant to useRef
@Marchy I have like 15 repos where I've been testing things individually but I need to put them together 😂
Atlantic codOP
relatable, just I have all of my experiments in a hardrive lol. why? I donno, just I have
Marchy
https://github.com/TheDormouse/void-reset
This is one I've been working on to make a template for 3js apps in next
Marchy
https://void-reset.vercel.app/
Worth noting that with this method you can mix and match react/html anywhere. You can have multiple canvases displayed on the page sharing the same thread for perf
@Marchy Click to see attachment
Atlantic codOP
noiice, I've never used lighthouse. guess chrome still is the goated one. [I use safari, lol]
Marchy
I'm on a windows machine for right now 😭
@Atlantic cod alright thanks, webpack isn't screaming at me now, but you got any example repo or anything? cause I'm having problem while rendering the thing. It just wouldn't work, it's compiling just fine but no output. I'll try again tomorrow morning, gotta get some sleep. again thanks
Giant panda
Since you mentioned using Safari, there is a bug with shaders, especially when using PBR in Bevy that flat out doesn't work in Safari. Try other browsers to be sure.
@Marchy https://void-reset.vercel.app/
Atlantic codOP
33 constant
@Atlantic cod 33 constant
Marchy
33?? fps?
Oh, I forgot I just enabled frameloop=“demand”
Try spinning it around for a bit and see where it lands
@Marchy 33?? fps?
Atlantic codOP
yeah, mine's m1 macbook sooo
Marchy
... lemme see if mine is charged lol
bc I was getting solid 60 on mobile
@Marchy bc I was getting solid 60 on mobile
Atlantic codOP
mobile's nowadays are straight up whacko, the reason I'm tryna get into 'browser game dev' iis because I wanna target every platform.
every pc, console gamer sh*ts on mobile gamers [me included] so just make it ultra multi platform, just gotta have some chaos
webGPU is going to make it possible tbh
@Giant panda Since you mentioned using Safari, there is a bug with shaders, especially when using PBR in Bevy that flat out doesn't work in Safari. Try other browsers to be sure.
Atlantic codOP
I'm just rendering a div with the result of add(a,b) but it's giving me undefined......
donno.. google is no help, and don't even get started with gpt. soo, try and error, you have any resources?
Marchy
and now that web xr is a think you can make games universally accessible
https://github.com/pmndrs/react-xr
@Marchy webGPU is going to make it possible tbh
Atlantic codOP
yeah, been hearing a lot. lessee, and be prepared