Basic Structure for Website

Hi there, I am working on a portfolio website showcasing multiple client stories. My assets include video, 3D objects/gltfs, SVGs, text and jpgs/pngs. There are different environments/background formats as well.

I’ve been using the awesome playground and examples to create scenes for each client story. So, I’m crawling through the trees but need to see the forest.

Is it best to pull all stories & assets into 1 “page” and therefore request the engine only once OR am I creating different pages, thus loading the babylon.js scripts for each page?

Also, what is a good approach for responsiveness?

I read about “multiple canvases with one engine” but I am not sure if that example applies. Also, I want to have some confidence in my overall structure before I build out all content, then have performance issues.

Thanks in advance for your thoughts.

It depends on many factors as I am sure you have thought about.

Just to name a few: how big your assets are, who/how will clients be connecting, target device / platforms, even your own technological expertise, many many more…

More info is needed.

On aside, you may run into issues displaying SVG in Babylon, I think Chrome just won’t do it if it is a texture. It’s not a Babylon issue but a chromium issue but only manifests in babylon.

For responsiveness, especially if your client base is diverse (different technological expertise) it may be best to build a “traditional” site, and just inject Babylon where needed to display 3D assets.

Thank you Calsa,

Yes, I agree. A hybrid is a good approach. If the page must load all assets at the same time, then a single “page” will not work.

I’ve been reviewing the template system of Babylon.js but think I’ll keep it as simple as possible for this first project.

Thanks for the tip about SVGs and Babylon.js. You kept more hairs in my head.