three.js中GlTF模型渲染优化

在 Three.js 中渲染 GlTF（GL Transmission Format）模型时，通常需要考虑模型优化和性能优化两个方面。模型优化主要依赖于模型的质量和大小，包括模型的拓扑结构、纹理质量和大小等；而性能优化则涉及到模型的加载和渲染，包括模型的内存占用、GPU计算复杂度、渲染帧率等。下面是一些 GlTF 模型渲染优化的代码实现方法：

模型优化

减少模型大小

可以通过压缩和优化 GlTF 模型文件的方式减少模型的大小，从而提高模型加载和渲染的速度和性能。其中，一些常用的方法如下：

• 使用优化工具：比如 glTF-Pipeline 和 gltfpack 等，这些工具可以对 GlTF 模型进行压缩和优化，去除未使用的数据、减小纹理大小、优化网格拓扑结构、合并节点等来减小文件大小。
• 减少纹理大小：适当减小纹理的分辨率和尺寸，以便实现更快的数据加载和渲染速度。例如，对于需要在小尺寸屏幕上展示的模型，就没有必要加载高分辨率的纹理贴图。
• 减少模型细节：可以通过减少网格的细节和复杂度来降低模型的大小和复杂度。合并重复的网格、合并节点、合并纹理贴图等都可以有效降低模型复杂度和大小，以提高加载和渲染效率。

合并材质

GlTF 模型中材质数量的过多会增加数据渲染和处理的困难度和复杂度，因此我们可以通过合并材质的方式来降低其数量。具体来说，我们可以使用 three.js 的 Material 操作 来将多个材质合并成一个或几个材质。这样做的好处如下：

• 减少 WebGL 预编译次数：因为预编译次数等于材质量乘以着色器程序量。
• 减少材质切换次数：因为 WebGL 渲染的速度有限，切换次数过多会影响渲染效率。

以下是示例代码，可以合并模型中的材质：

const materials = [];

// 遍历模型中的所有 mesh
model.traverse((node) => {
  if (node.isMesh) {
    // 遍历 mesh 中的所有 material
    node.material.forEach((material) => {
      if (!materials.includes(material)) {
        // 如果不包含该材质则加入材质数组
        materials.push(material);
      }
    });
  }
});

// 初始化一个 THREE.MultiMaterial，将模型中所有的材质对象传入
const multiMaterial = new THREE.MultiMaterial(materials);

// 遍历模型中的所有 mesh，将 mesh 中的材质设置为 THREE.MultiMaterial
model.traverse((node) => {
  if (node.isMesh) {
    node.material = multiMaterial;
  }
});

性能优化

使用 glTF-Loader 的 StreamingDynamicLoader

如果 GlTF 文件真的很大而无法压缩优化到合适的大小，可以使用 StreamingDynamicLoader 加载器，它能够将（三进制）glTF 分成一系列小的块，逐步加载直至全部完成。这样可以在较短的时间内将模型加载和渲染完成并且无需等待太长时间。

以下是使用 StreamingDynamicLoader 的示例代码：

const loader = new THREE.GLTFLoader();
loader.load( 'model.gltf', ( gltf ) => {
  const mesh = gltf.scene.children[ 0 ];
  const nodes = gltf.parser.json.nodes;
  let i = 0;
  const n = nodes.length;
  (function loadNode() {
    const node = nodes[ i ];
    if ( node.mesh !== undefined ) {
      gltf.parser.getDependency( 'mesh', node.mesh ).then( function ( mesh ) {
        if ( mesh.geometry.index ) {
          mesh.geometry = mesh.geometry.toNonIndexed();
        }
        mesh.material = new THREE.MeshBasicMaterial();
        mesh.material.color.setHex( Math.random() * 0xffffff );
        mesh.material.wireframe = true;
        mesh.position.x = ( node.translation || [ 0, 0, 0 ] )[ 0 ];
        mesh.position.y = ( node.translation || [ 0, 0, 0 ] )[ 1 ];
        mesh.position.z = ( node.translation || [ 0, 0, 0 ] )[ 2 ];
        scene.add( mesh );
        i ++;
        if ( i < n ) {
          loadNode();
        }
      });
    } else {
      i ++;
      if ( i < n ) {
        loadNode();
      }
    }
  })();
}, undefined, function ( error ) {
  console.error( error );
} );

使用动态着色器程序（Shader）加载

着色器程序（Shader）可以帮助我们在运行时动态生成渲染代码，从而实现更高效的渲染效果和更灵活的场景渲染。在 GlTF 模型渲染中，同样也可以使用动态着色器程序来进行优化。一般而言，动态着色器程序的加载可以使用 GLSL.js 或者 Webpack 等 JavaScript 代码打包工具来实现。这些工具可以将 GLSL 代码和 JavaScript 代码打包到同一个 JavaScript 文件中，从而方便在运行时动态加载并使用着色器程序。

以下是加载动态着色器程序的示例代码：

// 加载 GLSL 动态着色器程序
const vertexShader = require( './shaders/my-vertex-shader.glsl' );
const fragmentShader = require( './shaders/my-fragment-shader.glsl' );

// 创建材质并使用动态着色器程序
const material = new THREE.ShaderMaterial( {
  uniforms: { /* 材质参数*/ },
  vertexShader: vertexShader,
  fragmentShader: fragmentShader
} );

// 将材质绑定到模型
mesh.material = material;

使用 Worker 加载模型

在加载复杂的 GlTF 模型时，对于较大的文件可能需要进行长时间的处理和加载，这时可以使用 Web Workers 等进程异步加载机制来改善加载和渲染性能。Web Workers 可以在主进程之外启动一个独立的线程，异步加载和处理大量数据和耗时操作，从而释放主线程的负担，提高界面响应和渲染性能。

以下是使用 Web Worker 加载 GlTF 模型的示例代码：

// 定义 Worker
const worker = new Worker( '/src/worker.js' );

// 监听消息事件，加载模型
worker.addEventListener( 'message', function ( event ) {
  const object = event.data;
  scene.add( object );
} );

// 发送消息，通知 Worker 开始加载模型
worker.postMessage( { type: 'load', url: 'model.gltf' } );

其中，上述示例代码将数据处理和加载的操作都放到了一个独立的 Worker 线程中，提高了程序的加载和渲染速度，减少了主线程的负荷，从而实现了更好的性能和体验。除了使用 Web Workers，还可以使用其他技术达到相似的效果，如使用 Accelerated Web Assembly 或者 WebGPU 等。