4

それで、私は視覚的な 3D プログラミングの世界へのかなり瞬間的な旅を始めました。私は現在 webgl に多額の投資をしており、JavaScript とほとんどの Web 指向言語のかなり強いバックグラウンドを持っていますが、これは私の最初のグラフィック言語です。

最初のかなり単純な形状を描画しようとしているときに、解決策が見つからないように見えるエラーが発生しました。クロムで次のように読み取ります。

WebGL: INVALID_OPERATION: drawElements:attribs が正しく設定されていません (n 回繰り返されます)

ここで、n は一見ランダムに変化する数値です。問題のコードは次のとおりです。

var tessVertexPositionBuffer;
var tessVertexColorBuffer;
var tessVertexIndexBuffer;
function initBuffers () {
    tessVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, tessVertexPositionBuffer);
    var vertices = [
    //innerfront
        -1.0, 1.0, 1.0,
        1.0, 1.0, 1.0,
        1.0, -1.0, 1.0,
        -1.0, -1.0, 1.0,
    //innerleft
        -1.0, 1.0, 1.0,
        -1.0, -1.0, 1.0,
        -1.0, 1.0, -1.0,
        -1.0, -1.0, -1.0,
    //innerback
        -1.0, 1.0, -1.0,
        1.0, 1.0, -1.0,
        -1.0, -1.0, -1.0,
        1.0, -1.0, -1.0,
    //innerright
        1.0, 1.0, 1.0,
        1.0, -1.0, 1.0,
        1.0, 1.0, -1.0,
        1.0, -1.0, -1.0,
                                            
    //topfront
        -1.0, 1.0, 1.0,
        1.0, 1.0, 1.0,
        -2.0, 2.0, 2.0,
        2.0, 2.0, 2.0,
    //topleft
        -1.0, 1.0, 1.0,
        -2.0, 2.0, 2.0,
        -1.0, 1.0, -1.0,
        -2.0, 2.0, -2.0,
    //topback
        -1.0, 1.0, -1.0,
        1.0, 1.0, -1.0,
        -2.0, 2.0, -2.0,
        2.0, 2.0, -2.0,         
    //topright
        1.0, 1.0, 1.0,
        2.0, 2.0, 2.0,
        1.0, 1.0, -1.0,
        2.0, 2.0, -2.0,
        
                                
    //outerfront
        -2.0, 2.0, 2.0,
        2.0, 2.0, 2.0,
        -2.0, -2.0, 2.0,
        2.0, -2.0, 2.0,
    //outerleft
        -2.0, 2.0, 2.0,
        -2.0, -2.0, 2.0,
        -2.0, 2.0, -2.0,
        -2.0, -2.0, -2.0,           
    //outerback
        -2.0, 2.0, -2.0,
        2.0, 2.0, -2.0,
        -2.0, -2.0, -2.0,
        2.0, -2.0, -2.0,
    //outerright
        2.0, 2.0, 2.0,
        2.0, -2.0, 2.0,
        2.0, 2.0, -2.0,
        2.0, -2.0, -2.0,            
            
    //bottomfront       
        2.0, 2.0, 2.0,
        -2.0, 2.0, 2.0,
        -2.0, -2.0, 2.0,
        2.0, -2.0, 2.0,
    //bottomleft
        -1.0, -1.0, 1.0,
        -2.0, -2.0, 2.0,
        -1.0, -1.0, -1.0,
        -2.0, -2.0, -2.0,
    //bottomback
        -1.0, -1.0, -1.0,
        1.0, -1.0, -1.0,
        -2.0, -2.0, -2.0,
        2.0, -2.0, -2.0,
    //bottomright
        1.0, -1.0, 1.0,
        2.0, -2.0, 2.0,
        1.0, -1.0, -1.0,
        2.0, -2.0, -2.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    tessVertexPositionBuffer.itemSize = 3;
    tessVertexPositionBuffer.numItems = 64;
    
    tessVertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, tessVertexColorBuffer);
    var colors = [
        [0.7, 0.7, 0.7, 1.0], //all inner sides
        [0.7, 0.7, 0.7, 1.0], 
        [0.7, 0.7, 0.7, 1.0], 
        [0.7, 0.7, 0.7, 1.0], 
        
        [0.7, 0.0, 0.7, 1.0], //all top sides
        [0.7, 0.0, 0.7, 1.0], 
        [0.7, 0.0, 0.7, 1.0], 
        [0.7, 0.0, 0.7, 1.0], 
        
        [0.7, 0.7, 0.0, 1.0], //all outer sides
        [0.7, 0.7, 0.0, 1.0], 
        [0.7, 0.7, 0.0, 1.0], 
        [0.7, 0.7, 0.0, 1.0], 
        
        [0.0, 0.7, 0.7, 1.0], //all bottom sides
        [0.0, 0.7, 0.7, 1.0],
        [0.0, 0.7, 0.7, 1.0],
        [0.0, 0.7, 0.7, 1.0],
    ];
    var unpackedColors = [];
    for (var i in colors) {
        var color = colors[i];
        for (var j=0; j< 4; j++) {
            unpackedColors = unpackedColors.concat(color);
        }   
    }
    
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColors), gl.STATIC_DRAW);
    tessVertexColorBuffer.itemSize = 4;
    tessVertexColorBuffer.numItems = 64;


    tessVertexIndexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tessVertexIndexBuffer);
    var tessVertexIndices = [
        0, 1, 2,  0, 2, 3,
        4, 5, 6,  5, 6, 7,
        8, 9, 10,  9, 10, 11,
        12, 13, 14,  13, 14, 15,
        16, 17, 18,  17, 18, 19,
        20, 21, 22,  21, 22, 23,
        24, 25, 26,  25, 26, 27,
        28, 29, 30,  29, 30, 31,
        32, 33, 34,  33, 34, 35,
        36, 37, 38,  37, 38, 39,
        40, 41, 42,  41, 42, 43,
        44, 45, 46,  45, 46, 47,
        48, 49, 50,  48, 50, 51,
        52, 53, 54,  53, 54, 55,
        56, 57, 58,  57, 58, 59,
        60, 61, 62,  61, 62, 63
    ];  
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(tessVertexIndices), gl.STATIC_DRAW);
    tessVertexIndexBuffer.itemSize = 1;
    tessVertexIndexBuffer.numItems = 96;
}

バッファの実際の描画は次のとおりです。

    gl.bindBuffer(gl.ARRAY_BUFFER, tessVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vetexPositionAttribute, tessVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    
    gl.bindBuffer(gl.ARRAY_BUFFER, tessVertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, tessVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
    
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tessVertexIndexBuffer);
    setMatrixUniforms();
    gl.drawElements(gl.TRIANGLES, tessVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);

さて、これはlearningwebglから比較的逐語的です。私は本当に単純な形を描こうとしています. 正直なところ、バッファタイプについてあまり理解していないため、問題がバッファタイプにあることは比較的確信しています（そして、私が見つけたwebGlに関するほとんどの文献は、言語またはHYPERSUPERPROの種類を一般的に理解している初心者です）。

実際の頂点の位置/色/インデックスを何度もチェックしましたが、単純なエラーに目がくらむほどコードに慣れていない限り、そこにエラーを見つけることはできません。

4

1 に答える 1

2

あなたの問題は単なるタイプミスのようです。「バッファの実際の描画」コードの 2 行目は、次のようになります。

gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, tessVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

rあなたはその行の最初のインを逃していvertexPositionAttributeました。

レッスン 4 の LearningWebGL チュートリアルを修正して、あなたのコードを使用するようにしました (タイプミスを修正しました)。ここにリンクがあります。

青色の三角形と黄色の三角形が空間内のまったく同じ位置に描画されていることに気付いた場合、ちらつきが発生します。それが意図的だったかどうかはわかりません。

于 2012-09-28T23:46:08.373 に答える