동일한 셰이더를 사용하여 모양이 다른 버퍼를 변경하면 렌더링시 오류가 발생합니다. - WebGL

Question

동일한 셰이더를 사용하여 여러 셰이프의 셰이프를 렌더링하려고합니다.

다음 코드를 하나의 셰이프 만 사용하면 코드가 작동합니다. 2 개의 동일한 도형으로 다음 코드를 시도하면 코드가 작동합니다. 그러나 동일한 셰이더를 사용하여 2 가지 다른 셰이프를 사용하려고하면 다음과 같은 오류가 발생합니다. glDrawElements: attempt to access out of range vertices in attribute 0 하나의 모양이 손상된 개체 만 표시됩니다.

모든 업로드 된 모양에 대해 정점 (positions)과 색인 (positions_indices)을 저장합니다. 그런 다음 vertex_buffer과 index_buffer을 만들고 model 개체에 저장합니다.

var model = new Model(positions,positions_indices); 

Answer 1

당신은 당신이 요소를 그리기 전에 요소 배열 버퍼를 바인딩 잊어 버린 : 당신이 일반의 배열을 정의하기 전에 또한 당신이 배열 버퍼를 바인드 할 필요가

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, models[i].index_buffer); 

을 여기에 코드입니다 정점 속성 데이터

코드는 다음과 같이 어떻게 든 찾아야한다 :

for(var i = 0;i<models.length;i++) { 
    //creating and setting model matrix and setting color uniform property to shader 

    gl.bindBuffer(gl.ARRAY_BUFFER, models[i].vertex_buffer); 
    gl.vertexAttribPointer(position, 3, gl.FLOAT, false,0,0); 
    gl.enableVertexAttribArray(position); 

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, models[i].index_buffer); 

    gl.drawElements(gl.TRIANGLES, models[i].positions_indices.length, gl.UNSIGNED_INT, 0); 
}