WebGL - 在着色器中的不同位置渲染单个对象的多个副本

Question

我试图在webGL中编写一对顶点/片段着色器，以便能够读取单个对象的位置和方向，并在这些位置渲染该一个对象的多个实例。

根据我的理解，顶点和片段着色器各自设置一个变量，即gl_Position和gl_FragColor，以定义任何给定输入的位置和像素颜色。那么我将如何渲染多个实例呢？我是否应该通过循环为我想要呈现的所有副本多次设置gl_Position和gl_FragColor的值？

这是一项作业，所以我想解释一下如何从理论上解决这个问题。

谢谢你的时间。

Answer 1

遍历对象的实例。对于每个实例，设置指定位置偏移和当前实例颜色的制服，然后发出绘制调用以呈现相应的实例。顶点着色器应使用传递的位置偏移量来计算实例在世界坐标中的实际位置，使用模型视图投影矩阵对其进行变换，并将结果写入gl_Position。在片段着色器中，应使用传递的颜色来导出用gl_FragColor写的最终片段颜色。

如果对象实例的数量非常大（需要发出太多的绘制调用），那么将实例的所有相关数据打包到一个（或多个）大顶点缓冲区中并发出一个绘制调用存储在此（ese）顶点缓冲区中的所有实例。

最后请注意，WebGL目前不支持核心API中的实例化，但有一个扩展提供此功能：ANGLE_instanced_arrays。

Answer 2

这些问题听起来像你在询问是否有一种方法可以在着色器程序中乘以一个基元，在这里你只需要将一个三角形的三个顶点加到管道中，你的硬件就可以得到几个他们在不同的位置。

答案是：您需要一个几何着色器。不幸的是，几何着色器并不是当前WebGL规范的一部分。因此，唯一的方法是在每次绘制之间更改着色器制服时循环缓冲区对象。