Welcome Screen for Wayfinding Application and Changing Farme-Rate for FRAK

June 8, 2015

Some of our customers prefer a “Welcome” screen for their wayfinding application. Welcome screens are good way for inviting visitors to use wayfinding, it is also a page where you can show advertisements or welcome text. To minimize the load for kiosks we change the frame-rate of our WebGL rendering engine FRAK. 

wayfinding_welcome_screen

Welcome page is configur as an idle-page, when no one is using wayfinding. Usually it is set to 10+ seconds after idle time, when the welcome screen is displayed. On this view, we are hiding wayfinder map component and directory. When visitor starts to use wayfinding, then welcome screen close and floor plans with directory are activate. Certainly, the welcome screen is also helpful for customers to understand what the screen is about. Also a great way to advertise for businesses located in the mall.

To save the kiosk pc and graphics card (GPU) we set the 3D rendering (see FRAK WebGL engine) also idle. This is important for limiting the frame-rate to a minimum. Frame rate change can be invoke with Engine.startIdle(fps) and return to normal operation with Engine.stopIdle(). See 3D Wayfinder API for specific documentation.

We have also fixed a bug in SmoothOrbitController that made animations oscillate on very low frame rates.

« »

Lights, Shadows and Deferred Renderer

June 1, 2015

Thanks to implemented deferred renderer it is possible to create and manage lights on 3D Wayfinder Administration panel. This means also real-time shadows, point-lights and multiple directional lights.

Deferred rendering is an alternative approach to rendering 3d scenes. The classic rendering approach involves rendering each object and applying lighting passes to it. So, if an object is affected by 5 lights, it will be rendered 5 times, once for each light, in order to accumulate the effect of each light. This approach is called “forward rendering”.

Deferred rendering takes another approach: first of all of the objects render their “lighting related infomation” to a texture (G-buffer). This includes their colors, normals, depths and any other info that might be relevant to calculating their final color. Afterwards, the lights in the scene are rendered as geometry (sphere for point light, cone for spotlight and full screen quad for directional light), and they use the G-buffer to calculate the color contribution of that light to that pixel.

Using deferred renderer decreases performance a bit, but with proper GPU, the frame rate drops only by 1-2 frames per second.
Lights can be added and managed from „Lights” tab in editor window.

Lights management in 3D wayfinder

 

 

There are 3 types of light:

  • Omnidirectional – this is point light, it is possible to change light radius and intensity.
  • Directional – this makes global directional light, like sunlight
  • Ambient – With ambient it is possible to change the overall lighting of the whole 3D model.

 

So lets get started with adding lights and see, what will happen in our 3D scene.

First we have turned on deferred renderer. With default settings, it is currently not turned on.

Deferred renderer options

 

 

 

 

 

To use custom lighting model on Wayfinder application side, we have to enable deferred renderer.

 

Now we can see shadows:

Deferred renderer and shadows in 3D Wayfinder

 

Now we have added 2 point-lights. From the settings we have selected „Omnidirectional” and by playing with radius and intensity we get the desired result. One of the lights is white and another one yellow:

 

Point lights added to 3D Wayfinder

 

At the same time we have lost the default ambient color. So now everything looks a bit too colorful. To get the ambient color back, we added one ambient type light.

So far we used default ambient color, which is gray.

It doesn’t matter for ambient and directional light, where they are positioned in the 3D floor plan. For clarity and easier management we have made them same kind of „cubics” as omnidirectional light. So you can position them wherever you like.

After adding gray ambient color, we get this:

Ambient light added to 3D scene

 

Now lets add a custom directional light. Lets say that we prefer shadows in other direction and this front-side of the building to be more lightened.

With directional light it is important to turn the direction of the light. For this we need to check „move manually” and then select rotate.

Changing light in 3D editor

 

After saving we see a picture with different shadows:

Directional light added to 3D scene

 

Well, the shadows are really long and the whole scene looks a bit dark.

But we can always add another directional light. Of course adding each directional light, affects the performance, as for every light there will also be shadows rendered.

So go ahead and test the magical world of lights in 3D.

« »

Faster Loading with JSON 3D Model Format

May 25, 2015

Now the JSON 3D model formats are also implemented in 3D Wayfinder. This gives us better browser-side loading time as browsers’ native JSON parser is faster, than parsing binary models in Javascript. The average gain in loading time is 55%, which means that 3D Wayfinder is loading more than 2 as fast as before.

Below are testing results with 2 different project. It seems, that the improvement affects more larger projects.
We have made a minor change in loading logic also. Now the application will render the 3D models before all the textures are downloaded. Textures will appear as they are loaded. This allows to start using 3D wayfinder as soon as the 3D model files have been loaded.

Here are the initial test results for 2 projects:

1. Project: demo
———————————————–

Project statistics:
Visible faces (opaque/transparent): 5653/646
Visible renderers (opaque/transparent): 10/24
Visible batches (opaque/transparent): 10/4

Total geometry loading time (measured by floors):
Binary format: 1666.570ms + 1941.258ms = 3607.828ms
JSON format: 846.446ms + 945.121ms = 1791.567ms

Loading times without network transfer time:
Binary format: 1211.667ms + 1149.466ms = 2361.133ms
JSON format: 46.198ms + 31.087ms = 77.285ms

2. Project: Large customer project
———————————————–

Project statistics:
Visible faces (opaque/transparent): 229533/6459
Visible renderers (opaque/transparent): 629/13
Visible batches (opaque/transparent): 49/13

Total geometry loading time (measured by floors):
Binary format: 23673.256ms + 13435.160ms + 4924.420ms = 42032.836ms
JSON format: 10225.722ms + 2929.486ms + 3642.354ms = 16797.562ms

Loading times without network transfer time:
Binary format: 20016.574ms + 11549.349ms + 3087.721ms = 34653.644ms
JSON format: 226.997ms + 136.840ms + 70.465ms = 434.302

JSON model specifications can be found from FRAK Github repository.

« »

3D vs 2D Wayfinding

May 18, 2015

What is the difference between 3D vs 2D wayfinding and what are the benefits of 3D floor plans?

We have tested 3D, semi-3D and 2D floor-plans with our small focus-group and below is the short summary.

3D_vs_2D_wayfinding_maps

To see the 3D floor-plans in action, please sign up to 3D Wayfinder for creating your own 3D floor-plans, or see our 3D modelling services and examples.

3D Wayfinder supports also 2D images for creating wayfinding application.

Semi-3D maps are rendered or designed floor plans, that are made to look like 3D. The map is rendered on an angle, so it is possible to see part of walls also.

We are using semi-3D maps for mobile devices, where WebGL is not supported yet.

3D vs 2D wayfinding floor plans

 3D floor plansSemi-3D floor plans2D floor plans
Overview of the building
  • 3D floor plans give a good overview of your location.
  • With 3D users see the map the way they see the building in real life.
  • It is possible to show the details, that people use for orientation inside building, for example escalators, pools, statues, tables, benches, trees etc.
  • Showing walls give a better understanding of where you are and it is easier to link the map with a real building.
  • It is easy to understand which floors have atriums and distinguish between things on different plains.
  • Semi 3D floor plans give also a good overview where you are.
  • Semi 3D can be shown only from the one angle, when looking from the other side, they can be are hard to understand.
  • Limited possibility to show the walls of the building.
  • Detailed 2D floor plans don’t give a clear overview, so it is better to use simple floor plans.
  • With simple maps the amount of details are limited.
  • It is hard for users to understand where they are and linking the map with real building is not that convenient.
  • With 2D it is not possible to show the walls of the building.
Usability of wayfinding application
  • 3D floor plans are easy to use. It is always possible to limit the zoom distances and even forbid rotation if needed.
  • Pathfinding is simple and 3D gives a good visual overview for navigating from one floor to another.
  • It is always possible to use camera view for path visualization.
  • Extra dimension enables to add more info.
  • Semi 3D floor plans are also easy to use, but it is not possible to rotate the maps.
  • Pathfinding is more convenient than 2D, as users can see some parts of the walls.
  • It is possible to add more info to the maps as 2D, but it is still not possible to add as many info/layers than 3D.
  • Rotating and moving is not that convenient, especially when looking on the vertical screen.
  • It is not convenient to guide visitors to other floors.
  • 2D floor plans should be kept simple, as there is limited space for layers and info.
  • Simple maps may not provide enough information and visitors may think, that the maps are not useful for them.
Map details and amount of information on the floor plans
  • With 3D there is one more dimension for presenting details and map related data.
  • Billboards on the map don’t disturb browsing.
  • It is possible to show details for better orientation.
  • It is possible to add more details than 2D maps, but the space for information is still limited.
  • Level of details should be kept as simple as possible, otherwise they disturb the understanding of the map.
  • Illustrated details cannot be presented in real size and it can be confusing.
Impression and imago of the building
  • 3D floor plans look nice and realistic.
  • Visitors have a sense of „controlling the building”, which makes them feel good
  • Users understand, that there has been more effort to make the wayfinding for them as good as possible.
  • Semi 3D looks prettier than plain 2D map.
  • Visitors may get disappointed when they try to turn the building, as they expect it to be real 3D.
  • With too simple 2D maps it is possible, that visitors may avoid using maps not to look foolish.
  • Detailed maps confuse visitors and they feel more lost than they were before stepping in front of the wayfinding application.
Displays and future technological possibilities
  • 3D wayfinding can work also with real 3D technologies like holograms, LED-cubes and 3D displays. Unfortunately these technologies are still in prototype phase.
  • With larger displays it is possible to add more details.
  • There is no reasonable point of showing more details with larger screen.
Advertising channel and Digital Signage integration
  • More advertisements can be shown on the maps, as the ads don’t hide the map.
  • Billboard ads on the maps look cooler and attractive.
  • Better than 2D but the advertisements still hide the map.
  • Advertisements disturb the using the wayfinding.
  • Less space for advertisements, as they hide the map behind them.

« »

Support for JSON 3D Model Format in FRAK WebGL Engine

May 12, 2015

We have released a new version of FRAK WebGL engine with support for JSON 3D model format. This decreases the browser-side loading time as browsers’ native JSON parser is faster, than parsing binary models in Javascript, as we used to do so far. Of course we will continue to support binary models also.

FRAK JSON model specifications can be found from FRAK Github repository.

3D Wayfinder JSON file format


Initial testing shows, that compressed JSON files are the same size as binary files, but browser side parsing is many times faster.

Here are testing results for parsing with different 3D geometry:

RGB box (12 poly)
With binary format: 250 ms
With JSON: 10-60 ms

Axis Test (3440 poly)
Binary: 300 ms
JSON: 36-60 ms

Wayfinding demo ground level (20069 poly)
Binary: 1265 ms
JSON: 50-70 ms

Browser side parsing time varies a bit, but even with larger models it should be less than 100 ms.

Support for JSON models will be available in 3D Wayfinder in near future. This will probably make the 3D Wayfinder application (with models) loading time smaller about 50%. Of course it will depend on the project size, textures, internet connection etc.

« »

Bumps and Dents in 3D with Normal Maps

March 24, 2015

With new material management, we have added also normal maps. Normal mapping is a technique used for faking the lighting of bumps and dents in 3D models – an implementation of bump mapping.

It is used to add details without using more polygons. Which means you can create smaller and faster models for 3D Wayfinder. Normal maps will enhance the appearance and details of a low polygon model by generating a normal map from a high polygon model or height map.

Here is an old town model without normal map:

3D Wayfinder without normal map

In following screenshot is the same model with normal maps applied:

3D Wayfinding with normal map. Bumps and dents in 3D models.

The result will look like the stones are all modeled out in 3D.

Here is the texture and normal map added to this texture:

Texture and normal map

To use normal maps, you have to select “Normal-mapped” for the material from the shader column.

Normal maps material selection

Then press “Edit” and you can upload texture and normal map image:

Selecting material for normal map

« »