By Al Mannarino, Embarcadero Technologies, Inc.
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
So what is WebGL?
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.
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
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.
The project is a web page with a Canvas component.
Do: Click on the Canvas in the Designer, and its Object Inspector says:
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:
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:
var c = $("#Canvas").get();
function PlanetsPageJSLoad($sender, $params)
Do: switch to Design view. Select the Page. The Object Inspector shows the OnLoad event:
Double-click the event PlanetsPageJSLoad, and it will take you back into the Code for the function PlanetsPageJSLoad.
Let’s run the app and see the results.
You should get this. 3D rotating images of planets Earth and Mars. Very, very cool!
This ends this tutorial. We saw how we can display 3D images using the HTML5 Builder Canvas component in 3D mode!