After a months-long battle with trying to get animated models out of 3ds Max and into Zappar with PBR materials I finally got it working this week, and I want to give a huge shout out to Francesca at Zappar support for troubleshooting this with me!
I wanted to document the process here in hopes of helping anyone else who is trying to figure this out. This might get kind of lengthy, but I hope it is useful!
Software used: Substance Suite (for material maps generation), 3ds Max 2020, Atom (any code or text editor will do), Babylon.js 3ds Max Exporter, ZapWorks Studio
Step 1: Getting Started
We start off with our completed model, UV mapped and textured. I generated the materials using Substance Painter, but whatever you normally use will do the trick. The key maps we need are covered in the next step, where we take a look at the material itself.
Step 2: Setting up the Physical Materials in 3ds Max
For this demo let’s focus on one piece of the model, part of the door of this pellet mill. It has two animations, doorOpen and doorClose, which have been set up into animation groups. This could also be a single animation that is later split up in ZapWorks during the import process.
The material type we want to use for doing this is found in the Material Editor under General, and it is a Physical Material. We will be using 5 different maps for making our material: Base Color, Roughness, Metalness, Ambient Occlusion, and Normal. One issue to note that I ran into is to keep a careful eye on how many material maps you need and how that affects your total project size. While it’s true that the Babylon exporter will reduce the number of total maps per material (in this case, the 5 maps to make a 3ds Max material become 3 after the glTF is exported), that can still add up very quickly with large and/or high quality maps. This model has 11 parts to it (each with 3 maps per material), so in order to keep the file size down I had to use 1024x1024 JPG maps (I initially tried 2048 PNGs but the ZapWorks compiler would time out before finishing the project due to the enormous total filesize–oops!).
Most of the maps line up to the Physical Material slots as you might expect, with the possible outlier being that the Ambient Occlusion map goes to the Diffuse Roughness Map slot. Once you have everything set up, apply the material to your model (if it isn’t already) and proceed to the next step.
Step 3: Exporting the Model with Babylon.js
With the piece that you want to export selected, use the Babylon dropdown and choose the “Babylon File Exporter…” option. While the exact settings you use will depend on your particular project and needs, the settings in the screenshot worked reasonably well for this project and could serve as a good starting point for you. Be sure to check that the Model Path is correct (the exporter has a habit of reverting to a previous file name when you open it) and make sure that the Textures Path points to where you want your maps output (these will be generated by Babylon from the maps used in the previous step).
When you are ready to export click either “Export” or “Export & Run” (the only difference being that the latter will also open up the Sandbox on the Babylon.js site and immediately try to run your exported glTF file–this can be good for being sure that the export worked correctly) and wait for the exporter to finish. Ideally this would mean we are ready to move into ZapWorks and do our import, but (at least at the time of this writing) there is one very crucial step that we need to take first…
Step 4: Fixing the glTF File
This is the part that ended up stumping me for the longest time. Static model exports (e.g. pieces with no animation) were importing into ZapWorks just fine, but I kept getting “Unexpected end of JSON input” errors in ZapWorks whenever trying to import models with any animation on them. Even after updating my Babylon.js exporter several times, it still wouldn’t work. A forum post that Francesca found ended up being the missing key to this mystery, though!
The 3ds Max Babylon exporter (at least for me) was excluding a very important piece of information from the animation samplers array. All I had to do was add that back in and it imported into ZapWorks just fine. So, to get that started, for each of the glTF files you export open it up in your code/text editor of choice (I’m using Atom). You only need to do this for the glTF file, not the bin file.
The specific code we are looking for can be found in one of the samplers arrays, and we are specifically looking for the “input” and “output” parameters. You can either search for those directly or search for “samplers” (which will always precede them and might occur fewer times). I always found this code towards the end of my glTF files.
If your glTF files are like mine, they will be missing a key parameter/value pair in between the “input” and “output” parameters, the “interpolation” parameter. Alternatively I saw some posts where folks had the “interpolation” parameter but its value was a number instead of a string value. Either way, what you want to insert between the “input” and “output” parameters in EVERY instance where you find them is, “interpolation”:“LINEAR”. If you miss any one of these you will get the “Unexpected end of JSON input” error in ZapWorks (as I did in creating this demo, ha!). Remember that you only have to do this for any exports that include animation!
Once you have all of your glTF files fixed we are ready for the final step–bringing these into ZapWorks!
Step 5: Importing the Models
The way we use these glTF files (whether they have animations or not) is a little bit different than importing an FBX, POD, or similar format. For each export you should have a .glTF and a .bin file, and you need to drag BOTH of them into the Media Library import field in order for the import to work.
Assuming your glTF file was properly fixed you should see the familiar 3D model import dialog window, and this is where you import your maps that the Babylon.js exporter generated.
Just rinse and repeat until all of the pieces you need are imported and you are good to go! Make sure you have lighting in your scene and then hit that Preview button to test out your new PBR experience!
That’s it! I hope this helps folks and I would like to thank Zappar support (especially Francesca!) one more time for all of their help in figuring this out. Good luck and happy development, everyone!
If you want to check out the final app, just scan this code:
