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. mybloggingplanet.com/2014/09/8-tips-make-blog-seo-friendly.html
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