# Catmull-Clark subdivision **URL:** \ **Category:** Feature requests\ **Tags:** mesh, geometry\ **Created:** [May 25, 2023, 4:02pm UTC](https://forum.babylonjs.com/t/catmull-clark-subdivision/41134 "2023-05-25T16:02:41Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![WillemCramer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/willemcramer/32/11696_2.png) [@WillemCramer](https://forum.babylonjs.com/u/WillemCramer)\ **Post date:** [May 25, 2023, 4:02pm UTC](https://forum.babylonjs.com/t/catmull-clark-subdivision/41134/1 "2023-05-25T16:02:41Z")
This would be an awesome addition, specially when the original mesh could be animated while only the subdivised mesh is visible ---
**Author:** ![SvenFrankson](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/svenfrankson/32/29446_2.png) [@SvenFrankson](https://forum.babylonjs.com/u/SvenFrankson)\ **Post date:** [May 25, 2023, 4:11pm UTC](https://forum.babylonjs.com/t/catmull-clark-subdivision/41134/2 "2023-05-25T16:11:22Z")
The way I understand it, you can’t do it with shader only, because WebGL does not support geometry shader. It leaves you with doing the subdivision in JS. While it has some uses, I guess it’s less interesting (you can’t easily have it based on distance from viewpoint, you need to animate the generated points, you can’t do more than a few subdivisions…). ---
**Author:** ![WillemCramer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/willemcramer/32/11696_2.png) [@WillemCramer](https://forum.babylonjs.com/u/WillemCramer)\ **Post date:** [May 25, 2023, 4:57pm UTC](https://forum.babylonjs.com/t/catmull-clark-subdivision/41134/3 "2023-05-25T16:57:09Z")
I have tried to translate some functions i found but no luck so far. Even just doing the subdivison did not work. Tried chatGPT too. You have some working script? ---
**Author:** ![waverider404](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/waverider404/32/17464_2.png) [@waverider404](https://forum.babylonjs.com/u/waverider404)\ **Post date:** [May 25, 2023, 10:44pm UTC](https://forum.babylonjs.com/t/catmull-clark-subdivision/41134/4 "2023-05-25T22:44:15Z")
I recently ported some CGAL code to webassembly [CGAL 5.5.2 - 3D Surface Subdivision Methods: User Manual](https://doc.cgal.org/latest/Subdivision_method_3/index.html), this includes all the subdivision methods you can find. I will probably make a demo tonight or tomorrow EDT. cheers! ---
**Author:** ![WillemCramer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/willemcramer/32/11696_2.png) [@WillemCramer](https://forum.babylonjs.com/u/WillemCramer)\ **Post date:** [May 26, 2023, 4:17am UTC](https://forum.babylonjs.com/t/catmull-clark-subdivision/41134/5 "2023-05-26T04:17:02Z")
Here is one example that does not render an error but does not show the subdivided mesh somehow: > **[Babylon.js Playground](https://playground.babylonjs.com/#UZWVCC%2313)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes I would be grateful with some working code. ---
**Author:** ![wulf11](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wulf11/32/2196_2.png) [@wulf11](https://forum.babylonjs.com/u/wulf11)\ **Post date:** [November 15, 2024, 9:10pm UTC](https://forum.babylonjs.com/t/catmull-clark-subdivision/41134/6 "2024-11-15T21:10:11Z")
Hi everyone, I’ve been working on implementing the Catmull-Clark algorithm in Babylon.js and wanted to share a few observations. 🧐 > **[Babylon.js Playground](https://playground.babylonjs.com/#EGJSLY)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes (Of course, I relied heavily on AI for this, as my math skills aren’t quite up to solving problems like this alone. 😅) Catmull-Clark works best with **quads** , but since Babylon.js meshes are typically made of **triangles** , this can complicate things. You’d either need to convert triangles to quads or handle mixed topologies like triangles and N-Gons, which often results in less smooth surfaces. For triangle-based meshes, it might actually be better to use **Loop Subdivision** , as it’s specifically designed for triangle topologies and gives better results without needing to convert the mesh. 🤔 Performance is another consideration; with multiple subdivisions, vertex and face counts grow exponentially. Using **LOD** can help manage performance in real-time applications. Has anyone else tackled subdivision for triangles in Babylon.js? 😵 ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [November 16, 2024, 5:52pm UTC](https://forum.babylonjs.com/t/catmull-clark-subdivision/41134/7 "2024-11-16T17:52:09Z")
We do not support subdivisions by default in Babylon and I like the idea of more tooling for it 🙂 As everything (excluding sprites, lines, points, GS…) is mostly triangles I wonder if the algorithms for quad conversion would be good enough in the general case or if a triangle based approach would be more convenient to use ? ---
**Author:** ![alexchuber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alexchuber/32/52000_2.png) [@alexchuber](https://forum.babylonjs.com/u/alexchuber)\ **Post date:** [November 16, 2024, 8:38pm UTC](https://forum.babylonjs.com/t/catmull-clark-subdivision/41134/8 "2024-11-16T20:38:23Z")
Following this thread because I also love the idea of subdivisions in Babylon. That was a neat Catmull-Clark demo!! The procedures for Catmull-Clark and Loop are very similar, but I believe they do yield different results. This is demo I made a while ago to compare the two. (I just can’t remember how I represented the geometry for each mesh, hence why I’m not 100% sure 😄) ![IMG_5380](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/b/4b39fd9654e93b89fb365cde50837d399227a74c.jpeg) Also found this image [online](https://www.gamedev.net/forums/topic/684378-does-catmull-clark-subdivision-work-for-meshes-consisting-of-only-triangles/) that compares Catmull Clark applied to two different topologies of the same shape. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/1/f198b20c3939e6f40fec53450679309ae71aa085.png) If anyone can get more tests like these, I’d love to see! If we did decide to implement subdivision, it might make sense to eventually have a handful of methods to choose from, since each has its own pros and cons (computation speed, rate of convergence, crease handling). For this reason, we might also want to carefully decide how we decide to track mesh topology. There are several data structures for this. We’d ideally want one that can support the most popular subdivision methods and topologies. The question is which structure does that best, or maybe they all handle it the same. I’m curious how CGAL does it… ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [November 18, 2024, 3:34pm UTC](https://forum.babylonjs.com/t/catmull-clark-subdivision/41134/10 "2024-11-18T15:34:10Z")
That would be a NEAT addition to NGE! ---
**Author:** ![wulf11](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wulf11/32/2196_2.png) [@wulf11](https://forum.babylonjs.com/u/wulf11)\ **Post date:** [November 19, 2024, 8:31am UTC](https://forum.babylonjs.com/t/catmull-clark-subdivision/41134/11 "2024-11-19T08:31:34Z")
Glad you all liked the demo! 😊 I agree—having more tooling would definitely be nice. 😊 How do you think it should be integrated into the codebase? I was considering extending the `Mesh` class to allow calls like `myMesh.subdivideWithCatmullClark()`, or perhaps using a static helper class instead. 🤔 I tested the algorithm with triangles, but the results were often odd or unpredictable. That’s why I attempted to convert triangles into quads beforehand, though this turned out to be a non-trivial problem (which could actually make for an interesting new feature!). I know Blender has this functionality, but I’m not sure which algorithm they use for the conversion. As @alexchuber mentioned, there are many variations of these subdivision algorithms: [![](https://www.uvmapper.com/help/sds.gif) ](https://www.uvmapper.com/help/sds.gif) While trying to apply the Catmull-Clark algorithm to a `BABYLON.Mesh`, I ran into challenges. Along the way, I stumbled upon the **Loop Subdivision** algorithm and ended up implementing it instead. Here’s the demo: > **[Babylon.js Playground](https://playground.babylonjs.com/#KJQV9C)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes I used a cube for these examples because it’s a commonly referenced geometry in research papers and visuals, making it easier to compare results. However, it definitely needs more testing with diverse geometries. ---
**Author:** ![kzhsw](https://avatars.discourse-cdn.com/v4/letter/k/848f3c/32.png) [@kzhsw](https://forum.babylonjs.com/u/kzhsw)\ **Post date:** [November 19, 2024, 8:49am UTC](https://forum.babylonjs.com/t/catmull-clark-subdivision/41134/12 "2024-11-19T08:49:06Z")
While there are examples in wasm, it should be better to have a webgpu compute shader implementation [https://www.pmp-library.org/subdivision.html](https://www.pmp-library.org/subdivision.html)