webgl 坐标系转换

绘制多个点
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;
    }
}

来源：CSDN

作者：hangbai

链接：https://blog.csdn.net/liweisheng620/article/details/97760663