绘制在OpenGL裁剪UI元素最佳方法 [英] Best approach to draw clipped UI elements in OpenGL

问题描述

我有一个复杂的UI系统，它允许很多东西也可以用WPF做，但支持多种plattforms（iOS版，Android版，窗户，...）。它尚未完成，现在我面临着以下问题：

I've a complex UI-system which allows a lot of stuff which also can be done with WPF but supports multiple plattforms ( iOS, Android, Windows, ... ). It's not completed yet and now i'm facing the following issue:

我的设计者希望旋转物体！旋转物体远远比简单的轴线对齐的人，这是我不能使用的 glScissor 。一个小的图形可能有助于理解这个问题：

My designer wants rotating objects! Rotating objects are far more complex than simple axis aligned ones, which are the reason i can't use glScissor. A little graphic which might help to understand the problem:

您可以看到，我需要夹子对象子容器的的边界父容器。据我知道有几个选项：

You can see that i need to clip the object "Subcontainer" by the bounds of the "Parent Container". As far as i know there are few options:

• 使用模板缓存，在这种情况下，我有一个问题，因为我有一个是对象不可见的，还必须影响到模板缓冲，因为他们可能会掩盖子对象。我也有绘制的每个对象两次，因为我在层次结构回去的时候要减少模板缓存


• 切平面（三角或任何其他UI模型）。这是用来绘制用户界面对象，这似乎是一个很大的负担，因为他们可能在不同的点（想象一个旋转的容器......一个旋转的容器的容器）剪辑，也真的很难正确剪辑他们，这可能是一个性能问题

来源然而似乎都引起了很多不同的问题，可能会对性能泄漏源。是否有任何其他方式来归档什么，我想还是有什么办法可以提高上述两种方法？

However both seem to cause a lot of different issues and might be a source for performance leaks. Is there any other way to archive what i want or is there any way to improve the both approaches above?

推荐答案

我结束了使用模版缓冲，这会产生更多的绘制调用比深度的方法，但更容易实现。

I ended up with using the Stencil-Buffer, this generates more draw calls than the depth-approach but is much easier to implement.

在我画我写这段代码：

if (_Mask)
{
    if (Stage.StencilMaskDepth++ == 0)
        GL.Enable(EnableFlags.STENCIL_TEST);

    GL.ColorMask(false, false, false, false);
    GL.DepthMask(false);
    GL.StencilFunc(StencilFunction.ALWAYS, Stage.StencilMaskDepth, Stage.StencilMaskDepth);
    GL.StencilOp(StencilOp.INCR, StencilOp.INCR, StencilOp.INCR);

    // Draw rectangle
    DrawColor(Colors.Black);

    GL.ColorMask(true, true, true, true);
    GL.DepthMask(true);
    GL.StencilFunc(StencilFunction.EQUAL, Stage.StencilMaskDepth, Stage.StencilMaskDepth);
    GL.StencilOp(StencilOp.KEEP, StencilOp.KEEP, StencilOp.KEEP);
}

在所有孩子的被抽这段代码被称为：

After all childs have been drawn this code is called:

if (_Mask)
{
    GL.ColorMask(false, false, false, false);
    GL.DepthMask(false);
    GL.StencilFunc(StencilFunction.ALWAYS, Stage.StencilMaskDepth, Stage.StencilMaskDepth);
    GL.StencilOp(StencilOp.DECR, StencilOp.DECR, StencilOp.DECR);
    // Draw rectangle
    DrawColor(Colors.Black);

    GL.ColorMask(true, true, true, true);
    GL.DepthMask(true);

    if (--Stage.StencilMaskDepth == 0)
        GL.Disable(EnableFlags.STENCIL_TEST);
}

也许我要测试在几月一些其他的方法，但目前这是最容易实现。

Maybe i going to test some other approaches in a few month but currently this is the easiest to implement.

这篇关于绘制在OpenGL裁剪UI元素最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！