为什么gl.readPixels()不能工作？

Question

我一直在尝试使用WebGL实现裁剪和封顶。为此，我必须使用模具缓冲区来限制裁剪平面的绘制，以便只绘制对象内部的部分。

首先，我一直在尝试使用模具缓冲器。我的目标是检查gl.clearStencil()和gl.clear()是否更新了模具缓冲区的值。这是检验样本-

    var contextAttributes = gl.getContextAttributes();
    var haveStencilBuffer = contextAttributes.stencil;

    var bitPlane = gl.getParameter(gl.STENCIL_BITS);

    gl.stencilMask(0xFF);
    gl.clearStencil(10);
    gl.clear(gl.STENCIL_BUFFER_BIT);
    gl.enable( gl.STENCIL_TEST );
    gl.stencilFunc( gl.ALWAYS, 0, 0);

    var stencils = new Uint8Array((window.innerHeight/2) * (window.innerWidth/2));
    gl.readPixels(0, 0, window.innerWidth/2, window.innerHeight/2, gl.STENCIL_INDEX, gl.UNSIGNED_BYTE, stencils);

我得到haveStencil = true和bitPlane = 8，所以它确认有一个模板缓冲区，每个像素都有8位的存储空间。

但是，当我将stencils数组中的值设置为10时，我发现存储在10数组中的值都是10。我已经检查了gl.readPixels()函数没有填充stencils数组。这段代码在我看来是准确的。这里到底会出什么问题？

谢谢。

Answer 1

我不相信你能用gl.readPixels来读模版。当我尝试你的例子时，我得到

WebGL: INVALID_ENUM: readPixels: invalid format

但这是一个关于模具的工作例子。也许你可以看到你所做的不一样。首先，它显式地要求一个模板缓冲区。如果你想确保得到一个，你就应该这么做。否则，这取决于实现。

使用剪刀测试和清除，此代码将模具缓冲区的矩形区域设置为10。然后，它关闭剪刀测试，打开模具测试，并绘制全屏四角。它应该只绘制模板设置为10的地方。然后我们反转测试，再用另一种颜色绘制，它将在任何地方绘制，但模板是10。我使用的是twgl.js，因为WebGL太冗长了，但我希望代码是清楚的。

​

// explictly ask for a stencil buffer
var gl = document.createElement("canvas").getContext(
  "webgl", {stencil: true});
document.body.appendChild(gl.canvas);

// set part of the stencil (using the scissor to be easy)
gl.enable(gl.SCISSOR_TEST);
gl.scissor(10, 20, 50, 60);
gl.stencilMask(0xFF);
gl.clearStencil(10);
gl.clear(gl.STENCIL_BUFFER_BIT);
gl.disable(gl.SCISSOR_TEST);

// Now draw a fullscreen quad with the stencil test on
gl.enable(gl.STENCIL_TEST);
gl.stencilFunc(gl.EQUAL, 10, 0xFF);
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);

var arrays = {
  position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0],
};
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.setUniforms(programInfo, { color: [1,0,0,1] });
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);

// and again with the test reversed
gl.stencilFunc(gl.NOTEQUAL, 10, 0xFF);

twgl.setUniforms(programInfo, { color: [0,1,0,1] });
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);

canvas { border: 1px solid black; }

<script id="vs" type="notjs">
attribute vec4 position;
void main() {
  gl_Position = position;
}
  </script>
  <script id="fs" type="notjs">
precision mediump float;
uniform vec4 color;
void main() {
  gl_FragColor = color;  
}
  </script>
  <script src="https://twgljs.org/dist/twgl.min.js"></script>

​