如何在three.js或WebGL中模拟"overflow: hidden"?

Question

我目前正在为我的游戏开发WebGL GUI，我真的想深入了解GPU图形技术，因为它比WebKit CSS渲染更加流畅。

是否可以制作一个滚动视图，其中内部网格遵循溢出规则，在超出父网格边界时隐藏？

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

谢谢！

- Wallflips

Answer 1

如果您只想通过矩形进行裁剪，可以使用剪刀测试。

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

现在 WebGL 只会在 x、y、宽度和高度之间进行渲染。

THREE.js 还有剪切设置 WebGLRenderer.setScissor 和 WebGLRenderer.setScissorTest。

- gman

---

非常好用，谢谢！我真的希望我能选择两个正确答案，因为两个都完美地运作，我在我的代码中使用了这两个解决方案，现在我的应用程序已经升级了！ - Wallflips

Answer 2

您可以使用“模板测试”来实现此目的。模板测试允许您针对您标记为“模板”的像素屏蔽几何体的后续渲染。

就您所做的事情而言，您可能会使用模板技术来：

1. 将滚动区域的内部（矩形？）指定为“模板”。在这一点上，您将在“模板缓冲区”中“绘制”一个代表可滚动区域边界的矩形。

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

- Dacre Denny

---

我认为这是正确的答案。但我担心它与“overflow:hidden”相去甚远。问题似乎需要一个高级接口，我想知道是否有一种方法来弥合高级接口和像模板缓冲区这样低级接口之间的差距。 - pailhead

谢谢，这个答案和上面的都完美地解决了问题，我真的无法选择一个赢家。 - Wallflips