WebGL与ES6：屏幕鼠标点击连续点绘制

基于上一篇博文WebGL与ES6：绘制简单点。

在学习WebGL编程指南这本书时，发现书上有一个WebGL通过鼠标连续绘制点的代码，其中的屏幕坐标系转WebGL坐标系的方法，居然是错误的。自己动手改了一下，可以完整运行了。

import "../css/index.css";
import {RenderTool} from "./lib_webgl/cuon-utils-ES6";

let VSHEADER_SOURCE=
    `attribute vec4 a_Position;
    void main(){
    gl_Position = a_Position;
    gl_PointSize = 10.0;
    }
    `;
let FSHEADER_SOURCE=
    `void main(){
    gl_FragColor = vec4(1.00, 0.00, 0.00, 1.00);
    }
    `;
main();
function main() {
    //获取上下文对象
    const canvas = document.querySelector("#glcanvas");
    initCanvas(canvas);

    const gl = canvas.getContext("webgl");
    //检测WebGL支持
    if (!gl) {
        console.error("浏览器不支持WebGL");
        return
    }
    if(!RenderTool.initShaders(gl,VSHEADER_SOURCE,FSHEADER_SOURCE)){
        console.error("初始化着色器失败");
        return
    }
    canvas.onmousedown=function (ev) {
        click(ev,gl,canvas,a_Position);
    };
    let a_Position=gl.getAttribLocation(gl.program,'a_Position');
    //设置背景色
    gl.clearColor(0.0, 0.0, 0.0, 1);
    //设置缓冲区颜色
    gl.clear(gl.COLOR_BUFFER_BIT);
}


let points=[];//鼠标点数组

function click(ev,gl,canvas,a_Position) {
    //屏幕坐标系转WebGL坐标系
    let x=ev.clientX;//鼠标点击处的X坐标
    let y=ev.clientY;//鼠标点击处的Y坐标
    let rect=ev.target.getBoundingClientRect();
    x=((x-rect.left)-canvas.width/2)/(canvas.width/2);//注意不可以使用canvas.style.width
    y=(canvas.height/2-(y-rect.top))/(canvas.height/2);
    points.push(x);
    points.push(y);
    gl.clear(gl.COLOR_BUFFER_BIT);//清除之前绘制的点
    for(let i=0;i<points.length;i+=2){
        //重新绘制点
        gl.vertexAttrib3f(a_Position,points[i],points[i+1],0.0);
        gl.drawArrays(gl.POINTS,0,1)
    }

}

/**
 * 设置画布全屏
 * @param canvas
 */
function initCanvas(canvas) {
    canvas.width=document.documentElement.clientWidth;
    canvas.height=document.documentElement.clientHeight;
}