How can I import unity prefabs into babylon.js?

I have recently bought a character set from unity asset store. However I can’t figure it out how I can import these characters into babylon.js. There is a single fbx file I exported but it has meshes for all characters and their items. (100s of meshes) I want to export characters which are in separate unity prefab files.
I found this exporter however the position of the meshes are quite wrong:

I am kind of confused about how I should do this. Any help and advice is appreciated.

Hi. Import your fbx in something like blender and export what you want in babylon or gltf.

Thank you @kvasss. I managed to export characters from Blender. However characters are all white although I can see they have materials assigned to. It is still progress so thank you :slight_smile:

Hi @Nil. Do you have any special settings tricks you used either on the FBX export from Unity, on the FBX import to Blendr, and/or on the GLTF export from Blendr? I have been playing with the same - and see that lots of stuff gets tweaked (meshes twisted around) - which I’m assuming is a matter of various configurations, since everything looks fine in Unity and fine in FBX viewer.

The asset I bought from the Unity asset store has a single fbx file which has all the meshes. I just imported that single fbx file into blender. Once you import the unity project, you can see all the files in the Unity package manager. When I exported the fbx file from Unity, it had some problems. I didn’t use the export inside the Unity instead I just copy paste the fbx file.

I fixed my material problems by switching to material preview and changing material base colour and some other properties in blender. (metallic, specular, roughness etc.)

I used mixamo to babylon tutorial to add animations and exporting models in babylon file format:

It is very important to select all meshes whilst applying transformations in blender, otherwise animations and models are end up being distorted.
I was getting material related problems when I tried to export as babylon file. By not using nodes in the materials fixed that error. However probably there might be a better way to do it. I don’t have any textures it is just lowpoly models with materials.

Apart from things above I didn’t do anything else. I hope this helps.

Hi guys,

I use this command line tool to convert from fbx to gltf/glb, which can then be loaded by babylon.

Install it globally
npm i fbx2gltf -g
Then convert a single fbx (-b option converts to glb, otherwise default to gltf)
FBX2glTF -b <file.fbx> <output.glb>

I wrote a script to call the above command to batch convert multiple fbx in a folder to glb. I think it is faster than manually exporting it in Blender.

2 Likes

Ohmygosh! This is amazing. Thanks for the tip.
I banged my head against the wall trying to get it to work from the command line (couldn’t find FBX2glTF to be able to run it; although can find every other globally installed npm package; and tried a million different path setting fixes).

But fired right up when i used it from within a node script - and looks fantastic. Even all the animations are working. Wow.

Hi all. I thought it would be nice to make an app wrapper around the utility that @slin recommended so that other Babylon js makers could convert assets from unity (or any FBX) without all the hassle. It was a little more challenging than i thought, but got it up and running. Just drag a FBX onto the drop area and it’ll give you your GLB in a min or so.

One thing i noticed though is that fbx2gltf doesn’t always give you back the GLB with material baked in. @slin any ideas for that? Are the some flags you use? Currently i’m not using any flags (ooh, actually, maybe i need to use “-b”)

https://convertfbx.web.app/

2 Likes

@bigrig

This is amazing!

Currently i’m not using any flags (ooh, actually, maybe i need to use “-b”)

I use -b option, but nothing else. My models are quite simple low poly models, which do contain texture images and animation. The conversion worked fine for me.

Update: I tested my model in your service. The converted glb loads well in babylon sandbox.

Hm, maybe i’m not exporting from Unity correctly. Are these the settings you use from Unity FBX exporter?

Screenshot here showing Unity, BJ, Blendr.
Texture is present in Unity and in Blendr (as fbx), but not in BJ or blendr) after conversion to GLB

My model was uploaded to adobe mixamo and I exported fbx from mixamo site. I don’t have the slightest design background to know exporting models from these editors. :sob:

Yea, hm, the texture is somehow being lost along the way. Funny thing is that it also doesn’t show up in Autodesk’s FBXViewer… which makes me think there’s something funny with the Unity export side of things.

Well, if anyone has a clue, please let me know! Here are two sample files.

FBX export from Unity & Converted GLB
steg.zip (1.0 MB)

i figured it out. but don’t have a fix.
the issue is that unity doesn’t bake the material in with the fbx - but instead uses the path to wherever it is on local system. i did a ton of research but can’t see a way in unity to bake the material in with the fbx. seems like it used to be possible with FBX Exporter, but not anymore. will do a post on that topic to the forum here.

this works

let fs = require("fs")
const assimpjs = require("assimpjs")()

assimpjs.then((ajs) => {
  // create new file list object
  let fileList = new ajs.FileList()
  fileList.AddFile("zombie", fs.readFileSync("data/models/zombie.fbx"))

 //assimp json (best output)
  let result_assimp = ajs.ConvertFileList(fileList, "assjson")
  fs.writeFileSync("result.json", result_assimp.GetFile(0).GetContent(), "utf8")

  
  //other options
  //gltf2: output paths for images are wrong plus and doesnt include binary files. probably they are the file list buffer but idk
  //glb2: output paths are also wrong, but binary is included. if you right click and convert to gltf inside vscode, then manually fix paths, the cesium viewer works

  // let result_glb = ajs.ConvertFileList(fileList, "glb2")
  // fs.writeFileSync("result.glb", result_glb.GetFile(0).GetContent(), "binary")

  // let result_gltf = ajs.ConvertFileList(fileList, "gltf2")
  // fs.writeFileSync("result_gltf.gltf", result_gltf.GetFile(0).GetContent(), "utf8")

  //gltf v1
  //let result = ajs.ConvertFileList (fileList, 'gltf');
  //let result = ajs.ConvertFileList (fileList, 'glb');

})

the images.uri is the part thats wrong when you do the glb → gltf manual conversion.

here is a pic of a converted fbx displaying properly after manually fixing the path

2 Likes

Ah interesting. Hadn’t seem assimpjs before.
From a user perspective (using my online converter), i suppose that means having the user find the material(s) on their local file system and then upload them along with the FBX.

Then on the server, i’d use assimpjs to re-assemble, zip, and offer back to the user. A little more complicated for the user - but still easier than trying to figure this stuff all out from scratch.

I actually tried your site and it didnt work :(, at least for the zombie in that picture.

have a look at this, its a nextjs app that allows you to give permission to the filesystem. pages/index.js has the goods

I really wish there was something like this that was maintained and for babylon

there is also this to batch run. i havn’t tried it though

and i think this is what you’re trying to go for, but only client side. honestly its probably faster for the user and cheaper (free) for you to do it all on the client.

https://gltf-converter.lewy.blue/

Oh wow. Hadn’t seen any of those projects! Neat. Will explore.

Weird that the converter didn’t work for zombie. Doesn’t look like the fbx uploaded at all… don’t see it on the server. If you didn’t login with Google first, you gotta do that first.

the first time i tried, i wasnt logged in. then, i logged in, still nothing, then i refreshed the page and still nothing. my list of files didnt show up. i wonder if there is some file size limit. just out of curiousity, are you using cloud firestore or realtime db?

Hm. Curious. What is file size?
Did the counter count up to 100%?
Is it just the FBX that you’re uploading?
Can you post the model here so i can try it?

I’m using Firebase Storage to store the files and Firestore (just to store the file names associated to an ID)

its from here (fyrox is rg3d … renamed recently)
.Fyrox-tutorials/tutorial3-bots-ai/data/models at main · FyroxEngine/Fyrox-tutorials · GitHub

basically just nothing happened when i uploaded though. Idk, i wouldn’t worry about it, no sense worrying about it if you can move it to client anyway