Physically Based Rendering (PBR), 3ds Max, and Babylon.js


#1

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:


GLTF/GLB Recommendations
#2

Hi @bmhuckab,

What a fantastic tutorial! I’m so glad we were able to solve this issue despite the obstacles the Babylon exporter was throwing at you. :wrench:

The images here are really useful for a visual/kinaesthetic learner such as myself; and your presentation was clear and precise - thank you so much for sharing.

Have a wonderful day,
Francesca :blush:


#3

Thank you once again for all of your help! I was happy to put this together and make this post and I really hope it saves other people some time and frustration if they encounter a similar issue. :slight_smile:


#4

Using Cinema 4D to create models and importing them into Zapworks was a very challenging quest. I had never heard of Zappar and I hadn’t used 3D software since 2008.

I was tasked with creating a scavenger hunt game, somewhat similar to how “pokeman go” works. But instead of creatures, it will be about heritage/artifacts objects along with learning activities for each object found.

After much trial and error (over 90 attempts with different configurations, settings, and conversions), and with the amazing insight assistance of Francesca at Zappar, I was able to export a 3D model and import into Zapworks Studio for my company.

This is the process that I used for exporting as fbx:

  1. Create the model - low poly count
  2. Add materials *if you use subdivision, add it with very subtle settings
  3. Connect everything
  4. Remove object (now called “null”) from connect (by dragging down)
  5. delete connect (only showing a single object)
  6. Select actual object
  7. select object from menu above
  8. select object bake
  9. check box single texture, replace objects, change resolution, change format to png, give path (same folder as what you plan to export)
  10. remove any tags in the properties area
  11. remove any material in the materials area (except for the one you created)
  12. select file then export
  13. choose fbx.
  14. select version 6.1 (2010) - works best
  15. Import into Zapworks (versions 2010 will ask for the material) (version 2016 will not ask)
  16. Add the fbx to the asset list, the window will ask for the material that comes with it.
    *if you export as 3ds you will need to add the material to the object inside the object’s properties after importing.

This is the process I used for exporting as 3ds:

1.Export the model as .3ds from Cinema 4D
2.Drag and drop the 3ds file model into the creators3d viewer. It seems to keep most of the smooth mesh using that extension.
3.Add the texture to the model inside of creators 3d viewer.
4.Export the model out as a GLB
5.Import the GLB into zapworks
6.Go to the models properties and select the material from the dropdown arrow.


#5

I’m glad you were able to figure it out, and thank you so much for adding the steps to make it work for Cinema 4D! I love seeing this thread become a resource for more than just 3ds Max users. :slight_smile:


#6

Hi @kalanperkins,

Thank you so much for sharing! To reiterate what @bmhuckab has said - it’s awesome that we’re starting to see some community driven hints and tips! You often find creative and clever ways that we don’t think of, so it’s super insightful from my point of view too. :memo:

Have a great day!
Francesca :blush: