运行你的shader

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」

shader就是着色器语言，用于绘制计算机图形， 但是并不能单独运行。

我们前端的使用方式就是webgl, 也就是js + glsl. 使用webgl绘图， 需要先建立着色器对象， 创建程序，然后把着色器对象装进程序里， 最后激活程序。然后就可以使用gl 上下文执行绘图命令。相对来说还是比较繁琐的。 本文主要介绍如何画出一个矩形， 然后改变片元着色器即可画出不同的效果。

画一个覆盖整个画布的矩形，用作模板。然后就可以练习shader,基本上其他部分不会有太大改动。

众所周知，画一个矩形需要确定四个点。我们这里也一样。 不过，不同的是wegl只能画点， 线 ，三角形。 这个矩形就需要用两个三角形拼凑起来。

着色器部分

着色器通常分为顶点着色器和片元着色器。

简单的说，顶点着色器定位（确定坐标点位），片元着色器上色。 也就是说，如果把将我们的显示器分割成一格一格的像素点。那么， 通过顶点着色器，来确定给哪个像素点上色， 通过片元着色器来确定给那个点上红色还是绿色。

我们先来写着色器代码

顶点着色器

非常简单的几行代码， 就是告诉着色器我们要确定的那几个点。attribute 是声明顶点属性的关键字 ，vec4 是类型声明，代表四维向量。

attribute vec4 a_Position ; 

void main(){
    
    gl_Position = a_Position ;
    gl_PointSize = 10.0;
}

片元着色器

这里的片元着色器，也只是告诉了着色器，我们选择紫色来上色。

 void main(){
     gl_FragColor =  vec4(1,0,1,1);
}

js部分

鉴于活动要求，我就直接截图了，免得代码占比过大。 也就是前面说的 初始化着色器 ，然后用gl上下文绘图。 注释已经写得足够详细了。

效果如下

是不是很麻烦，要是用css写一下就出来了，这是因为越接近底层，就越低级，就越麻烦。 把我们的绘制三角形那行代码改一下，就能看到三角形了。

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3)

今天的分享就到这里。