webGl shader的学习记录(五)：如何画线段

 今天学习一下如何使用webgl画一条线段

 

  let vertexShaderSource = `
       //浮点数设置为中等精度
		precision mediump float;
		//接收 JavaScript 传递过来的点的坐标（X, Y）
		attribute vec2 a_Position;
		// 接收canvas的尺寸。
		attribute vec2 a_Screen_Size;
		void main(){
			// 将 canvas 的坐标值 转换为 [-1.0, 1.0]的范围。
			vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
			// canvas的 Y 轴坐标方向和 设备坐标系的相反。
			position = position * vec2(1.0, -1.0);
			// 最终的顶点坐标。
			gl_Position = vec4(position, 0.0, 1.0);
			gl_PointSize = 15.0;
		}
    `;
    //片元着色器
    let fragmentShaderSource =`
        precision mediump float;
        uniform vec4 u_Color;
        void main(){
            vec4 color = u_Color/vec4(255,255,255,1);
            gl_FragColor = color;
        }
    `

如果你并不太理解上面的内容是什么意思的话，可以去看这一章，你会大概的明白是什么意思下面就是老生常谈的代码了，

这个其实跟我们之前话三角形几乎全部一样，不同的点在于下面 ，我们需要花的是线段 同时个数是 数组长度的一半

line 

  gl.drawArrays(gl.LINES, 0, positions.length / 2);

LINE_LOOP

  gl.drawArrays(gl.LINE_LOOP, 0, positions.length / 2);

LINE_STRIP

  gl.drawArrays(gl.LINE_STRIP, 0, positions.length / 2);