Reducing the file size of glTF (.glb) files for export(Blender)

This article can be read in about 3 minutes.
PR

The purpose 

As shown in the article below, you can save glTF (.glb) files in Blender, but the file size increases as the complexity of the shape increases, leading to slower loading times when loading on the web.

This section introduces methods for reducing the size of saved glTF (.glb) files.

PR

Environment

Blender:3.4.1

PR

Changing mesh export settings

Access the export dialog by going to “File” -> “Export” -> “glTF 2.0 (.glb/.gltf)” in the upper left corner.

In the save dialog, uncheck “Normals” within the “Mesh” group before saving.

These settings changes will reduce the saved file size. 

PR

Export Compression Settings

From the top left, select “File” -> “Export” -> “glTF 2.0 (.glb/.gltf)” to display the export dialog.

In the save dialog, check “Compress” and save.

The above settings changes can reduce the file size.

However, please note that if you save using this method, it will not be loadable with Three.js in the implementation described below.

To load compressed glTF, the following steps are also required.

Loading and displaying a compressed glTF (.glb) file(Threejs)
The purpose Loading a compressed glTF (.glb) file into Three.js.The compression method is as followsEnv...
PR

Result

By modifying the mesh export settings and the compression export settings, we were able to reduce the size of the resulting glTF file.

The saved file sizes for each setting are summarized below.

Save normalcompressionSize (kbyte)comment
×786default
××220
106
×30

The model used was the following dice

PR

Reference

【Three.js】3Dモデルのサイズを小さくする方法 | テクサLog
Three.jsではblenderで作成したglTFファイルを扱うことができますが、オブジェクトの数が多かったりするとファイルサイズがかなり大きくなってしまいます。その結果サーバ...
PR

Related page

Blenderで作成した3DオブジェクトをThreejsで読込、表示するまとめ

comment

Copied title and URL