glsl着色器学习（九）屏幕像素空间和设置颜色

在上一篇文章中，使用的是裁剪空间进行绘制，这篇文章使用屏幕像素空间的坐标进行绘制。

上一篇的顶点着色器大概是这样子的

回归一下顶点着色的主要任务：

•  通常情况下，顶点着色器会进行一系列的矩阵变换操作，将输入的顶点坐标从模型空间依次经过世界空间，视图空间，最终转换到裁剪空间。

将顶点着色器改成下面这样：

 <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，不出意外，每次刷新页面，都会出现不同的颜色。

撒花！！！