Official project page for WebGL Front-End now live

The official page for WebGL Front-End – codename Aton – is now live. You will find a complete description of all its latest capabilities, demos and other showcase.

A live demo has been published about the 3D interactive Massenzio Mausoleum along with metadata presentation as well – including a brief description, reference paper, a few POVs and also a youtube video.

Improvements and new dialogs for WebGL Front-End

A massive update for WebGL Front-End has been deployed. Here’s a list of improvements and new features

  • Improved spherical panoramas handling and support
  • Added double-click hotspot feature: user can now double-click any point of the 3D model to smoothly focus camera on target. On mobile tablets and smartphones the same feature is bound to double-tap – try it live!. This feature is very useful on large-scale datasets to adaptively scale and focus targets or specific items
  • ccamImproved POV (Point-of-View) dialog: now the button shows an drop-down overlay with both permalink (3D scene + POV) and the bbCode – useful for text descriptions. During the exploration of the 3D scene the user can now simply press the POV icon (or press ‘c’) to show the drop-down dialog with current POV information and links ready for online sharing
  • ii-embedNew embed dialog (similar to POV dialog): it provides HTML code for use in your external web pages, enriching content with an interactive canvas
  • Performance boost in several areas
  • CSS improvements

Customizing the WebGL Front-End

This is a bit more technical post about customizing the main PHP component, responsible for main HTML5/js Front-End presentation and deployment on multiple devices. Here is a brief list of features and capabilities offered so far as GET arguments, useful for permalinks and/or embed in external pages.


“ml”: define nodes (3D assets) to be loaded from the online collection. For instance:

  • ml=ref.osgjs
    will load the single node “ref.osgjs” (basic coordinate system) – see here a live demo
  • ml=mytest/mymodel.osgjs
    will load the node “mymodel.osgjs” inside the subfolder “mytest”

Multiple nodes can be grouped by “;” – Examples:

  • ml=mytest/modelA.osgjs;mytest/modelB.osgjs
    will load both modelA and modelB
  • ml=mytest/
    is a shorthand to load an entire folder and it will load all nodes contained in “mytest” sub-folder. Note the “/” at the end

“pano”: loads a panoramic (equirectangular) image and attach to on-the-fly spherical geometry. Examples:

  • pano=mypano.jpg
    will load the equirectangular image “mypano.jpg” and attach to special sphere geometry – live demo

Notice you can have three different scenarios for interactive exploration:

  1. 3D models only (“ml” provided but no “pano” option provided)
  2. Spherical panorama only (only “pano” argument provided)
  3. Both 3D models + spherical panorama (“pano” and “ml” both provided)

“alpha”: enables a transparent background. This is useful when embedding the component in external web pages for styling purposes. Here is a demo with “ref.osgjs”viewer.php?ml=ref.osgjs&alpha – Notice how the background is now white. Try embedding it in another web page with its own background to see the blending.


“pov”: tells the Front-End to load a starting POV (Point-of-View) by using smooth camera transition. The POV string is composed by 6 values encapsulating eye (x, y, z) and target (tx, ty, tz) positions. Examples:

  • pov=-1.674 -2.996 1.159 -1.733 2.900 0.121
    will first load assets (a panoramic image and/or 3D models) and then load the POV – live demo

The Front-End of course provides shortcuts to provide user with current POV, thus allowing to share the current 3D scene and a specific camera position

Terrain Service now integrated with WebGL Front-End

The Terrain Service for ARIADNE infrastructure, has been integrated with the WebGL Front-End! – Have a quick look here for a live demo

That means in the output section, the user can now select “JSON Multi-Resolution” option to generate and publish online a paged, optimized multi-resolution dataset and explore the 3D terrain in all its glory, eventually presenting attached metadata. The server will take care of geometry optimization, OpenGL ES optimization, texture processing + compression and quad-tree paged structure for efficient streaming. This new feature will expand current Desktop segment output (common formats such as OBJ, 3DS, FBX and others) and remote rendering output for low-end devices (not yet supporting WebGL) thus covering a wide range in output section.

A new WebGL/HTML5 3D Front-End

A flexible web component has been developed to publish multi-resolution 3D assets online and to explore them interactively on modern browsers. The Front-End (PHP + JavaScript) is based on osgjs, jQuery, Gunzip and modern HTML5/CSS capabilities. For those unfamiliar with the osgjs library, it’s the same javascript library used by SketchFab platform. Such component is conceived to interact with complex and multi-resolution 3D scenes, large 3D terrain datasets and items on both desktop and mobile browsers, while maintaining high performance through state-of-the-art organization (scene-graphs), resource management and paging techniques.

A quick glance at current main features:

  • SceneGraph based: hierarchical culling, instancing for efficient streaming, ease of composition and organization for complex scenes, efficient handling of spatial transformations, multiple nodes loading and much more…
  • Multi-texturing, paged multi-resolution, geometry and texture compression
  • Support for several peripherals out-of-the-box: mouse, keyboard, gamepad, LeapMotion and others
  • Multi-Touch enabled on desktop browsers and mobile devices (tablets and smartphones)
  • Easy embed in web pages
  • Support for metadata presentation through server-side or cross-server (external) XML files
  • Support for POV (Point-of-Views): management of camera transitions and navigation states, permalinks for easy sharing (QR-codes, etc.)
  • Support for Spherical Panoramas (equirectangular)
  • VR Support (experimental) for OculusRift 2