乐趣区

关于javascript:RN从0到1系统精讲与小红书APP实战2023版

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 应用您的着色器来渲染

退出移动版