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

【问题标题】：How do I simulate "overflow: hidden" in three.js or WebGL?如何在 three.js 或 WebGL 中模拟“溢出：隐藏”？
【发布时间】：2019-02-05 23:20:48
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

标签： javascript node.js three.js webgl

【解决方案1】：

您可以使用“模板测试”来实现此目的。模板测试允许您针对已表示为“模板”的像素屏蔽随后的几何图形渲染。

就您正在做的事情而言，您可以使用模板技术：

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

为了让您了解如何实现这一点，您可以按如下方式定义渲染顺序：

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

【讨论】：

我认为这是正确的答案。但是我担心它与“溢出：隐藏”相去甚远。问似乎是一个高级接口，我想知道是否有办法弥合它与模板缓冲区等低级之间的差距。
谢谢，这个答案和上面的答案都很好，我真的挑不出一个赢家。

【解决方案2】：

如果您只想按矩形进行剪辑，可以使用剪刀测试。

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

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

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

【讨论】：

像魅力一样工作，谢谢！我真的希望我能选择 2 个正确答案，因为两者都工作得很好，我在我的代码中使用了这两种解决方案，我的应用程序现在已经提升了！