imageData CanvasPixelArray 是否可直接用于画布 WebGL 上下文？答案

【问题标题】：Is an imageData CanvasPixelArray directly available to a canvas WebGL context?imageData CanvasPixelArray 是否可直接用于画布 WebGL 上下文？
【发布时间】：2012-03-17 05:20:27
【问题描述】：

我正在使用 Three.js 将 3D 模型绘制到简单 DOM 元素上方的 webgl 画布渲染器上，我需要在它们之间进行碰撞检测。我目前的工作方法是使用 renderer.domElement.toDataURL()，将其加载为 imageData 对象，然后将其绘制到单独的 2D 画布上下文中，然后拉出 getImageData() 像素数组并使用 this awesome pixel collision function 进行迭代。

这令人难以置信慢，并将我的帧速率拉低到几乎无法播放的〜5-8 FPS。如果不运行此命中检测，我会得到大约 40-50 FPS。

我最好的猜测是减速是非常笨拙的toDataURL()->load image->drawImage()->getImageData()。

我的问题变成了：有没有更好的方法来访问 WebGL 画布上可用的展平 2D 像素数据？ 或者可能是一种更好的方法来推断没有视差的 3D 对象坐标？老实说，任何能比我目前做的更快地进行某种碰撞检测的方法都会非常有用。

编辑：WebGL context.readPixels() 对我来说非常好，而且与我之前的 kludge 相比速度非常快。尽管应该注意，与常规图像像素数据阵列相比，数据阵列是从上到下镜像的。我只是简单地翻转了我的碰撞例程 Y 值检查并让它工作，尽管其他人可能会以更棘手的方式被绊倒。祝你好运！

【问题讨论】：

标签： collision-detection webgl three.js hit

【解决方案1】：

你可以使用gl.readPixels:

// Render your scene first then...
var left = 0;
var top = 0;
var width = canvas.width;
var height = canvas.height;
var pixelData = new Uint8Array(width * height * 4);
gl.readPixels(left, top, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);

pixelData 现在包含场景的像素数据，格式为 [R, G, B, A, R, G, B, A...] 的无符号字节 (0-255) 应该与 getImageData 的数据相同，但成本要低得多。

[编辑：]

我忘了提到，如果您要这样做，您需要使用 preserveDrawingBuffer 选项创建您的 WebGL 上下文，如下所示：

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

这可以防止 WebGL 的内部工作在您到达缓冲区之前清除缓冲区（这会导致您读取大量空像素）。启用此选项可能会减慢渲染速度，但它的加载速度仍应高于 5-8 FPS！ :)

【讨论】：

不错！我很惊讶我以前忽略了这一点。这“有效”，但是..如果您将此数据绘制回另一个画布以查看它，它会从上到下镜像！你能想到任何简单的方法来翻转它吗？我可能只是在我的碰撞检测程序中翻转我的 Y...
如果您想要一种简单的方法来保持秩序，您可以创建另一个画布。使用第一个作为 drawImage 的来源，然后在临时的上使用 getImageData。

【解决方案2】：

 renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer:true });



 var gl = renderer.getContext()
 var buf = new Uint8Array(200 * 200 * 4);
 gl.readPixels(0, 0, 200, 200, gl.RGBA, gl.UNSIGNED_BYTE, buf);


console.log(buf);

这很好用。

【讨论】：