在上一篇文章中，使用的是裁剪空间进行绘制，这篇文章使用屏幕像素空间的坐标进行绘制。
上一篇的顶点着色器大概是这样子的
回归一下顶点着色的主要任务：
- 通常情况下，顶点着色器会进行一系列的矩阵变换操作，将输入的顶点坐标从模型空间依次经过世界空间，视图空间，最终转换到裁剪空间。
将顶点着色器改成下面这样：
<script id="vertex-shader-2d" type="x-shader/x-vertex">
// 获取顶点
attribute vec2 a_position;
// 获取画布宽高
uniform vec2 u_resolution;
void main() {
// 把像素坐标转换到0-1
vec2 zeroToOne = a_position / u_resolution ;
// 先转换成0-2 再减去1最终变成-1 - 1(裁剪空间)
vec2 clipSpace = zeroToOne * 2.0 - 1.0;
// 乘以vec2(1,-1)是将Y轴坐标交换
gl_Position = vec4(clipSpace * vec2(1,-1),1.0,1.0);
}
</script>从着色器程序中获取u_resolution的位置
const resolutionUniformLocation = gl.getUniformLocation(program, 'u_resolution');设置resolution值
gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);再改变一下postions三个顶点的值，因为绘制二维图形，所以只需要3组共6个顶点
const positions = [200, 200, 250, 350, 350, 250];运行Study.html。得到如图所示，如果改变颜色下面讲解
改变颜色：
改变颜色需要修改片元着色器
片段着色器主要作用：
- 核心作用是为每个片元(预备像素)确定颜色。
<script id="fragment-shader-2d" type="x-shader/x-fragment">
precision mediump float;
// 定义一个统一变量的u_color，用来接收应用程序传递的四维向量颜色属性
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
</script>找到u_color在着色器程序中的位置
const colorUniformLocation = gl.getUniformLocation(program, 'u_color');设置颜色值，这里才用随机值产生颜色R/G/B/A四个分量
gl.uniform4f(colorUniformLocation, Math.random(), Math.random(), Math.random(), Math.random());运行Study.html，不出意外，每次刷新页面，都会出现不同的颜色。
撒花！！！
