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

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

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

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

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

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

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

撒花！！！