WebGL系列 - 裁剪空间矩阵优化

该系列仅为记录自己的学习相关知识。

以 2d 的顶点着色器为例

  <script  id="vertex-shader-2d" type="notjs">

  // an attribute will receive data from a buffer
  attribute vec4 a_position;

  // all shaders have a main function
  void main() {

    // gl_Position is a special variable a vertex shader
    // is responsible for setting
    gl_Position = a_position;
  }

</script>

我们知道，定义一个定点着色器，我们为了能够让我们定义的数据能够渲染到屏幕上，我们需要将屏幕中的点转化到裁剪空间中，以下是对应关系。

 裁剪空间            屏幕空间
   0, 0       ->   200, 150
   0, 0.5     ->   200, 225
 0.7, 0       ->   340, 150

会渲染出以下的图形

我们会发现这个三角形是从中间开始，并且是朝向右上方的，是因为裁剪空间的x坐标范围是 -1 到 +1，而 (0,0) 在中心。

对于二维空间中的物体，我们更希望得到的是屏幕像素坐标而不是裁剪空间坐标。

<script id="vertex-shader-2d" type="x-shader/x-vertex">
        attribute vec2 a_position;
        
        uniform vec2 u_resolution;
        uniform mat3 u_matrix;
        
        void main() {
        
          // 从像素坐标转换到 0.0 到 1.0
          vec2 zero