HTML5 Builder – HTML5 Canvas 3D Tutorial
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.
Run (F9) Hide image
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!
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
Tags: HTML5 Builder HTML5 Builder Canvas 3D