This tutorial shows what type of image and movie formats can be used in X3DOM and what are the features and restrictions.

You can use PNG, JPEG or GIF to encode your static Texture data. JPG has a low memory profile but has a lossy compression and it does not support alpha channels. PNG compression is lossless and can handle alpha. GIF is also lossless and has alpha. General: If you do not need an alpha channel and the content does not have hard edges (e.g. Text) use JPG. Otherwise use PNG. You should not use GIF anymore. PNG is more flexible for future content (e.g. 16-bit channels).

As shown in the previous examples we always need a html-document with a x3DOM context. If you don't know how to do that check our previous tutorial.

Images

For using an image as texture we use the ImageTexture Node:

    <x3d width='500px' height='400px'> 
    <scene> 
	<shape> 
	<appearance> 
	<ImageTexture  url="myTexture.png"><ImageTexture/>
	</appearance> 
	<box> </box> 
	</shape> 
    </scene> 
    </x3d>           
        

Movies

For using movies as textures we simply need to use the MovieTexture Node. But one thing you need to keep in mind: There is no single movie file right now which is supported by all user agents. Use the X3DOM formats example to check your browser format. The best solution right now is to encode your content as MP4 and OGV movie and provide alternative sources in your MovieTexture node.

    <x3d width='500px' height='400px'> 
    <scene> 
	<shape> 
	<appearance> 
	<MovieTexture  url='”foo.mp4″,”foo.ogv”'><MovieTexture/>
	</appearance> 
	<box> </box> 
	</shape> 
    </scene> 
    </x3d>           
        

Your result could look like this:

You have now learned how you can use movies and images as texture. In our next tutorial we will show you how to include your own models in X3DOM.

Back to page top ⤴