--- title: "Optimizing Babylon.JS Scene" url: "https://ansibytecode.com/optimizing-babylon-js-scene/" date: "2024-11-21T18:43:06+00:00" modified: "2025-08-11T13:28:48+00:00" type: "Article" resource: "https://ansibytecode.com/optimizing-babylon-js-scene/" timestamp: "2025-08-11T13:28:48+00:00" author: name: "Nishant Desai" url: "https://ansibytecode.com" categories: - "Java Script" - "ReactJS" - "Uncategorized" tags: - "BabylonJS" - "Mesh Writer" - "Migrating to BabylonJS" word_count: 520 reading_time: "3 min read" summary: "Introduction When upgrading software, developers expect performance improvements. However, sometimes upgrades can have unintended consequences, as was the case when we were upgrading and optimizin..." description: "Discover how Optimizing Babylon.js impacted \"MeshWriter\" performance & optimize text rendering with GUI textures for faster scalable 3D apps." keywords: "Optimizing Babylon.js, BabylonJS, Mesh Writer, Migrating to BabylonJS" language: "en" schema_type: "Article" --- # Optimizing Babylon.JS Scene _Published: November 21, 2024_ _Author: Nishant Desai_ ![Optimizing Babylon.js With Upgradation Process](https://ansibytecode.com/wp-content/uploads/2024/11/PerformanceOfBabylonJS-1024x592.png) ## 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”. # ![BabylonJs Curve Handling](https://ansibytecode.com/wp-content/uploads/2024/11/BabylonJsCurveHandling-300x180.png) ## 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. ![Rendering Text In BabylonJS](https://ansibytecode.com/wp-content/uploads/2024/11/RenderingTextInBabylonJS-292x300.png) ## Implementation: **![Text Rendering In BabylonJs](https://ansibytecode.com/wp-content/uploads/2024/11/TextRenderingInBabylonJs-300x254.png)** **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. **![Step 1 BabylonJS Performance while upgradation](https://ansibytecode.com/wp-content/uploads/2024/11/Step1BabylonJS-273x300.png)** - **Calculate Text Width :**To ensure proper scaling, the “getTextWidth” function calculates the width of the text in pixels. ## ![Step 2 BabylonJS Performance while upgradation](https://ansibytecode.com/wp-content/uploads/2024/11/getTextWidth-1-300x133.png) ## Example (Optimizing Babylon.Js): **Converting “MeshWriter” to GUI Textures :** Here’s how you can migrate from the old “MeshWriter” **Implementation:** **Old Implementation (MeshWriter)** **![Step 3 Old Implementation BabylonJS Performance while upgradation](https://ansibytecode.com/wp-content/uploads/2024/11/Step3OldImplementationBabylonJS-300x137.png)** **New Implementation (GUI Texture)** # ![Step 4 New Implementation BabylonJS](https://ansibytecode.com/wp-content/uploads/2024/11/Step4NewImplementationBabylonJS-300x70.png) ## Benefits of the New Approach **![Advantages Of GUI Texture in BabylonJs](https://ansibytecode.com/wp-content/uploads/2024/11/AdvantagesOfGUITexture-300x240.png)** - **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](https://ansibytecode.com/contact-us/) or [Schedule a Call](https://calendly.com/hetal-mehta/abcintro) to discuss any of your projects **Author** --- _View the original post at: [https://ansibytecode.com/optimizing-babylon-js-scene/](https://ansibytecode.com/optimizing-babylon-js-scene/)_ _Served as markdown by [Third Audience](https://github.com/third-audience) v3.6.1_ _Generated: 2026-07-03 18:59:42 UTC_