Titania X3D Editor

Bring Colours to Your Life.

Titania v4.3.9

Bring Colours to Your Life.

X3D Reference

Getting Started

Getting Started

Cobweb is a new X3D Browser engine entirely written in JavaScript and uses WebGL for 3D rendering. Authors can publish X3D source within an HTML5 page with Cobweb that works with Web browsers without prior plugin installation. This gives X3D authors the ability to displays content in 3D, using WebGL 3D graphics technology to display X3D content in several different browsers across several different operating systems.

Cobweb supports custom shaders, clip planes, reflection mapping, script nodes, prototyping capabilities and event driven programming to provide you with an improved quality level of virtual effects and tools ready for the Internet.

Developer note: Now, Cobweb runs in fresh installs of Google Chrome, Chromium, Firefox, Microsoft Edge, Opera, and Safari. Cobweb uses functions from the new JavaScript 6 standard, this standard becomes more and more popular and is either now available on your desktop computer or on your modern smart-phone.


Download Cobweb

There is a ZIP archive available to locally install Cobweb on your server. Compressed and uncompressed copies of Cobweb files are available. The uncompressed file (cobweb.js) is best used during development or debugging; the compressed file (cobweb.min.js) saves bandwidth and improves performance in production.

Download Cobweb 3.3 ZIP archive

Using Cobweb with a CDN

CDNs can offer a performance benefit by hosting Cobweb on servers spread across the globe. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of Cobweb from the same CDN, it won't have to be re-downloaded. To use the Cobweb CDN, just reference the CSS and JavaScript file in the script tag directly from the GitHub CDN domain.


Latest Stable Version

Embedding Cobweb within a Web Page

To display your X3D scene in a HTML5 page first save your scene as X3D XML Encoded file or as X3D Classic Encoded file, i.e. create a file with the extension .x3d ,.x3dv or .wrl.

The HTML5 page is quite easy to create, the HTML5 code below shows you the minimum requirements. The path to the X3D scene is specified in the src attribute of the <X3DCanvas> tag.

Note: it is important to use a HTML5 page and to save it as .html or if you prefer XHTML as .xhtml file.

To get Cobweb working you must include the CSS file »cobweb.css« and the JavaScript file »cobweb.min.js«. After cobweb is successfully loaded a new HTML tag <X3DCanvas> is available on your page.

You can style the <X3DCanvas> tag as every HTML tag with CSS as well as you can place it everywhere within the DOM tree.

Supported File Formats

As of version 1.19, Cobweb can now parse either X3D XML Encoding or X3D Classic Encoding. This gives authors the capability to display their existing projects like .wrl worlds, too.

Additionally files can be compressed using GZip compression.

X3D Encoding File Extension MIME Type
VRML .wrl, .wrz model/vrml
Classic VRML .x3dv, .x3dz model/x3d+vrml
XML .x3d, .x3dvz model/x3d+xml

For more information see How to Configure Your Web Server.

Fallback Content

The <X3DCanvas> element is equal to the <canvas> element in that, it is easy to define some fallback content, to be displayed in older browsers not supporting it. You should always provide fallback content to be displayed by those browsers.

Providing fallback content is very straightforward: just insert the alternate content inside the <X3DCanvas> element. Browsers that don't support <X3DCanvas> will ignore the container and render the fallback content inside it. Browsers that do support <X3DCanvas> will ignore the content inside the container, and just render the canvas normally.

For example, we could provide a text description of the X3D element or provide a static image of the dynamically rendered content. This can look something like this:

Attributes of the X3DCanvas Tag

The HTML <X3DCanvas> tag defines the main content of the X3D document. The <X3DCanvas> tag has three attributes that define different behaviours. All of these attributes are optional.


A String value with the URL that should be loaded on page load. If no src attribute is specified or the src attribute is empty an empty scene is displayed.


A MFString value with urls that should be loaded on page load. If no url attribute is specified or the attribute is empty an empty scene is displayed. If both src and url attribute are specified the src attribute takes precedence.


A Boolean value (true or false) to indicate whether the splash screen should be displayed. The default value for the splashScreen attribute is true. The display of Learn more about how HTML and X3D can operate together.the splash screen can also be toggled via the browser option »SplashScreen« in JavaScript. Call Browser.setBrowserOption("SplashScreen", booleanValue) to toggle the display of the splash screen.


A Boolean value (true or false) to indicate whether the notification bubble should be displayed. The default value for the notifications attribute is true.


A Boolean value (true or false) to indicate whether the browser timings bubble should be displayed if the context menu option is enabled. The default value for the timings attribute is true. This attribute changes the facility if browsers timings can be displayed, if browser timings are really displayed is in the hand of the user if he toggles the context menu option to true.


A Boolean value (true or false) to indicate whether a context menu should be displayed on right click. The default value for the contextMenu attribute is true.


A Boolean value (true or false) to indicate whether files transferred over the internet should be cached on the local computer. The default value for the cache attribute is true. It works by appending "_={timestamp}" to the GET parameters of every request.


Accessing the External Browser

Cobweb is designed to provide access to a browser and its contained scene graph via JavaScript, either within an internal X3D Script node or an external HTML script.

Learn more how to access the external browser.

XHTML DOM Integration

XHTML DOM integration allows you to integrate 3D content seamlessly into your webpage, with just a JavaScript file included the scene can be written directly into the XHTML markup. There are no further plug-ins needed anymore.

Learn more about how XHTML and X3D can operate together.

We show you a simple example how you can manipulate the X3D DOM in JavaScript like you would do it with any HTML.

Enable Cobweb Compatibility in Titania

New feature: To force Titania to provide at least exactly the same functionality and rendering effects as in Cobweb enable Help > Cobweb Compatibility. If enabled ComposedShader nodes will operate equal, Phong shading is available, and lighting will be specification conform.

Using Google Chrome and Opera with Local Files

Cobweb makes use of the XMLHttpRequest object to load files and there's no way round that. But that means files loading using the file:// scheme protocol are subject to the same origin policy and are handled as cross origin requests (CORS) and cross origin requests are only supported for protocol schemes: http, data and https. That means Cobweb cannot have access to this files.

To work around this problem you must set up a localhost server, than you can access your local files under the web address http://localhost/... This can be done using XAMPP from the https://www.apachefriends.org website. XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to use.

Report a Bug

If you run into any bugs or encounter any other abnormal issues with Cobweb, let us know!

Here's an example of a helpful bug report:

I fell through a hole on the Resistance map. I was running along the wall near the pool of water and fell through a black hole in the wall. I got stuck and had to leave the match. This happened while playing Search and Destroy.

Cobweb Feedback Survey and Bug Report

Cookies and other Technologies

By clicking »Accept« or continuing to use the site, you agree to the use of CREATE3000 and third-party cookies and other similar technologies to enhance your browsing experience, analyze and measure your engagement with our content, and provide more relevant ads on CREATE3000 websites and others. Learn more about cookies. You can withdraw your consent at any time.