Guidelines for creating 3D models

June 14, 2016

We have listed some guidelines for creating 3D models, that look nice and run smoothly in web-browsers. 

3D Wayfinder uses regular 3D models, so there is no special format or way how the 3D floorplans should be modeled. As 3D Wayfinder works in web-browsers through WebGL technology, then in order to get better results the 3D models should be optimized. Read below for some useful tips and tricks on optimizing 3D models for the best performance.

For example keep the 3D geometry simple and use textures, that can be repeated:


An important element of 3D floorplans are different kinds of vegetation (trees, bushes etc.). They help to make the floorplans look more life-like and in some cases are also important for navigating on the map. It is easy to use transparent textures on the simple planes, just never model out the leaves or branches:


With 3D it is possible to create really life-like buildings, but when using 3D for maps, it is always good to keep the models simpler. For this we suggest removing un-important furniture and making the walls as low as possible without losing the general idea of the height of the room. This way the visibility of the visualized path is far greater.


You find the full list of guidelines for creating 3D models are added 3D Wayfinder page here.

« »

New reflection feature in our 3D engine

December 18, 2015

FRAK WebGL engine has now built in Cubemaps and reflection shader. This gives 3D Wayfinder access to use reflections of surrounding area.

We have added built in cubemaps and cubemap reflection shader to FRAK WebGL engine. In addition reflection with cubemaps is efficient way to create reflective surfaces like glass or mirrors.
Also cubemap reflection is a rendering method. It means that reflective surfaces reflect the cubemap textures.


It will be available for 3D Wayfinder in near future. This will be the effective way to create large glass walls or buildings. It make them more realistic. It might be used also for expensive shopping mall floors.

Next feature in FRAK will be specular map to mark efficiently reflective areas.

Cubemap demo can be found under FRAK repository.

« »

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.

« »

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

« »