Importing fbx files, WEBGL hit a snag


I’m creating a small city with realistic buildings and landscape where a player would be able to walk around.

At first, I designed a simple ground and models of buildings on sketchup. Then I imported the fbx files of them on my project. The problem is when I import more than 5 models of buildings (each one has a size of 2Mb), the frame view crashes and the message “WebGL hit a snag” appears.

After, I designed the whole environment on sketchup in one file and imported the fbx file (11Mb) on playcanvas and I still have the same problem.

Is it a bug or I can import only a certain size of files in my project?

Thank you for your help :slight_smile:

Hi @aiky_rakoto, you haven’t posted link to project nor models to test them out.
My initial thoughts: you have too many triangles or mesh instances in each model, for real-time 3d development you want to have optimised geometry, minimum number of meshInstances and reduce number of triangles as much as possible.

Sketchup does export quite badly structured FBX files. As far as I recall, each extrusion is an independent graphics object. Each object translates to a single draw call in PlayCanvas. As Max says, this can cause the generation of many thousands of draw calls potentially for large Sketchup scenes. Sometimes, I import a Sketchup scene into Max or Maya to combine all of the separate objects into a single mesh. I then export again to FBX and import into PlayCanvas.

But as Max says, to confirm, it would be useful to check out your project.

Sorry! Here is the link of the project:

When I export the fbx file from sketchup, it says that the model has 16684 faces and 112 Textures. I’m not a pro so I don’t know if it’s a lot or not.

So yes, as mentioned before, this is a bit “too much” for real-time rendering.

You do want to have each house unwrapped so it uses only couple of textures maximum. Looking at textures, some of them are not optimal at all:

  1. large white plain texture with small bit in middle, and that is 2k resolution.
  2. number of textures are almost identical.
  3. number of textures are tiled, consider cutting it to one tile and tiling using material options for tiling.
  4. consider combining textures into small number of them per house, 1-3 textures per house, no bigger than 2k resolution.
  5. very large number of meshInstances - is not good. This scene makes 300+ draw calls already, this is way way too much, 1-3 meshinstances per building is what you want.
  6. some geometry (columns) have too many triangles, and check topology of a model if it is triangle-optimised.
  7. import each building as separate fbx to simplify workflow.

Thank you for your answers! I’m going to try that! :slight_smile:

1 Like