嘗試僅從 GLTF 文件中獲取動畫

Question

我想從每一種 gltfAsset 中只獲取其中的動畫來創建一個 animation 文件。 有人知道圖書館是否可以幫助我，或者是否有最簡單的方法？

private async createAnimationAssets(props: Props, animations: Animation[]): Promise<CreateMetaAssetResponseDto[]> {
    const animationAssets = await Promise.all(
      animations.map(async (animation) => {
        return new Promise(async (resolve, reject) => {
          try {
            const asset = await this.assetRepository.create(
              new MetaBuilderAssetListItem({
                createdAt: this.dateService.now(),
                modifiedAt: this.dateService.now(),
                id: undefined,
                projectId: props.projectId,
                name: animation.name,
                type: "animation",
                exclude: false,
              })
            );
            if (!asset.id) return reject();
            const assetData: MetaAsset = MetaBuilderAssetMapper.defaultAsset({
              ...props,
              name: animation.name || "",
              assetId: asset.id,
              source: false,
              type: "animation",
            });
            if (props.parent) await this.insertParentPath(assetData, props.parent);
            // créer le fichier glb ui ne contient que l'animation
            const gltfAsset = fsExtra.readFileSync(`temp/${assetData.file?.filename}`);

            // const gltfAnimations = 

            gltfPipeline.gltfToGlb(gltfAnimations).then(function (results: any) {
              fsExtra.writeFileSync(`${animation.name}.glb`, results.glb);
            });
            console.log(`gltfAsset: ${gltfAsset}`);
            // lire les meta-données de mon fichier
            assetData.file = {
              filename: animation.name,
              size: 0,
              hash: assetData.file?.hash,
            };
            // console.log(assetData);
            await this.sharedbSocket.insertDoc(`assets`, asset.id, assetData);
            const response: CreateMetaAssetResponseDto = {
              ...assetData,
              id: +asset.id,
              uniqueId: +asset.id,
              createdAt: asset.createdAt,
              modifiedAt: asset.modifiedAt,
            };
            console.log(response);
            this.sharedbSocket.emitAssetCreated(response);
            return resolve(response);
          } catch (err) {
            console.error(err);
            return reject(err);
          }
        });
      })
    );
    return animationAssets.filter((asset) => asset) as CreateMetaAssetResponseDto[];
  }

如果您需要任何其他信息來幫助我，請隨時告訴我！

Answer 1

有很多方法，但我告訴你我的工作流程

您正在嘗試從 GLTF 文件中提取 animation 數據，將其轉換為 GLB 格式，然后將其另存為新文件。 庫“gltf-pipeline”可用於將 GLTF 轉換為 GLB。 庫中的 gltfToGlb function 采用 GLTF object 並返回 promise，后者使用 GLB 數據進行解析。

庫鏈接在這里https://github.com/CesiumGS/gltf-pipeline

Answer 2

我建議使用glTF Transform在 Node.js 環境中從 glTF 文件中提取數據或修改 glTF 文件。

首先使用NodeIO讀取文件：

import { NodeIO } from '@gltf-transform/core';
import { KHRONOS_EXTENSIONS } from '@gltf-transform/extensions';

const io = new NodeIO().registerExtensions( KHRONOS_EXTENSIONS );

// (a) read from disk
const document = await io.read('path/to/scene.glb');

// (b) read from memory
const document = await io.readBinary(glb); // glb is Uint8Array or Buffer

接下來，如果您使用的是 TypeScript，我們將進行類型定義以保存新的 animation 數據。

interface Clip {
    name: string,
    tracks: Track[],
}

interface Track {
    targetObject: string,
    targetProperty: string, // 'translation', 'rotation', 'scale', 'weights'
    interpolation: string, // 'LINEAR', 'CUBICSPLINE', 'STEP'
    times: number[],
    values: number[]
}

然后，將 glTF Animations中的 animation 數據解析為以下結構：

const clips = [] as Clip[];

for (const animation of document.getRoot().listAnimations()) {
    const tracks = [];

    for (const channel of animation.listChannels()) {
        const sampler = channel.getSampler();
        tracks.push({
            targetObject: channel.getTargetNode().getName(),
            targetProperty: channel.getTargetPath(),
            interpolation: sampler.getInterpolation(),
            times: Array.from(sampler.getInput().getArray()),
            values: Array.from(sampler.getOutput().getArray())
        } as Track)
    }

    clips.push({ name: animation.getName(), tracks: tracks } as Clip);
}

console.log(clips);

你可以用剪輯數據做任何你想做的事——它代表原始關鍵幀，每條軌道通過名稱識別它影響的 object。 這確實要求您的 glTF 文件具有動畫對象的唯一名稱。

如果你不想寫原始數據，而只是有一個新的 glTF 文件只包含 animation，你也可以這樣做：

import { prune } from '@gltf-transform/functions';

// remove all mesh data
for (const mesh of document.getRoot().listMeshes()) {
    for (const prim of mesh.listPrimitives()) {
        prim.dispose();
    }
}

// clean up unused materials, textures, ...
await document.transform(prune());

// (a) write to disk
await io.write('path/to/output.glb', document);

// (b) write to bytes
const bytes = await io.writeBinary(document);