!!! Listings zum Artikel "Springinsweb"
!!! von Gerhard Voelkl
!!! in iX 10/2009, S. 136
!!! Listing 1: CubeIX.html
CubeIX - Google 3D API
!!! Listing 2: CubeIX.js
!!! Schritt 1: O3D-PlugIn erzeugen
function init() {
o3djs.util.makeClients(initStep2);
}
!!! Schritt 2: Globale Variablen -- Verbindung zu Plugin und Hilfsfunktionen herstellen
function initStep2(clientElements) {
var o3dElement = clientElements[0];
g_client = o3dElement.client; //Membervariable des PlugIns
g_o3d = o3dElement.o3d; //Namespace von O3D
g_math = o3djs.math; //Namespace der Math Library
!!! Schritt 3: Objekt Pack für Speicherverwaltung erzeugen
g_pack = g_client.createPack();
!!! Schritt 4: Rendergraphen automatisch generieren
var viewInfo = o3djs.rendergraph.createBasicView(g_pack,
g_client.root,
g_client.renderGraphRoot);
!!! Schritt 5: Projektions- und Viewmatrix im DrawContext festlegen
viewInfo.drawContext.projection = g_math.matrix4.perspective(
g_math.degToRad(30), //fov
g_client.width / g_client.height,
1, // Near plane.
5000); // Far plane.
viewInfo.drawContext.view = g_math.matrix4.lookAt([0, 1, 5], // eye
[0, 0, 0], // target
[0, 1, 0]); // up
!!! Schritt 6: Effekte erzeugen und mit Shaderdefinition füllen
var effect = g_pack.createObject('Effect');
var shaderString = document.getElementById('effect').value;
effect.loadFromFXString(shaderString);
!!! Schritt 7: Material und Shapes erzeugen
var material = g_pack.createObject('Material');
material.drawList = viewInfo.performanceDrawList;
material.effect = effect;
effect.createUniformParameters(material);
var samplerParam = material.getParam('texSampler0');
g_sampler = g_pack.createObject('Sampler');
g_sampler.minFilter = g_o3d.Sampler.ANISOTROPIC;
g_sampler.maxAnisotropy = 4;
samplerParam.value = g_sampler;
var cubeShape = createCube(material); //Geometrie erzeugen
!!! Schritt 8: Transformgraph erstellen
g_cubeTransform = g_pack.createObject('Transform');
g_cubeTransform.addShape(cubeShape);
!!! Schritt 9: DrawElements für Primitve erzeugen
cubeShape.createDrawElements(g_pack, null);
//Textur laden
var path = window.location.href;
var index = path.lastIndexOf('/');
textureUrl = path.substring(0, index + 1) + 'ix_logo.jpg';
o3djs.io.loadTexture(g_pack, textureUrl, function(texture, exception) {
if (exception) {
g_sampler.texture = null;
g_textureLoadDenied = true;
} else {
g_sampler.texture = texture;
g_cubeTransform.parent = g_client.root;
g_finished = true; // for selenium testing.
}
});
!!! Schritt 10: RenderCallback-Funktion wird von Plugin vor dem Zeichnen eines Bildes aufgerufen
g_client.setRenderCallback(renderCallback);
}
function createCube(material) {//Erzeugt Shape-Objekt Cube
// ...
}
function renderCallback(renderEvent) {
g_clock += renderEvent.elapsedTime;
g_cubeTransform.identity();
g_cubeTransform.rotateY(2.0 * g_clock);
}
function uninit() {
}