在 webGL 中点击绘制点

Question

我是新手，每次单击 MouseClick 时，我都试图在 WebGL 中绘制一个大小为 10 的点。在我点击的地方。但是由于一些逻辑错误，它的行为有点不同，它在点击时画了两个点。我也通过了黑色。它有时会绘制不同颜色的点（如绿色）。

<html>
<head>
    <meta charset="utf-8">
    <script id="vertex" type="x-shader">
        attribute vec2 aVertexPosition;
        attribute vec4 vColor;

        varying vec4 fColor;

        void main() {
            gl_Position = vec4(aVertexPosition, 0.0, 1.0);
            gl_PointSize = 10.0;
            fColor = vColor;


        }
    </script>
    <script id="fragment" type="x-shader">
        #ifdef GL_ES
            precision highp float;
        #endif
        varying vec4 fColor;
        void main() {
            gl_FragColor = fColor;

        }
    </script>
    <script type="text/javascript">

    var points = [];
    var index = 0;
    function init1(){
            var canvas = document.getElementById("mycanvas");
            gl = canvas.getContext("experimental-webgl");   
            gl.viewport(0, 0, canvas.width, canvas.height);
            gl.clearColor(1.0, 1.0, 1.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            var v = document.getElementById("vertex").firstChild.nodeValue;
            var f = document.getElementById("fragment").firstChild.nodeValue;

            var vs = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vs, v);
            gl.compileShader(vs);

            var fs = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fs, f);
            gl.compileShader(fs);

            var program = gl.createProgram();
            gl.attachShader(program, vs);
            gl.attachShader(program, fs);
            gl.linkProgram(program);


            gl.useProgram(program);

            color= [0.0, 0.0, 0.0, 1.0];
            var vbuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);                                       
            gl.bufferData(gl.ARRAY_BUFFER, 8*200, gl.STATIC_DRAW);
            program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
            gl.enableVertexAttribArray(program.aVertexPosition);
            gl.vertexAttribPointer(program.aVertexPosition, 2, gl.FLOAT, false, 0, 0);


            var cBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, 16*200, gl.STATIC_DRAW);
            program.vColor = gl.getAttribLocation(program, "vColor");
            gl.enableVertexAttribArray(program.vColor);                 
            gl.vertexAttribPointer(program.vColor, 3, gl.FLOAT, false, 0, 0); 

            var flattenedVertices = [];
            var idx = 0;
            canvas.addEventListener("mousedown", function(event){
                x=2*event.clientX/canvas.width-1;
                y=2*(canvas.height-event.clientY)/canvas.height-1;
                var pts = [x, y];
                points.push(pts);

                gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);                                       
                gl.bufferSubData(gl.ARRAY_BUFFER, 8*index++, new Float32Array(pts));
                gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);                                       
                gl.bufferSubData(gl.ARRAY_BUFFER, 16*index++, new Float32Array(color));

        });
            render();   

    }

    function render(){
        gl.clear( gl.COLOR_BUFFER_BIT );
        gl.drawArrays(gl.POINTS, 0, index);


        window.requestAnimationFrame(render);           

    }
    </script>
</head>
<body onload="init1()">
        <canvas id="mycanvas" width="800" height="500"></canvas>
</body>

以上是我的代码，如果有人可以帮助我微调它以完全按照我的要求工作。我面临一些问题，

1)我怀疑它每次点击都会画两个点。 2）如果我在行 gl.vertexAttribPointer(program.vColor, 3, gl.FLOAT, false, 0, 0); 中将数字 3 更改为 4 它只绘制一个点，即初始点，并且不会在连续点击时绘制任何点。请帮忙。

Answer 1

您正在通过 2 index++ 次调用增加 index 两次。改为这样做：

            var i = index;
            gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
            gl.bufferSubData(gl.ARRAY_BUFFER, 8*i, new Float32Array(pts));
            gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
            gl.bufferSubData(gl.ARRAY_BUFFER, 16*i, new Float32Array(color));
            index ++;

而且我怀疑你的意思是 gl.vertexAttribPointer(program.vColor, 4, gl.FLOAT, false, 0, 0); 而不是 gl.vertexAttribPointer(program.vColor, 3, gl.FLOAT, false, 0, 0); 因为你的颜色是 4 个元素：var color= [0.0, 0.0, 0.0, 1.0];

此外，在分配新的 BufferData 时使用适当的提示。如果您的数据不是静态的（比如当 "drawing" 一个新点时您如何更改缓冲区）使用 gl.STREAM_DRAW 或 gl.DYNAMIC_DRAW。使用错误的提示可能会导致 5-10 倍的性能损失。

在 webGL 中点击绘制点

Draw points on click in webGL

javascript

webgl