Hier ist ein Beispiel fuer webgl, ein Interface fuer Opengl ES Rendering
auf webseiten:
http://www.ibiblio.org/e-notes/webgl/models/jupiter.html
Bisher habe ich sowas in C programmiert, aber das geht natuerlich nicht fuer
Webseiten, bzw. fuer diese Tablet-PCs die inzwischen auch nicht mehr nur Maeusekino
sind. Was ich sehr irritierend finde ist dass hier die Reihenfolge umgekehrt ist.
In C wird zuerst das array deklariert , dann gefuellt und dann an opengl uebergeben.
Hier wird das Array zuerst gefuellt, dann deklariert und dann uebergeben - zumindest sieht es so
aus:
--------------
function webGLStart() {
initGL();
var size = Math.min(window.innerWidth, window.innerHeight) - 10;
canvas.width = size; canvas.height = size;
gl.viewport(0, 0, size, size);
var texture = loadTexture("../../VRML/Globe/jup0vtt2.jpg");
var prog = gl.createProgram();
gl.attachShader(prog, getShader( gl, "shader-vs" ));
gl.attachShader(prog, getShader( gl, "shader-fs" ));
gl.linkProgram(prog);
gl.useProgram(prog);
--------
Hier werden 3 arrays gefuellt, deren Laenge offenbar egal ist:
--------
var vertices = [], texCoord = [], ind = [];
var dt = 1/nTheta, dp = 1/nPhi,
dPhi = 2*Math.PI/nPhi, dTheta = Math.PI/nTheta,
nFaces = nPhi * nTheta;
for (var j = 0; j <= nTheta; j++ ){
var Theta = j * dTheta;
var cosTheta = Math.cos ( Theta );
var sinTheta = Math.sin ( Theta );
for (var i = 0; i <= nPhi; i++ ){
var Phi = i * dPhi;
var cosPhi = Math.cos ( Phi );
var sinPhi = Math.sin ( Phi );
vertices.push( cosPhi * sinTheta );
vertices.push( -sinPhi * sinTheta );
vertices.push( cosTheta );
texCoord.push ( dp*i ); texCoord.push ( dt*(nTheta - j) );
}
}
for (var j = 0; j < nTheta; j++ )
for (var i = 0; i <= nPhi; i++ ){
ind.push( j*(nPhi+1) + i );
ind.push( (j+1)*(nPhi+1) + i );
}
var posLocation = gl.getAttribLocation(prog, "aPos");
gl.enableVertexAttribArray( posLocation );
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
----
Und hier wird dann das Array vertices mit new offenbar erst mal erzeugt -
auch diesmal kein Hinweis auf die Laenge.
----
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(posLocation, 3, gl.FLOAT, false, 0, 0);
var texLoc = gl.getAttribLocation(prog, "aTexCoord");
gl.enableVertexAttribArray( texLoc );
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoord), gl.STATIC_DRAW);
gl.vertexAttribPointer(texLoc, 2, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(ind),
gl.STATIC_DRAW);
gl.uniform1i(gl.getUniformLocation(prog, "uTexSamp"), 0);
var prMatrix = new CanvasMatrix4();
prMatrix.perspective(45, 1, .1, 100);
gl.uniformMatrix4fv( gl.getUniformLocation(prog,"prMatrix"),
false, new Float32Array(prMatrix.getAsArray()) );
rotMat.makeIdentity();
rotMat.rotate(90, 1,0,0);
mvMatLoc = gl.getUniformLocation(prog,"mvMatrix");
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clearDepth(1.0);
gl.clearColor(0, 0, 0, 1);
drawScene();
-------
Dass diese Funktion erst nach ihrer Verwendung deklariert wird - und zudem
innerhalb einer anderen Funktion ist auch fuer C Programmierer etwas ungewoehnlich,
aber ich schaetze das kann man auch anders machen.
-------
function loadTexture(src) {
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
var image = new Image();
image.src = src;
image.onload = function() {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
image);
// gl.texImage2D(gl.TEXTURE_2D, 0, image, true);
drawScene();
};
return texture;
}
canvas.resize = function (){
var size = Math.min(window.innerWidth, window.innerHeight) - 10;
canvas.width = size; canvas.height = size;
gl.viewport(0, 0, size, size);
drawScene();
}
}
function drawScene(){
rotMat.rotate(xRot/5, 1,0,0); rotMat.rotate(yRot/5, 0,1,0);
rotMat.rotate(zRot, 0,0,1);
yRot = xRot = zRot = 0;
mvMatrix.load( rotMat );
mvMatrix.translate(0, 0, transl);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.uniformMatrix4fv( mvMatLoc, false, new Float32Array(mvMatrix.getAsArray()) );
for(var i=0; i < nTheta; i++)
gl.drawElements(gl.TRIANGLE_STRIP, nPhi2, gl.UNSIGNED_SHORT, 2*nPhi2*i);
gl.flush ();
}