Three.js不为不同的网格对象使用不同的着色器程序，为什么？

Question

我试图弄清楚，three.js是如何工作的，并为它尝试了一些着色器调试器。

我添加了两个基本材质的简单平面（单色，没有任何着色模型），这些平面在渲染过程中旋转。

首先，我的问题是......为什么three.js使用单个着色器程序（查看WebGL上下文函数.useProgram()）来获取两个网格。 我想，这些对象是相同的，这就是为什么出于性能原因一个着色器程序用于类似对象的原因。

但是......我已经更改了我的three.js应用程序源代码，现在场景中有一个平面和一个立方体，它们正在旋转。

让我们再次查看着色器调试器：

在这里你可以看到，three.js再次使用一个着色器程序，但是对象现在不同了。而这一刻对我来说并不清楚。

如果要查看该着色器，它似乎是非常通用的大型着色器程序，并且还有两个不同的着色器程序，这些程序已编译但未使用。

那么，为什么three.js使用单个着色器程序？那些正确（或可能不是）的原因是什么？

Answer 1

着色器中完成的大部分工作都与网格的材质部分有关，而与几何体无关。

在webgl（或者opengl）中，您理解的几何体（如果它是立方体，球体或其他）是非常无关紧要的。

如果你谈论如何构造几何体，那将会更加相关。但是在这些日子里，超过3个顶点的面都消失了，很少使用三角形条带，那就是几个不同的几何形状...... face3几何，线几何，粒子几何和缓冲几何。

大多数情况下，使用不同着色器的关键区别在于材质。