O3D Tutorial 3: Text ausgeben

Beitrag geschrieben von King of Darkness am 2010-03-03

Kurzbeschreibung:
Ausgabe von Text ist ein wertvoller Bestandteil, auch wenn man mit 3D Grafiken arbeitet. Jede noch so einfache Anwendung braucht Text um besser verständlich zu sein.

Um Text auf den Bildschirm zu bringen benötigt man eine Leinwand auf die man dann den text schreibt.

Hier erstmal der gesamte Code der benötigt wird, weiter unten zerlegen wir das wieder in einzelteile:

Code:

<html>

   <head>

      <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <title>Tutorial 3: Writing some text</title>

      <script type="text/javascript" src="o3djs/base.js"></script>

      <script type="text/javascript">

         o3djs.require('o3djs.util');

         o3djs.require('o3djs.math');

         o3djs.require('o3djs.rendergraph');

         o3djs.require('o3djs.canvas');

         // Events

         // Run the init() function once the page has finished loading.

         // Run the uninit() function when the page has is unloaded.

         window.onload = init;

         window.onunload = uninit;

         // global variables

         var g_o3d;

         var g_math;

         var g_client;

         var g_pack;

         var g_clock = 0;

         var g_timeMult = 1;

         var g_cubeTransform;

         var g_viewInfo;

         var g_textCanvas;

         var g_paint;

         var g_canvasLib;

         function renderCallback(renderEvent) {

           g_clock += renderEvent.elapsedTime * g_timeMult;

           drawText("Hello world - " + (Math.round(g_clock * 100) / 100) + "s");

         }

         function drawText(str) {

           // Clear to completely transparent.

           g_textCanvas.canvas.clear([0, 0, 0, 0]);

           // Reuse the global paint object

           var paint = g_paint;

           paint.color = [1, 1, 1, 1];

           paint.textSize = 12;

           paint.textTypeface = 'Comic Sans MS';

           paint.textAlign = g_o3d.CanvasPaint.LEFT;

           paint.shader = null;

           g_textCanvas.canvas.drawText(str, 10, 15, paint);

           g_textCanvas.updateTexture();

        }

            /**

          * Creates the client area.

          */

         function init() {

           o3djs.util.makeClients(initStep2);

         }

         /**

          * Initializes O3D.

          * @param {Array} clientElements Array of o3d object elements.

          */

         function initStep2(clientElements) {

           // Initializes global variables and libraries.

           var o3dElement = clientElements[0];

           g_client = o3dElement.client;

           g_o3d = o3dElement.o3d;

           g_math = o3djs.math;

           // Initialize O3D sample libraries.

           o3djs.base.init(o3dElement);

           // Create a pack to manage the objects created.

           g_pack = g_client.createPack();

           // Create the render graph for a view.

           g_viewInfo = o3djs.rendergraph.createBasicView(

               g_pack,

               g_client.root,

               g_client.renderGraphRoot);

            // Set up a simple orthographic view.

            // Set the background color to purple.

            g_viewInfo.clearBuffer.clearColor = [0.5, 0.1, 1, 1];

            // Setup an orthographic projection camera.

            g_viewInfo.drawContext.projection = g_math.matrix4.orthographic(

                0 + 0.5,

                g_client.width + 0.5,

                g_client.height + 0.5,

                0 + 0.5,

                0.001,

                1000);

           g_viewInfo.drawContext.view = g_math.matrix4.lookAt([0, 0, 1], // eye

                                                     [0, 0, 0],  // target

                                                     [0, 1, 0]); // up

           // Create the global paint object thats used by  draw operations.

           g_paint = g_pack.createObject('CanvasPaint');

           // Creates an instance of the canvas utilities library.

           g_canvasLib = o3djs.canvas.create(g_pack, g_client.root, g_viewInfo);

           // Create a canvas that will be used to display the text.

           g_textCanvas = g_canvasLib.createXYQuad(100, 100, 0, 200, 150, true);

           // Set our render callback for animation.

           // This sets function to be executed every time a frame is rendered.

           g_client.setRenderCallback(renderCallback);

         }

         /**

          * Removes callbacks so they arent called after the page has unloaded.

          */

         function uninit() {

           if (g_client) {

             g_client.cleanup();

           }

         }

      </script>

   </head>

   <body>

      <h1>Tutorial 3: Writing some text</h1>

      Some text should be displayed below

      <br/>

      <div id="o3d" style="width: 300px; height: 300px;"></div>

  </body>

</html>

Ich habe eine neue Bibliothek eingebaut, o3djs.canvas, diese bringt die Funktionalität mit die wir für die Leinwand brauchen.

Wir brauchen ein paar neue Globale Variablen die in der Init Funktion gesetzt werden.

Code:

         var g_textCanvas;

         var g_paint;

         var g_canvasLib;

Als erstes schauen wir uns die Änderungen in der Init Funktion an. Es fängt damit an das wir die Hintergrundfarbe auf blau setzen

Code:

g_viewInfo.clearBuffer.clearColor = [0, 0, 1, 1];

Jetzt sagen wir unserer View das wir orthografisch es dinge darstellen wollen, sprich text und der wird in 2D dargestellt.

Code:

            g_viewInfo.drawContext.projection = g_math.matrix4.orthographic(

                0 + 0.5,

                g_client.width + 0.5,

                g_client.height + 0.5,

                0 + 0.5,

                0.001,

                1000);

           g_viewInfo.drawContext.view = g_math.matrix4.lookAt([0, 0, 1], //eye

                                                     [0, 0, 0],  // target

                                                     [0, 1, 0]); // up

Als nächstes erstellen wir unser globales Paint Objekt welche dann von der Leinwand (Canvas) benutzt wird um irgendwas auf den Bildschirm zu bringen. Dann initialisieren wir noch unsere Canvas-Bibliothek.

Code:

           g_paint = g_pack.createObject('CanvasPaint');

           g_canvasLib = o3djs.canvas.create(g_pack, g_client.root, g_viewInfo);

Jetzt wird unsere Leinwand erstellt auf die wir dann den Text schreiben warden. Die mitgegebene Parameter sind die X, Y Coordinaten, der Z-Index, die Breite, die Höhe und die Transparenz als Boolean der in unserem fall erlaub das die Leinwand Transparent ist.

Code:

g_textCanvas = g_canvasLib.createXYQuad(100, 100, 0, 200, 150, true);

Dann fehlt nur noch unsere RenderCallback Funktion

Code:

g_client.setRenderCallback(renderCallback);

In der renderCallback() Funktion rufen wir dann die Funktion drawText() auf die dann die Abgelaufene Zeit darstellen wird.

Code:

         function renderCallback(renderEvent) {

           g_clock += renderEvent.elapsedTime * g_timeMult;

           drawText("Hello world - " + (Math.round(g_clock * 100) / 100) + "s");

         }

Jetzt schauen wir uns die drawText() Funktion an der wir einen String mitgeben. Das erste was hier passiert ist das die Leinwand leer gemacht wird.

Code:

g_textCanvas.canvas.clear([0, 0, 0, 0]);

Jetzt benutzen wir unser Paint-Objekt um die Textfarbe, Größe und Schriftart zu setzen. Bei der Farbe ist das Format [Rot, Grün, Blau, Transparenz] jeweils im bereich von 0 und 1.

Code:

           var paint = g_paint;

           paint.color = [1, 1, 1, 1];

           paint.textSize = 12;

           paint.textTypeface = 'Comic Sans MS';

           paint.textAlign = g_o3d.CanvasPaint.LEFT;

           paint.shader = null;

Jetzt zeichnen wir den Text an der angegebenen stelle auf die Leinwand und Updaten dann die Textur die wir erstellt haben um unser Bild sichtbar zu machen.

Code:

g_textCanvas.canvas.drawText(str, 10, 15, paint);

g_textCanvas.updateTexture();

Wenn alles geklappt hat und du die Seite im Browser betrachtest siehst du nun den Text.

Im nächsten Tutorial werde ich zeigen wie man das 2D zeug aus diesem und das 3D zeug aus dem 2. Tutorial verbindet um so ein einfaches Head up Display (HUD) zu erstellen.