在 THREE.js 中检索顶点数据 [英] Retrieve Vertices Data in THREE.js

问题描述

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

I'm creating a mesh with a custom shader. Within the vertex shader I'm modifying the original position of the geometry vertices. Then I need to access to this new vertices position from outside the shader, how can I accomplish this?

推荐答案

代替变换反馈(WebGL 1.0 不支持)，您将不得不使用直通片段着色器和浮点纹理(这需要加载扩展 OES_texture_float).这是在 WebGL 中在 GPU 上生成顶点缓冲区的唯一方法.WebGL 也不支持像素缓冲区对象，因此读取输出数据将非常低效.

In lieu of transform feedback (which WebGL 1.0 does not support), you will have to use a passthrough fragment shader and floating-point texture (this requires loading the extension OES_texture_float). That is the only approach to generate a vertex buffer on the GPU in WebGL. WebGL does not support pixel buffer objects either, so reading the output data back is going to be very inefficient.

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

This will be a rough overview focusing on OpenGL rather than anything Three.js specific.

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.

Storing the vertex index as the w component is necessary because OpenGL ES 2.0 (WebGL 1.0) does not support gl_VertexID.

MaxTexSize = Query GL_MAX_TEXTURE_SIZE

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

使用这些尺寸创建一个 RGBA 浮点纹理并将其用作 FBO 颜色附件 0.

Create an RGBA floating-point texture with those dimensions and use it as FBO color attachment 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);

这篇关于在 THREE.js 中检索顶点数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！