第 8 课：Vertex Attributes

实现：被压扁的 quad 中，只有从 0→2 或 1→3 可以形成方向向量，我们用它来推导出垂直方向，并用 index 控制顶点左右对称偏移，加上投影矩阵比率修正，最后输出正确的顶点位置，实现宽度的展开。

实现

// Already availabe:
//attribute vec3 position;
// attribute vec3 uv;
attribute int index;
attribute vec3 nextPosition;

const float widthHalf = 0.3;

void main() {
  vec2 ratio = vec2(projectionMatrix[0][0] / projectionMatrix[1][1], 1.0);

  vec3 dir = normalize(nextPosition - position);
  vec2 n = vec2(-dir.y, dir.x);
  if (index % 2 == 0) {
    n *= -1.0;
  }

  gl_Position = vec4(position.xy * ratio
			    + n * widthHalf * ratio, 0.0, 1.0);
}

复盘笔记

• 被压扁的 quad 中，只有从 0→2 或 1→3 可以形成方向向量，我们用它来推导出垂直方向，并用 index 控制顶点左右对称偏移，加上投影矩阵比率修正，最后输出正确的顶点位置，实现宽度的展开。
• 投影矩阵 00位置是x方向缩放因子，11则是y方向，两个相除就是屏幕比例
• f是fov，f/aspect是屏幕宽度根据高度进行的调整
• 它们的比值 [0][0] / [1][1] 等于 1 / aspect
• <2025/06/02>
• ==记录时间: 6月5日 2025, 11:49 晚上==