Question

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

是否可以进行滚动查看，以便在超出父网格边界的情况下隐藏内部网格遵循溢出规则？

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

谢谢！

Answer 1

如果只想按矩形修剪，可以使用剪刀测试。

gl.enable(gl.SCISSOR_TEST);
gl.scissor(x, y, width, height);

现在，WebGL将仅在x，y，宽度和高度之间进行渲染。

THREE.js还具有剪刀设置WebGLRenderer.setScissor和WebGLRenderer.setScissorTest

Answer 2

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

关于您正在做的事情，您可以使用模具技术来完成：

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

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

    // 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);

如何在three.js或WebGL中模拟“溢出：隐藏”？

2 个答案: