1
Ich versuche, Kugel mit Dreiecken und 2 Puffer zu zeichnen (gl.ARRAY_BUFFER und gl.ELEMENT_ARRAY_BUFFER), aber etwas falsch.Ich sehe nur leere Anzeige ... Ich benutze einige dieser Code http://learningwebgl.com/blog/?p=1253 und diese https://github.com/davidwparker/programmingtil-webgl/blob/master/0078-3d-sphere/index.js.WebGL versuchen Zeichenkugel
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
' gl_PointSize = 10.0;\n' +
'}\n';
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
function resize(canvas)
{
var displayWidth = canvas.clientWidth;
var displayHeight = canvas.clientHeight;
if (canvas.width != displayWidth || canvas.height != displayHeight)
{
canvas.width = displayWidth;
canvas.height = displayHeight;
}
}
function initArrayBuffers(gl)
{
var SPHERE_DIV = 6;
var i, ai, si, ci;
var j, aj, sj, cj;
var p1, p2;
var vertices = [],indices = [];
for (j = 0; j <= SPHERE_DIV; j++)
{
aj = j * Math.PI/SPHERE_DIV;
sj = Math.sin(aj);
cj = Math.cos(aj);
for (i = 0; i <= SPHERE_DIV; i++)
{
ai = i * 2 * Math.PI/SPHERE_DIV;
si = Math.sin(ai);
ci = Math.cos(ai);
vertices.push(si * sj); // X
vertices.push(cj); // Y
vertices.push(ci * sj); // Z
}
for (j = 0; j < SPHERE_DIV; j++)
{
for (i = 0; i < SPHERE_DIV; i++)
{
p1 = j * (SPHERE_DIV+1) + i;
p2 = p1 + (SPHERE_DIV+1);
indices.push(p1);
indices.push(p2);
indices.push(p1 + 1);
indices.push(p1 + 1);
indices.push(p2);
indices.push(p2 + 1);
}
}
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer)
{
console.log('Failed to create the buffer object');
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
}
return indices.length;
}
function main()
{
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);
resize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
var n=initArrayBuffers(gl);
if (!gl)
{
console.log('Failed to retrieve the <canvas> element');
return;
}
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
{
console.log('Failed to intialize shaders.');
return;
}
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.clear(gl.COLOR_BUFFER_BIT);
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;
}
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0);
}