Blender Optimisation for three.js

Complex Elements Can Take Up a Lot of Space

For web applications, it is crucial to strive for the smallest possible file size while maintaining the quality of the materials. Simplification is particularly important when using 3D models created in Blender.

https://builder-seven-iota.vercel.app/https://builder-seven-iota.vercel.app/

Using Blender to Simplify Models

Blender offers numerous tools to simplify models. Here are some useful methods:

1. Examining and Compressing Materials

To reduce the size of materials, it's worth examining which materials are used and compressing them if necessary. In Blender, we can unwrap the object using UV mapping and arrange the UV map. The material is then applied to the arranged UV map. If the lights and shadows do not change, it is also advisable to bake them.

A useful tool for compressing materials is SquooshSquoosh, which can further compress the resulting images. The compressed images are then reapplied to the model, and we compare them with the original images. In a simple example, we can reduce the file size by up to 5 MB.

2. Using the Weld Command for Complex Elements

For complex elements, we can reduce the number of geometric elements by using the Weld command. The Weld command merges nearby points, thus reducing the number of mesh elements and simplifying the model.

3. Merging Multiple Elements

When our model consists of multiple elements that fit together, it might be worthwhile to merge these elements. Merging can reduce the number of mesh elements, leading to significant performance improvements.

4. Applying Special Methods

Sometimes special methods are required to simplify complex elements. For example, the techniques used for windows in the Spider-Man game can help with optimization. This videovideo provides a detailed explanation of how to apply such special methods.

5. Displaying Materials Only on Certain 3D Geometries

Another option for optimizing materials is to display them only on certain 3D geometries. This can be particularly useful if most of the model does not require detailed materials.

Detailed Examination and Compression of Materials

We unwrap the selected object in Blender using UV mapping and then arrange the UV map. The material is applied to the arranged UV map, and if the lights and shadows do not change, it is advisable to bake them as well. The compressed images are then reapplied to the model, and we compare them with the original images. In a simple example, we can reduce the file size by up to 5 MB.

1.picture: Blender fast UV unwarap with smart UV project

2.picture: Sorting with UVpackmaster3

3.kép: Simple Bake for the PBR Bake

If we want to color elements separately, it is advisable to assign different materials to them. This helps in optimizing each element individually.

Exporting GLB from Blender

We export our file as a GLB. It's important to pay attention to the appropriate settings. If normal and other maps are not used, turn them off during export. If the model consists of many mesh elements, it might be worth considering using Draco compression. Draco compression can significantly reduce the file size while preserving the model's quality.

Applying Draco Compression

Draco compression is especially useful for large models. This compression method reduces the geometric data of the mesh while minimizing quality loss. The Draco compression settings are easily accessible in Blender and offer various customization options.

Using GLTFjsx for Further File Compression

We can further compress the exported GLB files with GLTFjsx. It's advisable to convert image files to the webp format, which can further reduce file size. The GLTFjsx tool allows easy conversion and optimization of models for web applications.

Using the WebP Format

The WebP format is particularly useful for reducing the size of image files. This format offers excellent compression rates while preserving image quality. In Blender, we can easily set up the conversion of images to the WebP format, resulting in significant performance improvements in web applications.

Practical Tips for Using Blender

Here are some practical tips for using Blender to optimize models:

Blender Plugins and Tools

Numerous plugins and tools are available in Blender that can help optimize models. Here are some useful plugins:

These methods and tips can help minimize the size and complexity of 3D models needed for web applications while preserving their quality. Effective optimization not only reduces loading times but also improves user experience.