Divide glTF Document

README.md

Divide glTF Document

Example script showing how to use glTF-Transform (https://gltf-transform.donmccurdy.com/) to divide a glTF asset — along an axis — into two GLBs, each occupying half the original bounding box. This is just a rough illustration, and has only been tested against a point cloud containing a single mesh. A production implementation would want to do more than this:

• support >2 divisions
• for primitives that lie fully in one division, don't write an empty primitive to the others
• support triangles, lines, etc.

For input with significant outliers (e.g. noisy point clouds), dividing by the center of the bounding box may give unexpected results.

divide.ts

import { bbox, Document, NodeIO, Primitive } from '@gltf-transform/core';
import { ALL_EXTENSIONS } from '@gltf-transform/extensions';
import { bounds } from '@gltf-transform/functions';
import { MeshoptDecoder, MeshoptEncoder } from 'meshoptimizer';

// Constants and interfaces.

const SPLIT_AXIS = 1;

const IN = './in.glb';
const OUT_LHS = './out-LHS.glb';
const OUT_RHS = './out-RHS.glb';

interface AttributeData {
    [key: string]: Uint8Array | Uint16Array | Uint32Array | Int8Array | Int16Array | Int32Array | Float32Array;
}

interface SplitPrimitive {
    lhs: AttributeData;
    rhs: AttributeData;
}

// Main process.

(async () => {
    await MeshoptDecoder.ready;
    await MeshoptEncoder.ready;

    const io = new NodeIO()
        .registerExtensions(ALL_EXTENSIONS)
        .registerDependencies({
            'meshopt.decoder': MeshoptDecoder,
            'meshopt.encoder': MeshoptEncoder,
        });

    console.log('loading scene...');
    const document = io.read(IN);
    const scene = document.getRoot().getDefaultScene();
    const bbox = bounds(scene);

    console.log('bounding box: ', bbox);

    console.log('computing LHS and RHS...');
    const splitPrims = new Map<Primitive, SplitPrimitive>();
    for (const mesh of document.getRoot().listMeshes()) {
        for (const prim of mesh.listPrimitives()) {
            splitPrims.set(prim, createSplitPrimitive(prim, bbox, document));
        }
    }

    console.log('writing LHS...');
    setState(document, splitPrims, 'lhs');
    io.write(OUT_LHS, document);

    console.log('writing RHS...');
    setState(document, splitPrims, 'rhs');
    io.write(OUT_RHS, document);

    console.log('🍻  Done!')
})();

// Splits a primitive in half.

function createSplitPrimitive(prim: Primitive, bbox: bbox, document: Document): SplitPrimitive {
    const mid = (bbox.max[SPLIT_AXIS] - bbox.min[SPLIT_AXIS]) / 2 + bbox.min[SPLIT_AXIS];
    const position = prim.getAttribute('POSITION');

    const positionEl = [];
    const attributeEl = [];

    // Count vertices in LHS so we can allocate space.
    let leftCount = 0;
    for (let i = 0, il = position.getCount(); i < il; i++) {
        position.getElement(i, positionEl);
        if (positionEl[SPLIT_AXIS] < mid) leftCount++;
    }
    const rightCount = position.getCount() - leftCount;

    const tmpAccessor = document.createAccessor();
    const splitPrim = {lhs: {}, rhs: {}} as SplitPrimitive;

    // For each attribute element, write to LHS or RHS.
    for (const semantic of prim.listSemantics()) {
        const attribute = prim.getAttribute(semantic);
        tmpAccessor.copy(attribute);

        const TypedArrayConstructor = attribute.getArray().constructor as Float32ArrayConstructor;
        splitPrim.lhs[semantic] = new TypedArrayConstructor(leftCount * attribute.getElementSize());
        splitPrim.rhs[semantic] = new TypedArrayConstructor(rightCount * attribute.getElementSize());

        let nextLeftIndex = 0;
        let nextRightIndex = 0;
        for (let i = 0, il = position.getCount(); i < il; i++) {
            position.getElement(i, positionEl);
            attribute.getElement(i, attributeEl);
            if (positionEl[SPLIT_AXIS] < mid) {
                tmpAccessor
                    .setArray(splitPrim.lhs[semantic] as any)
                    .setElement(nextLeftIndex++, attributeEl);
            } else {
                tmpAccessor
                    .setArray(splitPrim.rhs[semantic] as any)
                    .setElement(nextRightIndex++, attributeEl);
            }
        }
    }

    // Clean up.
    tmpAccessor.dispose();

    return splitPrim;
}

// Set Document to LHS or RHS state.

function setState(document: Document, map: Map<Primitive, SplitPrimitive>, state: string) {
    for (const mesh of document.getRoot().listMeshes()) {
        for (const prim of mesh.listPrimitives()) {
            const splitPrim = map.get(prim);
            const primState = splitPrim[state];
            for (const semantic of prim.listSemantics()) {
                prim.getAttribute(semantic).setArray(primState[semantic]);
            }
        }
    }
}

package.json

{
  "dependencies": {
    "@gltf-transform/core": "^0.12.12",
    "@gltf-transform/extensions": "^0.12.12",
    "@gltf-transform/functions": "^0.12.12",
    "meshoptimizer": "^0.16.1"
  },
  "devDependencies": {
    "ts-node": "^10.2.1"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "lib": ["ES2020"]
    }
}