Git Product home page Git Product logo

gltf-optimizer's Introduction

glTF Optimizer

gltf-optimizer is a tool that optimizes models and textures by combining several command-line tools.

Getting Started

Install Python3

Install Node.js if you don't already have it, and then:

npm install -g imagemagick
npm install -g gltf-pipeline
npm install -g @gltf-transform/cli

Install toKTX toKTX can be built through cmake, or in the case of mac os, the toKtx Unix executable file in this path can be used by putting it in the path (/usr/local/bin) to which the environment variable is added.

Ref

Optimize a glTF or glb

gltf-optimizer --path <input gltf path> --output <output gltf path> --config <config json path>

gltf-optimizer --path ./source --output ./public/assets/ --config ./tools/config.json

Update Mode

gltf-optimizer --path <input gltf path> --output <output gltf path> --config <config json path> --update

If you enter --update on the command line, it determines if there is already a glb or gltf with the same name in the output path and optimizes only those files that do not exist.

{
  "scripts": {
    "build-gltf": "yarn build-gltf-all --update",
    "build-gltf-all": "python3 tools/gltf-optimizer.py --path ./source --output ./public --config tools/config.json"
  }
}

It is convenient to use it by registering it in package.json like this.

Output

Using Babylonjs

SceneLoader.OnPluginActivatedObservable.add((loader) => {
  const gltfLoader = loader as unknown as GLTFFileLoader;
  gltfLoader.onParsed = (data) => {
    // @ts-ignore
    const images: IImage[] = data.json['images'];
    for (const image of images) {
      if (image.uri) {
        // textureMaxSize : 256, 512 ...
        image.uri = `${textureMaxSize}/${image.uri}`;
      }
    }
  };
});

In this way, when loading a gltf/glb file, you can receive data through the onParsed event and change the uri to textureMaxSize at runtime.

const src = `/assets/model${suffix}.glb`
await SceneLoader.ImportMeshAsync(
  '',
  src
);

It is useful to change the model like this and call it.

Config.json

{
  "output_ext" : [".glb", ".gltf"],
  "texture_settings" : [
    {
      "max_size" : 512,
      "scale" : 1,

      "defualt_format" : "etc1s",
      "keywords" : ["final"],
    },
    {
      "max_size" : 2048,
      "scale" : 1,

      "defualt_format" : "etc1s",
      "keywords" : ["final"],

      "astc_blk_d" : "8x8",
      "uastc_quality" : 2,
      "uastc_rdo_l": 0.5,
      "uastc_rdo_d": 8192,
      "zcmp": 22,

      "clevel": 1,
      "qlevel" : 128,

      "assign_oetf": "srgb"
    }
  ],
  "model_settings" : [
    {
      "suffix" : "_LOD0",
    },
    {
      "suffix" : "_LOD1",
      "lock_border" : false,

      "tolerance" : 0.0001,
      "ratio" : 0.5,
      "error" : 0.01,

      "decode_speed" : 7, 
      "encode_speed": 7, 
      "quantize_position": 11, 
      "quantize_normal" : 8,
      "quantize_texcoord": 10,  
      "quantize_color": 8
    }
  ]
}

"output_ext" : [".glb", ".gltf"]
  • output_ext : finally, set the extension to be extracted to the output path. ".glb", ".gltf" can be set.
"texture_settings" : [
    {
      "max_size" : 512,
      "scale" : 1,

      "defualt_format" : "etc1s",
      "keywords" : ["final"],
    },
    {
      "max_size" : 2048,
      "scale" : 1,

      "defualt_format" : "etc1s",
      "keywords" : ["final"],
      
      "astc_blk_d" : "8x8",
      "uastc_quality" : 2,
      "uastc_rdo_l": 0.5,
      "uastc_rdo_d": 8192,
      "zcmp": 22,

      "clevel": 1,
      "qlevel" : 128,

      "assign_oetf": "srgb"
    }
  ]

These are settings related to texture optimization.

  • [Required] max_size : <256|512|1024|2048|4096> sets the maximum size of the texture. Resize the size of the texture according to the ratio so that it does not exceed this value.
  • [Option] scale : reduce the size of the image by this value. range is [0.01, 1.00]. default value is 1.
  • [Option] defualt_format : <uastc|etc1s> sets the default format to be compressed as ktx2. default value is "etc1s".
  • [Option] keywords : textures with this keyword in their name will be compressed in the opposite format to defualt_format. If defualt_format is "etc1s", textures with this keyword are compressed with uastc ktx2.
  • [Option/uastc] astc_blk_d : specify which block dimension to use for compressing the textures. default value is 8x8.

  • [Option/uastc] uastc_quality : This optional parameter selects a speed vs quality tradeoff. default value is 2.

  • [Option/uastc] uastc_rdo_l : Lower values yield higher quality/larger LZ compressed files, higher values yield lower quality/smaller LZ compressed files. A good range to try is [.25,10]. For normal maps a good range is [.25,.75]. The full range is [.001,10.0]. default value is 0.5.

  • [Option/uastc] uastc_rdo_d : lower values=faster, but give less compression. default value is 8192.

  • [Option/uastc] zcmp : lower values=faster but give less compression. Values above 20 should be used with caution as they require more memory. default value is 22.

  • [Option/etc1] clevel : ETC1S / BasisLZ compression level, an encoding speed vs. quality tradeoff. Range is [0,5], Higher values are slower but give higher quality. default value is 1.

  • [Option/etc1] qlevel : ETC1S / BasisLZ quality level. Range is [1,255]. Lower gives better compression/lower quality/faster. Higher gives less compression/higher quality/slower. --qlevel automatically determines values for --max_endpoints, --max-selectors, --endpoint_rdo_threshold and --selector_rdo_threshold for the target quality level. Setting these options overrides the values determined by -qlevel which defaults to 128 if neither it nor both of --max_endpoints and --max_selectors have been set.

  • [Option/common] assign_oetf : <linear|srgb> force the created texture to have the specified transfer function. default valus is srgb.

"model_settings" : [
    {
      "suffix" : "_LOD0",
    },
    {
      "suffix" : "_LOD1",
      
      "tolerance" : 0.0001,
      "ratio" : 0.5,
      "error" : 0.01,
      "lock_border" : false,

      "decode_speed" : 7, 
      "encode_speed": 7, 
      "quantize_position": 11, 
      "quantize_normal" : 8,
      "quantize_texcoord": 10,  
      "quantize_color": 8
    }
  ]

These are settings related to mesh optimization.

  • suffix : the suffix to append to the model to be extracted. For example, if suffix is ​​"_LOD0" in model.glb, it is extracted as model_LOD0.glb.

refer to (https://gltf-transform.donmccurdy.com/cli) for the values ​​below.

weld : Index Primitives and (optionally) merge similar vertices.
  • [Option] tolerance : tolerance for vertex welding. default value is 0.0001. If this value is not entered, weld is omitted.
simplify
  • [Option] ratio : target ratio (0–1) of vertices to keep. If this value is not provided, simplify will be skipped.
  • [Option] error : limit on error, as a fraction of mesh r. default value is 0.01.
  • [Option] lock_border : whether to lock topological borders of. default value is False
draco
  • [Option] decode_speed : Decoding speed vs. compression level, 1–10.
  • [Option] encode_speed : Encoding speed vs. compression level, 1–10.
  • [Option] quantize_position : Quantization bits for POSITION, 1-16. default value is 11
  • [Option] quantize_normal : Quantization bits for NORMAL, 1-16. default value is 8
  • [Option] quantize_texcoord : Quantization bits for TEXCOORD_*, 1-16. default value is 10
  • [Option] quantize_color : Quantization bits for COLOR_*, 1-16. default value is 8

The default value was set by referring to gltf-pipeline(https://github.com/CesiumGS/gltf-pipeline).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.