[WebGL学习笔记]1.使用绘制点做一个简单的画板

1.一个简单的画板

最近开始学习WebGL,把学到的很多东西做一下记录
很多基础知识就不分享了，主要分享一些小demo

效果图:

点击鼠标并在画布上移动，可以根据你的鼠标移动路径画出一条简单的点路径

过程如下：

创建顶点着色器与片元着色器

//顶点着色器
   var VSHADER_SOURCE = "\n" +
        "attribute vec4 a_Position;\n" +
        "void main(){\n" +
        "    gl_Position = a_Position;\n" +
        "    gl_PointSize = 5.0;//这里设置画笔大小\n" +
        "}\n";
   
   //片元着色器
    var FSHADER_SOURCE = "void main(){\n" +
        "    gl_FragColor = vec4(1.0,0.0,0.0,1.0);//由这里设置颜色\n" +
        "}";

WebGL基本设置

 var canvas,gl,a_Position;
    function main() {
        canvas = document.getElementById("canvas");
        gl = canvas = getWebGLContext(canvas);

        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
           alert("着色器代码有误或不能读取着色器");
           return;
        }

        //获取attribute变量的存储位置
        a_Position = gl.getAttribLocation(gl.program,'a_Position');

		//设置画布背景色
        gl.clearColor(0.0,0.0,0.0,1.0);
		//清空画布
        gl.clear(gl.COLOR_BUFFER_BIT);
    }

绑定按下，抬起，移动事件

   var draw = false;
    function changeDraw() {
        draw = true;
    }//鼠标按下时允许绘制

    function  changeNoDraw() {
        draw = false;
    }//鼠标抬起时禁止绘制

执行点击事件并将点画到画布上

 var g_points = [];
    function click(event,gl,a_Position){
        if(draw){
            var c = document.getElementById("canvas");
            var x = event.clientX;
            var y = event.clientY;

            var rect = event.target.getBoundingClientRect();
            //计算鼠标在画布中的位置
            x = ((x-rect.left) - c.height/2)/(c.height/2);
            y = (c.width/2 - (y-rect.top))/(c.width/2);
            //将x,y坐标保存到点集合中
            g_points.push(x);
            g_points.push(y);

            //清除canvas
            gl.clear(gl.COLOR_BUFFER_BIT);
            var len = g_points.length;
            for(let i =0;i

完整代码:

    
    
    
    
    
    
    



    请使用支持canvas的浏览器

4个上述用到的工具js，这些js是用来简化部分webgl的操作而使用的
链接：https://pan.baidu.com/s/1h9o7FQEqACSaFXBqivqM6Q
提取码：jcp1