我目前正在为我的游戏开发WebGL GUI,我真的想深入研究GPU图形,因为它比WebKit CSS渲染平滑得多.

当超出父网格的边界时,是否可以使内部网格遵循溢出规则隐藏的滚动视图？

也许着色器可以工作,有什么建议吗？

谢谢！

解决方法:

您可以使用“模板测试”来实现.模具测试允许您针对表示为“模具”的像素掩盖后续的几何渲染.

就您正在做什么而言,您可以使用模板技术来：

>将滚动区域的内部(矩形？)指定为“模具”.此时,您将“绘制”一个矩形,该矩形代表可滚动区域的边界到“模板缓冲区”中.
>现在,在定义了模板区域并将其渲染到模板缓冲区后,您将渲染可滚动区域的实际内容.由于模板缓冲区处于活动状态,因此滚动条区域的内容将由您绘制到“模板缓冲区”中的矩形剪切.在“模版像素”之外渲染的任何内容均不会渲染.

为了让您了解如何实现此目的,可以按如下方式定义渲染顺序：

    // Clearing the stencil buffer
    gl.clearStencil(0);
    gl.clear(gl.STENCIL_BUFFER_BIT);


    // Tell webgl how to render into the stencil buffer
    gl.stencilFunc(gl.ALWAYS, 1, 1);
    gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE);
    gl.colorMask(false, false, false, false);

    gl.enable(gl.STENCIL_TEST);

    // Renders the inner rectangle of scroll area
    drawInnerRectangleOfScrollArea();

    // Tell webgl how to clip rendering of the scroll area content
    gl.stencilFunc(gl.EQUAL, 1, 1);
    gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
    gl.colorMask(true, true, true, true);

    // Renders the inner contents of scroll area (ie the list of items, etc)
    drawInnerContentsOfScrollArea();

    // Reset the stenicl test state so to not affect any other rendering
    gl.disable(gl.STENCIL_TEST);