Bringing Endless Pools to Life in 3D

In 2020, I took on the illuminating challenge of crafting a 3D product configurator for Endless Pools. This digital endeavor involved wrangling the power of Vue.js for the interface and the immersive PlayCanvas3D engine for 3D visualization.

PlayCanvas3D won our favor with its robust scene editor and superior physically based rendering (PBR) capabilities at the time. The configurator not only showcases various pool options but also permits users to adorn their chosen pools with accessories, toggle water display, and adjust dimensions and depths on select models – all in real-time 3D.

Modeling and Rendering Techniques

To handle pools of variable geometries, I used morph targets, allowing for seamless resizing within the scene. Shiny materials gleamed with the integration of cubemaps, simulating reflections and adding an authentic touch to the visuals.

The development screenshot below shows the result of building a dynamic cubemap at runtime, and applying that to an object to simulate realistic reflections.

Overcoming Performance Hurdles

Early on, a significant challenge emerged: performance, especially on mobile. Through a series of optimizations such as texture compression via basis and model compression with Draco (for static models) and Meshopt (for morph targets), we achieved a smoother experience across devices.

Moreover, by judiciously controlling render cycles—suspending frame rendering when the camera is static and only updating frames upon changes—we further boosted performance.

Project Impact

The configurator has since become an interactive cornerstone on the Endless Pools website, offering customers an engaging and personalized shopping experience.

🌊 Experience the configurator: Endless Pools 3D Product Configurator

Please note, the source code for this project is not publicly available. This project was managed, executed and delivered by Reality Interactive. I was the lead engineer on this project at the time.

PlayCanvas3D Experience

Lastly, I'll talk a little about my experience with this 3d platform. We originally chose it because it had this 3d editor to edit your scene. I'd say the "dream" scenario was to have our designer work in there to build the scene and I would focus on code.

That did not pan out.

We had to optimize A LOT, which meant while I'd still find the editor useful, there was little the designer could do in the editor. For example, we had a custom asset pipeline for all assets, so just dropping in a pool model or a plant into the scene, was not an option.

I did enjoy the using the 3d editor, I just didn't use it in the way I imagined.

The PlayCanvas3D Engine

As far as the 3D engine PlayCanvas built goes, it doesn't quite have the feature set (and community support) that THREE.js has. There were even features that Babylon.js had that PlayCanvas3D didn't.

But, even then it still had a ton of features, the docs are good, and the developers were actively improving it.

Which leads me to the next topic..

Community and Developer Support

The community and developer support was brilliant.

I don't know any other way to say it. While PlayCanvas didn't have "official" support, their developers were HIGHLY active on the forum and in the GitHub issues. And I must say the community has some stand-out members that offered an unprecedented amount of help to beginners and experienced developers alike.

I need to specifically shout-out Max and Leonidas for both their assistance on the forum, as well as the consulating work they did to solve a couple specific issues (For example the water shader is Max's work).

If you're planning to work with PlayCanvas3D, use the forum!