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

Question

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

这里建议先把位置写到贴图上再读取像素，但是结果值好像不对。

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

// 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，它们可以作为 uniforms 传入。
每个顶点都需要一个带有索引的属性，以便正确映射。
每个位置都应该是生成的纹理中的一个像素。
生成的纹理应绘制为 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.);

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

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

一旦您尝试将此应用于 PlaneGeometry 以外的其他事物，您可能会运行遇到问题。在这种情况下，这个问题必须被分解。

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

Read vertex positions as pixels in Three.js

three.js

glsl

fragment-shader

vertex-shader