The Reality of Using WebGL & Frameworks Like Three.js and Babylon.js
Tags: webdev, webgl, javascript, threejs
Published: 2024-05-12 05:11:18

1. _**3D Websites Require a Higher Learning Curve**_

    • Learning WebGL, Three.js, or Babylon.js involves understanding the canvas, coordinate systems, and other fundamentals.
    • Optimizing textures and 3D files (e.g., .stl, .fbx, .gltf, .glb) is necessary for performance[11],[21],[23],[25].
    • Developers need to optimize textures, poly counts, and simplify geometry.
    • Web developers may lack 3D skills initially, making optimization challenging.

2. _**3D Websites Require a Lot of Computer Resources & Are Harder to Optimize**_

    • 3D websites focus on RAM usage, requiring substantial resources.[20],[21]
    • High-end hardware is needed for optimal performance, which may not be accessible to average users,Check Blender Best Computer Specifications for Example at [15].
    • High memory usage can lead to slow loading times and poor user experiences.[19],[20]

3. **Justifying Development Costs Using 3D in Websites is Used in Niche Use Cases**

    • Examples like Ikea demonstrate effective use of 3D for product visualization.
    • Personal portfolios can also benefit from 3D elements but are niche use cases.

4. _**Comparsion Between ThreeJS and BablyonJS WebGL FrameWorks**_

    • Three.js and Babylon.js are popular WebGL frameworks, each with its advantages and disadvantages.
    • Babylon.js offers Native TypeScript support, while Three.js has a larger community and a community package for typescript support.
    • Babylon.js provides better debugging tools.
Check [26] 

5. _**Conclusion & Best Use Case Examples for 3D Modeling**_

    • 3D modelling is suitable for interior design, museums, personal, and company portfolios.
    • Optimizing assets and utilizing loading options can improve performance.
    • Examples like Ikea's room builder showcase effective 3D implementation.
Conclusion
    • 3D websites have potential but require significant development effort and resources.
    • High hardware requirements and optimization challenges limit widespread adoption.
    • Advances in hardware, like ARM processors, may improve 3D web experiences in the future.

**References**

[1]: https://github.com/brave/brave-browser/issues/25554
[2]: https://forum.unity.com/threads/webgl-excessive-memory-consumption-1-5gb.622720/
[3]: https://www.quora.com/Why-has-WebGL-not-seen-a-wide-scale-use-in-Web-UI
[4]: https://www.pureweb.com/news-updates/4-limitations-of-webgl-for-publishing-real-time-3d/
[5]: https://discourse.threejs.org/t/why-is-3d-so-rarely-seen-on-the-web/5377
[6]: https://wallsianh.medium.com/what-i-wish-id-known-about-three-js-415e7f655643
[7]: https://www.reddit.com/r/webdev/comments/hbx5oy/why_do_we_not_see_more_3d_websites/?rdt=61853
[8]: https://www.reddit.com/r/reactjs/comments/1255zlv/very_slow_website_with_threejs/
[9]: https://discourse.threejs.org/t/how-to-improve-the-load-time-of-my-app/4396
[10]: https://discourse.threejs.org/t/models-load-slow-on-netlify/34432
[11]: https://forum.babylonjs.com/t/slow-loading-of-glb-files-with-textures-compared-to-threejs/40730
[12]: https://www.oreilly.com/library/view/blender-for-dummies/9780470584460/ch003-sec002.html
[13]: https://store.steampowered.com/hwsurvey/Steam-Hardware-Software-Survey-Welcome-to-Steam
[14]: https://store.steampowered.com/hwsurvey/processormfg/
[15]: https://opendata.blender.org/
[16]: https://www.amazon.com/AMD-EPYC-7742-Tetrahexaconta-core-Processor/dp/B07XGB7S36
[17]: https://www.ikea.com/nl/en/p/besta-shelf-unit-with-doors-black-brown-lappviken-black-brown-s09047376/
[18]: https://www.ikea.com/nl/en/home-design/?productId=09047376&productName=BEST%C3%85&roomType=livingRoom
[19]: https://forum.unity.com/threads/webgl-excessive-memory-consumption-1-5gb.622720/
[20]: https://discourse.threejs.org/t/insane-ram-usage-when-scrolling-around-the-page/24454
[21]: https://discourse.threejs.org/t/gltf-model-memory-usage/42048
[22]: https://discourse.threejs.org/t/how-much-gb-of-memory-my-renderer-scene-is-holding/33139
[23]: https://stackoverflow.com/questions/38971735/three-js-managing-memory-when-using-a-lot-of-textures
[24]: https://www.statista.com/statistics/271725/global-dram-revenues-of-semiconductor-companies-since-2010/
[25]: https://stackoverflow.com/questions/38971735/three-js-managing-memory-when-using-a-lot-of-textures
[26]: https://medium.com/@shariq.ahmed525/difference-between-three-js-and-babylon-js-what-actually-should-you-choose-996fd6a7ac40
[27]: https://forum.babylonjs.com/t/babylonjs-vs-threejs-performance-comparison/45704
[28]: https://discourse.threejs.org/t/main-reasons-for-performance-differences-between-webgl-frameworks/40729/2
[29]: https://forum.babylonjs.com/t/babylonjs-vs-threejs-performance-comparison/45704/5
[30]: https://aircada.com/three-js-vs-babylon-js/
[31]: https://www.spotvirtual.com/blog/why-we-use-babylonjs-instead-of-threejs-in-2022
[32]: https://www.spotvirtual.com/blog/why-we-use-babylonjs-instead-of-threejs-in-2022
[33]: https://discourse.threejs.org/t/is-three-js-completely-compatible-with-typescript-at-this-stage-as-of-24th-of-october-2022/43919
[34]: https://www.scientiamobile.com/how-much-ram-is-in-smartphones/
Understood! Here are all your references organized with link names:

**Web Graphics and Performance**
  * WebGL Memory Consumption:
      * [WebGL Excessive Memory Consumption](linkname [19])
  * Slow Loading 3D Models:
      * [Models Load Slow on Netlify](linkname [10])  
  * Slow 3D Websites:
      * [Why Do We Not See More 3D Websites](linkname [7])
  * Three.js Performance Optimization:
      * Load Time:
          * [How to Improve the Load Time of My App](linkname [9])
      * Memory Usage:
          * [Insane RAM Usage When Scrolling Around the Page](linkname [20])
          * [GLTF Model Memory Usage](linkname [21])
          * [How Much GB of Memory My Renderer Scene is Holding](linkname [22])
          * [Managing Memory When Using a Lot of Textures](linkname [23])
  * Babylon.js vs Three.js Performance:
      * [BabylonJS vs ThreeJS performance comparison](linkname [27])
  * WebGL Frameworks Performance:
      * [Main Reasons for Performance Differences Between WebGL Frameworks](linkname [28])

**3D Resources**
  * Blender for Dummies: [[12]]
  * Steam Hardware Survey: [Steam Hardware & Software Survey](linkname [13])
  * Open Data Blender: [[15]]

**Browser Compatibility**
  * WebGL Memory Issues in Brave Browser: [Brave Browser WebGL Memory Issue](linkname [1])

**WebGL Memory Tracking and Optimization**
  * WebGL Memory Tracker Library: [Library to Track WebGL Memory](linkname [4])
  * Unity WebGL Memory Management: [Memory in Unity WebGL](linkname [5])

**Other (Potentially Relevant)**
  * Smartphone RAM: [How Much RAM is in Smartphones](linkname [34])

**Other (Not Relevant)**
  * AMD EPYC Processor: [[16]]
  * Ikea Bestå Shelf Unit: [[17]]
  * DRAM Revenue Statistics: [Global DRAM Revenues of Semiconductor Companies Since 2010](linkname [24])
  * Three.js vs Babylon.js: [Difference Between Three.js and Babylon.js](linkname [26])
  * Why Use Babylon.js: [Why We Use BabylonJS Instead of ThreeJS in 2022](linkname [31])
  * Three.js and TypeScript: [Is Three.js Completely Compatible with Typescript at This Stage](linkname [33])