webgl入门（二）: 使用片元着色器进行几何造型-绘制线

基本原理: 根据点到直线（向量）的距离来设置颜色.

#ifdef GL_ES
precision highp float;
#endif

varying vec2 vUv;

void main() {
  vec3 line = vec3(1, 1, 0);
  float d = abs(cross(vec3(vUv,0), normalize(line)).z); 
  gl_FragColor.rgb = (1.0 - smoothstep(0.0, 0.01, d)) * vec3(1.0);
  gl_FragColor.a = 1.0;
}

比如，我们利用上面的代码，就能在画布上画出一条斜线.

这里的重点是如果求得点到直线（向量）的距离. 上面的代码中这条直线我们用向量表示为vec3(1, 1, 0), 点坐标为vUv, vUv是二维向量, 为了方便计算把它变为三维的vec3(vUv,0),.

计算距离的公式为abs(cross(vec3(vUv,0), normalize(line)).z). 先将表示直线向量line归一化(也就是方向不变长度变为1), 然后和表示点的向量做叉积, 取结果向量的z值, 这个z就是点到直线的距离.

首先, 我们先看一下两个向量叉积的几何意义:

1. 两个向量叉积是一个向量, 不是标量
2. 两个向量叉积与这两个向量组成的平面垂直
3. 两个向量叉积的长度等于这两个向量组成的平面四边形的面积, 如下图所示

如下图所示, 我们要求的是距离是线段d:

上图中, 平行四边形的面积 = a x d. 其中a=1, 因为line做了归一化, 那么 d = 平行四边形的面积. 所以这两个向量的叉积的长度就是我们要求的距离d.

又因为这两个向量都在xy平面, 所以叉积向量一定垂直于xy平面, 那么它的长度就等于它的z值.