Using WebGL in HTML and in Joomla

I have added some 3D elements on the page so I will explain how to do this. I will briefly explain how to do this in ordinary HTML, which modules use in Joomla and how to use x3d and Blender.

Firs you will need a WebGL capable browser, I am using Firefox 4 beta 8, but Google Chrome should also do. WebGL is similar to OpenGL you just program it in Javascript. So you can deal with it just as with any ordinary Javascript or just find an example on the net and use it in your page. A nice page is

So you might say: "Dude are you serious am I really suppose to write Javescript in WebGL API?" OK, there are also other solutions. Remember VRML later it was suppressed by x3d and the most important thing is that you can use Blender to export 3d models to x3d. Probably other software like Maya and 3D Studio MAX can do the same, but Blender is free and can import most popular 3D objects. So how to use x3d in a page? Simple there are two lines which you insert in the HEAD of the HTML

<link rel="stylesheet" type="text/css" href=""></link>
<script type="text/javascript" src=""></script>

and a simple code in the place of 3D object

<x3d id='someUniqueId' showStat='false' showLog='false' x='0px' y='0px' width='500px' height='500px'>
<inline url='yourFile.x3d' ></inline>
<scene> </x3d>

yourFile.x3d represents our file and we should not forget about the path if needed. Detailed instructions are here.

Now lets move to Joomla. The smart move would be to write a module for this and maybe I will someday. Meanwhile we can use a combination of 3 modules to get the job done.

  • Load Module is a plugin that can load module in any article. We define a placeholder and when using a module we write the name of the placeholder in the position property. Plugin is already installed but it needs to be enabled. Again a nice instruction is on this page.
  • We can use Custom Head Tag to insert the tow lines in the HEAD of HTML. We could edit the template but that would mean that a pretty long Javascript would be loaded even if a visitor doesn't brows 3D content.
  • Another module we can use is Mod HTML, this allows us to insert HTML code as a module.

So we can just start an article and insert the placeholder for our 3d object. Next we must enable the loading of special HEAD information for this article. And finally point the Mod HTML module to the placeholder and insert the second part of the code in it as HTML.

And of course we get 3D model above. Inserting WebGL via Javsrcript is very similar. So enjoy WebGL in your pages.

The Menger sponge from was taken from this page.