webgl入门实例-03通过鼠标点击绘制点

该怎么办呢

已于 2025-03-22 15:11:37 修改

阅读量632

点赞数 22

分类专栏： webgl入门文章标签： webgl javascript 开发语言

于 2025-03-22 15:09:56 首次发布

本文链接：https://blog.youkuaiyun.com/mkbbreak/article/details/146440539

版权

webgl入门专栏收录该内容

18 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画一个点2</title>
</head>

<body onload="main()">
    <canvas id="webgl" width="400" height="400"></canvas>

    <!-- Vertex shader program -->
    <script id="VSHADER_SOURCE" type="text/plain">
        attribute vec4 a_Position; // attribute 变量
        void main()	{
            gl_Position = a_Position;
            gl_PointSize = 10.0;
        }
    </script>

    <!-- Fragment shader program -->
    <script id="FSHADER_SOURCE" type="text/plain">
        void main()	{
            gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
        }
    </script>

    <script>

        function main() {
            var VSHADER_SOURCE = document.getElementById("VSHADER_SOURCE").textContent
            var FSHADER_SOURCE = document.getElementById("FSHADER_SOURCE").textContent
            var canvas = document.getElementById("webgl");
            var gl = canvas.getContext("webgl");
            initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)

            // 获取a_Position变量在内存中的位置
            var 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 g_points = []; // 存储鼠标点击位置的数组
            canvas.onmousedown = function (ev) {
                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);

                g_points.push(x); g_points.push(y);

                // 每次绘制前都将画布清空
                gl.clear(gl.COLOR_BUFFER_BIT);

                var len = g_points.length;
                for (var 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);
                }
            }
        }


        function initShaders(gl, vshader, fshader) {
            var program = createProgram(gl, vshader, fshader);
            if (!program) {
                console.log("Failed to create program");
                return false;
            }

            gl.useProgram(program);
            gl.program = program;

            return true;
        }
        function createProgram(gl, vshader, fshader) {
            var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
            var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
            if (!vertexShader || !fragmentShader) {
                return null;
            }
            var program = gl.createProgram();
            if (!program) {
                return null;
            }
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (!linked) {
                var error = gl.getProgramInfoLog(program);
                console.log("Failed to link program: " + error);
                gl.deleteProgram(program);
                gl.deleteShader(fragmentShader);
                gl.deleteShader(vertexShader);
                return null;
            }
            return program;
        }
        function loadShader(gl, type, source) {
            var shader = gl.createShader(type);
            if (shader == null) {
                console.log("unable to create shader");
                return null;
            }
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (!compiled) {
                var error = gl.getShaderInfoLog(shader);
                console.log("Failed to compile shader: " + error);
                gl.deleteShader(shader);
                return null;
            }
            return shader;
        }
    </script>
</body>

</html>