Hi, I wasn’t sure where to post this, it’s just some code I’ve been working on here in the simulator, but it’s fun stuff and I wanted to setup a post for it here on the forums somewhere. This is a mockup of a little light weight loading / splash screen a project might display at boot, rendered out from a short list of points as vector art with effects.
At first I just wanted to draw a concave polygon, but that was causing the simulator to crash, so I wrote an implementation of the ear-removal process for triangulating concave polygons, and that’s working pretty great. Then I thought I’d render a data texture that measures the distance to the nearest shape edge point, and how far along the total path that point on the line is (interpolated between either segment end point). Then with that, special contour gradients can be applied, and animated, pretty much in realtime. So that’s what you’re seeing in the image above, plus a little roto-blur feedback for a god-rays effect.
So this has changed so much while I was working on it, that now the code as is is almost 2000 lines across 3 major classes, and lot of it could go. I’ll post code soon, it needs cleaned up first.
Today what I’ve been working on is making a one-pixel tall strip texture that represents the lighting of a bevel at that point along the path, and then this gets applied to the outer border, which you can see as a beveled red in the sample image. It’s working surprisingly well, I’ll improve that more soon.
Here’s what that data texture looks like.
The grey grid behind is nothing, that part of the texture is transparent. The green channel is how far along the path that point is, 0->255. Then the top 3 bits of the red are another 3 bits of precision for the path point, so it’s range is 0->2048 with those bits. The remaining 5 bits of red hold 0->32 edge distance, which is pretty short but for now these data textures need to be as minimal as possible, they take a very long time to render out. I’ll improve that generation time somewhat soon. Hopefully there’s a way to get a compute shader doing the heavy lifting from a GPU, that’d be great.
2 Likes
Looks pretty interesting! Does it also help us to use OpenGL directly for rounded rectangle and arc rendering?
Yes I believe it would, it is taking any supplied list of points and converting them into a list of triangles that can form intricate concave solid shapes. Here I’m playing around with a real-time bevel adjustment along with a higher resolution version of the curve in the first sample.
The bevel effect is still very crude, but you can get a feel for how it handles curves so far.
I’m working on a system of allowing up to 3 borders for any shape, the standard outline border, an inner border that tints and/or bevels the shape fill, and an outer border that can be flat or beveled, with the designer being able to pick the width, color, opacity, and how-beveled each of those are. And then outside of the outer-most visible border is another type of border with fuzzy edges, for a glow. The drop shadow isn’t a border it’s another image, for now. The glow doesn’t actually have to run up against the border, it can be a halo / outline. Also those halo outlines can be sharp edged and thin, with marching-ant style dot crawl. This is all based on that data-texture mentioned in the first post, and with an OpenGL shader it could do that very quickly.
Currently it takes the CPU about 0.25 → 0.75 seconds to solve the polygon triangle list, and at that point it can display it quickly, without any extra effects. Then after that’s done, it takes another 4.5 seconds of CPU time to create the data-texture used for the above bevel sample. After that’s made, the settings can be adjusted without recreating the texture. I should be able to get that time down a bit more in python, and then a lot more in c.
Most situations you’re describing don’t actually need the data texture that’s just for glitzy effects and simulated lighting. The solve time is one time per shape, then after that displaying them is pretty much instant. There’s some slight edge quality issues on the interior edges of solid fill triangles I’m still working on.
The number of points in the shape needs to be fairly low, anything over 200 and it starts to take a long time to solve. Porting to c should improve that a lot.