Question

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

<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时使用适当的提示。如果您的数据不是静态的（比如在“绘制”新点时更改缓冲区），请使用gl.STREAM_DRAW或gl.DYNAMIC_DRAW。使用错误提示可能会导致5-10倍的性能损失。

在webGL中单击绘制点

1 个答案: