WebGl-6.通过鼠标点击绘点

效果

在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/common.css">
    <title>attribute</title>
</head>
<body onload="main()">
    <canvas id="example" width="512" height="512">
        游览器不支持
    </canvas>
</body>
<script src="/static/js/cuon-utils.js"></script>
<script src="/static/js/webgl-debug.js"></script>
<script src="/static/js/webgl-utils.js"></script>
<script>
        var VSHADER_SOURCE = 
        'attribute vec4 a_Position;\n' + // attribute variable
        'void main() {
    
    \n' +
        '  gl_Position = a_Position;\n' +
        '  gl_PointSize = 10.0;\n' +
        '}\n'; 

        // Fragment shader program
        var FSHADER_SOURCE = 
        'void main() {
    
    \n' +
        '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
        '}\n';

        function main() {
    
    
            // Retrieve <canvas> element
            var canvas = document.getElementById('example');
            console.log(canvas)
            // Get the rendering context for WebGL
            // var gl = getWebGLContext(canvas);
            var gl = canvas.getContext('webgl');
            if (!gl) {
    
    
                console.log('Failed to get the rendering context for WebGL');
                return;
            }

            // Initialize shaders
            if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    
    
                console.log('Failed to intialize shaders.');
                return;
            }

            // Get the storage location of a_Position
            var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            if (a_Position < 0) {
    
    
                console.log('Failed to get the storage location of a_Position');
                return;
            }

            // Register function (event handler) to be called on a mouse press
            canvas.onmousedown = function(ev){
    
     click(ev, gl, canvas, a_Position); };

            // Specify the color for clearing <canvas>
            gl.clearColor(0.0, 0.5, 0.5, 1.0);

            // Clear <canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);
                
            // Draw
            // gl.drawArrays(gl.POINTS, 0, 1);
        }

        var g_points = []; // The array for the position of a mouse press
        function click(ev, gl, canvas, a_Position) {
    
    
            var x = ev.clientX; // x coordinate of a mouse pointer
            var y = ev.clientY; // y coordinate of a mouse pointer
            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);
            // Store the coordinates to g_points array
            g_points.push(x); g_points.push(y);

            // Clear <canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);

            var len = g_points.length;
            for(var i = 0; i < len; i += 2) {
    
    
                // Pass the position of a point to a_Position variable
                gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0);

                // Draw
                gl.drawArrays(gl.POINTS, 0, 1);
            }   
        }
</script>
</html>
WebGl-6.通过鼠标点击绘点

效果

代码

猜你喜欢
