I’m programming my own 2D GUI library with OpenGL and I’m at the step where I have a container control that can contain graphics elements (like rounded rectangle or star) and other child controls…etc…
I try to clip the rendering of the child controls and graphics elements into the parent control. So if a child control overflows the containers borders, it’s not rendered.
My first idea was to use the “scissor test” after discovering it while searching the web.
But the problem is that I’m constrained to a rectangular clipping and I want to be able to clip the content in an arbitrary region like a star polygonal shape.
I have an idea…
When it’s the moment to draw a control and its graphics elements, I look if my control must clip its content or not. If yes, I draw it with a uniform white color on a black background in an off-screen texture. Then I send it to a shader program.
So I render each child (controls and graphics elements) with my shader activated.
In this fragment shader, for each fragment, I think looking at the same coordinate in the special texture passed earlier. If the fragment in the special texture is white, I can render this fragment because it’s in the visible region.
Do you think it can work ? Is it a good idea or is there a better one?
It can be done a couple of ways depending on your needs. Render to texture or the stencil buffer would probably be the best bet. This link has more information to get you started:
OpenGL clipping