Future to the fantasy ★ ★
X3D Editor

Cobweb 2.3

WebGL X3D Browser

Something special, something more!


A full standard compliant VRML browser!

Donate to your favourite X3D Editor and Browser on PayPal!

Cobweb X3D Browser

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 shadows, 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.


Developer Information

  • Supported browsers: Google Chrome, Chromium, Firefox, Microsoft Edge, Opera Browser, and Safari.
  • Right click to display the context menu.
  • Click into the X3D browser window to activate keyboard input.
  • Use Page Up and Page Down to navigate between viewpoints if any.
  • Errors are reported in the JavaScript Console of each browser.

X3D Examples Library

All examples are available at GitHub. They are not specially made for Cobweb but most of them are found on the Internet and are provided »as is«. Follow the instruction to download here.

Cobweb 2.3 Released

Leipzig, 21. October 2016: We finally released version 2.3 now. This version fixes an issue of the context menu for multiple <X3DCanvas> elements, ie. multiple browsers on one web page are now officially supported and an issue with XHTML CORS images, video and audio is fixed, they should load now fine on XHTML pages.

Cobweb 2.2 Released

Leipzig, 20. October 2016: We finally released version 2.2 now. This version implements all vertex attributes, ie. the Shaders component is now more complete. Learn how to use custom shaders. We fixed a fatal bug in imported nodes, thus the IMPORT statement is now finally working at all. Additionally we found a solution for cloned pointing device sensors, so almost all nodes can be cloned, except ParticleSystem nodes and now the fullscreen menu item does always work in Chrome and Opera.

Cobweb 2.1 Released

Leipzig, 3. October 2016: We finally released version 2.1 now. This version is the first hot and fresh update for Microsoft Edge Browser. To let Cobweb run in Microsoft Edge we had to modify Cobweb a little bit, but this changes will led to an even more cross browser compatibility.

Cobweb 2.0 Released

Leipzig, 27. September 2016: There is a major change in Cobweb for version 2.0, instead of the <X3D> tag, authors must now use the <X3DCanvas> tag. It is much cleaner and more specification conforming to not use the <X3D> tag since the X3D element is already specified in the X3D XML encoding standard as root element. This means if you want to use version 2.0 with existing HTML5 pages, you must replace the <X3D> tag by the <X3DCanvas> tag. Don't forget to update your CSS, too! Learn how to embed Cobweb within a webpage now.

Additionally we have reworked the internal traverse functions and could optimize them very much. Cobweb is now 20 % up to 30 % faster if the scene contains a lot of objects. Besides this, ParticleSystem nodes now also draw shadows and correctly handle transparent geometry nodes now.

An important change has become the walk viewer. The walk viewer is now always subject to the gravitation regardless whether there is a floor under the viewer or not. Use the fly viewer if you do not wish that the viewer is being attracted by the gravitation.

Andeas Plesch wrote a nice plugin for Cobweb to support HTML DOM integration. It is hosted on GitHub at https://github.com/andreasplesch/cobweb_dom. In the »tests« directory there are some examples how to use it.

Cobweb 1.28 Released

Leipzig, 20. Sptember 2016: With its new and up to date version 1.28, Cobweb implements dynamic shadows now.


For a live demonstration have a look at:

Cobweb 1.27 Released

Leipzig, 10. September 2016: We finally released Cobweb version 1.27 now. This release fixes a issue with particle rendering, a issue in StaticGroup is fixed if a ProximitySensor is inside the group. We fixed an issue in Text when length and maxExtent are applied. A great change has come for shader writers, the defined constants are now built-in.

Core Features

Cobweb is freely downloadable for any usage and licensed under the GPL3.

  • Cobweb works seamlessly together with Titania
  • Full VRML2 support, complete and standard compliant
  • High performance JavaScript rendering engine
  • Full VRML Script support
  • Advanced prototyping support
    • unlimited nested prototypes
    • multiple IS references
    • extern prototypes support
  • Advanced shading
    • specification conform Gouraud and Phong shading
    • support for eight simultaneous lights for each Shape node
    • Color node support
    • smooth texture mapping
    • autogenerated normals depending on creaseAngle value
  • Support for complex routing graphs
  • Unbreakable collision detection and terrain following support
  • Support for MovieTexture and Sound node
  • Support for Text and remote font files
  • Prepared for the rich set of standard X3D nodes,
  • and everything you dreamed of.

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.

<!DOCTYPE html>
      <meta charset="utf-8"/>
      <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/create3000/cobweb/master/stable/2/2.3/cobweb.css"/>
      <script type="text/javascript" src="https://cdn.rawgit.com/create3000/cobweb/master/stable/2/2.3/cobweb.min.js"></script>
X3DCanvas {
   width: 768px;
   height: 432px;

      <X3DCanvas src="path/to/your/X3D/world.x3d">
         <p>Your browser may not support all features required by Cobweb!</p>

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 EncodingFile ExtensionMIME Type
VRML.wrl, .wrzmodel/vrml
Classic VRML.x3dv, .x3dzmodel/x3d+vrml
XML.x3d, .x3dvz


For more information how to configure your web server see here.

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, like currently all other browsers than the recent version of Firefox or older versions of that. 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:

<X3DCanvas src="world.x3d">
   <p>Current stock price: $3.15 +0.15</p>

<X3DCanvas src="world.x3dv">
   <img src="images/clock.png"/>

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 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.


<X3DCanvas cache="true" src="path/to/your/X3D/world.x3d"></X3DCanvas>

Keyboard Shortcuts

Before you can use the keyboard you must click into the X3D browser window to activate keyboard input.

  • Use Page Up and Page Down to navigate between viewpoints.
  • Use Ctrl + + to display some browser timings.
  • You can toggle the shading by pressing Ctrl + [1-5]
    1. Pointset
    2. Wireframe
    3. Flat shading
    4. Gouraud shading (default)
    5. Phong shading
  • Use Ctrl + s to toggle browser live mode.

Dynamic Shadows

As of version 1.28, Cobweb and Titania implement dynamic shadows as an experimental feature which is not included in the current X3D standard yet.

Dynamic shadows in Titania

Learn more about dynamic shadows.

Custom Shaders

When you display your 3D models with Cobweb by default it will use our Gouraud shader. This is a versatile shader that can cover a lot of your rendering needs. If this is not enough there is also a Phong shader available, adjustable with the browser shading option per scripting.

However, you will often want to perform special effects or special cases for your materials. To do this you will need to write a custom shader.

Learn more about custom shaders.

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.

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.

Supported Profiles

Cobweb has achieved the X3D Immersive Profile support (which matches the VRML97 palette) verified by the X3D consortium at web3d.org.

Supported Components

All nodes listed below are intended to be completely implemented otherwise report a bug.


  • CADAssembly
  • CADFace
  • CADLayer
  • CADPart
  • IndexedQuadSet
  • QuadSet


  • Statements
    • UNIT
    • META
    • PROTO
    • IS
    • DEF
    • USE
    • IMPORT
    • ROUTE
    • EXPORT
  • MetadataBoolean
  • MetadataDouble
  • MetadataFloat
  • MetadataInteger
  • MetadataSet
  • MetadataString
  • WorldInfo


  • ComposedCubeMapTexture


  • Background
  • Fog
  • LocalFog
  • TextureBackground


  • ProximitySensor
  • TransformSensor
  • VisibilitySensor


  • BooleanFilter
  • BooleanSequencer
  • BooleanToggle
  • BooleanTrigger
  • IntegerSequencer
  • IntegerTrigger
  • TimeTrigger


  • ColorChaser
  • ColorDamper
  • CoordinateChaser
  • CoordinateDamper
  • OrientationChaser
  • OrientationDamper
  • PositionChaser
  • PositionDamper
  • PositionChaser2D
  • PositionDamper2D
  • ScalarChaser
  • ScalarDamper
  • TexCoordChaser2D
  • TexCoordDamper2D


  • Arc2D
  • ArcClose2D
  • Circle2D
  • Disk2D
  • Polyline2D
  • Rectangle2D
  • TriangleSet2D


  • Box
  • Cone
  • Cylinder
  • ElevationGrid
  • Extrusion
  • IndexedFaceSet
  • Sphere


  • GeoCoordinate
  • GeoElevationGrid
  • GeoLocation
  • GeoLOD
  • GeoMetadata
  • GeoOrigin
  • GeoPositionInterpolator
  • GeoProximitySensor
  • GeoTouchSensor
  • GeoTransform
  • GeoViewpoint


  • Group
  • StaticGroup
  • Switch
  • Transform


  • ColorInterpolator
  • CoordinateInterpolator
  • CoordinateInterpolator2D
  • EaseInEaseOut
  • NormalInterpolator
  • OrientationInterpolator
  • PositionInterpolator
  • PositionInterpolator2D
  • ScalarInterpolator
  • SplinePositionInterpolator
  • SplinePositionInterpolator2D
  • SplineScalarInterpolator
  • SquadOrientationInterpolator


  • Layer
  • LayerSet
  • Viewport


  • Layout
  • LayoutGroup
  • LayoutLayer
  • ScreenFontStyle
  • ScreenGroup


  • KeySensor


  • DirectionalLight
  • PointLight
  • SpotLight


  • Billboard
  • Collision
  • LOD
  • NavigationInfo
  • OrthoViewpoint
  • Viewpoint
  • ViewpointGroup


  • Anchor
  • Inline
  • LoadSensor


  • CoordinateDouble


  • BoundedPhysicsModel experimental

  • ConeEmitter
  • ExplosionEmitter
  • ForcePhysicsModel
  • ParticleSystem*
  • PointEmitter
  • PolylineEmitter
  • SurfaceEmitter
  • VolumeEmitter
  • WindPhysicsModel

* not clonable


  • CylinderSensor
  • PlaneSensor
  • SphereSensor
  • TouchSensor


  • ClipPlane
  • Color
  • ColorRGBA
  • Coordinate
  • IndexedLineSet
  • IndexedTriangleFanSet
  • IndexedTriangleSet
  • IndexedTriangleStripSet
  • Normal
  • PointSet
  • TriangleFanSet
  • TriangleSet
  • TriangleStripSet


  • Script


  • ComposedShader
  • FloatVertexAttribute
  • Matrix3VertexAttribute
  • Matrix4VertexAttribute
  • ShaderPart


  • Appearance
  • Material
  • Shape
  • TwoSidedMaterial


  • AudioClip
  • Sound


  • FontStyle
  • Text


  • ImageTexture
  • MovieTexture
  • PixelTexture
  • TextureCoordinate
  • TextureProperties
  • TextureTransform


  • TextureCoordinate3D
  • TextureCoordinate4D
  • TextureTransform3D
  • TextureTransformMatrix3D


  • TimeSensor

* Partial implemented, i.e. not all nodes of this component are available.
* New nodes.
* Coming soon

X3D International Standards

Cobweb is based on the the X3D International Standard and this standard is available online on web3d.org on the pages listed below. You can read there all about node types and JavaScript functions and properties available.

X3D Specifications

Language bindings

VRML Reference

Cobweb is based on the X3D International Standard where VRML is a subset of X3D. Cobweb supports the full VRML standard that is available online at:

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