0x01

This article will describe the use of compressed textures in actual projects. A recent project is like this: because the project involves a lot of buildings, there are about 40 buildings, and each building has 10 floors, and there are a lot of equipment in each floor. This leads us to use a large number of textures. In the actual project process, our customers' computers often encounter webgl crashes. This requires us to find a way to reduce the texture memory and memory usage of the project.

The following are some screenshots of the park and floors, the data has been desensitized:

Data is desensitized

The first thing we may think of is to reduce the size of the picture. But there is a limit to reducing the image size, because if the image size is too small, it will affect our final presentation effect. Therefore, we need to think of new ways to reduce the occupation of this resource.

Another way of thinking is not to use generateMipmap. Mipmaps generate pyramidal image results. Generating Mipmap will occupy about 1/3 more memory space, so not using Mipmap will reduce, about 1/3 memory space. However, Mipmap is for the model to have a good rendering effect when it is reduced. Therefore, if Mipmap is not used, the rendering quality will be reduced.

Finally we use compressed textures.

0x01 Compressed texture introduction

I believe that students who are more familiar with webgl know about compressed textures.

The commonly used texture images are all in jpeg, png and other image formats. These pictures are originally compressed pictures. Based on the compression algorithm, the files are compressed to reduce the file size, which is beneficial for the transmission of a large number of pictures on the network.

However, when a jpeg png image is used as a texture, it will first be converted into a bitmap. The bitmap mentioned here refers to the original image data without any compression algorithm. Taking 1024×1024 as an example, if each pixel in the image requires three RGB channels, and each channel requires 8 bits of space, then the entire image needs to use 1024 x 1024 x 8 x 3 bits of information, which is 3M, which is All 3M information needs to be loaded into the GPU, which has nothing to do with the compression format used for the image file. If each pixel in the image requires four channels of rgba, then 4 megabytes of GPU memory space is required.

It can be seen that the disadvantages of using jpeg, png and other image formats are:

Images need to be decompressed, which consumes CPU performance.
Texture data takes up more memory. Usually the browser and the GPU each save a copy of the bitmap data.

Compressed textures appear to solve the above problems. By using compressed textures, we can pack pixels into data blocks through a compression algorithm, which can reduce the storage capacity in video memory. This packaged data block is very convenient for GPU to decompress and query. So from a performance point of view, the speed of accessing textures is also improved.

There are many formats in the compressed file, such as DDS, KTX, etc. Strictly speaking, DDS and kTX are containers rather than formats, and there are many formats for compressing textures. Here, for the sake of simplicity, we refer to DDS and KTX formats. We know that KTX has version 2.0. And we finally chose ktx2.0, which can be easily integrated with the gltf model format.

For more knowledge about compressed textures, you can search the Internet, and I will not introduce them in detail here.

0x02 workflow

The modeling engineer gave the OBJ model, which was also used in the project at the beginning. First, we need to convert the OBJ model into GLTF format. The conversion can be done using the plugin obj2gltf. The conversion process is roughly as follows:

npm install obj2gltf -g
obj2gltf -i a.obj -o a.gltf

First install obj2gltf via npm. Then convert the model through obj2gltf, where -i represents the input OBJ model. -o is the output gltf model.

After converting to gltf, compress gltf. Among them, the texture compression tool is a set of open source ktx tools, ktx-software, the official document is as follows:
https://github.com/KhronosGroup/KTX-Software#readme

After installing ktx-software, you can compress the texture. Here we can choose gltfpack (gltfpack is relatively simple, and ktx-software also comes with a conversion tool, which is more complicated, but there are more optional parameters for conversion, which can be more flexible. High-quality or low-quality compressed textures, interested readers can check the document research).
The compressed command is roughly:

gltfpack -i scene.gltf -o scene.glb --tc

Among them, tc is to compress the texture, the original text is as follows: gltfpack can also compress textures using Basis Universal format stored in a KTX2 container ( flag, -tc requires support for KHR_texture_basisu). Textures can also be embedded into .bin/ .glb output using -te flag.

0x03 load compressed texture

After the texture is changed to ktx2, the texture needs to be parsed when loading the model. Taking threejs as an example, you need to specify KTX2Loader to load ktx2, and KTX2Loader needs to specify the js file "basis_transcoder", so you need to specify the path of the basis_transcoder.js and basis_transcoder.wasm files , roughly like this:

let ktx2Loader = new KTX2Loader(manager)
  .setTranscoderPath('./')
  .detectSupport(renderder)
gltfLoader.setKTX2Loader(ktx2Loader);

After gltfLoader specifies ktx2loader, it can load the model with ktx2 texture just like loading the normal gltf model.

0x04 Comparison of compression results

After compression, the video memory and memory usage of the webgl program are greatly reduced. The memory of the whole scene is reduced by about 50%, and the effect is still obvious.
Of course, there are many more ways to reduce video memory, such as reducing the number of faces of the model during the modeling process, reducing the size of the texture, disabling mipmaps, reusing reusable models as much as possible, and so on.

epilogue

This article describes a means of reducing video memory, compressing textures. There are more knowledge and skill points in compressed texture and performance optimization. If you have good experience, welcome to communicate with me.

Welcome to pay attention to ITman Biaoshu, a visualization service expert, providing 3D visualization, data center, smart park, smart building, industrial configuration, 2D topology, large-screen presentation and other visualization professional services.

WebGL compressed texture practice