Hey all, I rarely post to forums anymore but reading this particular one helped me immensely with my small project so I wanted to share the wealth in return. Maybe someone else new sees this and finds it useful
I made a thing: haila.fi
You can tap on the logo for endless fun. Seems to load fine on desktop and mobile… but could definitely use a loading indicator. Maybe later.
Sources: Link at the bottom of the page. New users can’t be trusted with more than two links in a post
Context: I’ve never used Babylon or WebGL before today. Actually my first action in the morning was to install Blender 2.8 beta and read some outdated interface tutorials to manage the svg->extruded spline model->vertices->.glb export
Details: It’s a static site generated with Gridsome and Vue. I’m using latest NPM release of Babylon 4 alpha because manually updating the betas is too much maintenance hassle. As a downside I’m definitely having some issues with tree shaking and such (had to revert my failed optimisation attempt) so the bundle size is intense. Good news is that after excluding debug tools (errors, errors) the engine crunches through Webpack without issues!
I ended up using Vue controlled DOM elements on top of the canvas instead of diving in to Babylon’s GUI components. Seems to work pretty well for small stuff like this! Even if generating CSS styles from JS feels like torturing a baby animal.
A shoutout to Leon’s car scene because reading through his code (via Chrome devtools) was actually more useful than any official tutorial or example snippet. It makes all the difference to have a complete, in context example that’s consistent in implementation style. Also it used the ES6 stuff and some mystical, undocumented PRB magic (clear coat etc.) that I found interesting.
Any obvious things that you think I’ve missed or should absolutely implement? A loading indicator seems like a no-brainer and library size optimisations would probably be prudent.