javascript - 可以用 glsl 代替 webgl 吗？

Question

这可能是一个有点天真的问题，所以请放轻松。但我在 shadertoy.com 查看着色器我对 3d 场景的 glsl 代码如此之小感到惊讶。深入挖掘，我注意到大多数着色器如何使用一种称为 ray marching 的技术。 .

这种技术可以避免完全使用顶点/三 Angular 形，而只需使用像素着色器和一些数学来创建一些非常复杂的场景。

所以我想知道为什么 3d 场景经常使用带有 webgl 的三 Angular 形网格，而不是仅仅使用像素着色器。我们不能只使用 glsl 和像素着色器(又名片段着色器)渲染整个场景吗？

Answer 1

答案很简单，因为 shadertoy 上的技术可能比使用顶点和三 Angular 形慢 10,100,1000 倍。

比较这个在我的笔记本电脑上最多以 1fps 全屏运行的 shadertoy 森林

https://www.shadertoy.com/view/4ttSWf

到这个以 30 到 60fps 运行的天际森林

https://www.youtube.com/watch?v=PjqsYzBrP-M

比较这个在我的笔记本电脑上以 5fps 运行的 Shadertoy 城市

https://www.shadertoy.com/view/XtsSWs

到这个城市:以 60fps 运行的天际线城市

https://www.youtube.com/watch?v=0gI2N10QyRA

比较这个在我的笔记本电脑上全屏运行 1fps 的 Shadertoy Journey 克隆

https://www.shadertoy.com/view/ldlcRf

对于 PS3 上的实际 Journey 游戏，鉴于 PS3 于 2006 年问世，这台机器的 GPU 可以说比我的笔记本电脑慢，但运行速度为 60fps

https://www.youtube.com/watch?v=61DZC-60x20#t=0m46s

还有很多其他原因。一个典型的 3D 世界使用千兆字节的数据来处理纹理、 Angular 色、动画、碰撞等，这些都不能仅在 GLSL 中使用。另一个是他们经常使用分形技术，因此没有简单的方法来实际设计任何东西。相反，他们只是在数学中寻找有趣的东西。例如，这不是设计游戏关卡的好方法。换句话说，使用顶点数据使事情变得更加灵活和可编辑。

比较上面的旅程示例。 Shadertoy 示例是一个单一场景，而游戏是一个广阔的设计世界，有建筑物、废墟和谜题等......

将其称为 ShaderTOY 是有原因的。这是一个有趣的挑战。给定一个函数，它的唯一输入是当前正在绘制的像素，编写代码来绘制一些东西。因此，人们在这种限制下设法绘制的图像是惊人的!

但是，它们通常不是用于编写真实应用程序的技术。如果您希望您的应用程序运行快速且灵活，您可以使用更传统的顶点和三 Angular 形技术。 GTA5、Red Dead Redemption 2、Call of Duty、Apex Legends、Fortnite 等使用的技术....