[{"data":1,"prerenderedAt":1443},["ShallowReactive",2],{"tutorial-fast-mesh-booleans-in-javascript":3},{"id":4,"title":5,"author":6,"body":7,"date":1421,"description":1422,"extension":1423,"keywords":1424,"meta":1433,"navigation":352,"path":1434,"published":352,"seo":1435,"stem":1436,"tags":1437,"__hash__":1442},"tutorials\u002Ftutorials\u002Ffast-mesh-booleans-in-javascript.md","Fast Mesh Booleans in JavaScript","Žiga Sajovic",{"type":8,"value":9,"toc":1406},"minimark",[10,28,35,39,42,46,51,56,81,95,99,132,143,223,226,371,382,386,395,427,430,502,505,509,517,520,586,591,635,639,675,679,715,726,730,748,751,781,784,845,849,852,909,912,1036,1039,1043,1049,1166,1175,1196,1200,1205,1339,1343,1346,1350,1370,1376,1381,1386,1398,1402],[11,12,13],"note",{},[14,15,16,17,22,23,27],"p",{},"Also available in ",[18,19,21],"a",{"href":20},"\u002Ftutorials\u002Ffast-mesh-booleans-in-cpp","C++"," and ",[18,24,26],{"href":25},"\u002Ftutorials\u002Ffast-mesh-booleans-in-python","Python",".",[14,29,30,34],{},[31,32,33],"code",{},"trueform"," is the fastest JavaScript mesh boolean library for real-world meshes — performing exact boolean union, intersection, and difference at interactive speed. WebAssembly-powered, it runs in Node.js and the browser with the same API. This tutorial covers the basics: loading meshes, running booleans, and working with results. It then shows how to precompute structures and use shallow copies to avoid rebuilding them, enabling boolean operations on moving geometry at real-time rates.",[36,37],"article-cta",{":buttons":38},"[{\"label\":\"trueform\",\"to\":\"\u002Ftrueform\",\"icon\":\"i-lucide-cpu\",\"variant\":\"soft\",\"color\":\"neutral\"},{\"label\":\"GitHub\",\"to\":\"https:\u002F\u002Fgithub.com\u002Fpolydera\u002Ftrueform\",\"icon\":\"i-simple-icons-github\",\"variant\":\"soft\",\"color\":\"neutral\"},{\"label\":\"Documentation\",\"to\":\"https:\u002F\u002Ftrueform.polydera.com\u002Fts\u002Fgetting-started\u002Finstallation\",\"variant\":\"soft\",\"color\":\"neutral\"},{\"label\":\"Try it live\",\"to\":\"https:\u002F\u002Ftrueform.polydera.com\u002Flive-examples\u002Fboolean\",\"icon\":\"i-lucide-play\"}]",[14,40,41],{},"We will use the Stanford Dragon to demonstrate boolean union, intersection, and difference between two offset copies of the same mesh.",[43,44],"image-grid",{":images":45},"[{\"src\":\"\u002Fimg\u002Ftutorials\u002Fdragon_original.png\",\"label\":\"Dragon\",\"detail\":\"500K triangles\"},{\"src\":\"\u002Fimg\u002Ftutorials\u002Fdragon_union.png\",\"label\":\"Union\",\"detail\":\"A ∪ B\"},{\"src\":\"\u002Fimg\u002Ftutorials\u002Fdragon_difference.png\",\"label\":\"Difference\",\"detail\":\"A \\\\ B\"},{\"src\":\"\u002Fimg\u002Ftutorials\u002Fdragon_intersection.png\",\"label\":\"Intersection\",\"detail\":\"A ∩ B\"}]",[14,47,48,49,27],{},"Each boolean under 27ms on 2×500K polygons via WebAssembly. Let's begin by installing ",[31,50,33],{},[52,53,55],"h2",{"id":54},"install","Install",[57,58,63],"pre",{"className":59,"code":60,"language":61,"meta":62,"style":62},"language-bash shiki shiki-themes github-dark","npm install @polydera\u002Ftrueform\n","bash","",[31,64,65],{"__ignoreMap":62},[66,67,70,74,78],"span",{"class":68,"line":69},"line",1,[66,71,73],{"class":72},"svObZ","npm",[66,75,77],{"class":76},"sU2Wk"," install",[66,79,80],{"class":76}," @polydera\u002Ftrueform\n",[14,82,83,84,87,88,94],{},"The WebAssembly binary loads automatically on first use. In the browser, ",[31,85,86],{},"SharedArrayBuffer"," headers are required for multithreading — see the ",[18,89,93],{"href":90,"rel":91},"https:\u002F\u002Ftrueform.polydera.com\u002Fts\u002Fgetting-started\u002Finstallation",[92],"nofollow","installation guide"," for details.",[52,96,98],{"id":97},"loading-the-mesh","Loading the mesh",[57,100,104],{"className":101,"code":102,"language":103,"meta":62,"style":62},"language-typescript shiki shiki-themes github-dark","import * as tf from \"@polydera\u002Ftrueform\";\n","typescript",[31,105,106],{"__ignoreMap":62},[66,107,108,112,116,119,123,126,129],{"class":68,"line":69},[66,109,111],{"class":110},"snl16","import",[66,113,115],{"class":114},"sDLfK"," *",[66,117,118],{"class":110}," as",[66,120,122],{"class":121},"s95oV"," tf ",[66,124,125],{"class":110},"from",[66,127,128],{"class":76}," \"@polydera\u002Ftrueform\"",[66,130,131],{"class":121},";\n",[14,133,134,135,138,139,142],{},"Load from a file — in the browser via ",[31,136,137],{},"fetch",", in Node.js via ",[31,140,141],{},"fs",":",[57,144,146],{"className":101,"code":145,"language":103,"meta":62,"style":62},"const response = await fetch(\"stanford_dragon.stl\");\nconst bytes = new Uint8Array(await response.arrayBuffer());\nconst dragon = tf.readStl(bytes);\n",[31,147,148,174,204],{"__ignoreMap":62},[66,149,150,153,156,159,162,165,168,171],{"class":68,"line":69},[66,151,152],{"class":110},"const",[66,154,155],{"class":114}," response",[66,157,158],{"class":110}," =",[66,160,161],{"class":110}," await",[66,163,164],{"class":72}," fetch",[66,166,167],{"class":121},"(",[66,169,170],{"class":76},"\"stanford_dragon.stl\"",[66,172,173],{"class":121},");\n",[66,175,177,179,182,184,187,190,192,195,198,201],{"class":68,"line":176},2,[66,178,152],{"class":110},[66,180,181],{"class":114}," bytes",[66,183,158],{"class":110},[66,185,186],{"class":110}," new",[66,188,189],{"class":72}," Uint8Array",[66,191,167],{"class":121},[66,193,194],{"class":110},"await",[66,196,197],{"class":121}," response.",[66,199,200],{"class":72},"arrayBuffer",[66,202,203],{"class":121},"());\n",[66,205,207,209,212,214,217,220],{"class":68,"line":206},3,[66,208,152],{"class":110},[66,210,211],{"class":114}," dragon",[66,213,158],{"class":110},[66,215,216],{"class":121}," tf.",[66,218,219],{"class":72},"readStl",[66,221,222],{"class":121},"(bytes);\n",[14,224,225],{},"Or construct a mesh from flat arrays:",[57,227,229],{"className":101,"code":228,"language":103,"meta":62,"style":62},"const faces = new Int32Array([0, 1, 2, 0, 2, 3]);\nconst points = new Float32Array([\n    0,0,0, 1,0,0, 0,1,0, 1,1,0]);\n\nconst dragon = tf.mesh(faces, points);\n",[31,230,231,278,295,347,354],{"__ignoreMap":62},[66,232,233,235,238,240,242,245,248,251,254,257,259,262,264,266,268,270,272,275],{"class":68,"line":69},[66,234,152],{"class":110},[66,236,237],{"class":114}," faces",[66,239,158],{"class":110},[66,241,186],{"class":110},[66,243,244],{"class":72}," Int32Array",[66,246,247],{"class":121},"([",[66,249,250],{"class":114},"0",[66,252,253],{"class":121},", ",[66,255,256],{"class":114},"1",[66,258,253],{"class":121},[66,260,261],{"class":114},"2",[66,263,253],{"class":121},[66,265,250],{"class":114},[66,267,253],{"class":121},[66,269,261],{"class":114},[66,271,253],{"class":121},[66,273,274],{"class":114},"3",[66,276,277],{"class":121},"]);\n",[66,279,280,282,285,287,289,292],{"class":68,"line":176},[66,281,152],{"class":110},[66,283,284],{"class":114}," points",[66,286,158],{"class":110},[66,288,186],{"class":110},[66,290,291],{"class":72}," Float32Array",[66,293,294],{"class":121},"([\n",[66,296,297,300,303,305,307,309,311,313,315,317,319,321,323,325,327,329,331,333,335,337,339,341,343,345],{"class":68,"line":206},[66,298,299],{"class":114},"    0",[66,301,302],{"class":121},",",[66,304,250],{"class":114},[66,306,302],{"class":121},[66,308,250],{"class":114},[66,310,253],{"class":121},[66,312,256],{"class":114},[66,314,302],{"class":121},[66,316,250],{"class":114},[66,318,302],{"class":121},[66,320,250],{"class":114},[66,322,253],{"class":121},[66,324,250],{"class":114},[66,326,302],{"class":121},[66,328,256],{"class":114},[66,330,302],{"class":121},[66,332,250],{"class":114},[66,334,253],{"class":121},[66,336,256],{"class":114},[66,338,302],{"class":121},[66,340,256],{"class":114},[66,342,302],{"class":121},[66,344,250],{"class":114},[66,346,277],{"class":121},[66,348,350],{"class":68,"line":349},4,[66,351,353],{"emptyLinePlaceholder":352},true,"\n",[66,355,357,359,361,363,365,368],{"class":68,"line":356},5,[66,358,152],{"class":110},[66,360,211],{"class":114},[66,362,158],{"class":110},[66,364,216],{"class":121},[66,366,367],{"class":72},"mesh",[66,369,370],{"class":121},"(faces, points);\n",[14,372,373,374,381],{},"The ",[18,375,378],{"href":376,"rel":377},"https:\u002F\u002Ftrueform.polydera.com\u002Fts\u002Fmodules\u002Fcore#mesh",[92],[31,379,380],{},"Mesh"," form wraps your data with geometric semantics — spatial queries, topology, and boolean operations all work directly on it.",[52,383,385],{"id":384},"transformations","Transformations",[14,387,388,389,394],{},"To perform a boolean between two copies of the dragon at different positions, set a ",[18,390,393],{"href":391,"rel":392},"https:\u002F\u002Ftrueform.polydera.com\u002Fts\u002Fmodules\u002Fspatial#transformations-on-forms",[92],"transformation"," on the mesh. The underlying data is shared — no vertices are copied.",[57,396,398],{"className":101,"code":397,"language":103,"meta":62,"style":62},"dragon.transformation = tf.makeTranslation(0, 1, 0);\n",[31,399,400],{"__ignoreMap":62},[66,401,402,405,408,410,413,415,417,419,421,423,425],{"class":68,"line":69},[66,403,404],{"class":121},"dragon.transformation ",[66,406,407],{"class":110},"=",[66,409,216],{"class":121},[66,411,412],{"class":72},"makeTranslation",[66,414,167],{"class":121},[66,416,250],{"class":114},[66,418,253],{"class":121},[66,420,256],{"class":114},[66,422,253],{"class":121},[66,424,250],{"class":114},[66,426,173],{"class":121},[14,428,429],{},"Rotations and combined transforms:",[57,431,433],{"className":101,"code":432,"language":103,"meta":62,"style":62},"dragon.transformation = tf.makeRotation(90, \"z\");\ndragon.transformation = tf.makeRotation(45, [1, 0, 0], [0, 0, 5]);\n",[31,434,435,458],{"__ignoreMap":62},[66,436,437,439,441,443,446,448,451,453,456],{"class":68,"line":69},[66,438,404],{"class":121},[66,440,407],{"class":110},[66,442,216],{"class":121},[66,444,445],{"class":72},"makeRotation",[66,447,167],{"class":121},[66,449,450],{"class":114},"90",[66,452,253],{"class":121},[66,454,455],{"class":76},"\"z\"",[66,457,173],{"class":121},[66,459,460,462,464,466,468,470,473,476,478,480,482,484,486,489,491,493,495,497,500],{"class":68,"line":176},[66,461,404],{"class":121},[66,463,407],{"class":110},[66,465,216],{"class":121},[66,467,445],{"class":72},[66,469,167],{"class":121},[66,471,472],{"class":114},"45",[66,474,475],{"class":121},", [",[66,477,256],{"class":114},[66,479,253],{"class":121},[66,481,250],{"class":114},[66,483,253],{"class":121},[66,485,250],{"class":114},[66,487,488],{"class":121},"], [",[66,490,250],{"class":114},[66,492,253],{"class":121},[66,494,250],{"class":114},[66,496,253],{"class":121},[66,498,499],{"class":114},"5",[66,501,277],{"class":121},[14,503,504],{},"The spatial tree and topology structures stay valid across transformations — they are applied on-the-fly during queries.",[52,506,508],{"id":507},"boolean-operations","Boolean operations",[14,510,511,512,27],{},"With two forms ready, a boolean is a single call. ",[18,513,516],{"href":514,"rel":515},"https:\u002F\u002Ftrueform.polydera.com\u002Fts\u002Fmodules\u002Fcut#boolean-operations",[92],"Full documentation",[14,518,519],{},"To boolean two copies at different positions, create a shallow copy. It shares all underlying data and structures but carries its own transformation:",[57,521,523],{"className":101,"code":522,"language":103,"meta":62,"style":62},"const dragon = tf.readStl(bytes);\n\nconst translated = dragon.shallowCopy();\ntranslated.transformation = tf.makeTranslation(0, 1, 0);\n",[31,524,525,539,543,561],{"__ignoreMap":62},[66,526,527,529,531,533,535,537],{"class":68,"line":69},[66,528,152],{"class":110},[66,530,211],{"class":114},[66,532,158],{"class":110},[66,534,216],{"class":121},[66,536,219],{"class":72},[66,538,222],{"class":121},[66,540,541],{"class":68,"line":176},[66,542,353],{"emptyLinePlaceholder":352},[66,544,545,547,550,552,555,558],{"class":68,"line":206},[66,546,152],{"class":110},[66,548,549],{"class":114}," translated",[66,551,158],{"class":110},[66,553,554],{"class":121}," dragon.",[66,556,557],{"class":72},"shallowCopy",[66,559,560],{"class":121},"();\n",[66,562,563,566,568,570,572,574,576,578,580,582,584],{"class":68,"line":349},[66,564,565],{"class":121},"translated.transformation ",[66,567,407],{"class":110},[66,569,216],{"class":121},[66,571,412],{"class":72},[66,573,167],{"class":121},[66,575,250],{"class":114},[66,577,253],{"class":121},[66,579,256],{"class":114},[66,581,253],{"class":121},[66,583,250],{"class":114},[66,585,173],{"class":121},[587,588,590],"h3",{"id":589},"union","Union",[57,592,594],{"className":101,"code":593,"language":103,"meta":62,"style":62},"const { mesh, labels, faceLabels } =\n    await tf.async.booleanUnion(dragon, translated);\n",[31,595,596,621],{"__ignoreMap":62},[66,597,598,600,603,605,607,610,612,615,618],{"class":68,"line":69},[66,599,152],{"class":110},[66,601,602],{"class":121}," { ",[66,604,367],{"class":114},[66,606,253],{"class":121},[66,608,609],{"class":114},"labels",[66,611,253],{"class":121},[66,613,614],{"class":114},"faceLabels",[66,616,617],{"class":121}," } ",[66,619,620],{"class":110},"=\n",[66,622,623,626,629,632],{"class":68,"line":176},[66,624,625],{"class":110},"    await",[66,627,628],{"class":121}," tf.async.",[66,630,631],{"class":72},"booleanUnion",[66,633,634],{"class":121},"(dragon, translated);\n",[587,636,638],{"id":637},"difference","Difference",[57,640,642],{"className":101,"code":641,"language":103,"meta":62,"style":62},"const { mesh, labels, faceLabels } =\n    await tf.async.booleanDifference(dragon, translated);\n",[31,643,644,664],{"__ignoreMap":62},[66,645,646,648,650,652,654,656,658,660,662],{"class":68,"line":69},[66,647,152],{"class":110},[66,649,602],{"class":121},[66,651,367],{"class":114},[66,653,253],{"class":121},[66,655,609],{"class":114},[66,657,253],{"class":121},[66,659,614],{"class":114},[66,661,617],{"class":121},[66,663,620],{"class":110},[66,665,666,668,670,673],{"class":68,"line":176},[66,667,625],{"class":110},[66,669,628],{"class":121},[66,671,672],{"class":72},"booleanDifference",[66,674,634],{"class":121},[587,676,678],{"id":677},"intersection","Intersection",[57,680,682],{"className":101,"code":681,"language":103,"meta":62,"style":62},"const { mesh, labels, faceLabels } =\n    await tf.async.booleanIntersection(dragon, translated);\n",[31,683,684,704],{"__ignoreMap":62},[66,685,686,688,690,692,694,696,698,700,702],{"class":68,"line":69},[66,687,152],{"class":110},[66,689,602],{"class":121},[66,691,367],{"class":114},[66,693,253],{"class":121},[66,695,609],{"class":114},[66,697,253],{"class":121},[66,699,614],{"class":114},[66,701,617],{"class":121},[66,703,620],{"class":110},[66,705,706,708,710,713],{"class":68,"line":176},[66,707,625],{"class":110},[66,709,628],{"class":121},[66,711,712],{"class":72},"booleanIntersection",[66,714,634],{"class":121},[14,716,717,718,721,722,725],{},"All heavy operations have async variants under ",[31,719,720],{},"tf.async.*"," — they run off the main thread, keeping the UI responsive. Synchronous versions (",[31,723,724],{},"tf.booleanUnion",", etc.) are also available.",[587,727,729],{"id":728},"working-with-results","Working with results",[14,731,732,733,735,736,738,739,741,742,744,745,747],{},"Every boolean returns three values. ",[31,734,367],{}," is the output Mesh. ",[31,737,609],{}," marks each output face — ",[31,740,250],{}," for faces originating from the first input, ",[31,743,256],{}," from the second. ",[31,746,614],{}," maps each output face back to the index of its source face in the input, enabling attribute transfer.",[14,749,750],{},"To split the result into separate meshes by label:",[57,752,754],{"className":101,"code":753,"language":103,"meta":62,"style":62},"const { components } =\n    await tf.async.splitIntoComponents(mesh, labels);\n",[31,755,756,769],{"__ignoreMap":62},[66,757,758,760,762,765,767],{"class":68,"line":69},[66,759,152],{"class":110},[66,761,602],{"class":121},[66,763,764],{"class":114},"components",[66,766,617],{"class":121},[66,768,620],{"class":110},[66,770,771,773,775,778],{"class":68,"line":176},[66,772,625],{"class":110},[66,774,628],{"class":121},[66,776,777],{"class":72},"splitIntoComponents",[66,779,780],{"class":121},"(mesh, labels);\n",[14,782,783],{},"Write to STL or OBJ — the result is a buffer you can download or save:",[57,785,787],{"className":101,"code":786,"language":103,"meta":62,"style":62},"const stlBuffer = tf.writeStl(mesh);\nconst blob = new Blob(\n    [stlBuffer.toTypedArray()],\n    { type: \"model\u002Fstl\" });\n",[31,788,789,806,823,834],{"__ignoreMap":62},[66,790,791,793,796,798,800,803],{"class":68,"line":69},[66,792,152],{"class":110},[66,794,795],{"class":114}," stlBuffer",[66,797,158],{"class":110},[66,799,216],{"class":121},[66,801,802],{"class":72},"writeStl",[66,804,805],{"class":121},"(mesh);\n",[66,807,808,810,813,815,817,820],{"class":68,"line":176},[66,809,152],{"class":110},[66,811,812],{"class":114}," blob",[66,814,158],{"class":110},[66,816,186],{"class":110},[66,818,819],{"class":72}," Blob",[66,821,822],{"class":121},"(\n",[66,824,825,828,831],{"class":68,"line":206},[66,826,827],{"class":121},"    [stlBuffer.",[66,829,830],{"class":72},"toTypedArray",[66,832,833],{"class":121},"()],\n",[66,835,836,839,842],{"class":68,"line":349},[66,837,838],{"class":121},"    { type: ",[66,840,841],{"class":76},"\"model\u002Fstl\"",[66,843,844],{"class":121}," });\n",[52,846,848],{"id":847},"precomputed-structures","Precomputed structures",[14,850,851],{},"When running multiple booleans on the same geometry, build the spatial and topological structures once. They are computed lazily on first use, but explicit precomputation avoids paying the cost during the boolean itself:",[57,853,855],{"className":101,"code":854,"language":103,"meta":62,"style":62},"const dragon = tf.readStl(bytes);\n\nawait tf.async.buildTree(dragon);\nawait tf.async.computeFaceMembership(dragon);\nawait tf.async.computeManifoldEdgeLink(dragon);\n",[31,856,857,871,875,887,898],{"__ignoreMap":62},[66,858,859,861,863,865,867,869],{"class":68,"line":69},[66,860,152],{"class":110},[66,862,211],{"class":114},[66,864,158],{"class":110},[66,866,216],{"class":121},[66,868,219],{"class":72},[66,870,222],{"class":121},[66,872,873],{"class":68,"line":176},[66,874,353],{"emptyLinePlaceholder":352},[66,876,877,879,881,884],{"class":68,"line":206},[66,878,194],{"class":110},[66,880,628],{"class":121},[66,882,883],{"class":72},"buildTree",[66,885,886],{"class":121},"(dragon);\n",[66,888,889,891,893,896],{"class":68,"line":349},[66,890,194],{"class":110},[66,892,628],{"class":121},[66,894,895],{"class":72},"computeFaceMembership",[66,897,886],{"class":121},[66,899,900,902,904,907],{"class":68,"line":356},[66,901,194],{"class":110},[66,903,628],{"class":121},[66,905,906],{"class":72},"computeManifoldEdgeLink",[66,908,886],{"class":121},[14,910,911],{},"Now create shallow copies at different positions. Each copy shares the same data and structures — only the transformation differs:",[57,913,915],{"className":101,"code":914,"language":103,"meta":62,"style":62},"for (let t = 0.1; t \u003C= 1.0; t += 0.1) {\n    const view = dragon.shallowCopy();\n    view.transformation = tf.makeTranslation(0, t, 0);\n\n    const { mesh, labels, faceLabels } =\n        await tf.async.booleanDifference(dragon, view);\n}\n",[31,916,917,955,971,993,997,1017,1030],{"__ignoreMap":62},[66,918,919,922,925,928,931,933,936,939,942,945,947,950,952],{"class":68,"line":69},[66,920,921],{"class":110},"for",[66,923,924],{"class":121}," (",[66,926,927],{"class":110},"let",[66,929,930],{"class":121}," t ",[66,932,407],{"class":110},[66,934,935],{"class":114}," 0.1",[66,937,938],{"class":121},"; t ",[66,940,941],{"class":110},"\u003C=",[66,943,944],{"class":114}," 1.0",[66,946,938],{"class":121},[66,948,949],{"class":110},"+=",[66,951,935],{"class":114},[66,953,954],{"class":121},") {\n",[66,956,957,960,963,965,967,969],{"class":68,"line":176},[66,958,959],{"class":110},"    const",[66,961,962],{"class":114}," view",[66,964,158],{"class":110},[66,966,554],{"class":121},[66,968,557],{"class":72},[66,970,560],{"class":121},[66,972,973,976,978,980,982,984,986,989,991],{"class":68,"line":206},[66,974,975],{"class":121},"    view.transformation ",[66,977,407],{"class":110},[66,979,216],{"class":121},[66,981,412],{"class":72},[66,983,167],{"class":121},[66,985,250],{"class":114},[66,987,988],{"class":121},", t, ",[66,990,250],{"class":114},[66,992,173],{"class":121},[66,994,995],{"class":68,"line":349},[66,996,353],{"emptyLinePlaceholder":352},[66,998,999,1001,1003,1005,1007,1009,1011,1013,1015],{"class":68,"line":356},[66,1000,959],{"class":110},[66,1002,602],{"class":121},[66,1004,367],{"class":114},[66,1006,253],{"class":121},[66,1008,609],{"class":114},[66,1010,253],{"class":121},[66,1012,614],{"class":114},[66,1014,617],{"class":121},[66,1016,620],{"class":110},[66,1018,1020,1023,1025,1027],{"class":68,"line":1019},6,[66,1021,1022],{"class":110},"        await",[66,1024,628],{"class":121},[66,1026,672],{"class":72},[66,1028,1029],{"class":121},"(dragon, view);\n",[66,1031,1033],{"class":68,"line":1032},7,[66,1034,1035],{"class":121},"}\n",[14,1037,1038],{},"10 booleans on 2×500K polygon meshes in under 140ms total. Spatial and topological structures computed once.",[52,1040,1042],{"id":1041},"extracting-intersection-curves","Extracting intersection curves",[14,1044,1045,1046,142],{},"Any boolean can also return the intersection boundary as polylines embedded on the surface. Pass ",[31,1047,1048],{},"returnCurves: true",[57,1050,1052],{"className":101,"code":1051,"language":103,"meta":62,"style":62},"const { mesh, labels, faceLabels, curves } =\n    await tf.async.booleanDifference(dragon, translated, {\n        returnCurves: true\n    });\n\n\u002F\u002F Access curve data\nfor (const path of curves.paths) {\n    console.log(path.data); \u002F\u002F vertex indices\n}\nconst curvePoints = curves.points; \u002F\u002F NDArrayFloat32 [V, 3]\n",[31,1053,1054,1079,1090,1098,1103,1107,1113,1130,1145,1150],{"__ignoreMap":62},[66,1055,1056,1058,1060,1062,1064,1066,1068,1070,1072,1075,1077],{"class":68,"line":69},[66,1057,152],{"class":110},[66,1059,602],{"class":121},[66,1061,367],{"class":114},[66,1063,253],{"class":121},[66,1065,609],{"class":114},[66,1067,253],{"class":121},[66,1069,614],{"class":114},[66,1071,253],{"class":121},[66,1073,1074],{"class":114},"curves",[66,1076,617],{"class":121},[66,1078,620],{"class":110},[66,1080,1081,1083,1085,1087],{"class":68,"line":176},[66,1082,625],{"class":110},[66,1084,628],{"class":121},[66,1086,672],{"class":72},[66,1088,1089],{"class":121},"(dragon, translated, {\n",[66,1091,1092,1095],{"class":68,"line":206},[66,1093,1094],{"class":121},"        returnCurves: ",[66,1096,1097],{"class":114},"true\n",[66,1099,1100],{"class":68,"line":349},[66,1101,1102],{"class":121},"    });\n",[66,1104,1105],{"class":68,"line":356},[66,1106,353],{"emptyLinePlaceholder":352},[66,1108,1109],{"class":68,"line":1019},[66,1110,1112],{"class":1111},"sAwPA","\u002F\u002F Access curve data\n",[66,1114,1115,1117,1119,1121,1124,1127],{"class":68,"line":1032},[66,1116,921],{"class":110},[66,1118,924],{"class":121},[66,1120,152],{"class":110},[66,1122,1123],{"class":114}," path",[66,1125,1126],{"class":110}," of",[66,1128,1129],{"class":121}," curves.paths) {\n",[66,1131,1133,1136,1139,1142],{"class":68,"line":1132},8,[66,1134,1135],{"class":121},"    console.",[66,1137,1138],{"class":72},"log",[66,1140,1141],{"class":121},"(path.data); ",[66,1143,1144],{"class":1111},"\u002F\u002F vertex indices\n",[66,1146,1148],{"class":68,"line":1147},9,[66,1149,1035],{"class":121},[66,1151,1153,1155,1158,1160,1163],{"class":68,"line":1152},10,[66,1154,152],{"class":110},[66,1156,1157],{"class":114}," curvePoints",[66,1159,158],{"class":110},[66,1161,1162],{"class":121}," curves.points; ",[66,1164,1165],{"class":1111},"\u002F\u002F NDArrayFloat32 [V, 3]\n",[14,1167,1168,1169,1174],{},"If only the ",[18,1170,1173],{"href":1171,"rel":1172},"https:\u002F\u002Ftrueform.polydera.com\u002Fts\u002Fmodules\u002Fintersect#intersection-curves",[92],"intersection curves"," are needed without the boolean itself:",[57,1176,1178],{"className":101,"code":1177,"language":103,"meta":62,"style":62},"const curves = tf.intersectionCurves(dragon, translated);\n",[31,1179,1180],{"__ignoreMap":62},[66,1181,1182,1184,1187,1189,1191,1194],{"class":68,"line":69},[66,1183,152],{"class":110},[66,1185,1186],{"class":114}," curves",[66,1188,158],{"class":110},[66,1190,216],{"class":121},[66,1192,1193],{"class":72},"intersectionCurves",[66,1195,634],{"class":121},[52,1197,1199],{"id":1198},"threejs-integration","Three.js integration",[14,1201,1202,1204],{},[31,1203,33],{}," meshes can be converted to Three.js geometries and back. Transformations use row-major matrices — Three.js uses column-major:",[57,1206,1208],{"className":101,"code":1207,"language":103,"meta":62,"style":62},"\u002F\u002F trueform → Three.js\nconst geo = new THREE.BufferGeometry();\ngeo.setIndex(new THREE.BufferAttribute(mesh.faces.data, 1));\ngeo.setAttribute(\"position\",\n    new THREE.BufferAttribute(mesh.points.data, 3));\n\n\u002F\u002F Three.js matrix → trueform (transpose)\nmesh.transformation =\n    tf.ndarray(threeMatrix4.elements, [4, 4]).T;\n",[31,1209,1210,1215,1236,1264,1279,1297,1301,1306,1313],{"__ignoreMap":62},[66,1211,1212],{"class":68,"line":69},[66,1213,1214],{"class":1111},"\u002F\u002F trueform → Three.js\n",[66,1216,1217,1219,1222,1224,1226,1229,1231,1234],{"class":68,"line":176},[66,1218,152],{"class":110},[66,1220,1221],{"class":114}," geo",[66,1223,158],{"class":110},[66,1225,186],{"class":110},[66,1227,1228],{"class":114}," THREE",[66,1230,27],{"class":121},[66,1232,1233],{"class":72},"BufferGeometry",[66,1235,560],{"class":121},[66,1237,1238,1241,1244,1246,1249,1251,1253,1256,1259,1261],{"class":68,"line":206},[66,1239,1240],{"class":121},"geo.",[66,1242,1243],{"class":72},"setIndex",[66,1245,167],{"class":121},[66,1247,1248],{"class":110},"new",[66,1250,1228],{"class":114},[66,1252,27],{"class":121},[66,1254,1255],{"class":72},"BufferAttribute",[66,1257,1258],{"class":121},"(mesh.faces.data, ",[66,1260,256],{"class":114},[66,1262,1263],{"class":121},"));\n",[66,1265,1266,1268,1271,1273,1276],{"class":68,"line":349},[66,1267,1240],{"class":121},[66,1269,1270],{"class":72},"setAttribute",[66,1272,167],{"class":121},[66,1274,1275],{"class":76},"\"position\"",[66,1277,1278],{"class":121},",\n",[66,1280,1281,1284,1286,1288,1290,1293,1295],{"class":68,"line":356},[66,1282,1283],{"class":110},"    new",[66,1285,1228],{"class":114},[66,1287,27],{"class":121},[66,1289,1255],{"class":72},[66,1291,1292],{"class":121},"(mesh.points.data, ",[66,1294,274],{"class":114},[66,1296,1263],{"class":121},[66,1298,1299],{"class":68,"line":1019},[66,1300,353],{"emptyLinePlaceholder":352},[66,1302,1303],{"class":68,"line":1032},[66,1304,1305],{"class":1111},"\u002F\u002F Three.js matrix → trueform (transpose)\n",[66,1307,1308,1311],{"class":68,"line":1132},[66,1309,1310],{"class":121},"mesh.transformation ",[66,1312,620],{"class":110},[66,1314,1315,1318,1321,1324,1327,1329,1331,1334,1337],{"class":68,"line":1147},[66,1316,1317],{"class":121},"    tf.",[66,1319,1320],{"class":72},"ndarray",[66,1322,1323],{"class":121},"(threeMatrix4.elements, [",[66,1325,1326],{"class":114},"4",[66,1328,253],{"class":121},[66,1330,1326],{"class":114},[66,1332,1333],{"class":121},"]).",[66,1335,1336],{"class":114},"T",[66,1338,131],{"class":121},[52,1340,1342],{"id":1341},"performance-and-robustness","Performance and robustness",[14,1344,1345],{},"All operations run at interactive speed on million-polygon meshes.",[1347,1348],"headline-numbers",{":items":1349},"[{\"value\":\"12ms\",\"label\":\"Intersection curves\",\"detail\":\"2×500K polygons\"},{\"value\":\"27ms\",\"label\":\"Boolean union\",\"detail\":\"2×500K polygons\"},{\"value\":\"250ms\",\"label\":\"Polygon arrangements\",\"detail\":\"2×500K polygons\"}]",[14,1351,1352,1357,1358,1357,1362,1357,1366],{},[66,1353,1356],{"className":1354},[1355],"tag-pill","Apple M4 Max"," ",[66,1359,1361],{"className":1360},[1355],"16 threads",[66,1363,1365],{"className":1364},[1355],"Node",[66,1367,1369],{"className":1368},[1355],"WebAssembly",[14,1371,1372,1373,1375],{},"Real meshes are not ideal manifolds. ",[31,1374,33],{}," handles them directly — no preprocessing, no manifold requirement.",[1377,1378],"data-table",{":headers":1379,":highlight":250,":rows":1380},"[\"Feature\",\"Handling\"]","[[\"Convex polygons\",\"Native — not limited to triangles\"],[\"Non-manifold edges\",\"Handled directly\"],[\"Inconsistent winding\",\"Bayesian classification\"],[\"Self-intersecting input\",\"Resolved via polygon arrangements\"],[\"Coplanar primitives\",\"Exact — aligned\u002Fopposing boundary classification\"],[\"Contour crossings\",\"Resolved via indirect predicates\"]]",[14,1382,1383,1385],{},[31,1384,33],{}," is a robust CGAL alternative — and the fastest mesh boolean library available — for exact mesh boolean operations in C++, Python, and TypeScript.",[14,1387,1388,1393,1394],{},[18,1389,1392],{"href":1390,"rel":1391},"https:\u002F\u002Ftrueform.polydera.com\u002Fcpp\u002Fbenchmarks",[92],"Full benchmarks and methodology"," · ",[18,1395,1397],{"href":1396},"\u002Falgorithms\u002Ffast-and-exact-mesh-booleans-and-arrangements","How the algorithm works",[1399,1400],"cite-as",{"author":1401,"title":5},"Sajovic, {\\v{Z}}iga",[1403,1404,1405],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":62,"searchDepth":176,"depth":176,"links":1407},[1408,1409,1410,1411,1417,1418,1419,1420],{"id":54,"depth":176,"text":55},{"id":97,"depth":176,"text":98},{"id":384,"depth":176,"text":385},{"id":507,"depth":176,"text":508,"children":1412},[1413,1414,1415,1416],{"id":589,"depth":206,"text":590},{"id":637,"depth":206,"text":638},{"id":677,"depth":206,"text":678},{"id":728,"depth":206,"text":729},{"id":847,"depth":176,"text":848},{"id":1041,"depth":176,"text":1042},{"id":1198,"depth":176,"text":1199},{"id":1341,"depth":176,"text":1342},"2026-04-30","Learn how to perform fast mesh boolean operations in JavaScript and TypeScript. Union, intersection, and difference at interactive speed on million-polygon meshes. WebAssembly-powered, runs in Node.js and the browser.","md",[1425,1426,1427,1428,1429,1430,1431,1432],"JavaScript mesh boolean","TypeScript mesh boolean","mesh boolean browser","WebAssembly mesh boolean","npm mesh boolean","three.js boolean","JS CSG","browser mesh boolean",{},"\u002Ftutorials\u002Ffast-mesh-booleans-in-javascript",{"title":5,"description":1422},"tutorials\u002Ffast-mesh-booleans-in-javascript",[1438,103,1439,1440,1441],"javascript","booleans","tutorial","webassembly","AQJ3-yiyo3nTO3pjBiJ7_fMPNcdNHN6ggqXV1sT4PbQ",1779353828805]