HarmonyOS鸿蒙Next中WebGL如何定义顶点着色器和片元着色器

WebGL如何定义顶点着色器和片元着色器

在WebGL中，WebGL程序使用两种着色器进行绘图。其程序使用OpenGL ES着色器语言编写，使用方式和C语言类似。下面我们来认识这两种着色器

顶点着色器

顶点着色器是一种用于处理图形顶点的程序。它是在图形渲染管线的顶点处理阶段执行的。 顶点着色器接收输入的顶点数据，如顶点的位置、颜色等，并对每个顶点进行处理。它可以执行各种操作，如变换顶点的位置等。

const VSHADER_SOURCE = `
    attribute vec4 a_Position;
    attribute vec2 a_TexCoord;
    varying vec2 v_TexCoord;

    void main() {
        gl_Position = a_Position;
        v_TexCoord = a_TexCoord;
    }
`;

const VSHADER_SOURCE = `
    attribute vec4 a_Position;
    attribute vec2 a_TexCoord;
    varying vec2 v_TexCoord;

    void main() {
        gl_Position = a_Position;
        v_TexCoord = a_TexCoord;
    }
`;

片元着色器

片元着色器是一种用于计算每个像素最终颜色的程序。它是WebGL渲染管线的一部分，负责处理图形渲染过程中的每个片元（像素）。

const FSHADER_SOURCE = `
    precision mediump float;
    uniform sampler2D u_Sampler;
    varying vec2 v_TexCoord;

    void main() {
        gl_FragColor= texture2D(u_Sampler, v_TexCoord);
    }
`;

总结

以上便是完整的WebGL顶点着色器和片元着色器程序。着色器程序是以字符串的形式嵌入在JS文件中的，在程序真正开始运行前它就已经设置好了。JS读取了着色器的相关信息，然后存在WebGL系统中以供调用。在下个系列我们会讲JS初始化着色器时是如何使用该相关数据的。现在我们讲下本章的代码含义：

attribute变量传输的是那些与顶点相关的数据，一般用在顶点着色器中。uniform变量传输的是对于所以顶点都相同的数据，一般放到片元着色器中。varying变量定义的数据是指可变数据，该数据分别在顶点着色器中和片元着色器中定义，则可以完成顶点着色器向片元着色器传值的作用。

我们在上述代码中定义了顶点位置信息a_Position，定义片元纹理坐标v_TexCoord。数据类型vec4表示四维坐标向量，sampler2D表示二维纹理图像。后续我们需要在片元着色器中根据每个片元的纹理坐标，从纹理图像中抽取颜色使用。