Interactive 3D tools & services by VHLab – CNR ISPC
Bruno Fanini 
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.
A massive update for WebGL Front-End has been deployed. Here’s a list of improvements and new features
Improved 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
New embed dialog (similar to POV dialog): it provides HTML code for use in your external web pages, enriching content with an interactive canvas
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.osgjsml=mytest/mymodel.osgjsMultiple nodes can be grouped by “;” – Examples:
ml=mytest/modelA.osgjs;mytest/modelB.osgjsml=mytest/“pano”: loads a panoramic (equirectangular) image and attach to on-the-fly spherical geometry. Examples:
pano=mypano.jpgNotice you can have three different scenarios for interactive exploration:
“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.121The 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
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 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: