前言

做3D场景相关项目的都知道，3D场景中常见的痛点，便是模型过大，面数过多，纹理太高清，节点层级过多等等，导致场景加载慢，渲染性能低，场景帧率低，如果模型开发的配合，可以让他们把模型优化下，如果不配合，那就只能另外想办法了。这篇文章主要介绍怎么利用现有的开源库，对模型进行减面和压缩。因为我们主要使用GLTF格式模型，所以，本文技术只针对GLTF/GLB模型

减面压缩效果

第一张图片是最大保留外观的同时，面数减少一半，
第二张图是是不保留外观时减面，面数减少80%，
第三张图是纹理压缩后，文件大小减80%

总之，效果显著，有兴趣可以在点击查看

技术分析

以上效果主要使用以下技术：

Babylonjs 用于3D渲染展示
glTF-Transform 用于读写操作gltf文件
sharp 用于图片压缩
meshoptimizer 用于网格减面

其中网格减面可以在客户端进行，纹理压缩只能在服务端进行，本文主要介绍在服务端使用

技术实现

先简单介绍gltf-transfrom的使用

javascript 复制代码

import { Document, NodeIO } from '@gltf-transform/core';
import { ALL_EXTENSIONS } from '@gltf-transform/extensions';
import draco3d from 'draco3dgltf';

// 使用库内置的IO工具
const io = new NodeIO()
    .registerExtensions(ALL_EXTENSIONS)
    .registerDependencies({
        'draco3d.decoder': await draco3d.createDecoderModule(), // Optional.
        'draco3d.encoder': await draco3d.createEncoderModule(), // Optional.
    });

// 读取glb/gltf文件,2种格式模型读取方式一致，最终输出结果都是Document对象
// Document 是该库的核心数据类型，里面存储模型的所有数据，我们对模型的所有操作都将操作这个模型
const document = await io.read('path/to/model.glb');
const document = await io.read('path/to/model.gltf');

// 输出glb/gltf文件
// 1. 输出glb文件，这个很简单，只要
 await io.write("/path/ouput.glb", document);

// 2. 输出gltf 文件，输出gltf文件比较麻烦
 // 输出JSONDocument,这个对象包含 glTF 文件的原始 JSON 以及该文件引用的任何二进制或图像资源
 await io.writeJSON(document); --->JSONDocument
   然后我们需要分析这个json，输出对象内的图片，bin，以及.gltf到指定目录
   比如
   fs.writeFile("out.gltf",jSONDocument.json);
   fs.writeFile("out.bin",json.resources.bin)

上面主要介绍了gltf文件的读写，接下来，我们实现模型减面

javascript 复制代码

import { simplify, textureCompress, weld } from "@gltf-transform/functions";
import { MeshoptSimplifier } from "meshoptimizer";
  // 减面需要这2个主要参数，ratio是减面率，越低减面效果越好，error是误差率，越高，外观变形越严重
  const { ratio, error = 0.001} = options;
  
  //开始减面，我们拿上传读取出来的document，进行减面
  // weld主要是对顶点进行优化，尽可能提高减面质量
  await document.transform(
    weld({ tolerance: 0.0001 }),
    simplify({
      simplifier: MeshoptSimplifier,
      ratio: ratio,
      error
    })
  );

纹理压缩

javascript 复制代码

import sharp from "sharp";

  await document.transform(
      textureCompress({
        encoder: sharp,
        //最大纹理宽高，并保留纹理的宽高比
        resize: [1024, 1024],
        //纹理压缩质量，范围是1-100，可以不传
        quality: 50,
      })
    );

另外，这个库还提高的网格节点展平，合并等功能，可以自行查看和实现

对Document操作后，输出到指定目录，就完成了对模型的减面和压缩操作

总结

本文主要介绍了GLTF文件的减面和纹理压缩操作，减面和压缩后，可以应用到LOD中，可提高场景的渲染效果，具体代码以及文章开头的实现效果可以访问代码仓库查看。

前端3D场景模型压缩减面分享

前言

减面压缩效果

技术分析

技术实现

总结