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

Question

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

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

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

谢谢！

Answer 1

您可以使用 "stencil test" 来实现此目的。模板测试允许您根据表示为 "stencil".

的像素屏蔽后续的几何渲染。

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

将滚动区域的内部（矩形？）指定为 "stencil"。此时，您将 "draw" 一个表示可滚动区域边界的矩形放入 "stencil buffer"。
现在，在定义了模板区域并将其呈现到您的模板缓冲区后，您将呈现可滚动区域的实际内容。因为模板缓冲区处于活动状态，所以滚动条区域的内容会被您绘制到 "stencil buffer" 中的矩形裁剪。在 "stencilled pixels" 之外呈现的任何内容都不会呈现。

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

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

Answer 2

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

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

现在 WebGL 只会在 x、y、宽度和高度之间呈现。

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

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

How do I simulate "overflow: hidden" in three.js or WebGL?

javascript

webgl

node.js

three.js