HTML5 Canvas Library
 

3D Objects on General Purpose HTML5/CSS Pages

The new HTML 5 canvas 3D / WebGL™ allows the user to add 3D objects and animations to HTML5/CSS pages. It is often used to deliver full screen content such as demos or computer games into a browser. WebGL™ can, however, also be used to enrich classical HTML text pages with 3D content as we will discuss in this article.

The HTML 5 canvas element takes, similar to a static image, a rectangular area of a web page, while in contrast to an image the content of the canvas is dynamically generated by a computer program in real time. It can be animated freely and change in response to user input. Also 3D models usually do not loose quality when being scaled up. Please move your mouse over the 3D object on the right. If you are lucky the scene was enlaged and rotates in front of you, otherwise your browser/computer does not seem to support WebGL™ and you are viewing a static image instead.

WebGL™ is a quite low level interface and so it is very advisable to use a javascript libarary in order to simplify its use. This article is about the taccgl™ libarary that was specifically designed for use on general purpose HTML+CSS pages. Showing the 3D image on the right can be accomplished with two lines of code, which we will see below. It loads a 3D model that was previously created with a modelling program from a file and displays it at a specified position.

One of the specific points about taccgl™ is that it uses a full screen (or may be better full window) canvas to draw the 3D object on. Normally one would expect the canvas to just cover the space where the 3D object actually sits. Using such a setup, it is however impossible to enlarge the object on mouseover. So taccgl™ puts a canvas on top of all the visible space of the current page, whereby most of the canvas is transparent and only a small portion contains the 3D object on the right. When the object is to be enlarged a corresponding animation of the 3D object on the canvas is performed.

Furthermore this setup allows you to have many distinct 3D objects on a single page. Although it is possible to have multiple HTML canvas elements, one for each object on a page, this restricts animations on the canvas space. Not only to avoid this problem taccgl™ choose the approach of a single big canvas. A big canvas for all objects on a page furthermore enables depth buffering (the technique that hides parts of an object behind another object) between the objects and shadows casted from one object on another. For example hover over the cylinder on the left to see multiple objects flying around each other whereby sometime one object is hidden by another object in front.

taccgl™ can also see HTML elements as objects in a 3D world. This way 3D objects "behind" an HTML element can be correctly hidden and shadows can be casted from HTML elements on 3D objects and vice versa. This way in fact HTML elements can benefit of all the features of WebGL™ from fast GPU based animations, deformations, morphing, to complex lighting. This is however not the main topic of this article but discussed in detail in the taccgl™ Tutorial.

Now lets have a look at the code. The following 2 lines are needed to display the 3D example at the begin of this article.

loadedModel = taccgl.objFile().read('/tutorial/obj/secondExample.obj');
trex1 = taccgl.actor("examplediv",loadedModel.scene()) . duration(7200) . start();
 

The first line loades a 3D model from file and stores it in the variable loadedModel. The model file was created with the open source Blender program (also see OBJ File Creation). The loaded model is accessed in the second line using the scene method. The taccgl.actor("examplediv",...) selects the HTML element with id=examplediv as placeholder. The scene will be displayed replacing the placeholder HTML element. The start method finally starts the animation (which is just a still image in this case) and makes is play in parallel to further javaScript execution.

The following example shows how to select a single object from the whole scene using loadedModel.objs('Cylinder') to show the image on the left.
taccgl.actor("examplediv2",loadedModel.objs('Cylinder')) . duration(7200) . start();
 

taccgl™ has many methods to animate displayed items. These usually work on HTML elements as well as on 3D objects or on complete 3D scenes, see the tutorial and Simple Rotation. In the example below (and animation shown on the right) rotateMiddle(0.7,0.7,0) is used to rotate around the xy-axis and rotatePart (0,Math.PI*240) to perform 120 rotations (within the selected 2 hours).

taccgl.actor("examplediv3",loadedModel.objs('Cylinder'))
. rotateMiddle(0.7,0.7,0) . rotatePart (0,Math.PI*240) . duration(7200) . start();
 

The next example combines two transitions. First it shows the rotating cylinder and second it shows 3 sides of cube around standing still. Also note that the placeholder element was resized to better fit the text, an how this effects the display of the 3D model.

taccgl.actor("examplediv4",loadedModel.objs('Cylinder'))
. rotateMiddle(0.7,0.7,0) . rotatePart (0,Math.PI*240) . duration(7200) . start();
taccgl.actor("examplediv4",loadedModel.objs('Cube')) . duration(7200) . start();
 
Demo Text Paragraph Demo Text Paragraph Demo Text Paragraph Demo Text Paragraph

It often looks quite good to combine the display of an HTML element and some 3D objects. In the following example the cylinder is made rotating around the (middle of the) placeholder div with id=textpara. The third line of the example taccgl.actor("textpara"). duration(7200) . start() makes simply includes the placeholder HTML element into the animation and so makes it visible.

The example also uses modFit to make the 3D model of the the cylinder Fit with the placeholder HTML element. modFit gets a three letter string as parameter, whereby the first letter stands for the x-axis, the second for the y-axis, and the third for the z-axis. The example "mmF" means to align in the middle with regards to x and y-axis and to align in front of the HTML element with regards to the z-axis.

taccgl.a("textpara",loadedModel.objs('Cylinder')) . modFit ("mmf") . rotate({rx:0.5,ry:0.5,rz:-0.2},0,1,0) . rotatePart (0,Math.PI*600) . duration(7200) . start();
taccgl.actor("textpara"). duration(7200) . start();
 

Conclusion

The article described, how the taccgl™ library shows various 3D objects on an HTML 5 page by displaying an integrated scene of HTML elements and 3D objects using a full-screen (or full window) sized 3D canvas. Afterwards we showed some very small examples of 3D objects and animations made with taccgl™ and WebGL™. We restricted ourselves on examples that are no longer than 3 lines of javaScript code. To see some more elaborate examples we refer to our Home Page. In order to get a complete understanding of the examples shown in here, we refer to the taccgl™ Tutorial and then the taccgl™ Manual.

Blog Articles

Parallax scrolling with 3D Acceleration
CSS Transition Opacity for Fade Effects
CSS Transition Display
CSS Transition Visibility
WebGL-HTML5 PopUp Animations
3D Objects on HTML pages
Deforming and Morphing of HTML

Demos

3D Configurator
3D Produktkonfigurator

Tutorial Sections

First Example
Basic Shapes
Basic 3D Models
Basic Animations
Colors and Textures
Integration of HTML and WebGL
Timing Transitions
Boxes
JavaScript Embedding
External 3D Models
Parts of Elements
HTML Elements on Canvas
Selectors for Multiple Transitions
Multiple Triangle Animations
Flexibles
Fragment Shaders
Expressions

 

WebGL™ is a trademark of the Khronos Group Inc.