WebGL学习系列-片元着色器简介

前言

到目前为止，我们绘制过点、三角形、矩形等，但使用的都是单色系。之前曾经说过着色器的概念，着色器分为顶点着色器和片元着色器，我们一直在使用顶点着色器，而对片元着色器基本没有提及过，本小节将展开对片元着色器的简单介绍。

彩色的点

之前提到过，顶点着色器决定点的大小、位置和颜色，而片元着色器是用于给像素着色的，初步看，片元着色器的任务好像给顶点着色器完成了，但实际上不然，顶点着色器只能决定点的颜色，如果绘制成了图形，图形填充的颜色就该由片元着色器处理了。

先来看一下我们将要绘制的彩色点的效果图：

我们一共绘制了三个点，而且三个点的颜色不同，接下来分析下代码，先来看下顶点着色器的代码：

// 顶点着色器代码(决定顶点的位置、大小、颜色)
var VSHADER_SOURCE = 
  'attribute vec4 a_Position;\n' +
  'attribute vec4 a_Color;\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n'