HTML5 Builder – HTML5 Canvas 3D Tutorial

This tutorial shows you how to use the HTML5 Canvas component in HTML5 Builder to display 3D images.

This tutorial uses the CanvasPlanets project from: C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\HTML5

This example’s JavaScript code comes directly from the internet using WebGL.

So what is WebGL?

Previously, if you wanted to do real-time 3D graphics on the web, your only real option was to use a plug-in such as Java or Flash. However, there is currently a push to bring hardware-accelerated graphics to the web called WebGL. WebGL is based on OpenGL ES 2, which means that we’ll need to use shaders. Since WebGL runs inside a web browser, we’ll also need to use JavaScript to control it.

The CanvasPlanets project uses the following third-party libraries:

• webgl-utils.js — for basic initialization of an OpenGL context and rendering on browser request.
• J3DI.js  - which contains general utilities, and 
• J3DIMath.js - which provides matrix functions.

A Canvas is a rectangular area to draw shapes.

To use this component, just define the type of Context you want to use, and use the OnPaint JavaScript event to draw on the canvas.

2d is the only standard Canvas Context currently available. But despite its 2d name there are several available JavaScript libraries, such as WebGL, you can use to draw 3D shapes with the Canvas component.

There is also a global JavaScript variable that will hold the context, so you can draw on the canvas from outside the OnPaint event. That variable is called ComponentName_ctx, where ComponentName is the value of the Name property for the canvas component.

Steps:

1. Open the HTML5 project from C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\HTML5

Do: Home > Open > C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\HTML5\HTML5.h5bprj

Hide image

Click Open.

expand view>>

If CanvasPlanets.php is not shown in the Designer already, then go to:

Home > Project Manager > double-click the CanvasPlanets.php file.

This opens the file in either the Code or Design view. Select Design view.

Hide image

The project is a web page with a Canvas component.

Do: Click on the Canvas in the Designer, and its Object Inspector says:

Hide image

Context = experimental-webgl

NotSupportedMessage =Your web browser does not supprt the HTML5 canvas element.

This property lets you define an alternative content message to be displayed on the page, instead of the canvas, for web browsers that do not currently support the HTML5 Canvas component.

Do: Switch to the Code view:

In the function PlanetsPageShowHeader, we are including some JavaScript files:

<script type="text/javascript" src="js/webgl-utils.js"></script>

<script type="text/javascript" src="js/webgl-debug.js"></script>

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

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

And the 3D pictures themselves contain all the JavaScript code we see here in the project.

Getting the initWebGL("Canvas") code, line 90, to go to the HTML5 Builder Canvas component is a simple as fixing the reference to the Canvas, and pointing them to the name of our HTML5 Builder Canvas component, in line 190:

function start()

{

var c = $("#Canvas").get()[0];

Then we just start the execution of the JavaScript code from the JavaScript Load event of the Page container (line 233).

function PlanetsPageJSLoad($sender, $params)

{

?>

//begin js

start();

//end

<?php

}

Do: switch to Design view. Select the Page. The Object Inspector shows the OnLoad event:

Hide image
Hide image

Note: Normally, the actual drawing of the canvas is performed on the OnPaint Javascript event, but since there is so much initialization doing on with this application, it was better to start painting the canvas as soon as we load the page, so that’s why we chose to use the Page OnLoad event.

Double-click the event PlanetsPageJSLoad, and it will take you back into the Code for the function PlanetsPageJSLoad.

What’s great about this is its just plain JavaScript code in this project. Nothing else!

Let’s run the app and see the results.

Run (F9) Hide image

You should get this. 3D rotating images of planets Earth and Mars. Very, very cool!

Hide image

This ends this tutorial. We saw how we can display 3D images using the HTML5 Builder Canvas component in 3D mode!

expand view>>

Embarcadero’s HTML5 Builder is the definitive software for Rapid Application Development with Web Technologies. HTML5 Builder and its library, the RAD PHP Component Library (RPCL), includes a lot of new features and improvements to make your life easier, and take the RAD methodology even further into the web development. HTML5 Builder features a brand-new interface that adapts itself to your workflow as you take care of the different aspects of your application: writing the logic, designing the Interface, managing databases, and so much more. For HTML5, the RPCL now supports HTML5, the new version of the web standard that is revolutionizing the way you write webpages! To learn more about HTML5 Builder, or to download a trial, visit http://www.embarcadero.com/products/HTML5-Builder