make-manifold

bindings/wasm/CMakeLists.txt

@@ -20,7 +20,7 @@ add_executable(manifoldjs bindings.cpp)
 set_source_files_properties(bindings.cpp OBJECT_DEPENDS
   ${CMAKE_CURRENT_SOURCE_DIR}/bindings.js)
 target_link_libraries(manifoldjs manifold sdf cross_section polygon)
-target_compile_options(manifoldjs PRIVATE ${MANIFOLD_FLAGS} -fexceptions)
+target_compile_options(manifoldjs PRIVATE ${MANIFOLD_FLAGS})
 target_link_options(manifoldjs PUBLIC --pre-js ${CMAKE_CURRENT_SOURCE_DIR}/bindings.js --bind -sALLOW_TABLE_GROWTH=1
   -sEXPORTED_RUNTIME_METHODS=addFunction,removeFunction -sMODULARIZE=1 -sEXPORT_ES6=1)
 

bindings/wasm/examples/built/manifold-encapsulated-types.d.ts

@@ -435,6 +435,7 @@ export class Mesh {
   get numTri(): number;
   get numVert(): number;
   get numRun(): number;
+  merge(): boolean;
   verts(tri: number): SealedUint32Array<3>;
   position(vert: number): SealedFloat32Array<3>;
   extras(vert: number): Float32Array;

bindings/wasm/examples/gltf-io.js

@@ -32,23 +32,17 @@ export function setupIO(io) {
   return io.registerExtensions([EXTManifold]);
 }
 
-export function readMesh(mesh, attributes, materials) {
-  if (attributes.length < 1 || attributes[0] !== 'POSITION')
-    throw new Error('First attribute must be "POSITION".');
-
-  const primitives = mesh.listPrimitives();
-  if (primitives.length === 0) {
-    return {};
-  }
-
-  const numProp = attributes.map((def) => attributeDefs[def].components)
-                      .reduce((a, b) => a + b);
-  const position = primitives[0].getAttribute('POSITION');
-  const numVert = position.getCount()
-  const vertProperties = new Float32Array(numProp * numVert);
+function readPrimitive(primitive, numProp, attributes) {
+  const position = primitive.getAttribute('POSITION');
+  const numVert = position.getCount();
+  const vertProperties = [];
   let offset = 0;
   for (const attribute of attributes) {
-    const accessor = primitives[0].getAttribute(attribute);
+    if (attribute === 'SKIP') {
+      offset += attributeDefs[attribute].components;
+      continue;
+    }
+    const accessor = primitive.getAttribute(attribute);
     const array = accessor.getArray();
     const size = accessor.getElementSize();
     for (let i = 0; i < numVert; ++i) {
@@ -58,36 +52,80 @@ export function readMesh(mesh, attributes, materials) {
     }
     offset += size;
   }
+  return vertProperties;
+}
+
+export function readMesh(mesh, attributes, materials) {
+  const primitives = mesh.listPrimitives();
+  if (primitives.length === 0) {
+    return {};
+  }
 
-  const triVertArray = [];
-  const runIndexArray = [0];
-  for (const primitive of primitives) {
-    if (primitive.getAttribute('POSITION') === position) {
-      triVertArray.push(...primitive.getIndices().getArray());
-      runIndexArray.push(triVertArray.length);
-      materials.push(primitive.getMaterial());
-    } else {
-      console.log('primitives do not share accessors!');
+  if (attributes.length === 0) {
+    const attributeSet = new Set();
+    for (const primitive of primitives) {
+      const semantics = primitive.listSemantics();
+      for (const semantic of semantics) {
+        attributeSet.add(semantic);
+      }
+    }
+    for (const semantic in attributeDefs) {
+      if (attributeSet.has(semantic)) {
+        attributes.push(semantic);
+        attributeSet.delete(semantic);
+      }
+    }
+    for (const semantic of attributeSet.keys()) {
+      attributes.push(semantic);
     }
   }
-  const triVerts = new Uint32Array(triVertArray);
-  const runIndex = new Uint32Array(runIndexArray);
+
+  if (attributes.length < 1 || attributes[0] !== 'POSITION')
+    throw new Error('First attribute must be "POSITION".');
+
+  const numProp = attributes.map((def) => attributeDefs[def].components)
+                      .reduce((a, b) => a + b);
 
   const manifoldPrimitive = mesh.getExtension('EXT_manifold');
-  const mergeTriVert =
-      manifoldPrimitive ? manifoldPrimitive.getMergeIndices().getArray() : [];
-  const mergeTo =
-      manifoldPrimitive ? manifoldPrimitive.getMergeValues().getArray() : [];
-  const vert2merge = new Map();
-  for (const [i, idx] of mergeTriVert.entries()) {
-    vert2merge.set(triVerts[idx], mergeTo[i]);
-  }
+
+  let vertPropArray = [];
+  let triVertArray = [];
+  const runIndexArray = [0];
   const mergeFromVert = [];
   const mergeToVert = [];
-  for (const [from, to] of vert2merge.entries()) {
-    mergeFromVert.push(from);
-    mergeToVert.push(to);
+  if (manifoldPrimitive != null) {
+    vertPropArray = readPrimitive(primitives[0], numProp, attributes);
+    for (const primitive of primitives) {
+      triVertArray = [...triVertArray, ...primitive.getIndices().getArray()];
+      runIndexArray.push(triVertArray.length);
+      materials.push(primitive.getMaterial());
+    }
+    const mergeTriVert = manifoldPrimitive.getMergeIndices()?.getArray() ?? [];
+    const mergeTo = manifoldPrimitive.getMergeValues()?.getArray() ?? [];
+    const vert2merge = new Map();
+    for (const [i, idx] of mergeTriVert.entries()) {
+      vert2merge.set(triVertArray[idx], mergeTo[i]);
+    }
+    for (const [from, to] of vert2merge.entries()) {
+      mergeFromVert.push(from);
+      mergeToVert.push(to);
+    }
+  } else {
+    for (const primitive of primitives) {
+      const numVert = vertPropArray.length / numProp;
+      vertPropArray =
+          [...vertPropArray, ...readPrimitive(primitive, numProp, attributes)];
+      triVertArray = [
+        ...triVertArray,
+        ...primitive.getIndices().getArray().map((i) => i + numVert)
+      ];
+      runIndexArray.push(triVertArray.length);
+      materials.push(primitive.getMaterial());
+    }
   }
+  const vertProperties = new Float32Array(vertPropArray);
+  const triVerts = new Uint32Array(triVertArray);
+  const runIndex = new Uint32Array(runIndexArray);
 
   return {
     numProp,
@@ -106,14 +144,13 @@ export function writeMesh(doc, manifoldMesh, attributes, materials) {
   const buffer = doc.getRoot().listBuffers()[0];
   const manifoldExtension = doc.createExtension(EXTManifold);
 
-  const indices = doc.createAccessor('indices')
-                      .setBuffer(buffer)
-                      .setType(Accessor.Type.SCALAR)
-                      .setArray(manifoldMesh.triVerts);
-
   const mesh = doc.createMesh();
   const numPrimitive = manifoldMesh.runIndex.length - 1;
   for (let run = 0; run < numPrimitive; ++run) {
+    const indices = doc.createAccessor('indices')
+                        .setBuffer(buffer)
+                        .setType(Accessor.Type.SCALAR)
+                        .setArray(new Uint32Array());
     const primitive = doc.createPrimitive().setIndices(indices);
     const material = materials[run];
     if (material) {
@@ -159,6 +196,12 @@ export function writeMesh(doc, manifoldMesh, attributes, materials) {
 
   const manifoldPrimitive = manifoldExtension.createManifoldPrimitive();
   mesh.setExtension('EXT_manifold', manifoldPrimitive);
+
+  const indices = doc.createAccessor('indices')
+                      .setBuffer(buffer)
+                      .setType(Accessor.Type.SCALAR)
+                      .setArray(manifoldMesh.triVerts);
+  manifoldPrimitive.setIndices(indices);
   manifoldPrimitive.setRunIndex(manifoldMesh.runIndex);
 
   const vert2merge = [...Array(manifoldMesh.numVert).keys()];

bindings/wasm/examples/make-manifold.html

@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <title>Make manifold glTF</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" type="image/png" href="https://elalish.github.io/manifold/samples/models/favicon.png" />
+  <style>
+    body {
+      background-color: #f7f7f7;
+      font-family: 'Rubik', sans-serif;
+      font-size: 16px;
+      line-height: 24px;
+      color: rgba(0, 0, 0, .87);
+      font-weight: 400;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    p {
+      max-width: 700px;
+      margin: 1em;
+      text-align: left;
+    }
+
+    model-viewer {
+      display: block;
+      width: 100vw;
+      height: 100vw;
+      max-width: 600px;
+      max-height: 600px;
+      border: 3px solid black;
+      border-radius: 10px;
+      margin-top: 5px;
+    }
+
+    #poster {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate3d(-50%, -50%, 0);
+    }
+  </style>
+</head>
+
+<body>
+  <p>Load a glTF/GLB model and our <a href="https://github.com/elalish/manifold">Manifold</a> library will attempt to
+    merge it into a set of manifold objects. If the model is water-tight, you can download the new GLB which will have
+    our <a href="https://github.com/KhronosGroup/glTF/pull/2286">EXT_manifold</a> extension, thus preserving the
+    manifold data without losing any mesh properties.</p>
+  <p> If the View Manifold GLB checkbox is enabled, then some meshes in the model have open edges and don't represent a
+    solid object. Check this box to see only the manifold parts, which will also enable them to be downloaded. If the
+    download button is still disabled, it means there were no manifold meshes found. </p>
+  <input type="file" id="input">
+  <button id="download" disabled>Download manifold GLB</button>
+  <input type="checkbox" id="viewFinal" disabled>
+  <label for="viewFinal">View Manifold GLB</label>
+  <model-viewer camera-controls shadow-intensity="1" alt="Loaded GLB model">
+    <span id="poster" slot="poster">Drop a GLB here</span>
+  </model-viewer>
+</body>
+<script type="importmap">
+  {
+    "imports": {
+      "@gltf-transform/core": "https://cdn.jsdelivr.net/npm/@gltf-transform/core@3.2.1/+esm",
+      "@gltf-transform/functions": "https://cdn.jsdelivr.net/npm/@gltf-transform/functions@3.2.1/+esm",
+      "@gltf-transform/extensions": "https://cdn.jsdelivr.net/npm/@gltf-transform/extensions@3.2.1/+esm"
+    }
+  }
+</script>
+<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/2.0.1/model-viewer.min.js"></script>
+<script type="module">
+  import { WebIO } from '@gltf-transform/core';
+  import { prune } from '@gltf-transform/functions';
+  import { KHRONOS_EXTENSIONS } from '@gltf-transform/extensions';
+  import { SimpleDropzone } from 'https://cdn.jsdelivr.net/npm/simple-dropzone@0.8.3/+esm';
+  import { readMesh, writeMesh, setupIO } from './gltf-io.js';
+  import Module from './built/manifold.js';
+
+  const io = setupIO(new WebIO());
+  io.registerExtensions(KHRONOS_EXTENSIONS);
+
+  const wasm = await Module();
+  wasm.setup();
+
+  const mv = document.querySelector('model-viewer');
+  const inputEl = document.querySelector('#input');
+  const downloadButton = document.querySelector('#download');
+  const checkbox = document.querySelector('#viewFinal');
+  const dropCtrl = new SimpleDropzone(mv, inputEl);
+
+  let inputGLBurl = null;
+  let outputGLBurl = null;
+  let allManifold = true;
+  let anyManifold = false;
+
+  dropCtrl.on('drop', async ({ files }) => {
+    for (const [path, file] of files) {
+      const filename = file.name.toLowerCase();
+      if (filename.match(/\.(gltf|glb)$/)) {
+        URL.revokeObjectURL(inputGLBurl);
+        inputGLBurl = URL.createObjectURL(file);
+        await writeGLB(await readGLB(inputGLBurl));
+        updateUI();
+        break;
+      }
+    }
+  });
+
+  function updateUI() {
+    if (allManifold) {
+      checkbox.checked = true;
+      checkbox.disabled = true;
+    } else if (anyManifold) {
+      checkbox.checked = false;
+      checkbox.disabled = false;
+    } else {
+      checkbox.checked = false;
+      checkbox.disabled = true;
+    }
+    onClick();
+  }
+
+  checkbox.onclick = onClick;
+
+  function onClick() {
+    mv.src = checkbox.checked ? outputGLBurl : inputGLBurl;
+    downloadButton.disabled = !checkbox.checked;
+  };
+
+  downloadButton.onclick = function () {
+    const link = document.createElement('a');
+    link.download = 'manifold.glb';
+    link.href = outputGLBurl;
+    link.click();
+  };
+
+  async function writeGLB(doc) {
+    URL.revokeObjectURL(outputGLBurl);
+    if (!anyManifold) {
+      return;
+    }
+    const glb = await io.writeBinary(doc);
+
+    const blob = new Blob([glb], { type: 'application/octet-stream' });
+    outputGLBurl = URL.createObjectURL(blob);
+  }
+
+  async function readGLB(url) {
+    allManifold = false;
+    anyManifold = false;
+    updateUI();
+    allManifold = true;
+    const docIn = await io.read(url);
+    const nodes = docIn.getRoot().listNodes();
+    for (const node of nodes) {
+      const attributes = [];
+      const mesh = node.getMesh();
+      if (!mesh) {
+        continue;
+      }
+
+      const materials = [];
+      const tmpMesh = readMesh(mesh, attributes, materials);
+      tmpMesh.runOriginalID = [];
+      const firstID = wasm.reserveIDs(materials.length);
+      for (let i = 0; i < materials.length; ++i) {
+        tmpMesh.runOriginalID.push(firstID + i);
+      }
+      const manifoldMesh = new wasm.Mesh(tmpMesh);
+      mesh.dispose();
+
+      manifoldMesh.merge();
+
+      try {
+        // Test manifoldness - will throw if not.
+        const manifold = wasm.Manifold(manifoldMesh);
+        node.setMesh(writeMesh(docIn, manifold.getMesh(), attributes, materials));
+        manifold.delete();
+        anyManifold = true;
+      } catch (e) {
+        console.log(mesh.getName(), e);
+        allManifold = false;
+      }
+    }
+
+    await docIn.transform(prune());
+
+    return docIn;
+  }
+</script>
+
+</html>