为什么第二个点显示在错误的地方?

why is the second point displayed in the wrong place?

我正在尝试编写一个函数来绘制三角形(现在在 main() 中)。一切正常 - 一切都很酷,但我添加了两个绘制点函数的执行(drawPoint())和三角形后绘制的点显示在错误的位置,为什么?

index.html :

<!DOCTYPE html>
<html>
<head>
    <title>
    the rgb
    </title>
</head>

<body onload="main()">
<canvas id="webgl" width="400" height="400">
PLZ USE BROWSER SUPPORTING CANVAS
</canvas>

<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="thergb.js"></script>

</body>
</html>

thergb.js:

var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);

function main()
{
    
    clearCanvas('green');
    drawPoint(0.3,0.0,50.0,'blue'); //draw point before triangle
    
    //draw triangle
    var VSHADER_SOURCE=
        'attribute vec4 a_Position;\n'+
        'void main() {\n' +
        ' gl_Position = a_Position;\n'+
        '}\n';
    var FSHADER_SOURCE=
        'void main() {\n' +
        ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+
        '}\n';
    if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
        {
            return;
        }

    var n = initVertexBuffers(gl);
    gl.drawArrays(gl.TRIANGLES, 0, n);

    drawPoint(0.4,0.0,50.0,'red'); //draw point after triangle

    
    

}
function initVertexBuffers(gl) {
  var vertices = new Float32Array([
    0, 0.5,   -0.5, -0.5,   0.5, -0.5
  ]);
  var n = 3; // The number of vertices

  // Create a buffer object
  var vertexBuffer = gl.createBuffer();
  if (!vertexBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
  }

  // Bind the buffer object to target
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  // Write date into the buffer object
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  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 -1;
  }
  // Assign the buffer object to a_Position variable
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

  // Enable the assignment to a_Position variable
  gl.enableVertexAttribArray(a_Position);

  return n;
}
function drawPoint(x,y,size,color)
{
    var VSHADER_SOURCE=
        'attribute vec4 a_Position;\n'+
        'attribute float a_PointSize;\n'+
        'void main() {\n' +
        ' gl_Position = a_Position;\n'+
        ' gl_PointSize = a_PointSize;\n'+
        '}\n';      

    if (color == 'red')
    {
        var FSHADER_SOURCE=
        'void main() {\n' +
        ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+
        '}\n';
    }
    if (color == 'green')
    {
        var FSHADER_SOURCE=
        'void main() {\n' +
        ' gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);\n'+
        '}\n';
    }
    if (color == 'blue')
    {
        var FSHADER_SOURCE=
        'void main() {\n' +
        ' gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);\n'+
        '}\n';      
    }

    if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
        {
            return;
        }
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
    gl.vertexAttrib3f(a_Position,x,y,0.0);
    gl.vertexAttrib1f(a_PointSize, size);
    gl.drawArrays(gl.POINTS, 0,1);
}

function clearCanvas(color)
{
    if (color == 'red')
    {
        gl.clearColor( 1.0, 0.0, 0.0, 1.0);
    }
    if (color == 'green')
    {
        gl.clearColor( 0.0, 1.0, 0.0, 1.0);
    }
    if (color == 'blue')
    {
        gl.clearColor( 0.0, 0.0, 1.0, 1.0);
    }
    gl.clear(gl.COLOR_BUFFER_BIT);
}

我的 github 上还有其他库:https://github.com/bazylevnik0/thergb

三角形后面的点出现在错误位置的原因是绘制三角形时它启用了 gl.enableVertexAttribArray

的属性

启用的属性从调用 gl.vertexAttribPointer

时分配的缓冲区中获取其值

禁用的属性从 gl.vertexAttrib???

设置的常量中获取其值

drawPoint 中,gl.vertexAttrib3f 函数,它们为该属性设置常量,但是当需要绘制第二个点时,属性被启用,这意味着它正在查找分配的缓冲区绘制三角形时不是常量。

如果你添加

    gl.disableVertexAttribArray(a_Position);
    gl.disableVertexAttribArray(a_PointSize);

drawPoint 绘制之前它应该可以工作。

您可能会发现 this state diagram 有助于理解各种函数所设置的内容