The Reality of Using WebGL & Frameworks Like Three.js and Babylon.js

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 performance11,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

Understood! Here are all your references organized with link names:

Web Graphics and Performance

• WebGL Memory Consumption:
  • WebGL Excessive Memory Consumption
• Slow Loading 3D Models:
  • Models Load Slow on Netlify
• Slow 3D Websites:
  • Why Do We Not See More 3D Websites
• Three.js Performance Optimization:
  • Load Time:
    • How to Improve the Load Time of My App
  • Memory Usage:
    • Insane RAM Usage When Scrolling Around the Page
    • GLTF Model Memory Usage
    • How Much GB of Memory My Renderer Scene is Holding
    • Managing Memory When Using a Lot of Textures
• Babylon.js vs Three.js Performance:
  • BabylonJS vs ThreeJS performance comparison
• WebGL Frameworks Performance:
  • Main Reasons for Performance Differences Between WebGL Frameworks

3D Resources

• Blender for Dummies: [12]
• Steam Hardware Survey: Steam Hardware & Software Survey
• Open Data Blender: [15]

Browser Compatibility

• WebGL Memory Issues in Brave Browser: Brave Browser WebGL Memory Issue

WebGL Memory Tracking and Optimization

• WebGL Memory Tracker Library: Library to Track WebGL Memory
• Unity WebGL Memory Management: Memory in Unity WebGL

Other (Potentially Relevant)

• Smartphone RAM: How Much RAM is in Smartphones

Other (Not Relevant)

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