在THREE.js中检索顶点数据

Question

在THREE.js中检索顶点数据

three.jstextureswebglshadervertex-shader

7

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

- MickeyMouse

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andon M. Coleman · Accepted Answer

由于WebGL 1.0不支持变换反馈，您需要使用一个经过的片段着色器和浮点纹理（这需要加载扩展OES_texture_float）来代替。这是在WebGL中生成顶点缓冲区的唯一方法。WebGL也不支持像素缓冲对象，因此读取输出数据将非常低效。

尽管如此，以下是您可以完成此操作的方法：

这将是一个粗略的概述，重点是OpenGL而不是任何特定于Three.js的内容。

首先，按以下方式对您的顶点数组进行编码（添加第4个索引组件）：

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

将顶点索引存储为w组件是必要的，因为OpenGL ES 2.0（WebGL 1.0）不支持gl_VertexID。

接下来，您需要一个二维浮点纹理：

MaxTexSize = Query GL_MAX_TEXTURE_SIZE

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

创建一个具有这些尺寸的RGBA浮点纹理，并将其用作FBO颜色附件0。

顶点着色器：

#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);