如何在 WebGL 中为输出纹理或帧缓冲区提供偏移量？

Question

如果我想在我的输入纹理中使用某个区域而不是整个区域，我可以使用 gl.texSubImage2D() 并提供 x 和 y 偏移量。

输出纹理中的等效项是什么？鉴于在我的片段着色器中我无法控制我正在写入的纹素。调用 gl.viewPort() 会成功吗？我需要为此更改 canvas 尺寸吗？

Answer 1

作为@J。 van Langen 指出你 gl.scissor 会起作用。您需要使用 gl.enable(gl.SCISSOR_TEST) 启用剪刀测试，然后使用 gl.scissor(x, y, width, height)

设置要裁剪的矩形

示例：

const gl = document.querySelector("canvas").getContext("webgl");
gl.enable(gl.SCISSOR_TEST);
gl.scissor(50, 25, 150, 75);
gl.clearColor(1, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);  // notice the entire canvas is not cleared

canvas { border: 1px solid black; }

<canvas></canvas>

那么这又取决于你对"offset"的定义。剪刀矩形只是剪裁，不会偏移（通常是平移）。正如你提到的，你可以使用 gl.viewport 来抵消。 gl.viewport 不影响 gl.clear。它只影响分配给 gl_Position 的顶点如何转换回屏幕坐标以及这些顶点如何被剪裁。

重要的是要注意它剪切的是顶点，而不是像素，因此在视口边缘绘制的 10 像素点（如 gl_PointSize = 10.0）将部分绘制在视口之外。因此，通常如果您将视口设置为小于您正在绘制的任何内容的完整大小，您是否也会启用并设置剪刀矩形。

如何在 WebGL 中为输出纹理或帧缓冲区提供偏移量？

How do I provide offsets for the output texture or framebuffer in WebGL?

webgl