How to smooth jagged extrusion

Sure! :slight_smile:

The sliding average thing I did was just a naive variant on a low-pass filter, which is just a fancy formalization of a blur. We perceive rapid, dramatic shifts in value a “jagged,” whereas gradual shifts are “smooth,” so a low-pass filter just works to “smooth out” dramatic value shifts by distributing them across multiple samples. For example, consider the array [0, 0, 0, 0, 3, 0, 0, 0, 0]. This array would be perceived as “jagged” because it contains a sudden, dramatic shift from 0 to 3, then another dramatic shift from 3 back to 0. To remove this, we can run this array through a low-pass filter – for the purposes of discussion, let’s say with a sliding window size of 3 – which will essentially just replace each value with an average of itself and the values around it, making our new array

[avg(0, 0), avg(0, 0, 0), avg(0, 0, 0), avg(0, 0, 3), avg(0, 3, 0), avg(3, 0, 0), avg(0, 0, 0), avg(0, 0, 0), avg(0, 0)]

which in turn becomes

[0, 0, 0, 1, 1, 1, 0, 0, 0]

(Note that the first and last values don’t have full size-3 windows available because they run up against the ends of the array. There are several ways to handle that kind of edge case; I just chose one that was easy. :slight_smile:)

After filtering, the array doesn’t contain any shifts as dramatic as 0 to 3, and what little shifts it does have are further apart in the array, not on opposite sides of a single number. Consequently, we perceive this new array as much more “smooth” than the original array, just by taking the average of a sliding window.

Low-pass filters are easy to use and they’re good for a lot of things, but unfortunately they have quite a few limitations. They’re good for smoothing noisy data, but they do so by throwing away precision. I used them to test my hypothesis because I wanted something self-contained, so that I could be sure I wasn’t introducing new problems in my test; but for actually generating smooth paths, I think there are better tools.

Have you heard of Hermite splines? They’re a really cool family of math functions that can generate smooth, graceful paths from just a small number of control points. The math can get a little hairy, but fortunately for us we don’t have to deal with that: Babylon.js already supports a bunch of built-in fancy curves, including my personal favorite Catmull-Rom splines!

2 Likes