3D Optimization

Uploading and sharing 3D files to the web requires a certain workflow to ensure your ideas are shown off in the best light.

Scale and Position

GLTF's default scale is in Meters and takes into account the position of your meshes with respect to the origin point, (0,0,0). In apps like Blender, you may need to Apply Transforms to make sure that the scale is reset after you scale in Object mode vs Edit mode.

Overlapping Meshes

If you see your model flashing in your scene that is usually indicative of z-fighting which occurs when meshes are overlapping and the scene does not which element to render on top of the other. This can be solved by simply increasing the distance between the meshes, whether they are in your model or between the ground and your model. This can also occur when the scene camera is very far away and the distance between the meshes is not far enough apart.

File Size

For experiences that need to work on every device like iPhones and Androids, we recommend you limit your GLTF file size to under 50mb including meshes, animations and textures to keep your file as shareable as possible. Blender is the preferred app to use to export GLTF files, it supports all of the latest changes and features for GLTFs. Importing GLTF’s from other apps into Blender for final export can be very helpful as well if you want to; add animations, bake textures, add lights, add compression etc. And Blender is free!

  • Exporting as a .glb will be smaller than a .gltf

  • Use gltf.report to compress your GLTF files by applying Draco Mesh Compression, resizing textures, and cleaning up files with duplicate code. Using it to view what parts of your GLTF are taking up the most file size, whether they be mesh data, texture data, or animation data.

  • Alternatively you can use Meshopt Compression which will also compress your animation data as well if you use Shape Keys. This method prevents the files being opened in other applications like Blender unless you remove Meshopt with gltf.report or another app.

Mesh Data

Depending on what devices and internet speed your viewers are using, there are some things to keep in mind. Less is more, try and reduce your file to the necessities to make sure people only focus on what you want them to see and keep loading times fast. CAD models in particular should remove excessive data or bake those details into textures.

  • Mobile: Sub 500K polycount will keep performance snappy on weaker devices.

  • Desktop-only experiences can get away with much higher polycounts, ~1 million polys on-screen total.

  • Joining multiple meshes together and merged vertices will also yield better performance for the CPU. All static meshes should be joined for optimum performance. Try to keep the number of separate meshes less than 50 as a rule of thumb, especially if they are animated. Oftentimes things like architecture or character models can be dozens or hundreds of separate meshes, this will decrease performance.

  • Make sure there’s no non-manifold edges, or orphaned vertices. Removing interior faces no one will see is beneficial as well.

  • You can use the Decimate Modifier in Blender or the ReduceMesh SOP in Houdini to automatically reduce your mesh size.

  • For advanced 3D teams you can also use a Hi-Poly to Low-Poly Baking workflow which bakes the textures and Normal Map from a Hi-Poly mesh onto a Low-Poly mesh so they visually look the same.

Materials and Textures

  • Mobile experiences. 2K resolution if you have multiple PBR materials complete with Diffuse, Metallic, Roughness, Normal Textures or bake lighting to one 4K atlas. For textures, generally JPEG is preferred for the best appearance to file size, however, use PNG if alpha is required in your materials. Formats like GLTF also support texture compression using WebP in Blender or KTX using tools like GLTF Compressor.

  • Safari on iPhone is limited to max 6K textures. This is an artificial limitation imposed by iPhones.

  • Desktop first experiences can use multiple 4K textures at once and even work up to 16K textures on high-end devices.

  • Baking Lighting to texture will allow for optimum performance on all devices.

  • Texture Atlasing will also give great performance versus loading multiple textures in your model’s shader graph.

  • GLTF uses Physically-Based Rendering PBR materials. This mirrors how light interacts with material properties like Metallicness and Specularity. Textures will need to be baked from procedural shader workflows in order for them to appear in the model.

  • Texture Scale and Rotation can be read from a GLTF.

  • Animating textures is not possible in a GLTF natively.

  • Make sure textures of your meshes are using the first UV channel. Utilizing multiple UV channels is currently not supported.

  • Using Ambient Occlusion (AO) maps is encouraged to make your models look more realistic as Foveate does not use Post-Processing and Screen Space Ambient Occlusion (SSAO) as it does not work very well on all devices.

Animations

  • Bone or Transform (Position, Scale, Rotation) animations are preferred for optimum performance.

  • Using a plugin like DemBones to convert complex animations or simulations to armature animation is encouraged.

  • Blend Shapes or Shape Keys can be used but are not encouraged because of their heavy file size and performance cost on the CPU. If they are required you can use MeshOpt compression to reduce their file size. But hey sometimes you need them.

Lights

Only Directional, Spot, and Point Lights are supported in a GLTF and they cast lighting only, no shadows are currently supported in .gltf/.glb files natively, however, a spotlight with shadows is automatically added in Foveate when you create a scene. This spotlight can be adjusted in the Scene Settings sidebar.

Last updated