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.
WebGL™ is a trademark of the Khronos Group Inc.
| 
3D Animation
