three.js纹理贴图大小—性能优化

参考资料：threejs中文网

threejs qq交流群：814702116

three.js纹理贴图大小—性能优化

前面几节课给大家讲解过，Blender建模的时候要注意尽量减少面数。对于纹理贴图，一样的道理，要控制好纹理图片像素大小、文件大小。

如果纹理贴图像素比较大，一方面会占用渲染的更多硬件资源，另一方面网页从服务器加载图片文件的时间会更长。

测试不同像素纹理清晰度

4.10小节课件里面提供两个天空盒全景图图片。

• 4096x2048像素的全景图背景图

• 512*256像素的全景图背景图

你可以分别测试对应的清晰图

// 天空盒背景
const geometry = new THREE.SphereGeometry(300);
const texture = new THREE.TextureLoader().load('./天空盒全景图.jpg')
texture.colorSpace = THREE.SRGBColorSpace;
const material = new THREE.MeshBasicMaterial({
    side: THREE.BackSide,
    map: texture,
});
const mesh = new THREE.Mesh(geometry, material);

纹理图像大小选择

一般来说在网页上渲染范围越大，需要纹理图像像素越大，渲染范围越小，需要纹理图像越小。

同样清晰情况下，对比收费站模型，天空盒背景图，红绿灯的贴图，你会发现像素宽高度差别很大。

作为程序员一般有个印象即可，一般有经验的美术，都会注意尽量控制图片像素的大小。

收费站红绿灯贴图不同像素测试

红绿灯贴图，500左右的像素和250左右的像素，收费站都可以正常渲染，这时候你就可以选择像素更小的图片作为纹理。

png与jpg格式对比

一般来说如果是背景透明的图片，不能选择jpg格式，需要用png格式。

对于不需要背景透明的纹理，大部分情况下，选择jpg格式，要比png格式更小一些。

图片压缩

一般美术建模时候，可以在专业软件ps里面对纹理贴图进行压缩。

下面给大家通过一个在线工具演示下，图片的压缩效果。

图片压缩在线工具：https://tinify.cn/

jpg、png格式图片通过简单压缩后，文件缩小，这样三维场景gltf文件就会更小，可以提升三维模型加载速度。