# Smoothing cracks / gaps in fractured GLTF

**URL:** <https://discourse.threejs.org/t/smoothing-cracks-gaps-in-fractured-gltf/24769>\
**Category:** Questions\
**Tags:** gltf-loader, loaders, gltf\
**Created:** [March 25, 2021, 5:04pm UTC](https://discourse.threejs.org/t/smoothing-cracks-gaps-in-fractured-gltf/24769 "2021-03-25T17:04:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tom\_Ferrall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tom_ferrall/32/17310_2.png) [@Tom\_Ferrall](https://discourse.threejs.org/u/Tom_Ferrall)\
**Post date:** [March 25, 2021, 5:04pm UTC](https://discourse.threejs.org/t/smoothing-cracks-gaps-in-fractured-gltf/24769/1 "2021-03-25T17:04:22Z")

</div>

Hi, so I’ve got a model that has been fractured in Blender and I’m having some issues with smoothing out the cracks.

Here is a really simple setup just loading the .gltf and as you can see there are visible gaps - [Lightbox Studio](https://wellmade.studio/clients/lb/index-simple.html)

Loading the same .gltf into [https://gltf-viewer.donmccurdy.com/](https://gltf-viewer.donmccurdy.com/) shows it completely smooth. I tried replicating the lighting but it didn’t work so I’m wondering what settings the viewer uses to display the smoothed model?

Also just to be clear the end result in terms of the scrolling and exploding effect can be seen here - [Lightbox Studio](https://wellmade.studio/clients/lb/) - but as you can see there are gaps.

Any help would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 25, 2021, 5:45pm UTC](https://discourse.threejs.org/t/smoothing-cracks-gaps-in-fractured-gltf/24769/2 "2021-03-25T17:45:41Z")

</div>

> [@Tom\_Ferrall](#):
>
> Loading the same .gltf into [https://gltf-viewer.donmccurdy.com/](https://gltf-viewer.donmccurdy.com/) shows it completely smooth

Unfortunately, that’s not true. Depending on the camera’s transformation you can clearly see gaps:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/c/4cb6c05320798b351f124e853d02015700d0268b.png)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/e/ae144cfda72e7419e8ee7fd3c6d4d6a192efa618.png)

These gaps are inevitable when having a non-continuous triangle surface. The only way to solve this is to connect the triangles.

Consider to maintain two meshes. One that is solid and another one which is broken into pieces. At animation start, you simply switch them.

---

<div class="post-metadata">

**Author:** ![Tom\_Ferrall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tom_ferrall/32/17310_2.png) [@Tom\_Ferrall](https://discourse.threejs.org/u/Tom_Ferrall)\
**Post date:** [March 25, 2021, 5:58pm UTC](https://discourse.threejs.org/t/smoothing-cracks-gaps-in-fractured-gltf/24769/3 "2021-03-25T17:58:12Z")

</div>

Ok sorry yeah it’s not completely smooth but generally appears smoothed compared to my other examples.

I’m wondering if there are any settings I’m missing that the viewer uses that I could try applying to my version?

Also annoyingly the switching trick can’t be used in my application because of the easing/delay on the scrolling part.

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [March 25, 2021, 6:27pm UTC](https://discourse.threejs.org/t/smoothing-cracks-gaps-in-fractured-gltf/24769/4 "2021-03-25T18:27:28Z")

</div>

The background showing through the model is a result of your vertices not being aligned. This shouldn’t be an issue as it’s possible for two meshes to have the same value for a vertex.

The seam issue is because of normals. If you compute normals on different surfaces you will get a discontinuity.

3D studio max has a way to make normals “explicit”, so that it’s burnt in and does not respond to geometry modifications.

If you could identify which vertices would be shared between the meshes, you could just average their normals so they point the same way. You could do this by building dictionaries of positions, if you run into the same position on the adjacent mesh, take the normals and average them (could be more than two)

---

<div class="post-metadata">

**Author:** ![Tom\_Ferrall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tom_ferrall/32/17310_2.png) [@Tom\_Ferrall](https://discourse.threejs.org/u/Tom_Ferrall)\
**Post date:** [March 25, 2021, 6:32pm UTC](https://discourse.threejs.org/t/smoothing-cracks-gaps-in-fractured-gltf/24769/5 "2021-03-25T18:32:34Z")

</div>

@dubois thanks I’ll pass this onto my 3D guy.

I was really hoping to understand why the same model appears smoother in the viewer compared to my basic example. Maybe I just need to keep trying out different settings until I stumble across something that works.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 25, 2021, 10:01pm UTC](https://discourse.threejs.org/t/smoothing-cracks-gaps-in-fractured-gltf/24769/6 "2021-03-25T22:01:10Z")

</div>

use two exports. save the model before you cell fracture. export and compress both variants. as long as the model is supposed to be complete show the original, then switch to fragments and play their keyframes. here’s an example doing this: [cell fracture (forked) - CodeSandbox](https://codesandbox.io/s/cell-fracture-forked-3rjsl) (click the text)

---

<div class="post-metadata">

**Author:** ![Tom\_Ferrall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tom_ferrall/32/17310_2.png) [@Tom\_Ferrall](https://discourse.threejs.org/u/Tom_Ferrall)\
**Post date:** [March 25, 2021, 10:16pm UTC](https://discourse.threejs.org/t/smoothing-cracks-gaps-in-fractured-gltf/24769/7 "2021-03-25T22:16:22Z")

</div>

Thanks, appreciate the input. Only issue is I’m controlling the fracture with scrolling (GSAP ScrollTrigger) so I’m not just playing a predefined animation. Unless I actually do embed an animation timeline and then play through that with the scroll action - I’d rather not look at this though as that seems a bit limited.

Example here of the scroll action currently - [Lightbox Studio](https://wellmade.studio/clients/lb/)  
Another reason why I can’t use two models is because of the easing on the scrub - for instance the model becomes fully formed when you scroll to the top of the window but you’ll see there’s a bit of a delay before it comes together. This is the thing that makes using two models not work.

Any other ideas?!