download：RN从0到1零碎精讲与小红书APP实战（2023版）
WebGL底层着色器编写
WebGL是一种基于OpenGL的图形API，用于在浏览器中出现3D和2D图形。它依赖于着色器来解决数据并渲染图像。
在这里，咱们将深刻理解WebGL底层的着色器编写过程，以及如何编写自定义着色器来创立各种成果。
什么是WebGL着色器？
在WebGL中，着色器是用于在GPU上解决数据的程序。它们被用来渲染场景中的几何图形，并决定每个像素的输入色彩。WebGL着色器由两种类型组成：顶点着色器和片元着色器。
顶点着色器
顶点着色器是在渲染前对所有顶点进行计算的程序。它们承受输出顶点并转换它们的地位，大小和方向等属性，以及任何其余的自定义操作。最终输入的是顶点的变换坐标等信息。
以下是一个简略的顶点着色器示例：
glsl
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1.0);
}
在这个着色器中，咱们申明了一个名为position的顶点属性，并将其传递到着色器中。而后，咱们通过vec4(position, 1.0)计算出变换后的顶点坐标，并将其赋值给gl_Position变量。
片元着色器
片元着色器是在顶点着色器实现后对每个像素进行计算的程序。它们承受输出像素并计算输入色彩和透明度等属性。最终输入的是渲染场景中每个像素的色彩值等信息。
以下是一个简略的片元着色器示例：
glsl
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
在这个着色器中，咱们间接将红色色彩值vec4(1.0, 0.0, 0.0, 1.0)传递给gl_FragColor变量，以此渲染出场景中所有像素的红色。
如何编写自定义着色器？
为了创立本人的WebGL着色器，您须要理解如何应用着色器语言GLSL（OpenGL Shading Language）。GLSL是一种基于C语言的语言，用于编写着色器程序。
以下是编写自定义WebGL着色器的步骤：
编写顶点着色器程序
顶点着色器程序应该包含两个次要局部：顶点属性和main函数。首先，申明所有须要用到的顶点属性。而后，编写main函数来对每个顶点进行计算，并输入变换后的地位信息。
编写片元着色器程序
片元着色器程序应该只包含一个main函数，它承受输出像素并计算输入色彩和透明度等属性。
将着色器程序与WebGL上下文链接
应用createShader()办法创立一个新的shader对象，并应用shaderSource()办法将GLSL代码传递给它。而后，应用compileShader()办法编译着色器。最初，将顶点着色器和片元着色器链接在一起，造成一个可用于渲染场景的程序。
在WebGL上下文中启用着色器程序
应用useProgram()办法启用您的着色器程序。这将使WebGL应用您的着色器来渲染