Question

编辑：

经过严格的代码审查后，我碰巧做了正确的改动，让这个三角形渲染。在此处发布的代码中，顶点和颜色数组在initBuffers之前声明。在我的实际代码中，它们稍后被声明。因为javascript（在崇高的文本中）是自动完成这些变量，无论我在哪里定义它们（比如java类中的方法，比如..），并且因为chrome没有抛出任何错误，我认为这不是问题。然而，简单地将这些数组初始化从initShaders，initBuffers之后转移到这些调用之前是我的问题的关键。我很抱歉发布了一个根本无法回答的问题，但希望这可以作为对未来人们的有用警告，宣布时间对于webGL缓冲区很重要。更严格地检查着色器编译/链接可能会产生更好的信息。

///////////////////

我在教程中找到了一些WebGL代码并尝试重构它以使用每个顶点的代码指定颜色值。不幸的是，在使用此代码之后，我收到了上述＆＃34;超出范围＆＃34;错误。

node - 任何未见的声明都是全局变量

我有以下设置代码，初始化缓冲区：

顶点信息的指定如下：

var vertices = [
        0.0,  1.0,
        -1.0, -1.0,
         1.0, -1.0
];


var colors = [

    1, 0, 0,
    1, 0, 0,
    1, 0, 0

];




var gl;

var shaderProgram;


var triangleVertexPositionBuffer;
var triangleVertexColorBuffer;


var canvas = document.getElementById("ABID");
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;



function initBuffers() {

    triangleVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    triangleVertexPositionBuffer.itemSize = 2;



    triangleVertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    triangleVertexColorBuffer.itemSize = 3;


}


initBuffers();

然后创建我的着色器/程序，我尝试获取属性位置并将其设置在全局变量上，＆＃39; shaderProgram＆＃39;：

function initShaders() {

    var fragmentShader = getShader(gl, "shader-fs");
    var vertexShader = getShader(gl, "shader-vs");

    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert("Could not initialise shaders");
    }

    gl.useProgram(shaderProgram);

    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    shaderProgram.vertexColorAttrib = gl.getAttribLocation(shaderProgram, "aVertexColor");

    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
    gl.enableVertexAttribArray(shaderProgram.vertexColorAttrib);


}

这取决于一个完美运行的getShader函数。着色器如下：

<script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;

    varying vec3 color;

    void main(void) {
        gl_FragColor = vec4(1,0,0, 1);
    }
</script>

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec2 aVertexPosition;
    attribute vec3 aVertexColor;



    varying vec3 color;

    void main(void) {
        gl_Position = vec4(aVertexPosition, 1.0,1.0);
        color = aVertexColor;
    }
</script>

最后，在绘制这3个顶点时会以某种方式发生错误：

draw();

function draw() {

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clearColor(0, 0, 0, 1);



    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);


    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttrib, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);


    gl.drawArrays(gl.TRIANGLES, 0, 3);


}

我确定有一些偏移，或大小或魔术数字输入不正确但我已经多次这样，并且无法发现错误。作为一名openGL初学者和缺乏调试见解会让人感到沮丧。任何帮助将不胜感激。

WebGL错误 - ＆＃34; glDrawArrays：尝试访问属性0＆＃34;

编辑：

0 个答案: