WebGL - 使用实例化进行高级渲染

时间:2017-03-31 16:29:52

标签: javascript webgl rendering

我有一个库,可以呈现特定格式的模型。 这些格式具有动画,并且不断改变诸如动态网格颜色(每个网格的顶点颜色),动态可见或不可见的网格以及许多其他内容,这些都取决于动画。

一切都很好,然后我想让渲染实际上很快并切换到实例渲染。 从那时起,一切都成了噩梦,无论我尝试多少设计,我都无法让它正常工作。

代码以这样一种方式工作,即每个模型中的每个网格都拥有一个存储桶对象,该对象为该网格的许多实例保存共享缓冲区。 例如,每个实例都需要提到的动态顶点颜色,因此存储桶会为一些N个顶点颜色保留一个具有足够内存的缓冲区。

添加新实例时,会为其提供一个自由索引。 每个实例都写入此索引,就好像它是一个C指针一样,最后整个缓冲区都使用新值进行更新。

到目前为止一切顺利。

删除实例时,缓冲区中有一个洞。 我所做的是将最后一个实例“移动”到被删除的实例,基本上与更改指针相同。 这不太好,但速度很快。

然后问题有两个方面 - 纹理和相机。

假设我想要一个实例使用不同的纹理,直接使用实例渲染这是不可能的。 所以现在它已经分裂了。网格包含网格“视图”的数组,并且每个视图都包含存储桶。 视图可以定义自己的纹理覆盖,因此每个视图都是一个额外的N渲染调用。 这是马马虎虎,但我想不出别的什么。

最后,我现在完全陷入了实际问题 - 相机。 我希望能够定义每个实例使用的摄像头。 看起来好像我只能添加一个矩阵作为属性,但这不允许更改视口,这是很重要的。 我不能为我的生活想想任何真正有效的方式,它允许以上所有方面。切换相机,切换纹理和实例渲染。

更糟糕的是,我也想不出任何剔除实例的好方法。

我能看到真正支持一切的唯一真正方法是动态地为每个渲染调用重新创建缓冲区,并在CPU侧和GPU侧每帧复制大量数据。 例如 - 将每个摄像机的所有实例分类到不同的JS数组中(可以在此处进行剔除),为每个实例创建一个类型化数组,将所有实例中的所有实例数据复制到此数组中,将其绑定到缓冲区,并为每个帧重做每个“视图”的每个帧。 这基本上是OOP渲染,在最后一步切换到实例渲染,我怀疑它会是什么样的快速...

tl; dr instanced渲染是一个真正使用的地狱。是否有任何已知的适当技术可以使用不同的纹理/相机/诸如此类?

0 个答案:

没有答案