使用顶点着色器在webgl中制作相机？

Question

我有一些想法，但我不确定，因为我不是webgl的大师。

在WebGL中，没有相机。如果想要模拟它，那么他必须对很多物体进行操作......准确地说，他必须将位置改变成数十万个顶点。我没有深入研究Three.js或Babylon js，所以我不知道，他们如何使用相机。

由于顶点着色器可以变换顶点位置，并且因为我们可以将camera matrix传递给顶点着色器，所以它是否可以让它进行计算，因此GPU会做出艰苦的工作而不是CPU？

Answer 1

您的意思是：使用位置和方向等一些数据在顶点着色器中创建视图矩阵而不是从应用程序创建它并在着色器中发送生成的矩阵 ？

实际上，对于像THREE.js这样的解决方案以及其他许多解决方案，最后的情况如下： 可以从JavaScript处理表示相机的对象。然后在绘制时，视图矩阵由一些位置和方向参数构建，并发送到活动着色器程序。

通过以下几个步骤创建视图矩阵：

• 创建一个标识矩阵（无转换）;
• 将矩阵与每个变换组合以应用于相机：平移和旋转;
• 反转矩阵（此计算可能非常繁重）。

决定应该在何时（或何时）计算矩阵取决于在仅绘制一个图像的过程中视图矩阵不会改变的想法。事实上，视图矩阵和投影矩阵意味着在两个图像之间进行修改。

不要忘记，对于发送到管道的每个顶点，顶点着色器都会执行一次。 如果在顶点着色器中计算视图矩阵，则每个图像将重新计算一千次。

因此，视图矩阵的计算应该更好地保留在应用程序中并发送到着色器程序。

如果你想从浮点算术中的着色器性能中受益，你可以考虑使用计算着色器（遗憾的是不存在于WebGL中）或者考虑一些机制以从着色器程序中读回数据以便计算矩阵一次，并在下次绘制电话时发送。