Geometry is compressed, saved, and reloaded normally, but materials are not.

[dotoritos-kim]

import * as THREE from 'three';
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { NodeIO, PropertyType, WebIO } from '@gltf-transform/core';
import {
    EXTMeshoptCompression,
    EXTMeshGPUInstancing,
    KHRMaterialsUnlit,
} from '@gltf-transform/extensions';
import { dedup, instance, reorder } from '@gltf-transform/functions';
import { MeshoptEncoder, MeshoptDecoder } from 'meshoptimizer';

async function compressThreeObject(
    threeObject: THREE.Object3D,
): Promise<THREE.Scene> {
    // 1. Three.js Object를 glTF로 Export
    const exporter = new GLTFExporter();
    const gltfData = await new Promise<ArrayBuffer>((resolve) => {
        exporter.parse(
            threeObject,
            (gltf) => resolve(gltf as ArrayBuffer),
            (error) => {
                console.error('glTF export error:', error); // Export 에러 처리
            },
            { binary: true },
        );
    });
    await MeshoptEncoder.ready;

    // 2. glTF-Transform을 사용하여 압축
    const io = new WebIO()
        .registerExtensions([
            EXTMeshoptCompression,
            EXTMeshGPUInstancing,
            KHRMaterialsUnlit,
        ])
        .registerDependencies({
            'meshopt.encoder': MeshoptEncoder,
            'meshopt.decoder': MeshoptDecoder,
        });
    const document = await io.readBinary(new Uint8Array(gltfData));
    await document.transform(
        reorder({ encoder: MeshoptEncoder }),
        dedup({ propertyTypes: [PropertyType.MESH] }),
        instance(),
    );
    // 3. Meshopt 압축 설정
    const meshoptExtension = document.createExtension(EXTMeshoptCompression);
    meshoptExtension.setRequired(true);

    // 'extension.options' 객체를 사용하여 압축 옵션 설정
    meshoptExtension.setEncoderOptions({
        method: EXTMeshoptCompression.EncoderMethod.FILTER,
    });

    // 4. glTF 압축 데이터 생성
    const compressedGltfData = await io.writeBinary(document);

    // 5. 압축된 glTF 데이터를 Three.js Object로 로드
    const loader = new GLTFLoader();
    await MeshoptDecoder.ready;
    loader.setMeshoptDecoder(MeshoptDecoder);

    const glbBlob = new Blob([compressedGltfData], {
        type: 'model/gltf-binary',
    });
    const url = URL.createObjectURL(glbBlob);

    try {
        const compressedScene = await loader.loadAsync(url);
        URL.revokeObjectURL(url);
        return compressedScene.scene as THREE.Scene;
    } catch (error) {
        URL.revokeObjectURL(url);
        console.error('glTF load error:', error);
        throw error;
    }
}

export default compressThreeObject;

I wrote the code, but it failed to load the scene properly and I only got geometry and line segments.
Did I miss something before I even loaded the ingredients together?
There are no objects with textures in the scene I entered, but there are basicmaterials and shaders.

[donmccurdy]

If you skip the processing with glTF Transform here and just return the binary exported by GLTFExporter, does the scene contain the materials and everything else you expect?

Do you see any warnings in the JavaScript console?

The Meshopt compression can be done more simply like this...

https://gltf-transform.dev/modules/functions/functions/meshopt

... but it shouldn't make any difference in the result.

I might consider doing .registerExtensions(ALL_EXTENSIONS) unless you're quite sure there are no other extensions exported except the ones you're installing.