是否有可能获得顶点的实际值？

Question

我试图从顶点着色器恢复一些顶点数据，但我还没有在互联网上找到任何相关信息。

我使用顶点着色器使用GPU计算我的顶点位置，但我需要在Javascript中获取应用程序逻辑的结果。有没有可能的方法来做到这一点，而无需在Javascript中计算它？

Answer 1

在WebGL2中，您可以使用转换反馈（如Pauli建议的那样），您可以使用getBufferSubData回读数据，但理想情况下，如果您只是要在另一个绘图调用中使用数据，则不应该读回来是因为回读很慢。

转换反馈只是意味着您的顶点着色器可以将其输出写入缓冲区。

在WebGL1中，您可以通过将顶点渲染到附加到帧缓冲区的浮点纹理来实现。您为每个顶点包含顶点id属性。您可以使用该属性设置gl_Position。您可以使用gl.POINT进行绘制。它允许您有效地渲染输出纹理中的每个像素，让您获得变换反馈。结果的不同之处在于纹理而不是缓冲区。你可以看到a related example of that here

如果您不需要在JavaScript中使用这些值，那么您可以使用刚刚写入的纹理作为未来绘制调用的输入。如果您确实需要使用JavaScript you'll have to first convert the values from floating point into a readable format (using a shader) and then read the values out using gl.readPixel

中的值

Answer 2

Transform feedback是将顶点处理结果返回给应用程序代码的OpenGL方式。但这仅适用于webgl 2.变换反馈也输出基元而不是顶点，使其不太可能完美匹配。

较新的替代方案是image load store和shader storage buffer objects。但我认为webgl 2也缺少这些。

简而言之，您需要在javascript中计算相同的数据或将应用程序逻辑移动到着色器。如果需要转换顶点数据进行联盟检测，则可以使用边界框测试，并仅在边界框命中时执行顶点级别转换。

您可以使用多级边界框，在整个对象周围有一个大框，然后是下一个边界框级别，将对象拆分为小部件，如单独的框，用于身体中每个不相交的部分（例如，在膝盖和脚踝处分开在腿）。这样javascript主要只为每个帧中的每个对象变换单个边界框/球体。仅在物体靠近时才变换第二级框。然后，只有当对象非常接近触摸时才进行每个顶点变换。