Dynamic shape for ribbon or: How do I get these steps away?

Questions
1

Hello again

I have created a ribbon and want to create a kind of channel in this ribbon. Unfortunately, ugly steps arise, which I would like to have gone. It should look as if a milling cutter had milled this channel into the ribbon. The sides of the channel should be perpendicular to the surface of the ribbon.
I know that the path resolution needs to be increased. First of all I am concerned with the principle, which is probably of a mathematical nature here.

Here is the playground: Babylon.js Playground

2

When you look at your mesh in wireframe view https://playground.babylonjs.com/#1PSXA9#1 it is just about possible to see the step nature of the channel. This is clearer when you convert the ribbon to a flat shaded mesh https://playg2ound.babylonjs.com/#1PSXA9#1 and even clearer when you take away the wireframe https://playground.babylonjs.com/#1PSXA9#3. Add in the normals https://playground.babylonjs.com/#1PSXA9#4 and you see that since each facet is separate vertex normals are the same as the facet normals.

Now remove the flat shaded part, so that facets share vertices and the normals for each vertex become the average of the facet normals https://playground.babylonjs.com/#1PSXA9#5. The shared normals together with the lighting are used to smooth out a surface https://playground.babylonjs.com/#1PSXA9#5.

With special effects such as PBR the lighting effect is more prominent Babylon.js Playground with the underlying step nature of the channel showing through.

Not entirely sure but I think you will need to build your ribbon around the channel rather than forcing the channel to fit a grid based ribbon.

1 Like
3

More like this method https://playground.babylonjs.com/#1PSXA9#6

1 Like
4

Thanks for the answer,

the reverse way of creating the ribbon around the channel would be even more difficult. The path for the ribbon is also the result of a function.

I will have to ponder how I can create an appealing solution.

5

Not much more difficult https://playground.babylonjs.com/#1PSXA9#7

2 Likes