IT技术 - webgl readpixels 总是返回 0,0,0,0 - 吾爱随笔录

webgl readpixels 总是返回 0,0,0,0

IT技术 javascript webgl

2021-03-10 06:52:29

我正在尝试在 WebGl 中进行挑选。我渲染了两个形状，并在每个形状上映射了不同的纹理。我试图在某些坐标上抓取像素。这是示例。

var pixelValues = new Uint8Array(4);
gl.readPixels(10, 35, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixelValues);
console.log(pixelValues);

但是 pixelValues 总是包含 [0,0,0,0]。我究竟做错了什么？我需要做一些与帧缓冲区相关的事情吗？

2个回答

你不需要preserveDrawingBuffer: true打电话readPixels。您需要的是readPixels在退出当前事件之前调用。

规范说，如果您调用任何影响画布的函数（gl.clear、gl.drawXXX），那么浏览器将在下一次合成操作后清除画布。复合操作何时发生取决于浏览器。它可能是在处理多个鼠标事件或键盘事件或单击事件之后。订单未定义。定义的是在当前事件退出之前它不会这样做

render
read

显示代码片段

const gl = document.querySelector("canvas").getContext("webgl");

render();
read();  // read in same event

function render() {
  gl.clearColor(.25, .5, .75, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
}

function read() {
  const pixel = new Uint8Array(4);
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  log(pixel);
}

function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}

<canvas></canvas>

在哪里工作

render
setTimeout(read, 1000);  // some other event

不起作用

显示代码片段

const gl = document.querySelector("canvas").getContext("webgl");

render();
setTimeout(read, 1000);  // read in other event

function render() {
  gl.clearColor(.25, .5, .75, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
}

function read() {
  const pixel = new Uint8Array(4);
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  log(pixel);
}

function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}

<canvas></canvas>

请注意，由于触发清除的是复合操作（浏览器实际在页面上绘制画布和 HTML 的其余部分），如果画布不在页面上，则它不会被合成，也不会被清除。

换句话说，上面不起作用的情况在这里起作用

显示代码片段

// create an offscreen canvas. Because it's offscreen it won't be composited
// and therefore will not be cleared.
const gl = document.createElement("canvas").getContext("webgl");

render();
setTimeout(read, 1000);  // read in other event

function render() {
  gl.clearColor(.25, .5, .75, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
}

function read() {
  const pixel = new Uint8Array(4);
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  log(pixel);
}

function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}

现在，如果您想调用readPixels其他事件，例如当用户单击某个元素时，那么您至少有 2 个选项

放 preserveDrawingBuffer: true

在您的活动中再次渲染

screenshotElement.addEventListener('click', event => {
  render();  
  gl.readPixels(...);
});

您无法从同一画布中获取具有不同属性的第二个上下文。对 getContext 的第二次调用将返回与第一次调用相同的上下文，并且设置将与第一次调用中的设置保持一致

2021-04-22 06:52:29

如果我们使用没有的上下文进行渲染preserveDrawingBuffer: true，然后通过设置preserveDrawingBuffer: true和获取像素从同一画布中获取另一个上下文，后者是否readPixels可以工作？第二个上下文的新配置对第一个上下文有影响吗？我希望它们是相同的对象。是对的吗？

2021-05-10 06:52:29

根据WebGL 规范，您需要调用getContext设置preserveDrawingBuffer标志，例如：

var ctx = canvas.getContext("webgl", {preserveDrawingBuffer: true});

如果您打算在退出渲染 GL 上下文的事件后读取像素。这可以防止绘制缓冲区（颜色、深度、模板）在绘制到屏幕后被清除。请记住，设置这可能会导致性能损失。

或者，您可以在呈现之前读取像素，这也应该有效。

这是错误的:(

2021-04-24 06:52:29

这是不完整的，我同意。固定以包括替代方案。

2021-05-17 06:52:29

其它你可能感兴趣的问题

上一篇如何用ajax响应替换html元素？下一篇真的有必要为循环优化 JavaScript 吗？