Question

在顶点在顶点着色器中移位的情况下，如何在WebGL / Three.js中检索其变换后的位置？

Other questions在这里建议将位置写入纹理，然后读取像素，但是结果值似乎不正确。

在下面的示例中，位置无需任何转换即可传递到片段着色器：

// vertex shader
varying vec4 vOut;

void main() {
    gl_Position = vec4(position, 1.0);
    vOut = vec4(position, 1.0);
}

// fragment shader
varying vec4 vOut;

void main() {
    gl_FragColor = vOut;
}

然后阅读输出纹理，我希望pixel[0].r与positions[0].x相同，但事实并非如此。

这是一个显示问题的jsfiddle： https://jsfiddle.net/brunoimbrizi/m0z8v25d/2/

我想念什么？

Answer 1

已解决。问题中提到的jsfiddle有很多问题。

If Cells(r, c).Value < 1应该等于顶点数。具有4 x 4分段的width * height产生25个顶点。 3 x 3结果为16。始终（w + 1）*（h + 1）。
顶点着色器中的位置需要微移PlaneBufferGeometry。
顶点着色器需要了解1.0 / width和width，它们可以作为制服传递。
每个顶点都需要一个带有索引的属性，以便可以正确映射它。
每个位置应在生成的纹理中为一个像素。
结果纹理应使用height绘制为gl.POINTS。

工作中的jsfiddle：https://jsfiddle.net/brunoimbrizi/m0z8v25d/13/

Answer 2

您没有正确写出顶点。

https://jsfiddle.net/ogawzpxL/

首先，您要修剪几何图形，因此顶点实际上在视图外部结束，并且您看到了四边形的中间没有任何顶点。

您可以使用uv属性在视图中渲染整个四边形。

gl_Position = vec4( uv * 2. - 1. , 0. ,1.);

缓冲区中的所有内容都代表四边形上的某个点。似乎棘手的是，在渲染时，像素将在顶点旁边采样。在小提琴中，我对世界空间物体应用了一个偏移量，即像素空间中的偏移量，但它实际上并没有起作用。

似乎可以使用点的原因是，这可能都是错误的:)如果只想变换顶点，则需要将它们正确存储在纹理中。您可以为此使用点，但理想情况下，它们之间的间隔不会太大。在您的方案中，它们将填充纹理的前几行（因为它比可能要大得多）。

尝试将其应用于PlaneGeometry以外的其他内容时，您可能会开始遇到问题。在这种情况下，必须解决此问题。

在Three.js中读取顶点位置为像素

2 个答案: