Showcasing offshore solutions which are installed in deep sea and floating is very challenging.

We in Someshwara helped Trelleborg by building a 3D virtual ocean environment where all thier solutions are installed in the exact way how its used in real world.

Trelleborg, a $9B revenue company, wanted to showcase their offshore solutions with better experience. When Trelleborg reached out to us, we were a perfect fit with significant expertise in 3D modeling, WebGL, AR (Augmented Reality) and VR (Virtual reality).

One of the main goals was to enable the project to run in the browser. With significant number of models and sea effects, this was a difficult task. We wanted to enable the end user to explore an immserive offshore location, where each product like oil regs, FPSOs and windfarms are displayed. Including subsea cabling and solutions in situ.

Here is a video of the final solution to give a very brief overview of the solution that was developed.

Trelleborg Offshore Interactive Environment

Interactivity

One of the key user experience drivers is the quality of the display. As its a first impresssion for end users, this needs to be impressive and responsive.

Inorder to achive good results, custom materials and textures can be used to enhance the quality of the output, but in doing so would also affect the size and performance of the application. Especially for webgl.

To address these, first step in creating a perfromant 3D applciation starts with creating low poly models. Lower amount of polygons the better performance. This step requires 3D artistic design capability to balance the result.

We were also able to get higher quality by using lightmapping. Lightmapping was one of the key steps in generating a high definition scene for webgl. This consumes significant compute and we had the necessary expertise and hardware to achive the same. Making water realtime at the same time making the models appear realistic isn't possible without using custom lightmapping.

Bridiging the interative gap.

We also had to create custom shape colliders inorder for the custom interactivity to function correctly. If we use default collision mechanisms there were lot of misclicks and the experience was just breakding down.

Direction of a movie is everything, camera plays an important role in the story narrative. We had specific requirements on how to showcase the product well. There were significant iterations in the camera movement and strategic placement of the scene. For this we created a custom camera tracking library which allowed us to easily script the paths and get to the desired movement.

Visual Effects

Underwater caustics was a challenge, as it needs to give the undersea effect, all the while maintaining a good FPS. We created a custom shader to enable the effect to run in WebGL effectively. This would help create the desired effect, while maintaining performance.

We also built a custom render piplenine, so that we can integrate our shader and rendering for all models. Specifically we were able to control the hotspot overlays and see through effects that are so informative to understand the product.

Lighting conditions of the scene are a big factor in how the scene is perceived. We have created multiple scenes like dusk, dawn, night, daylight. All of them were evaluated and the best one chosen. In the end the performance of the scene was critical to drop all additional views and only one was chosen to be loaded.

API Integration with JS

The information is very dynamic and one of the other goals was to be able to obtain the data dynamically through API's. For this we created a custom bridge framework to be able to interact with existing API's and to obtain relevant information from Trelleborg servers.

We are very excited and thrilled to see this go live and work to enhance this even further.

Love to hear your feedback and suggestions hello@someshwara.com

Link to Product : Trelleborg Mimir Offshore Interactive Tool