So this weekend I’ve been playing with a really fancy UI animation. This post is not about that. Instead, its about a problem i’ve been wondering about for a while : how to render something partially. You need to clip your rendering to a piece of the screen for some reason, like a scrolling list where you might see half an item. This involves the scissor test (glScissor() in opengl).
Scissoring and the Scissor Test
What is scissoring? It is restricting the output of draw commands to a specific area of the screen (similar to clipping). Say your rendering a list of items in a box. When you scroll, the list of items scrolls : at some point, half an item is displayed. Even with only half the item displayed though, you only want to render what’s in the box. You do this by scissoring the list box before you do your draw, so when you render the extra line only half is displayed.
So how would we represent this in Gail? Everything in Gail renderering wise is part of the Scene Graph. Lets take the 2D Gui one for an example, since it’s simpler to understand.
- Gail::GuiNG::Gui : the entire gui
- Gail::GuiNG::Layer : layer of images
- Gail::GuiNG::Image : image to display
So where does scissoring come into play? Scissoring affects rendering, so it makes sense its a node. Anything a child of that node is affected by the scissor. The only issues that comes up is the scissor node should be relative to its parents, but the scissor function is in absolute coordinates. Luckily, its not hard to get the absolute coordinates since its all a translation anyways.
So in our example, if we want to scissor the image, our graph changes to be like this:
- Gail::GuiNG::Gui : the entire gui
- Gail::GuiNG::Layer : layer of images
- Gail::GuiNG::ScissorNode : Anything under this is clipped to the bounding box of the ScissorNode
- Gail::GuiNG::Image : image to display. Clipped.
So implementation details
First, had to add CapabilityScissor as a capability that Gail can turn on and off as needed. Two lines of code, and its in business. Next was the new node. Most of the hard work here was figuring out glScissor() (freaking straight forward) and defining the Gail::RendererNG interface for it (beginRestrictingDrawingToRect(Gail::Core::Rect), endRestrictingDrawing()). Now since scissoring is a node, you could have multiple scissor nodes in a tree that are children of each other. Therefore, it needs to be handle multiple scissoring so a stack was added similar to the matrix stack. After I added this, it was first testing time. I took Playground (since it was still setup with the particle demo) and changed a few lines. The rendering became:
void Application::render (void)
{
m_renderer->beginRestrictingDrawingToRect(Gail::Core::Rect (200, 200, 400, 400));
m_gui->render();
m_renderer->endRestrictingDrawing();
}
This way, anything rendered would be restricted within that box. Very easy to tell if it works or not. And I got this.
Perfect. Now we need that node.
Gail::GuiNG::ScissorNode is going to be a standard GuiNG::Node with an overridden render. It really doesn’t need its own functions, since both position and size it inherits (which can give us the rectangle to scissor). So should be really straightforward. For future work, might even have a ‘restrict drawing to node boundary’ option kindof like UIKit, but for now its fine to maintain it manually for the few places that actually need it.
Wrote that class, tested via Playground again. And now can use it where I actually need it.