04 WebGL绘图之着色器

WebGL不同于canvas 2D的绘图方式，WebGL需要去调用OpenGL的接口的着色器去绘图。所以，我们需要学习WebGL的着色器进行绘图。

WebGL的着色器分为两种：

1.顶点着色器（Vertex shader）：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。

顶点（Vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。

2.片元着色器（Fragment shader）：进行逐片元处理过程如光照（后续教程继续解释光照）的程序。

片元（fragment）是一个WebGL术语，你可以将其理解为像素（图像的单元）。

案例查看地址：点击这里

    
    
    
    



    你的浏览器不支持WebGL，请更换新的浏览器

上面便是一个使用WebGL的着色器绘制了一个点。

具体的运行机制是个人理解，首先通过js代码编写OpenGL的代码，然后通过WebGL和js 的接口将代码传入如运行，WebGL首先运行顶点着色器的代码，然后再运行片元着色器的代码，最后将绘图渲染到canvas上面。