Writing text to the screen is a valuable feature, even when dealing with 3D graphics, since even the most trivial of applications needs some text output to be meaningful.
The method to write text to the screen involves setting up a canvas, onto which you are able to write.
So, starting off, here is the code needed to output text using O3D:
<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>
I have now introduced a new library to include in the page. o3djs.canvas provides canvas functionality in the page.
We now also have a few new global variables, which will be initialised in the init function
var g_textCanvas;
var g_paint;
var g_canvasLib;
First, let’s look at the changes in the init function. We start off by setting the background color to blue.
g_viewInfo.clearBuffer.clearColor = [0, 0, 1, 1];
Now we set the view to a orthographic projection, since we what we want to display is in 2D
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
We then create the global paint object, which the canvas is going to use to draw to the screen, and then create an instance of the canvas library
g_paint = g_pack.createObject('CanvasPaint');
g_canvasLib = o3djs.canvas.create(g_pack, g_client.root, g_viewInfo);
And next, create the canvas we will draw to. The parameters passed are the X,Y coordinates, z-index, width, height and a boolean flad denoting whether we will allow transparency
g_textCanvas = g_canvasLib.createXYQuad(100, 100, 0, 200, 150, true);
And finally set our render function
g_client.setRenderCallback(renderCallback);
In the renderCallback() function, we call the drawText() to update the text, displaying the elapsed time in seconds.
function renderCallback(renderEvent) {
g_clock += renderEvent.elapsedTime * g_timeMult;
drawText("Hello world - " + (Math.round(g_clock * 100) / 100) + "s");
}
Now we get to the drawText() function which we pass a string to, the first thing we do is clear the canvas
g_textCanvas.canvas.clear([0, 0, 0, 0]);
We then use the paint object to set the text color, size and font. The colour is in the format of [red, green, blue, alpha] and range from 0 to 1.
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;
We now draw the text to the canvas at the specified coordinates, and lastly update the texture.
g_textCanvas.canvas.drawText(str, 10, 15, paint);
g_textCanvas.updateTexture();
When you view the page in a browser, you now should see some text displayed in the O3D client area.
In the next tutorial, I will show you how to combine the 2D realm introduced in this tutorial, with the 3D realm of tutorial 2, where I will show how to create a basic HUD.
Comments