# How to smooth jagged extrusion

Hello!

Question - how to smooth jagged extrusion?

Why does the relatively smooth green line (path) result in the jagged extrusion - with the overall goal of how to smooth it?

CONTEXT: made a path editor to adjust paths, and smooth the halfpipe, but getting unexpected results when edited path is applied to ExtrudeShapeCustom.

Playground

Babylon is the best!

I wonder if the green line is a little misleading about just how sharp or smooth the points going into the extrusion equation are. Take a look at this: https://www.babylonjs-playground.com/#GILURX#1

From lines 39 to 57, I added a simple smoothing filter that just takes the unweighted average of a sliding window; you can change the size of the window by modifying the AVG_RANGE constant. The fact that this helps the jagged appearance indicates that the actual input data might be more jagged than the green line initially led me to believe. Is this an effect you would have expected?

1 Like

Awesome syntheticmagusâ€¦ nice hypothesis!

Yes, smoothing algorithm is SOLUTION. Thanks!

I will study it, and it makes sense that the points may be sharper than appear in the line.

But one last questionâ€¦ since they use the same path:

Why would the sharpness not show up in the line?

Ah-ha! Maybe the sharpness may be the result of them being spaced too closely together for the extrude!

So, if that were TRUE, the line itself is not sharp, just the points are too CLOSE and thereby too sharp to extrude?

EXPERIMENTINGâ€¦

1 Like

@syntheticmagus

CONFIRMED:

The rise and fall appear to be â€śtoo sharpâ€ť - when too close in proximity!

For Future Reference: doubling the distance between points - Also DECRUMPLES it!

Not as nicely as your awesome mathâ€¦ but the insight is fantastic. Thanks!

And yes - will reduce the MAGNITUDE of the PATH-POINT-EDITS (very sensitive in extrude).

If interested, 0.1 will drop to 0.05 and 0.01 to see â€¦

Any other tips on the technique?

I need to debug it and read up on scaleInPlaceâ€¦ to understand better what is happening there.

And will look closer for - unweighted average and sliding windowâ€¦ WOW INTERESTING!

So the scale is used as the moving average then?

After reading - I understand â€śInPlaceâ€ť and â€śToRefâ€ť naming convention.

I still donâ€™t understand that inner loop, but Iâ€™ll look again.

Thanks much

Sure!

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

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

Lucky Day!!!

I know of Low-Pass-Filter!!! (use in music editing) Thx.

That info is so GREAT!

Oh WOW!

I was guessing WRONG!

Yes - heard of Hermite Splinesâ€¦ but only understand they are curved by the parrallel? of points?

Yes - Iâ€™ve had the â€śDraw Curvesâ€ť page open for a few months going!

I will revisit Hermite to send through the path editorâ€¦ thanks for pointing that out.

Catmull my fav too!

Thanks much magusâ€¦ you answered the final question of what that inner loop was up to!