As we all know, meshes with rounded corners means more triangles. I'm a man who strives for efficiency and simplicity (they often go hand and hand after all), so this was not a path I was willing to go down.
So I started thinking of other ways to make rounded corners. First I thought of maybe some kind of ray tracing (so I could incorporate antialiasing)? Then I thought tessellation (ugh what a hack)? Nope nope nope. Then I thought maybe a texture? I liked that idea but then wondered how I could do that, and could I make it work with scaling.
From there it was just a matter of manipulating uvs and vertices.
The first important part to the formula was to properly set up the mesh. I wanted the mesh to scale from its own base, so I positioned it so that the base was at 0 and centered. I also needed to make it easy to scale to any other dimension, so I made sure that the note was 1x1 (width and length).
The second part was to create a texture with rounded corners. Since I wanted the note strip to look good large or small I chose to make it large and then let the GPU choose the proper mip map for when it's drawn small. The dimensions of the texture is very intentional. The version of the texture I released with Pro is a 2:1 ratio. Basically the way I visualize it is that the texture should look like the shortest possible note. If I chose a 1:1 ratio for the texture, I could make the shortest note look like a ball :P
Now the last and most difficult part was to manipulate the uvs in such a way that it could map the texture to the mesh in a way where the rounded corners don't look stretched. Long story short, the end result was a combination of using an aspect ratio for the texture and note strip length, along with thinking in absolute values (all positive numbers). In a nutshell, only the top half of the texture is actually used, and the vertical coordinate is scaled by the aspect ratio of both the texture and note. There's some Max values in there too, but that's the gist.
The limitation of the shader is that rounded corners scale up and down with the size of the note strip. That means the radius of the corer will increase/decrease depending on the size of the note strip. The other limitation is that the center of the texture is stretched between the top and bottom halves - that means the texture has to be a solid color.
All in all very happy with the direction it all went. After making it, I was looking at other "Piano Roll" type videos to see if maybe I could improve on the design I noticed theirs looked EXACLTY the same as mine, limitations and all. It just goes to show you that the "idea" is not new, but it sure feels good knowing I could figure it out.
Комментарии