Introduction

When upgrading software, developers expect performance improvements. However, sometimes upgrades can have unintended consequences, as was the case when we were upgrading and optimizing Babylon.JS from version 5.0.0 to 7.0.0. Babylon.JS is  one of the most popular JS Framework that allows 3D rendering and experiences using HTML5 and WebGL.

A significant hurdle faced by many developers was related to the “MeshWriter” library, which generated text meshes for 2D scenes. After upgrading, text meshes created using “MeshWriter” began generating an overwhelming number of vertices—up to 40,000 compared to the previous 1,500–4,000.

This blog explores the root cause of this issue and introduces a new method for rendering text in Babylon.js using GUI text textures, which significantly boosts performance.

Why “MeshWriter” Generate More Vertices in Babylon.JS 7.0.0?

The issue arises from how Babylon.js handles curves in meshes. In versions prior to 6.0.0, Babylon.js had a custom implementation of the “addQuadraticCurveTo” function with a parameter called “curveSampleSize”, which had a default value of 36. This parameter controlled how many segments were used to smooth out curves. A higher “curveSampleSize” value meant fewer segments, resulting in fewer vertices and a simpler mesh.

Starting with Babylon.js 6.0.0, the library switched to a default implementation of “addQuadraticCurveTo”, where the “curveSampleSize” was reduced to 6. This change increased the number of vertices exponentially, impacting the performance of applications using “MeshWriter”.

The Solution For Optimizing Babylon.JS Upgradation

Replace MeshWriter with GUI Textures.

The best way to address this issue is to replace “MeshWriter” with Babylon.js GUI text textures. Instead of creating a high-vertex mesh for text, GUI textures render text as a 2D image, which can then be applied to a plane. This approach eliminates the performance bottleneck caused by excessive vertices.

Implementation:

Migrating to GUI Textures : Below is the new implementation for creating text using GUI textures.

• Generate Text Mesh with GUI Texture : This function creates a plane and applies a text texture to it.

• Calculate Text Width :To ensure proper scaling, the “getTextWidth” function calculates the width of the text in pixels.

Example (Optimizing Babylon.Js):

 Converting “MeshWriter” to GUI Textures : Here’s how you can migrate from the old “MeshWriter”

Implementation:

Old Implementation (MeshWriter)

New Implementation (GUI Texture)

Benefits of the New Approach

• Performance Boost : GUI textures eliminate the need for high-vertex meshes, reducing rendering complexity and improving frame rates
• Scalability : The new method handles text rendering more efficiently, even in scenes with a large number of text elements.
• Flexibility : GUI textures support advanced styling options, including custom fonts, colors, and alignments.
• Cross-Version Compatibility : Unlike “MeshWriter”, GUI textures do not rely on deprecated features, making them future-proof.

Final Thoughts

While upgrading libraries, performance regressions can sometimes occur, as seen with Babylon.js and “MeshWriter”. By adopting GUI textures, you can optimize text rendering and future-proof your application. This approach not only resolves performance issues but also unlocks additional styling possibilities, making it a win-win solution.

Have you faced similar challenges while upgrading your Babylon.js projects? Share your experience and solutions in the comments!

Do feel free to Contact Us or Schedule a Call to discuss any of your projects

Author : Mr, Yugma Gandhi