HTML5

A DPF WebApp prototype

by

A WebVR prototype based on DPF framework has been deployed in order to test selected dataset from San Marino project. Several features were added to DPF.js library, for instance better a support for mobile device orientation, better semantic encoding, and built-in support for positional 6-DOF controllers such as Oculus Touch for locomotion among the DPF network, right inside the browser. Here is a quick video of recorded online browser session:

You can test out sample demo with semantic interrogation for mobile here, and a demo for desktop browsers with DPF-Network here.

rsm-single-sem

rsm-dpf-network

VR in your browser

by

During the last months several updates were rolled out for Aton – right before summer vacation. The WebVR one allows users to toggle immersive VR fruition of 3D models and archaeological areas through HMDs like Oculus Rift, HTC Vive and many others in WebVR-enabled browsers.

To get started with WebVR, you can download recent Chromium builds here and start exploring published 3D scenes through Aton Front-End. Among the goals of such feature is also realizing the so-called WebVR responsive concept, where the service adapts to your viewing environment by using fluid layouts, similar to Aton responsiveness for mobile devices (HTML5 UI, multi-touch controls, simplified shaders, etc..). Next steps will focus on proper traveling handling in order to offer a smooth HMD experience.

webvr2

The WebVR update for Aton also couples with another upcoming update for the desktop application (ovrWalker), targeting performance for complex, multi-resolution 3D scenes and 3DUI research applied to CH – watch the video here. VR features in Aton will be further enriched, as well as massive upcoming updates related to node loading – so stay tuned!

Fictional 3D Landscapes: the Game of Thrones map experiment

by

This is an ongoing experiment aiming to create a fictional 3D map of the famous Game of Thrones TV show. Landscape Services were used to generate multi-resolution base terrain combined with multi-layer imagery to exploit Aton‘ simplified PBR rendering.

Click on the following image to launch the interactive exploration (WARNING: 3D map contains spoilers of previous seasons).

got3
Click on this image to explore the interactive GoT fictional 3D map

Starting from a base imagery map, a DEM was created from scratch (isolating water, rivers, hills, etc…): in this case no geo-referencing (through world files) is involved, since world scale and extension are… quite fictional and pretty vague. Separate scene-graphs were built to handle simplified trees (mimicking those shown in opening credits), taking advantage of instancing capabilities, as well as a water level with own multi-texturing – all composed into a global scene. This experiment also introduces the new annotation features offered by Aton, to map major locations and/or events (for now). The scene is fully evolving: digital elevation model needs some fine-tuning, new annotations and 3D models of major cities / places will be eventually added to enrich the overall composition.

got-map-wip2

More info coming soon: this post will be updated!

A new PBR Model

by

Another major update for Aton is about to be deployed. A lot of work has been carried out to provide a modern, efficient and real-time PBR model. A lot of inspiration comes from Unreal Engine 4 (UE4 for short) and its advanced PBR system. WebGL world of course faces several limitations that need to be addressed, sometimes in “smart” ways or using approximation techniques (special PRT and SH solutions and much more) to reduce GPU workload.

pbr-samples
A few samples using the new Aton PBR model.

Check out this demo, or this one.
The new, upcoming PBR system combined with RGBE model for Aton, supports now:

  • Base map (diffuse or albedo)
  • Ambient occlusion map
  • Normal map
  • Roughness map
  • Metallic map
  • Emissive map
  • Fresnel map
pbr-d3d-b
The new Aton PBR with the new real-time rendering engine. Textures modified from http://hrp.duke4.net/
pbr-d3d
Close-up on variable roughness, reflections and indirect light contribution (bottom cube faces)

The new PBR maps workflow also has the objective to be as close as possibile to a workflow involving UE4 (or other modern real-time PBR engines), to fully reuse such maps (e.g. “Roughness“, “Metallic” pins in material blueprint in UE4). Nevertheless, the new model is also compatible with “basic” workflow, such as the classic diffuse-only 3D modeling (or diffuse + separate AO, etc..). Screenshots below show sample workflow in UE4 using same identical PBR maps applied to cube datasets:

ue4-wf
Sample workflow in UE4 material BP using same maps.

Of course these improvements will also extend to multi-resolution datasets (e.g. ARIADNE Landscape Services) to produce aestetically pleasing 3D landscapes by providing additional maps in input section, still maintaining efficiency of underneath paged multi-resolution. Furthermore, the Aton PBR system is also VR-ready, providing a realistic and consistent rendering of layered materials also on HMDs, on WebVR enabled browsers.

pbr-vr

To import and ingest 3D assets generated using common 3D formats (.obj, .3ds, ….and much more) into Aton system and its PBR system, the Atonizer service will be soon available.

Stay tuned!

Useful Links

Improvements and new dialogs for WebGL Front-End

by

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

by

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

by

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.