Skip to content

Define arbitrary clipping regions, translate renders#300

Open
oznogon wants to merge 1 commit intodaid:masterfrom
oznogon:generic-scrolling-guicontainer
Open

Define arbitrary clipping regions, translate renders#300
oznogon wants to merge 1 commit intodaid:masterfrom
oznogon:generic-scrolling-guicontainer

Conversation

@oznogon
Copy link
Contributor

@oznogon oznogon commented Mar 9, 2026

Implement GL_SCISSOR_TEST at the RenderTarget level to support arbitrary clipping of rendered areas, and implement translation functions to support scrolling of arbitrary rendered areas.

These primarily support the implementation of nested GUI elements that can be visibly clipped within and scrolled by a parent container.

  • Add scissor_stack vector, push/popScissorRect() to define and access visible areas as intersected sp::Rects.
  • Add translation_stack vector, push/popTranslation() to define and access positional delta offsets, translate them to pixel coordinates, and track the render's total translation value.
  • Add getTranslation() to expose the total translation value, to allow a translated render to be relatively repositioned.
  • Add static helper applyProjectionMatrix() to apply a translation to a 2D projection matrix, for mapping a virtual coordinate to a relative screen position.

This allows the definition of a GUI container that renders and interacts with only what is within a scissor rect, while allowing overflow content to be scrolled via translation into that rect.

For example, given:

void GuiScrollContainer::drawElements(
    glm::vec2 mouse_position,
sp::Rect /* parent_rect */,
sp::RenderTarget& renderer
)
{
    sp::Rect content_rect = getContentRect();

    renderer.pushScissorRect(content_rect);
    renderer.pushTranslation({0.0f, -scroll_offset});

    glm::vec2 layout_mouse = mouse_position + glm::vec2{
    0.0f, scroll_offset
};

    for (auto it = children.begin(); it != children.end(); )
    {

    ... pass translated mouse events through to scrolled
    contents ...

}

    renderer.popTranslation();
    renderer.popScissorRect();
}

Rendering of all child elements of this container is clipped to the parent's content_rect dimensions and shifted vertically by the translation scroll_offset. Mouse events (clicks, hover, focus changes) are also passed through to the translated positions of the child elements.

Implement GL_SCISSOR_TEST at the RenderTarget level to support
arbitrary clipping of rendered areas, and implement translation
functions to support scrolling of arbitrary rendered areas. These
primarily support the implementation of nested GUI elements that
can be visibly clipped within and scrollable by a parent container.

- Add scissor_stack vector, push/popScissorRect() to define and
  access visible areas defined as sp::Rects.
- Add translation_stack vector, push/popTranslation() to define and
  access positional deltas, translate them to pixel coordinates,
  and track the render's total translation value.
- Add getTranslation() to expose the total current translation
  value, to allow for relative positioning to a translated render.
- Add static applyProjectionMatrix() to apply a translation to a
  2D projection matrix, for mapping a virtual coordinate to a
  relative screen position.

This allows the definition of a GUI container that renders and
interacts with only what is within a scissor rect, while allowing
overflow content to be scrolled (translated) into that rect.

For example, given:

    void GuiScrollContainer::drawElements(
        glm::vec2 mouse_position,
	sp::Rect /* parent_rect */,
	sp::RenderTarget& renderer
    )
    {
        sp::Rect content_rect = getContentRect();

        renderer.pushScissorRect(content_rect);
        renderer.pushTranslation({0.0f, -scroll_offset});

        glm::vec2 layout_mouse = mouse_position + glm::vec2{
	    0.0f, scroll_offset
	};

        for (auto it = children.begin(); it != children.end(); )
        {

	    ... pass translated mouse events through to scrolled
	    contents ...

	}

        renderer.popTranslation();
        renderer.popScissorRect();
    }

Rendering of all child elements of this container is clipped to
the parent's content_rect dimensions and shifted vertically by the
translation offset. Mouse events are also passed through to the
translated positions of the child elements.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant