Displaying 3D Models in Web Pages using Webgl

Standards for hardware accelerated 3D on the Internet are starting to become established. This is the first step towards immersive virtual worlds accessible through a browser window and for now, a nice way to display your models.

The following tutorial (in four parts) shows how to embed Blender models in web pages using software from x3dom.org, the video tutorial runs through a Blender tutorial from their site.

Here are the files created in the tutorial – greenMonkey.zip  (not needed, easy to make your own).

Here are the files created in the final part of the tutorial, models with textures – nes.zip

Blender 2.5 Displaying 3D Models in Web Pages Using Webgl Exporting X3D Files and using X3DOM Part1

This part of the tutorial shows how to embed x3d code in a web page e.g. greenMonkey2.html  (sky colour modified).

Blender 2.5 Displaying 3D Models in Web Pages Using Webgl Exporting X3D Files and using X3DOM Part 2

This part of the tutorial shows how to link from a web page to an x3d file e.g. greenMonkeyInline.html

Blender 2.5 Displaying 3D Models in Web Pages Using Webgl and X3D Part 3 Making the Model Spin

If you do not want your models to be static, this part shows how to make the models spin e.g. spinningGreenMonkey.html and spinningMonkeyMan.html

Blender 2.5 Displaying 3D Models in Web Pages Using Webgl and the X3D Format Part 4 Texture Files

This part shows how to display models with textures and how to overcome some bugs e.g. nes.html

 

Animation in the x3d Format

The following tutorial (in two parts) is not directly related to Blender, it shows how animation ‘rules’ can be set up in x3d files. It compliments the tutorial above in explaining how the animation rule works that makes models spin.

Webgl Tutorial – How to Animate 3D Models In Web Pages Using the X3D Format Part 1 Position

Webgl Tutorial – How to Animate 3D Models In Web Pages Using the X3D Format Part 2 Rotation

Files used in tutorial – animationExamples.zip

Bouncing balls example – twoSpheres1.html

Related Links

Webgl Wiki at the Khronos website – http://www.khronos.org/webgl/wiki/Main_Page

Information about x3d from the web3D consortium – http://www.web3d.org/about/overview

x3dom developing software supporting the x3d format – http://x3dom.org