着色器中的纹理查找与句柄属性

Question

我的问题与生成带有噪声函数和其他函数的高度图有关。

WebGL 提供了两个有趣的功能：gl.texImage2D 和 gl.readPixels。我会说它们有点相似，第一个将图像数据从画布上传到当前绑定的 WebGLTexture，第二个用画布中的像素数据填充 Uint8Array 缓冲区。

据我了解，如果接受不同的参数，gl.texImage2D 与 gl.readPixels 几乎相同。

我见过各种（WebGL）高度图实现，我记得它们都使用texImage2D，而没有人使用readPixels。

假设我们有一个由只有 [x, z] 坐标的顶点组成的平面，我们正在寻找 y 坐标来扭曲我们的平面。所以我们可以通过纹理查找找到 [y] 坐标，因此我们将纹理绑定到我们的程序，或者我们可以将另一个缓冲区与画布中的数据绑定并读取 [y] 作为属性。

在思考了纹理查找的工作原理和属性的工作原理之后， 与属性相比，纹理查找必须重得多？但是多少钱？

但是我不明白为什么人们如此使用纹理？

gl.texImage2D 和gl.readPixels，从 javascript 的角度来看它是如何工作的。你看过 readPixels 的任何演示吗？有什么我看不到的优势吗？

Answer 1

texImage2D / texSubImage2D 和 readPixels 之间的区别在于它们的作用完全相反。一个将数据发送到 gpu，另一个将数据读回，这（仅）在您需要 javascript 中的数据时有用。

至于为什么人们使用纹理而不是属性作为高度图的原因是因为它更容易修改。这是一种方便，而不是规则。如果你愿意，你可以用属性来实现它。渲染它很可能会稍微快一些，修改它会慢很多。

如果您只想加载地形一次，而不再接触数据，请使用属性。如果要大量修改，请使用纹理。

我希望这个答案更清楚。没有意识到，甚至试图解释纹理和属性之间的差异来回答它也没有多大意义。