ここでこのチュートリアルを完了しました: http://learningwebgl.com/blog/?p=134
私は今、簡単な変更を加えようとしています。各頂点に固有の色を持たせたくありません。動的に変更できる同じ色をすべての頂点で使用したいのです。
チュートリアルの関連コードを次に示します。
var squareVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
colors = []
for (var i=0; i < 4; i++) {
colors = colors.concat([0.5, 0.5, 1.0, 1.0]);
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
squareVertexColorBuffer.itemSize = 4;
squareVertexColorBuffer.numItems = 4;
次の変更と他の多くのバリアントを試しました。
squareVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
colors = [0.5, 0.5, 1.0, 1.0];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
squareVertexColorBuffer.itemSize = 4;
squareVertexColorBuffer.numItems = 1;
私が得ているエラーは
.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 1
このエラーは完全に理にかなっています。レンダリングされたものは、各頂点に固有の色があると考えているので、n 番目の頂点では n 番目の色を探していると思います。
問題は、最終的に 100 万点を描画したいのですが、各点が常に同じ色になることです。したがって、必要なフロートが 4 つだけの場合、400 万のフロートを作成したくありません。