Add joinPrimitives()

[donmccurdy]

Given a list of compatible Mesh Primitives, returns new Primitive containing their vertex data. Compatibility requires that all Primitives share the same Materials, draw mode, and vertex attribute types. Primitives using morph targets cannot currently be joined.

Related:

• Function to flatten node hierarchy, merge meshes #11

To do:

• Implementation
• Unit tests

Example:

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

// Succeeds if Primitives are compatible, or throws an error.
const result = joinPrimitives(mesh.listPrimitives());

for (const prim of mesh.listPrimitives()) {
    prim.dispose();
}

mesh.addPrimitive(result);

[drcmda]

in case it helps, these are the pruning steps in gltfjsx: https://github.com/pmndrs/gltfjsx/blob/master/src/utils/parser.js#L239-L310 pruning the graph results in smaller graphs but also improves performance since there are fewer nodes to parse and fewer matrix updates.

      /** Empty or no-property groups
       *    <group>
       *      <mesh geometry={nodes.foo} material={materials.bar} />
       *  Solution:
       *    <mesh geometry={nodes.foo} material={materials.bar} />
       */

      /** Double negative transforms
       *    <group rotation={[-Math.PI / 2, 0, 0]}>
       *      <group rotation={[Math.PI / 2, 0, 0]}>
       *        <mesh geometry={nodes.foo} material={materials.bar} />
       *  Solution:
       *    <mesh geometry={nodes.foo} material={materials.bar} />
       */
       
      /** Transform overlap      
       *    <group position={[10, 0, 0]} scale={2} rotation={[-Math.PI / 2, 0, 0]}>
       *      <mesh geometry={nodes.foo} material={materials.bar} />
       *  Solution:
       *    <mesh geometry={nodes.foo} material={materials.bar} position={[10, 0, 0]} scale={2} rotation={[-Math.PI / 2, 0, 0]} />
       */       
       
      /** Lack of content
       *    <group position={[10, 0, 0]} scale={2} rotation={[-Math.PI / 2, 0, 0]}>
       *      <group position={[10, 0, 0]} scale={2} rotation={[-Math.PI / 2, 0, 0]}>
       *        <group position={[10, 0, 0]} scale={2} rotation={[-Math.PI / 2, 0, 0]} />
       * Solution:
       *   (delete the sub graph)
       */

currently it is only a one-pass solution which is not enough. given:

export function Model(props) {
  const { nodes, materials } = useGLTF('/scene_test-transformed.glb')
  return (
    <group {...props} dispose={null}>
      <group>
        <group rotation={[-Math.PI / 2, 0, 0]}>
          <group>
            <group rotation={[Math.PI / 2, 0, 0]}>
              <group position={[0.16, 0.79, -1.97]} rotation={[-0.54, 0.93, -1.12]} scale={0.5}>
                <mesh geometry={nodes.Object_4.geometry} material={materials.Texture} />
              </group>
            </group>
          </group>
        </group>
      </group>
    </group>
  )
}

it will currently prune it as:

export function Model(props) {
  const { nodes, materials } = useGLTF('/scene_test-transformed.glb')
  return (
    <group {...props} dispose={null}>
      <group rotation={[-Math.PI / 2, 0, 0]}>
        <group rotation={[Math.PI / 2, 0, 0]}>
          <mesh geometry={nodes.Object_4.geometry} material={materials.Texture} position={[0.16, 0.79, -1.97]} rotation={[-0.54, 0.93, -1.12]} scale={0.5} />
        </group>
      </group>
    </group>
  )
}

which would be smaller if it had a backup pass:

export function Model(props) {
  const { nodes, materials } = useGLTF('/scene_test-transformed.glb')
  return (
    <group {...props} dispose={null}>
      <mesh geometry={nodes.Object_4.geometry} material={materials.Texture} position={[0.16, 0.79, -1.97]} rotation={[-0.54, 0.93, -1.12]} scale={0.5} />
    </group>
  )
}

i think graph pruning would make more sense as a gltf-transform step and i would love to remove it.

[drcmda]

scene_test.glb.zip

this a model for testing (the one above)

[donmccurdy]

@drcmda — the depth of the scene graph can be reduced with the new flatten() transform in the v3 prerelease:

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

await document.transform(flatten());

before	after

This PR for joinPrimitives(prims) is still open though, as I'm trying to go a bit further and support merging mesh primitives to reduce the draw calls after the scene graph has been flattened.

[drcmda]

@donmccurdy wow, nice work! if you have a minute to spare, could you go a little into how it's doing it and to which extend?

ps. this will be live in alpha 05?

[donmccurdy]

@drcmda sure thing, here's the description for flatten() —

Flattens the scene graph, leaving Nodes with Meshes, Cameras, and other
attachments as direct children of the Scene. Skeletons and their
descendants are left in their original Node structure.

Animation targeting a Node or its parents will prevent that Node from being
moved.

• Add flatten() #790

It computes the world matrix for each meaningful node, then moves it to the scene root without moving the node around in world space.

I'm open to leaving some escape hatches to preserve more structure where needed, perhaps based on node names, but for now this is aiming for the minimum possible nesting without breaking animation, which will be helpful once merging meshes is supported.

Should land in alpha 05, yes. 👍🏻