【 Threejs 】- Shader 着色器实例渲染教程_three.js shader

着色器在threejs中是一个难点，话不多说，先来看看着色器是什么？

如果您已经有使用计算机绘图的经验，您就会知道在这个过程中您先画一个圆，然后画一个矩形、一条线、一些三角形，直到您组成您想要的图像。这个过程与手写一封信或一本书非常相似——它是一组指令，一个接一个地完成任务。> 着色器也是一组指令，但这些指令是针对屏幕上的每个像素一次性执行的。这意味着您编写的代码必须根据像素在屏幕上的位置而有所不同。就像打字机一样，您的程序将作为接收位置并返回颜色的函数工作，并且在编译时运行速度非常快。

着色器的来源

那么好，说人话，着色器到底是什么？字面意思，给物品上色的（简单^_）

关于着色器(shader) 它是用GLSL（着色器语言）写的，执行shader的是GPU，我们可以把一部分GLSL的工作交给GPU来提升性能。这样就好理解了，着色器程序通常在计算机的图形处理单元 (GPU) 上运行，它们可以在其中并行运行。

GLSL官方解释为 ：OpenGL Shading Language 也称作 GLslang，是一个以C语言为基础的高阶着色语言。它是由 OpenGL ARB 所建立，提供开发者对绘图管线更多的直接控制，而无需使用汇编语言或硬件规格语言。

• 有些人就会问了，为什么使用着色器？
• 答：因为它快啊！

为了回答这个问题，我介绍了并行处理的奇迹。

将你的计算机的 CPU 想象成一个大型工业管道，每项任务都是通过它的东西 - 就像一条工厂生产线。有些任务比其他任务更大，这意味着它们需要更多的时间和精力来处理。由于计算机的体系结构，作业被迫连续运行；每项工作必须一次完成一项。现代计算机通常有四个处理器组，它们像这些管道一样工作，一个接一个地完成任务以保持运行顺畅。每个管道也称为线程。

视频游戏和其他图形应用程序比其他程序需要更多的处理能力。由于它们的图形内容，它们必须进行大量的逐像素操作。屏幕上的每个像素都需要计算，在 3D 游戏中，几何和透视也需要计算。

让我们回到管道和任务的比喻。屏幕上的每个像素代表一个简单的小任务。单独每个像素任务对 CPU 来说不是问题，但是（这就是问题所在）必须对屏幕上的每个像素完成小任务！这意味着在旧的 800x600 屏幕中，每帧必须处理 480,000 个像素，这意味着每秒要进行 14,400,000 次计算！是的！这是一个足以使微处理器过载的问题。在以每秒 60 帧的速度运行的现代 2880x1800 视网膜显示器中，该计算加起来达到每秒 311,040,000 次计算。图形工程师如何解决这个问题？