粗线条html,WebGL绘制宽度大于1px的粗线条

HTML

导入代码模板：

attribute vec2 aVertexPosition;

void main() {

gl_Position = vec4(aVertexPosition, 0.0, 1.0);

}

#ifdef GL_ES

precision highp float;

#endif

uniform vec4 uColor;

void main() {

gl_FragColor = uColor;

}

function init(){

canvas = document.getElementById("mycanvas");

gl = canvas.getContext("experimental-webgl");

gl.viewport(0, 0, canvas.width, canvas.height);

gl.clearColor(0, 0.5, 0, 1);

gl.clear(gl.COLOR_BUFFER_BIT);

var v = document.getElementById("vertex").firstChild.nodeValue;

var f = document.getElementById("fragment").firstChild.nodeValue;

var vs = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vs, v);

gl.compileShader(vs);

var fs = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(fs, f);

gl.compileShader(fs);

program = gl.createProgram();

gl.attachShader(program, vs);

gl.attachShader(program, fs);

gl.linkProgram(program);

if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))

console.log(gl.getShaderInfoLog(vs));

if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))

console.log(gl.getShaderInfoLog(fs));

if (!gl.getProgramParameter(program, gl.LINK_STATUS))

console.log(gl.getProgramInfoLog(program));

var aspect = canvas.width / canvas.height;

var vertices = new Float32Array([

-0.5, 0.1*aspect, 0.5, 0.1*aspect, 0.5,0.15*aspect,

-0.5, 0.1*aspect, 0.5, 0.15*aspect, -0.5,0.15*aspect

]);

vbuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

itemSize = 2;

numItems = vertices.length / itemSize;

gl.useProgram(program);

program.uColor = gl.getUniformLocation(program, "uColor");

gl.uniform4fv(program.uColor, [1.0, 1.0, 0.0, 1.0]);

program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");

gl.enableVertexAttribArray(program.aVertexPosition);

gl.vertexAttribPointer(program.aVertexPosition, itemSize, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, numItems);

}