时间戳

首页 > 解决方案 > WebGL 从屏幕外画布正确读取像素

javascript - WebGL 从屏幕外画布正确读取像素

问题描述

我知道这方面有很多资源，但没有一个对我有用。
有些是：webgl readpixels 总是返回 0,0,0,0，
这个：https://stackoverflow.com/questions/44869599/readpixels-from-webgl-canvas\ 以及这个：从一个WebGL 纹理
，但它们都没有帮助或成功。

目标：使用 WebGL 着色器渲染屏幕外画布，然后将其用作单独的 WebGL 着色器中的纹理。

笔记：

问题：为了从屏幕外画布上获取图像数据，我尝试了以下方法：

  1. WebGLgl.readPixels函数
var capturedImageData = new Float32Array(screenWidth * screenHeight * 4);
gl.readPixels(0, 0, screenWidth, screenHeight, gl.RGBA, gl.FLOAT, capturedImageData);
  1. 使用另一个画布getContext('2d')
var offscreenCanvas = document.createElement("canvas");
offscreenCanvas.width = screenWidth;
offscreenCanvas.height = screenHeight;
var ctx = offscreenCanvas.getContext('2d');
ctx.drawImage(glCanvas, 0, 0);
var capturedImageData = ctx.getImageData(0, 0, screenWidth, screenHeight);

这两种方法都会导致capturedImageData数组被 填充
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, . . .，这显然是不对的。

如果有人有此问题的经验，将不胜感激。谢谢！

该计划的直接链接是： https ://www.khanacademy.org/cs/-/6289631977619456

标签： javascripthtmlwebgl

解决方案

您应该始终查看浏览器的 JavaScript 控制台（按 F12）或从菜单中选择它。我应该为您的代码显示错误

var capturedImageData = new Float32Array(screenWidth * screenHeight * 4);
gl.readPixels(0, 0, screenWidth, screenHeight, gl.RGBA, gl.FLOAT, capturedImageData);


const gl = document.createElement('canvas').getContext('webgl');
const screenWidth = 300;
const screenHeight = 150;
var capturedImageData = new Float32Array(screenWidth * screenHeight * 4);
gl.readPixels(0, 0, screenWidth, screenHeight, gl.RGBA, gl.FLOAT, capturedImageData);

当我运行您的代码时，我收到此错误

js:16 WebGL: INVALID_ENUM: readPixels: invalid type

你不能用FLOAT. 看到这个答案

但是，您尝试执行的操作是渲染到一个纹理并将其用作另一个着色器的输入，这不应该使用 readPixels 来完成。应该使用允许您直接渲染到纹理的帧缓冲区来完成。

看到这个或者也许其中之一

推荐阅读