您的位置: 首页  >  文章  >  [WebGL学习笔记]1.使用绘制点做一个简单的画板

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

分类: 文章 • 2023-11-14 16:59:22

1.一个简单的画板

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

效果图:
[WebGL学习笔记]1.使用绘制点做一个简单的画板
点击鼠标并在画布上移动，可以根据你的鼠标移动路径画出一条简单的点路径

过程如下：

创建顶点着色器与片元着色器
//顶点着色器
   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);
    }
绑定按下，抬起，移动事件
<canvas id="canvas" width="800" height="800" onmousemove="canvasOnClick(event)" onmousedown="changeDraw()" onmouseup="changeNoDraw()">
</canvas>

   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<len;i+=2){
                gl.vertexAttrib3f(a_Position,g_points[i],g_points[i+1],0.0);
                gl.drawArrays(gl.POINTS,0,1);
            }
        }
    }

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标点击绘制点</title>
    <!-- webgl定义好的几个函数库 -->
    <script src="js/webgl-utils.js"></script>
    <script src="js/webgl-debug.js"></script>
    <script src="js/cuon-utils.js"></script>
    <script src="js/cuon-matrix.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="800" onmousemove="canvasOnClick(event)" onmousedown="changeDraw()" onmouseup="changeNoDraw()">
    请使用支持canvas的浏览器

</canvas>


<script>
    //顶点着色器
    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" +
        "}";

    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);
    }

     function canvasOnClick(event) {
        click(event,gl,a_Position);
    };
	//判断鼠标是否按下的开关，默认为false 
    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;
            
            //默认z轴为0，使用x,y轴将点添加到画布中
            for(let i =0;i<len;i+=2){
                gl.vertexAttrib3f(a_Position,g_points[i],g_points[i+1],0.0);
                gl.drawArrays(gl.POINTS,0,1);
            }
        }
    }

    window.onload = main();
</script>
</body>
</html>

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

相关推荐