绘制多个点
1、通过变量来传递顶点坐标,获取顶点坐标变量的位置
var a_Position = gl.getAttribLocation(program, ‘a_Position’)
2、传入变量坐标
gl.vertexAttrib3f(a_Position, x, y, z)
3、canvas坐标系转为webgl坐标系,webgl的坐标是x[-1, 1],y[-1, 1]
var VERTEX_SOURCE =
`attribute vec4 a_Position;\n
void main() {\n
gl_Position = a_Position;\n
gl_PointSize = 10.0;\n
}\n`;
var FRAGMENT_SOURCE =
`void main() {\n
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);\n
}\n`;
function main() {
var canvas = document.querySeletor('#webgl');
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, VERTEX_SOURCE);
gl.compileShader(vertexShader);
errorShader(gl, vertexShader);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, FRAGMENT_SOURCE);
gl.compileShader(fragmentShader);
errorShader(gl, fragmentShader);
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;
errorProgram(gl, program);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
canvas.onmousedown = function(ev) {
click(ev, gl, canvas, a_Position);
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
var points = [];
function click(ev, gl, canvas, a_Position) {
var x = ev.clientX;
var y = ev.clientY;
var rect = ev.target.getBoundingClientRect();
x = ((x - rect.left) - canvas.width / 2) / (canvas.width / 2);
y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2);
points.push(x);
points.push(y);
gl.clear(gl.COLOR_BUFFER_BIT);
var len = points.length;
for (var i = 0; i < len; i += 2) {
gl.vertexAttrib3f(a_Position, points[i], points[i + 1], 0.0);
gl.drawArrays(gl.POINTS, 0, 1);
}
}
function errorShader(gl, shader) {
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
var error = gl.getShaderInfoLog(shader);
console.log('Failed to compiled shader: ' + error);
gl.deleteShader(shader);
return null;
}
}
function errorProgram(gl, program) {
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
var error = gl.getProgramInfoLog(program);
console.log('Failed to linked program: ' + error);
gl.deleteProgram(program);
return null;
}
}