时间戳

首页 > 解决方案 > 如何将纹理像素应用于点云？

javascript - 如何将纹理像素应用于点云？

问题描述

我正在尝试将纹理上图像的像素移动到一组顶点上，这样我就可以在 WebGL 中将它们用作点云。
一种方法是将纹理渲染到帧缓冲区，然后用于gl.readPixels()移动到 JavaScript 数组，然后使用gl.bufferData().
将数据视为顶点，可以gl.drawArrays()使用gl.POINTS图元渲染点云。

但这需要数据从 GPU 移动到 CPU 再返回，这可能会变得昂贵，尤其是对于视频而言。
有没有办法在不离开 GPU 的情况下将数据直接从纹理移动到顶点列表？

非常感谢任何参考、建议或代码示例！

标签： javascriptwebgl

解决方案

感谢 Blindman67 指出您可以在顶点着色器中访问纹理，我不知道这一点。您可以简单地使用 texture2D()，工作示例是https://www.khronos.org/registry/webgl/conformance-suites/2.0.0/conformance/rendering/vertex-texture-fetch.html用于 WebGL，以及http： //webglsamples.org/WebGL2Samples/#texture_vertex用于 WebGL2。一个很好的搜索词是“WebGL 顶点纹理提取”。不要浪费时间（就像我所做的那样）关注旧链接，并尝试让诸如 texture2DLodEXT() 之类的调用正常工作。

推荐阅读