WebGL Best Practice

If you intend to create XML3D scenes that also run with WebGL, it’s necessary to follow some basic rules:

  1. Add the necessary JS scripts in the header section of the XHTML document:
    <script src="http://www.xml3d.org/xml3d/script/xml3d.js" type="text/javascript"/>

    This should be the first script reference in the header section. If you want to be able to run the scene without internet connection, just copy the script to your local drive. There is a version number in the header section, thus you can update the file regularly. The script will also add a default scene controller. If you want to use your own camera controller, you can disable this by adding:

    <navigation mode="none"/>

    to your scene.

  2. Add the default CSS style to the document:
    <link href="http://www.xml3d.org/xml3d/script/xml3d.css" media="all" rel="stylesheet" type="text/css"/>

    This will prevent all the numbers to be displayed before the initialization of the scene.

Something you have to consider, if you want to use XML3D interaction elements  (onmouseover etc.) with WebGL:

If you use an image from outside the HTML page’s origin as a texture (e.g. image from a different website), the canvas is flagged as confidential and the scripts can’t use readPixels anymore. It’s using the SOP (http://en.wikipedia.org/wiki/Same_origin_policy). But readPixels is needed to get the necessary information.

Local access to files (file:// protocol) fail the same-origin check and thus it’s not possible to test XML3D/WebGL interaction locally.

To do so, you can either modify your browsers security behaviour (not recommended) or install a local web server and access your local files via http://localhost/… We can recommend Tomcat server, as it is case-sensitive even on Windows and thus you don’t face this issue when you upload your scene to a Linux server.
That’s all, have fun with WebGL!