Hello Babylon.js community! On behalf of the Frame It Easy team, I am very excited to finally announce the release of our new 3D picture frame configurator! Try it out yourself at https://www.frameiteasy.com/designer/.
This project is the culmination of years of R&D, planning, and development. There have been numerous technical challenges which we’ve been able to overcome. One challenge was being able to accurately render the 1.1491753946×10²¹ product configurations that we currently support. Another challenge was balancing our desire for photo-realism with performance. The Babylon.js community has played an invaluable role in helping us overcoming these challenges - thank you all for being a part of it!
Why we chose Babylon.js
We had the goal to refresh our e-commerce picture frame configurator to feel modern and intuitive. Our prior frame configurator had a small 2D preview of the frame that would update as you changed the configuration. This limited our creativity and didn’t give the visual impact that our products would give in person. We wanted to be able to showcase our custom configurable products in a photo-realistic way. Having a 3D product preview was a natural fit.
We researched a number of different 3D rendering solutions. There were a few key factors that influenced our final decision on which solution we’d go with:
- Web / browser support: As an e-commerce company, our primary sales platform is in a browser, on the web. We needed a library that would have wide browser and device support, along with being lightweight enough to perform a first render quickly regardless of network conditions.
- Visual fidelity: We needed a rendering solution capable of showcasing our products with near photo-realistic accuracy, reflecting the beauty and quality of our custom-manufactured products.
- Stability and project health: As our product configurator is the primary way that customers purchase products from us, we needed a stable platform that had strong project health. We saw the risk in adopting a platform that had the risk of being abandoned.
- Documentation and community: Our software development team does not consist of 3D design & development experts. The platform we adopt would need to have sufficient documentation to allow any of our devs to become familiar with it, without needing extensive prior knowledge of 3D concepts.
- Cross-platform support: We wanted to have as little duplicate code as practical. By having cross-platform support (like Babylon Native) as an available option, we reduce our future risk of maintaining multiple separate platforms.
In the end, Babylon.js met all of these criteria. It was also fun to learn and build with!
Take a look back in time at one of the first proof-of-concept scenes we created in Babylon.js. We’ve come a long way since then!
Notable technical features
- Parametric mesh generation (positions, indices, normals, and UVs). All of the frame rail meshes are generated client-side based on the frame size and style that you select. This was designed to be very performant, and scalable to a wide range of picture frame styles. The majority of other meshes in the scene are also programmatically generated client-side, driven by the current product configuration.
- Performance (render pausing, runtime scene optimization, LODs, tuned bundler asset splitting, texture pre-fetching).
- High-quality textures, authored in-house from real physical materials. My personal favorite is the Dayton Cocoa frame style, as it was the first high-quality material that I authored.
- A composable animation library which allows for easily crafting and controlling animation lifecycles.
- … and more exciting technical features on the horizon!
The future
We are proud to showcase this product, but we are by no means done. Some technical ideas we’d like to explore are:
- WebGPU and global illumination (for devices that can handle it).
- Node Geometry to augment or replace the parametric mesh generation code.
- Node Materials workflow with a seamless developer experience.
- More parametric objects, such as hanging wire on the back of the frame.
- Increase our utilization of animations to further improve the user experience.
- Serverless, headless rendering environment to provide extremely high-quality renders.
- Continue to improve performance/fidelity balance by using a technique like texture streaming (load low quality texture to allow for fast first render, then replace with high-quality texture asynchronously).
- Continue exploring post process render pipelines.
- Easter eggs
- … and many more!
Closing thoughts
Thank you for being such an awesome and welcoming community. Babylon.js is a juggernaut in the web-3D space, and we’re excited to see what the future holds!
I won’t ruin the surprise for others …