Tag: 3D rendering in wayfinder

3D Wayfinder supports now GLTF for 3D floorplans and SVG for 2D floorplans. This provides new features and better-looking maps.

Now there is a support for new 3D model format GLTF for 3D maps and also integrated support for SVG (vector-based images) for 2D maps. GLTF enables smaller files size and new possibilities to make 3D maps better-looking. SVG at the same time makes 2D map creation easier, as SVG is vector-based format. This allows to upload maps with mark ceilings or areas (by SVG polygons). Therefore with our wayfinding software these ceilings can be link with locations and they can be clickable and highlighted.

We will write about SVG benefits in new post also we will provide short tutorials, how to use SVG in 3D Wayfinder. Here we will cover GLTF as this opens up a whole new world for 3D maps.

In the dynamic world of web development, technology is constantly evolving to create richer and more immersive experiences for users. One such innovation that has been making waves is the GLTF (Graphics Library Transmission Format) format for 3D. GLTF is changing the game by enabling efficient and seamless integration of 3D graphics into web applications, paving the way for a new era of interactive and visually stunning online content. Now we have also GLTF support in 3D Wayfinder.

GLTF stands for Graphics Library Transmission Format. GLTF is an open standard file format design to store and exchange 3D scenes and models with the purpose to optimize transmission and rendering across different platforms and devices. The format is Develop by the Khronos Group (same consortium behind widely use standards like OpenGL and Vulkan). The goal of GLT is to remove limitations of existing 3D file formats and enabling efficient delivery of 3D content on the web.

Advantages of GLTF

• Compact File Size: GLTF employs efficient compression techniques to minimize file sizes without compromising on visual quality. This is crucial for web applications, as smaller files ensure faster load times and smoother user experiences. With 3D Wayfinder, it will make loading 3D maps faster. Also, there is no need for converting 3D models, when uploading maps to 3D Wayfinder.

• Ease of Integration: GLTF files are specifically designed to work seamlessly with modern web technologies like WebGL, making it easier for developers to integrate 3D content into their websites without extensive workarounds or plugins.

• Support for PBR: Physically Based Rendering (PBR) is a technique that simulates how light interacts with surfaces in the real world. GLTF supports PBR, allowing for highly realistic and visually captivating 3D graphics.

• Animations and Interactivity: GLTF supports animations and allows developers to define interactive elements within the 3D scene. This capability opens the door to creating engaging interactive experiences that go beyond static visuals.

Please stay tuned, as we will write more about SVG support also in near future.

Our goal at 3D Wayfinder has always been to bring affordable products and services, without sacrificing quality. Accordingly, we have made a few updates in our 3D model rendering. We are constantly updating our software to enhance your experience and to stay competitive in the venue management and digital signage market.

Like in motion pictures, computer graphics create images at a certain frequency – frames per second (FPS). This dictates how we perceive motion and the smoothness of it. For example, early silent films had a FPS of about 16-24. This was enough to give a lifelike representation of movement, that would amaze people. Our usual frame rate is 30 FPS, because anything larger is unnecessary. In addition, FPS also affects the performance of the devices that process it. Obviously, the higher the FPS and the level of detail, the more resources a device has to allocate to display it.

Our 3D models have a varied level of detail, according to the client’s wishes. For instance, a 3D model of a hospital can contain chairs, people and beds with pillows and blankets.

More Detailed Shadows Without Reducing Performance

In order to reduce pressure on the device’s GPU (Graphics Processing Unit) we have stopped the rendering of shadows for every frame. The position of a theoretical sun in the model is always the same. Therefore the shadows stay the same as well. There is no need to waste resources on rendering shadows again and again. The shadows still change according to the number of floors displayed. This allows the device to save energy and use it’s processing power for other needs.

Moreover, we added an option to increase the level of detail for shadows. Until now we used a 2048×2048 image for shadows, which is fine for smaller projects. Now it is possible to increase size from our settings page depending on the hardware capabilities of your project. This doesn’t reduce the device’s performance in a significant way, but does offer a more realistic experience.

These might be a small changes, but we believe that fine-tuning details like these make us the market leader!

We have added full screen mode to FRAK WebGL engine. Now it is possible to create 3D Wayfinder templates that can open 3D floor plans in full screen.

Full screen with browsers is being used for watching videos, using map application, playing games etc. Usually wayfinding applications are configured to run in full screen by default. So there will be no need for separate full screen mode from browser. When embedding 3D Wayfinder in web-pages or web based applications, going full screen can be really useful. This gives the possibility to experience 3D content through the whole screen when needed. Also in normal state 3D canvas can be mixed with other HTML content keeping the 3D area smaller and it needs less performance.

To use full screen mode with FRAK engine you have to make following API call:
Engine.requestFullscreen(useUpscaling)

Exiting full screen:
Engine.exitFullscreen()

Engine.requestFullscreen() has to be called by a user interaction (i.e. click on a button), as browser need user action for going full screen.
If “useUpscaling” is set to true the canvas is resized to screen dimensions, but rendering will continue at the original resolution. This allows for faster rendering, but the image quality will suffer.

Full screen is required for stereoscopic rendering, this we will also add to 3D Wayfinder soon to provide real-time 3D experience with 3D Wayfinder. Stay tuned!

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.

Recently we introduced improved transparency in 3D Wayfinder handling to FRAK engine. It can now be configured between three transparency rendering modes: sorted, blended and stochastic.

The sorted mode is what used to be the default earlier. There is mainly for backwards compatibility and fallback reasons. This can be used for decent transparency. But the geometry has to be modeled while keeping in mind that transparent meshes are compared by their centers.

Failure case for the old algorithm:

The first of the new modes is blended and it uses the weighted blended order-independent transparency algorithm. Also with a few modifications related to handling alpha-mapped surfaces. This mode is the new default for the engine. Since floating point textures seem to be supported by most browsers these days.

Weighted Blended Order-independent Transparency:

The second new mode is stochastic. It is still a work in progress. But a viable alternative for certain situations. Stochastic transparency in 3D Wayfinder works by using random noise to give each transparent surface a proportional probability of getting through to the camera. This provides slightly more physically correct results. Currently is a bit too noisy.

Stochastic Transparency: