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

【问题标题】：WebGL - Rendering multiple copies of a single object in different locations in shadersWebGL - 在着色器的不同位置渲染单个对象的多个副本
【发布时间】：2014-04-15 20:38:29
【问题描述】：

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

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

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

感谢您的宝贵时间。

【问题讨论】：

简短的回答是您使用制服来修改着色器的输出，方法是在每次绘制调用之前将它们设置为不同的值。听起来你最好阅读一些关于 WebGL 的教程。 Here's some

标签： webgl shader

【解决方案1】：

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

如果对象实例的数量非常大（以至于需要发出过多的绘制调用），则将实例的所有相关数据打包到一个（或多个）大型顶点缓冲区中并发出一次绘制调用存储在 this(ese) 顶点缓冲区中的所有实例。

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

【讨论】：

非常感谢，我花了一段时间才明白如何做到这一点，但我终于明白了。
+1。如果所有相关数据都打包到一个大的顶点缓冲区中，那么顶点着色器如何知道如何处理每个实例？跟步幅信息有关系吗？
步幅更多地与多个交错的顶点属性有关。大的顶点缓冲区应该包含渲染实例所需的所有信息。这可以包括颜色、位置等……（必须为每个实例指定）。使用 ANGLE_instanced_arrays 扩展，可以独立设置每个顶点属性的消耗速率：因此可以避免为实例属性重复指定相同的值（例如，为每 N 个实例使用相同的颜色）。

【解决方案2】：

这些问题听起来像是在问是否有一种方法可以在着色器程序中乘以基元，您只需将三角形的三个顶点输入管道，您的硬件就会在不同的位置绘制其中的几个顶点。

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

【讨论】：