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

Question

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

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

在下面的示例中，位置被传递给片段着色器而不进行任何转换：

// 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 有很多问题。

• width * height 应该等于顶点数。具有 4 x 4 段的 PlaneBufferGeometry 产生 25 个顶点。 3 x 3 得到 16。总是 (w + 1) * (h + 1)。
• 顶点着色器中的位置需要轻推1.0 / width。
• 顶点着色器需要知道width和height，它们可以作为uniform传入。
• 每个顶点都需要一个属性及其索引，以便正确映射。
• 每个位置都应该是生成纹理中的一个像素。
• 生成的纹理应绘制为gl.POINTS 和gl_PointSize = 1.0。

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

Answer 2

您没有正确写出顶点。

https://jsfiddle.net/ogawzpxL/

首先，您正在剪裁几何图形，因此您的顶点实际上在视图之外结束，您会看到四边形的中间没有任何顶点。

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

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

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

它似乎与点一起工作的原因是这可能都是错误的:) 如果您只想转换顶点，那么您需要将它们正确存储在纹理中。您可以为此使用积分，但理想情况下它们不会间隔太多。在您的场景中，它们将填充纹理的前几行（因为它比它可能的大得多）。

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