12、Three.js的glsl讲解

注意问题：glsl详细讲解文档：https://juejin.cn/post/7158032481302609950

本人文档地址：https://note.youdao.com/s/8ijhsVfb

1、GLSL介绍

GLSL是OpenGL Shading Language的缩写，是一种用于编写着色器的高级编程语言，用于在GPU上实现高性能图形渲染。

在Three.js中，GLSL着色器被用来对3D场景中的几何体进行渲染。它们是通过在CPU上编写JavaScript代码来创建和配置的，但它们的执行是在GPU上完成的。Three.js中的GLSL着色器使用了WebGL API来与GPU交互，并通过数据传递、计算和输出来渲染几何体。

使用GLSL可以实现各种复杂的图形效果，如光照、阴影、反射、抗锯齿等等。Three.js中的GLSL着色器通常由两个部分组成：顶点着色器和片段着色器。顶点着色器用于计算几何体的顶点位置和法线，片段着色器用于为每个像素计算其颜色和透明度。

通过编写自定义的GLSL着色器，我们可以实现更加细致、个性化的渲染效果，从而提高3D场景的视觉质量和表现力。

（1）用一个简单案例进行讲解:创建examples/adminglsl.html文件

浏览器查看效果：

（2）对上述使用glsl的代码做详细讲解

当我们在Three.js中使用GLSL着色器时，我们需要提供两个着色器函数：一个顶点着色器和一个片段着色器。这些函数告诉GPU如何对每个顶点和像素进行处理。

以下是我们在上面代码中使用的顶点着色器代码：

这个着色器的主要作用是将立方体的每个顶点的位置变换到屏幕上的像素坐标。每个顶点的位置由 position 变量表示，它是一个三维向量。我们使用 modelViewMatrix 和 projectionMatrix 矩阵来将顶点从三维空间变换到二维屏幕空间。modelViewMatrix 矩阵包含了摄像机的位置和方向，以及立方体的位置和方向。projectionMatrix 矩阵则包含了透视变换的信息，用于将三维坐标转换为二维坐标。最后，我们将变换后的顶点位置赋值给 gl_Position 变量，它是一个四维向量，其中 x 和 y 表示屏幕上的像素坐标，z 表示深度，w 通常为1。

接下来是我们使用的片段着色器代码：

这个着色器的主要作用是为每个像素计算其颜色。我们使用 vUv 变量来获取立方体表面上该像素对应的纹理坐标。gl_FragColor 变量表示该像素的颜色，我们将其设置为一个四维向量，其中前三个分量为纹理坐标，第四个分量为1。由于我们没有使用纹理贴图，因此只显示了纹理坐标的值，也就是显示了一个渐变的红色和绿色方块。

需要注意的是，顶点着色器和片段着色器都有一个 varying 关键字，用于在两个着色器之间传递数据。在顶点着色器中，我们将纹理坐标传递给片段着色器。在片段着色器中，我们使用 gl_FragColor 来输出像素的颜色。

注意问题：上述代码为什么显示红色和绿色渐变

上述代码中显示红色和绿色的渐变是因为在片段着色器中，我们将像素的颜色设置为一个四维向量，其中前两个分量为纹理坐标，即 vec4(vUv.x, vUv.y, 0.0, 1.0)。

在WebGL中，纹理坐标是指纹理图像中的位置，范围通常为0到1。在这个例子中，我们将 vUv.x 设置为像素的红色通道值，vUv.y 设置为像素的绿色通道值，因此像素的颜色在红色和绿色之间进行渐变。由于蓝色通道和透明通道都设置为0，因此像素的颜色不包含蓝色和透明度，只有红色和绿色。因此，最终的效果是一个红色和绿色的渐变。