WebGL画粗线

前言

基本思路

求左右端点

实现

组织数据

顶点着色器计算端点坐标

效果

前言

WebGL绘制模式有点、线、面三种；通过点的绘制可以实现粒子系统等，通过线可以绘制一些连线关系；面就强大了，通过面，我们可以绘制我们想绘制的所有的三维对象。然而，WebGL在绘制线条的时候，存在一个缺陷，那就是在一些机器的一些浏览器上面（大多数情况下）线宽只能设置为1，而不能设置成其他的值。

http://alteredqualia.com/tmp/webgl-linewidth-test/，可以测试自己的电脑是否可以绘制粗线

可以看出，我的Chrome有这个问题

基本思路

既然画线实现不了加粗，那就使用面来模拟粗线。

如下，一条线 p0 p1 构成，可算出两个点的左右两个端点0 1 、 2 3，这四个端点组成两个三角形

求左右端点

二维向量(x, y)的法向量为(-y, x)，为方便后续平移操作，将法向量标准化为单位向量；
通过平移变换将p0、p1沿上述得到法向量正向平移width/2得到点0、1，沿法向量反向平移width/2得到点2、3。

但是，这样简单粗暴的求法向量会有问题，如下图，多个线段间会有冗余分割线条

为了消除节点处的可见分割，有必要将相邻节段的相邻点组合起来，以保持相邻节段两个节段的厚度。要做到这一点，需要更进一步的求法向量

如下图，用last、current、next表示前、当前、后三个点，算出当前now点的切线方向（黄色），切线方向乘以复数i，逆时针旋转90就为法线方向，乘以复数-i，顺时针旋转90度为负法线方向，则有了Normal和-Normal（紫色）。Normal和-Normal分别乘以宽度的一半，即可求出每个点的左右端点

将端点坐标写入WebGL顶点坐标缓冲区，另外通过索引[0, 1, 3, 1, 2, 3]来表示两个三角形的顶点序号写入WebGL索引缓冲区，调用gl.drawElements绘制出带线宽的直线。

实现

事实上，计算左右端点的操作应该发生在顶点着色器中的，而且也只能在着色器中计算，因为最终显示到屏幕上的顶点与镜头相关，上述只是简单的用了2维的情况模拟，如果在js端计算，将极大消耗性能。

组织数据

组织要传给着色器的数据：position、prevPositions、nextPositions、side

比如，三个点 p0 p1 p2，要组织数据的形式：

position = [p0, p0, p1, p1, p2, p2]

prevPositions = [p0, p0, p0, p0, p1, p1]

nextPositions= [p1, p1, p2, p2, p2, p2]

side = [1, -1, 1, -1, 1, -1]

    let geometry = new THREE.BufferGeometry()
    let vertices = []
    let count = vertices.length
    let prevPositions = new Float32Array(count * 3 * 2)
    let nextPositions = new Float32Array(count * 3 * 2)
    let side = new Float32Array(count * 2)
    let position = new Float32Array(count * 3 * 2)
    let indexes = new Uint16Array(6 * (count - 1))
    for (let j = 0; j < count * 2; j += 2) {

      // side
      side[j] = 1
      side[j + 1] = -1

      // index
      let current = vertices[j / 2]
      let prev = vertices[(j === 0 ? j : j - 2) / 2]
      let next = vertices[(j === (count - 1) * 2 ? j : j + 2) / 2]
      // position
      position[j * 3] = current.x
      position[j * 3 + 1] = current.y
      position[j * 3 + 2] = current.z
      position[j * 3 + 3] = current.x
      position[j * 3 + 4] = current.y
      position[j * 3 + 5] = current.z

      // prev
      prevPositions[j * 3] = prev.x
      prevPositions[j * 3 + 1] = prev.y
      prevPositions[j * 3 + 2] = prev.z
      prevPositions[j * 3 + 3] = prev.x
      prevPositions[j * 3 + 4] = prev.y
      prevPositions[j * 3 + 5] = prev.z

      // next
      nextPositions[j * 3] = next.x
      nextPositions[j * 3 + 1] = next.y
      nextPositions[j * 3 + 2] = next.z
      nextPositions[j * 3 + 3] = next.x
      nextPositions[j * 3 + 4] = next.y
      nextPositions[j * 3 + 5] = next.z
    }
    for (let i = 0; i < count * 2 - 2; i += 2) {
      indexes[6 * (i - i / 2)] = i
      indexes[6 * (i - i / 2) + 1] = i + 1
      indexes[6 * (i - i / 2) + 2] = i + 2
      indexes[6 * (i - i / 2) + 3] = i + 2
      indexes[6 * (i - i / 2) + 4] = i + 1
      indexes[6 * (i - i / 2) + 5] = i + 3
    }

    geometry.setAttribute('position', new THREE.BufferAttribute(position, 3))
    geometry.setAttribute('prevPositions', new THREE.BufferAttribute(prevPositions, 3))
    geometry.setAttribute('nextPositions', new THREE.BufferAttribute(nextPositions, 3))
    geometry.setAttribute('side', new THREE.BufferAttribute(side, 1))
    geometry.index = new THREE.BufferAttribute(indexes, 1)

顶点着色器计算端点坐标

正如上述计算左右端点方法两个点为单位轮回；算出法向量乘以side，得到最终的正负法线方向

需要注意的是，为了能够计算顶点在屏幕上的最终位置，需要把canvans的尺寸大小传递给着色器

    <script id="vertexShader" type="x-shader/x-vertex">
      attribute float side;
      attribute vec3 prevPositions;
      attribute vec3 nextPositions;
      uniform float width;
      uniform vec2 resolution;
  
      void main(){
        float aspect = resolution.x / resolution.y;
  
        mat4 pvm = projectionMatrix * modelViewMatrix;
        vec4 currentV4 = pvm * vec4(position, 1.0);
        vec4 prevV4 = pvm * vec4(prevPositions, 1.0);
        vec4 nextV4 = pvm * vec4(nextPositions, 1.0);
  
        vec2 currentV2 = currentV4.xy / currentV4.w;
        vec2 prevV2 = prevV4.xy / prevV4.w;
        vec2 nextV2 = nextV4.xy / nextV4.w;
  
        vec2 dir1 = normalize(nextV2 - currentV2);
        vec2 dir2 = normalize(currentV2 - prevV2);
        vec2 dir = normalize(dir1 + dir2);

        vec2 normal = vec2( -dir.y, dir.x );
        
        normal.x /= aspect;
  
        normal *= width;
        normal /= resolution.y;
         
        currentV4.xy += (normal * side) * currentV4.w;
        
        gl_Position = currentV4;
  
      }
  
    </script>

效果

export default [  
    {x:  0.2980022405076852, y:  0.0007317477689525731, z:  1},
    {x:  1.1869354597466781, y:  0.0009180096778322877, z:  0},
    {x:  2.0758235116605874, y:  0.0012041573064607292, z:  1},
    {x:  2.9647108701853995, y:  0.0016485209298480186, z:  1},
    {x:  3.8535979009456014, y:  0.002361701064614863, z:  0},
    {x:  4.7424853104305384, y:  0.00351269568443513, z:  0},
    {x:  5.631373663413683, y:  0.005294665597602943, z:  1},
    {x:  6.520261987572894, y:  0.007922778765419025, z:  0},
    {x:  7.409147752210174, y:  0.01167311915872915, z:  2},
    {x:  8.298025451981857, y:  0.016846610763536773, z:  0},
    {x:  9.186886934688118, y:  0.023772568206652522, z:  -1},
    {x:  10.07571907490967, y:  0.0328001040410868, z:  0},
    {x:  10.964496398756296, y:  0.044288140005107834, z:  5},
    {x:  11.85319602294021, y:  0.05862768318564804, z:  10},
    {x:  12.741786244815671, y:  0.07613330348408454, z:  0},
    {x:  13.630226377381064, y:  0.09712025624207854, z:  20},
    {x:  14.518501144938796, y:  0.12186988355398398, z:  1},
    {x:  15.406618008779674, y:  0.15055661742513848, z:  0},
    {x:  16.294597333615457, y:  0.18321126049687564, z:  1},
    {x:  17.182483414117996, y:  0.21982671919579388, z:  0},
    {x:  18.07027996070667, y:  0.26025710620086784, z:  0},
    {x:  18.957985046609565, y:  0.3042638844103749, z:  2},
    {x:  19.845588805245143, y:  0.35157055005709026, z:  20},
    {x:  20.733061996025413, y:  0.40187981369570025, z:  12},
    {x:  21.620398578083382, y:  0.4548763144693453, z:  0},
    {x:  22.50759421058183, y:  0.510277754478011, z:  0},
    {x:  23.394649626125783, y:  0.5678463420269395, z: 10},
    {x:  24.28156938481652, y:  0.6273966818090457, z:  10},
    {x:  25.16835632444645, y:  0.6887999401383809, z:  0},
    {x:  26.055014124105355, y:  0.7520044141307949, z:  2},
    {x:  26.94154278405199, y:  0.8170242843056599, z:  0},
    {x:  27.827935344684192, y:  0.8839563938809647, z:  2},
    {x:  28.71418144341419, y:  0.9530044273309386, z:  4},
    {x:  29.60025448188958, y:  1.0244047577025412, z:  0},
    {x:  30.486116503444237, y:  1.0984849046006389, z: 50},
    {x:  31.371726404611536, y:  1.175603041504246, z:  6},
    {x:  32.25701896209273, y:  1.2562969882843618, z:  4},
    {x:  33.14193521146046, y:  1.3409977805800963, z:  10},
    {x:  34.0263999228323, y:  1.4302624318554535, z:  0},
    {x:  34.91033330314474, y:  1.5245805770430252, z:  0},
    {x:  35.79361266847275, y:  1.6247205249796934, z:  0},
    {x:  36.676130186271166, y:  1.7312884009689355, z:  0},
    {x:  37.557760528031736, y:  1.844910698533738, z:  2},
    {x:  38.43832338116283, y:  1.9663458748508447, z:  0},
    {x:  39.31764605054343, y:  2.0958906489368587, z:  0},
    {x:  40.19564230123137, y:  2.234175946683024, z:  0},
    {x:  41.07190059501124, y:  2.3830193460015607, z:  10},
    {x:  41.946324364051975, y:  2.5416768732814035, z:  -20},
    {x:  42.81851559265749, y:  2.712179223072269, z:  0},
    {x:  43.688235247276, y:  2.8943826198482725, z:  -10},
    {x:  44.55509274214762, y:  3.089389858893753, z:  -10},
    {x:  45.41866612330193, y:  3.298229478551491, z:  -20}
    ]