Merging models

[raducal]

Hi,

I'm having some issues creating a single GLTF by merging multiple documents. I'm looping through chunks of coordinates and creating a document/buffer/blob for each chunk and then trying to merge them together. I've tried merging them in a Blob i.e new Blob([await new WebIO().writeBinary(doc1), await new WebIO().writeBinary(doc2)]) and I've also tried just merging the created documents with document.merge(otherDoc) with no luck. Any suggestions / ideas how I can achieve this? I've left a simplified example of what I'm doing atm to hopefully make it more clear what I'm trying to achieve.

for (const coord of coords) {
  const indices: number[]: getIndices(coord);
  const positions: number[]: getPositions(coord);

  const doc = new Document();

  const buffer = doc.createBuffer();

  const gltfPosition = doc
    .createAccessor()
    .setArray(new Float32Array(positions))
    .setType("VEC3")
    .setBuffer(buffer);
  const gltfIndices = doc
    .createAccessor()
    .setArray(new Uint32Array(indices))
    .setType("SCALAR")
    .setBuffer(buffer);

  const prim = doc
    .createPrimitive()
    .setAttribute("POSITION", gltfPosition)
    .setIndices(gltfIndices);

  const mesh = doc.createMesh("mesh").addPrimitive(prim);
  const node = doc.createNode("node").setMesh(mesh);
  doc.createScene().addChild(node);

  //do something here and merge them together
}

[donmccurdy]

Hi @raducostica! You'll need to merge(...) the Document instances, then write the Document to a file only once at the end. Merging N Documents results in a Document with N buffers and N scenes — in most cases you'll also want to consolidate to a single buffer and a single scene. See https://stackoverflow.com/a/68032114/1314762 if you choose to go this route.

However, it looks like you might be trying to create a scene containing N mesh primitives? In that case there's no point in generating N documents and scenes along the way. You can create one document, append N meshes or mesh primitives to it, and then write the result:

import { Document, NodeIO } from '@gltf-transform/core';

const doc = new Document();
const buffer = doc.createBuffer();
const mesh = doc.createMesh();
const node = doc.createNode().setMesh(mesh);
const scene = doc.createScene().addChild(node);

for (const coord of coords) {
  const indices: number[]: getIndices(coord);
  const positions: number[]: getPositions(coord);

  const gltfPosition = doc
    .createAccessor()
    .setArray(new Float32Array(positions))
    .setType("VEC3")
    .setBuffer(buffer);
  const gltfIndices = doc
    .createAccessor()
    .setArray(new Uint32Array(indices))
    .setType("SCALAR")
    .setBuffer(buffer);

  const prim = doc
    .createPrimitive()
    .setAttribute("POSITION", gltfPosition)
    .setIndices(gltfIndices);

  mesh.addPrimitive(prim);
}

const io = new NodeIO();

// (a) write to byte array
const glb = await io.writeBinary(document); // → Uint8Array (.glb)

// (b) write to disk
await io.write('./path/to/scene.glb', document);

[raducal]

Hey, thanks for the reply! This works well for smaller models, but I'm changing the size of models and once I reach a certain point I get 100's of the following error.

[.WebGL-0x11800b7c700] GL_INVALID_OPERATION: Vertex buffer is not big enough for the draw call

Any idea what's going wrong? The only change I made to the code provided was changing NodeIO to WebIO and creating a blob using the buffer glb returns (new Blob([glb.buffer], { type: "application/object" })) instead of writing to disk.

[donmccurdy]

It's hard to say, you may want to export the file and run it through the glTF Validator (https://github.khronos.org/glTF-Validator/) to see that it passes those tests. If it doesn't pass, the file is invalid, and you may need to share details so that others can reproduce the problem. If it does pass, you may need to file a bug with the WebGL engine you're using.

You may also want to double-check the input data — how many vertices per primitive? This should be in the range of [3, max], where "max" is 2^16 - 1 when OES_element_index_uint is unavailable, and hardware-dependent (up to 4 billion) when OES_element_index_uint is available. And then the indices should contain only vertices in that range.

[donmccurdy]

The answer to that is a bit open-ended, and might be its own conversation, do you mind opening a new question for it? :)

[raducal]

Sure no problem at all, opened up a new question here

[leefsmp]

I'm having a hard time figuring out how to exactly use the API from the example above, especially how coords would work.

Here is my scenario:

• model1.gltf: pos1 = (10,10,10)
• model2.gltf: pos2 = (20,20,20)

I want to create model3.gltf that aggregates model1 at pos1 and model2 at pos2.

Would be really great if you could provide a generic example based on those inputs, so all content of the models get merged into a single resulting scene in model3.

Thanks a bunch.

[donmccurdy]

@leefsmp possibly this answer might be closer to what you're looking for?

https://stackoverflow.com/a/68105608/1314762

I'd add one change to that answer, appending a new node to the scene for each input document, with the desired offset:

const root = document.getRoot();
const mainScene = root.listScenes()[0];

for (const scene of root.listScenes()) {
  if (scene === mainScene) continue;

  const modelRootNode = document.createNode().setName('SomeName').setPosition([x, y, z]);
  for (const child of scene.listChildren()) {
    modelRootNode.addChild(child);
  }
  mainScene.addChild(modelRootNode);

  scene.dispose();
}

There are some new APIs upcoming in v4 that should make this a bit easier too:

• feat(functions): Add mergeDocuments, cloneDocument, copyToDocument, moveToDocument #1375