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位存储空间的模板缓冲区。

但是当我将clear值设置为stencils时，我发现存储在Zero数组中的值都是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>

为什么gl.readPixels（）不起作用？

1 个答案: