在THREE.js中检索顶点数据

我正在使用自定义着色器创建网格。在顶点着色器中，我正在修改几何体顶点的原始位置。然后，我需要从着色器外部访问这个新的顶点位置，我如何才能做到这一点？

代替变换反馈（WebGL 1.0不支持），您将必须使用穿透片段着色器和浮点纹理（这需要加载扩展名

OES_texture_float

）。这是在WebGL的GPU上生成顶点缓冲区的唯一方法。WebGL也不支持像素缓冲区对象，因此将输出数据读回将非常低效

然而，以下是您如何实现这一点： 这将是一个粗略的概述，重点是OpenGL，而不是任何特定于Three.js的内容

首先，以这种方式对顶点数组进行编码（为索引添加第四个组件）： 将顶点索引存储为

w

组件是必要的，因为OpenGL ES 2.0（WebGL 1.0）不支持

gl\u VertexID

接下来，您需要一个二维浮点纹理： 使用这些尺寸创建RGBA浮点纹理，并将其用作FBO颜色附件0

顶点着色器： 穿透片段着色器： 抽出并读回：

---

可以找到Three.js中的一些代码，这些代码大致满足您的需求。它的不同之处在于它始终将顶点保留在GPU上，但是如果您检查这个答案，并且作为一些示例代码，您应该能够将一些内容组合在一起。非常感谢您的详细解释！所以我知道唯一的方法是使用片段着色器检索纹理（基于顶点位置），然后再次将RGBA颜色从纹理转换到位置，对吗？@MickeyMouse:是的，但是。。。如果在CPU端不需要这些位置，实际上可以在另一个渲染过程的顶点着色器中执行纹理查找。如果您检查我列出的示例的源代码，它将显示如何做到这一点。我不确定你是否需要GPU上的顶点，我描述的答案是从GPU上下载顶点数据。是的，我想我需要CPU上的顶点数据。我正在尝试制作高斯模糊，并将其应用于顶点位置（高度）值（不适用于颜色）。为了优化流程，我将分两步执行任务，水平和垂直（）。也许对于这两个步骤，我在CPU（？）中不需要它们。第三步是对值进行规格化，这意味着我必须迭代所有顶点，所以我想我需要在CPU中使用它们作为最后一步。@MickeyMouse:我真的不知道如何对顶点数据应用模糊过滤器。你可能会得到一个点云回来，但我在脑海中描绘它的方式，你会失去像三角形一样的结构，当你插入额外的顶点模糊将创建。在任何情况下，如果您的顶点位置存储在纹理中，您可以在片段着色器中执行多次提取（您必须使用我前面链接的Three.js示例中的纹理坐标索引逻辑，以从右侧纹理提取顶点），并可能在GPU上实现整个操作。

Vec4 pos_idx  :  xyz = Vertex Position,  w = Vertex Index (0.0 through NumVerts-1.0)

MaxTexSize = Query GL_MAX_TEXTURE_SIZE

Width  = MaxTexSize;
Height = min (NumVerts / MaxTexSize, 1);

#version 100

attribute vec4 pos_idx;

uniform int width;  // Width of floating-point texture
uniform int height; // Height of floating-point texture

varying vec4 vtx_out;

void main (void)
{
  float idx = pos_idx.w;

  // Position this vertex so that it occupies a unique pixel
  vec2 xy_idx = vec2 (float ((int (idx) % width)) / float (width),
                      floor (idx / float (width)) / float (height)) * vec2 (2.0) - vec2 (1.0);
  gl_Position = vec4 (xy_idx, 0.0f, 1.0f);


  //
  // Do all of your per-vertex calculations here, and output to vtx_out.xyz
  //


  // Store the index in the W component
  vtx_out.w = idx;
}

#version 100

varying vec4 vtx_out;

void main (void)
{
  gl_FragData [0] = vtx_out;
}

// Draw your entire vertex array for processing (as `GL_POINTS`)
glDrawArrays (GL_POINTS, 0, NumVerts);

// Bind the FBO's color attachment 0 to `GL_TEXTURE_2D`

// Read the texture back and store its results in an array `verts`
glGetTexImage (GL_TEXTURE_2D, 0, GL_RGBA, GL_FLOAT, verts);