Smoothing cracks / gaps in fractured GLTF

Questions
, ,
1

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

Loading the same .gltf into 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 - but as you can see there are gaps.

Any help would be greatly appreciated!

2

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

image
image762×460 16.8 KB

image
image480×698 48.1 KB

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.

3

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.

4

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)

5

@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.

6

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 (click the text)

7

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
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?!