Made some runtime LOD scripts for PlayCanvas (auto mesh simplification, no build step)

Useful Resources
,
1

Hey everyone :wave:

I’ve been using PlayCanvas for a while now and honestly I love how quickly you can get something running in the browser. One thing I kept missing though was LOD. I didn’t want to make LOD models by hand for every mesh, so I ended up writing a few scripts that do it for me at runtime. Figured I’d share them here in case someone else finds them useful!

GitHub: GitHub - 5hyuns/playcanvas-runtime-lod: Runtime LOD (level of detail) for PlayCanvas: automatic mesh simplification with meshoptimizer and camera-distance switching. Drop-in Editor scripts, no build step. · GitHub

lod-switching-demo (1)

Basically, when the app starts it simplifies your meshes with meshoptimizer and then swaps between the levels depending on how far the camera is. No build step, you just drop the scripts into the Editor and you’re good to go.

In the demo you can switch to Manual, pick a level and turn on Wireframe or Color by LOD. It’s kind of satisfying watching the triangle count go from ~50k down to ~5k :smile:

How to use it:

  1. Upload lod.js, lod-debug-ui.js and meshopt-simplifier.js to your project
  2. In Settings > Scripts Loading Order, put meshopt-simplifier.js before lod.js
  3. Add lodScript to any entity with a render component (lodDebugUI too if you want the little debug panel)

You can tweak the distances and how much each level gets reduced right from the script attributes. There’s also a small API if you want to control it from code:

const lod = entity.script.lodScript;
lod.setManualMode(true);
lod.setLODLevel(2);
console.log(lod.getCurrentTriangleCount());

A couple of things to keep in mind: it only swaps the index buffer (vertex buffers stay the same), and entities that share the same render asset will also share the same LOD level.

It’s MIT licensed, so feel free to use it however you like. Any feedback or ideas would be really appreciated. And if you find a bug, please let me know!

Thanks for reading :blush:

3 Likes