Webpack for packed by feature

Hey all,

I’m about to create a way to import meshes from our local folder, instead of a glob mesh folder, but I just want to ensure that I’m not building something that’s already knewed by the community!

What I’m talking about its this:


Inside Player.ts I would have something like this:
const player = await SceneLoader.ImportMeshAsync('', './', 'Player.babylon', scene);

I’m used to work like this and IMO is better for organization, but I didn’t found anything that does the trick working with webpack so I’m about to create it (despite the fact I never done something like this from scratch), but before start it, I just want to make sure that I’m not building something that already exists!

So, does something like this already exists?

Not that I’m aware of :thinking: Through I’ve never tried, .babylon files are just JSONs, so wouldn’t a default webpack json loader work? @RaananW knows much more webpack than me through so I’ll defer to his knowledge :slight_smile:

There are different ways of solving this using webpack.

  1. Use the Copy Plugin to copy all assets to a static-served directory (i.e. - where the index.html file is).
  2. import model from “./Player.babylon”; at the beginning of the typescript file, and use the returned value as the URL to load (using the URL loader that webpack supports)
  3. Move your assets to a static assets library instead of next to the .ts file

Personally? I like option 3, as it allows you to optimize your deployment. But you can do the same with any of the other options TBH.

No need to reinvent the wheel. Just need to maintain a proper structure.


I undestand, but I will create it anyway, Im doing it right now btw!

Is there a place that I can share it for other babylon users? Not sure if it fits on demos and projects :thinking:

sure, that would probably be the right place for this :slight_smile:

1 Like

If you want to use webpack to do this, which i personally dont like, but it does have a couple benefits. For example, if you have a jumble of assets and only want to move the ones you actually use in your app or you want to hash the file names to cache bust.

const player = await SceneLoader.ImportMeshAsync(‘’, ‘./’, ‘Player.babylon’, scene);

let PlayerModelURL = require(“./src/assets/Player.babylon”)
const player = await SceneLoader.ImportMeshAsync(‘’, ‘./’, PlayerModelURL, scene);

then add the .babylon file type to the url-loader’s config. you can also configure how the output is hashed here

PlayerModelURL will be transformed by webpack to the string uri of the output location. you can also configure file-loader to load very small files as an inline data uri , with a size-configurable fallback to the url loader. note that this couples your code to webpack. same with vite, they have a different syntax. conceptually similar to importing css into a javascript file

Hey @jeremy-coleman I tried the import approach at first but I ended up with two issues.

The first issue was that the url was stacking on the main one, leading to this request http://localhost:8080/models/http://localhost:8080/models/brave.babylon

And the other issue was that the textures wasnt being copied to dist folder with the model :confused:

ah. yea the external textures would need something… there’s actually already some gltf webpack plugins that will dedupe textures. if i were to approach this, i’d do it as a transform before webpack just using node transform streams or vinyl streams (the gulp stream format). just looking at webpack plugins makes me rage… its like compile.blah.tap.wtf.why.so.long(callback => holy shit ima off myself if theres another nested prop).

Yeah its a mess, but I’m about to finish it, as soon as I finish its v1 I share it!

cool. i went through my bookmarks, here are some links that may be helpful. they are both updated forks of the more commonly found ones.

.GitHub - jpweeks/gltf-loader: A Webpack loader for glTF assets. Automatically bundles all referenced files.
.GitHub - MozillaReality/gltf-webpack-loader at fix/relative-and-output-paths