在上一篇文章中,使用的是裁剪空间进行绘制,这篇文章使用屏幕像素空间的坐标进行绘制。
上一篇的顶点着色器大概是这样子的
回归一下顶点着色的主要任务:
- 通常情况下,顶点着色器会进行一系列的矩阵变换操作,将输入的顶点坐标从模型空间依次经过世界空间,视图空间,最终转换到裁剪空间。
将顶点着色器改成下面这样:
<script id="vertex-shader-2d" type="x-shader/x-vertex">// 获取顶点attribute vec2 a_position;// 获取画布宽高uniform vec2 u_resolution;void main() {// 把像素坐标转换到0-1vec2 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,不出意外,每次刷新页面,都会出现不同的颜色。
撒花!!!