如何在 WebGL 中流式传输顶点？

Question

我编写了一个使用 WebGL 显示模型的程序。该程序从 XML 中获取输入数据（-顶点、索引、颜色）并且运行良好。但是，在绘制模型之前加载顶点数据需要一些时间（在此期间浏览器无响应）。一旦获得数据，它就可以像在桌面应用程序中操作模型一样工作。

当顶点数据被发送到程序时，我如何能够（逐步）绘制模型？这可能会在输入顶点时缓慢显示模型。为了方便起见，我有这样的程序，我没有使用索引数组。顶点根据索引数据在顶点数组中对齐。所以，我可以自动使用 gl.drawArrays 而不使用 gl.drawElements （原因是 - 颜色）。

那么，最后，有没有一种渐进式渲染的方法？以便代码在顶点进入时对其进行流式传输？我已经看到了渐进式渲染的例子 http://webgl-loader.googlecode.com/svn/trunk/samples/happy/happy.html 并阅读 Three.js 中的类似内容。我没有使用 Three.js 之类的框架。

如果您有一个用于渐进式渲染的简单示例程序，将会有所帮助。

Answer 1

您可以使用 JavaScript“onload”事件处理程序等到您下载了所有需要的数据，然后再将 t 传输到 GPU。我还可以建议使用 XMLHttpRequest 对象从网络异步加载数据；也许这是一个更好的选择。

一开始，当您还没有顶点数据时，您可以使用一些“时间”数据（例如立方体）来初始化缓冲区。而不是在数据加载机制的 onload/oncomplete 处理程序中替换它。