Interactive Website Logo

Demos and projects
1

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 :slightly_smiling_face:

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 :face_with_raised_eyebrow:

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 :grinning:

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.

3 Likes
2

Nope this is really good (and fun) !! Your portfolio is quite impressive btw. Glad to have you with us

1 Like
3

Simple & efficient, and it’s fun to see the counter :slight_smile:

You could get a faster loading : your glb is 14kb, which is great but your env map is 270kb and I think it could be in a lower resolution for that tiny scene.

1 Like
4

Good find, much appreciated! I spent a few hours digging around the .dds toolchain and… it’s not great on a Mac :smiley:

For curious bystanders: I ended up using CMTF command line version to push the cubemap from 128 down to 32(!). This looks really bad when sharp but adding 0.4 of blur in scene.createDefaultSkybox(environmentTexture, true, 100, 0.4, true) and upping my material.roughness to 0.25 actually hides all that so you’d be hard pressed to tell the difference.

environment_128.env - 268KB
environment_32.env - 26KB

242KB saved for free, nice! Unfortunately that didn’t affect overall loading time too much because most of it is still spent on other stuff.

Hard numbers:
environment_32.env, 23.4KB over the network (gzip etc.) downloads in 45ms with 3.24ms of actual transfer time
haila.glb, 4.3KB over the network (gzip etc.) transfers in 39ms with 1.89ms of actual transfer time

So size optimising these assets is not very effective to reduce total perceived load times. In the same spirit I could get rid of a bunch of fonts because they weight a lot each, but in real life they download parallel to JS and complete super fast. I’ll definitely look at moving into HTTP/3 once it’s out to get rid of those ridiculous connection overheads, but I digress.

On the other hand I spend 1,6s on downloading the actual vendors.js that contains Babylon and Vue so next step would be to strip libraries and such. Also a massive, massive .png that needs to get shanked :stuck_out_tongue: My last attempt for code size was to do…

import { Engine } from '@babylonjs/core/Engines/engine'
import { Scene } from '@babylonjs/core/scene'
import { Vector3, Quaternion, Color3 } from '@babylonjs/core/Maths/math'
import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera'
import { Animation, QuinticEase, CircleEase, EasingFunction } from '@babylonjs/core/Animations/index'
import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture'
import { SceneLoader } from '@babylonjs/core/Loading/sceneLoader'
import { PBRMetallicRoughnessMaterial } from '@babylonjs/core/Materials/PBR/pbrMetallicRoughnessMaterial'

…instead of…

import {
  Engine,
  Scene,
  Vector3,
  Color3,
  ArcRotateCamera,
  CubeTexture,
  SceneLoader,
  PBRMetallicRoughnessMaterial,
  Animation,
  QuinticEase,
  CircleEase,
  EasingFunction,
  Quaternion
} from '@babylonjs/core'

…and it did drop the bundle size significantly but didn’t actually compile or give a helpful error. Maybe some missing side effects? I was hoping to wait for 4.0 proper to show up in NPM before jumping back in to investigate :slight_smile:

1 Like
5

Ahah, nice work :smiley:

6

We plan to release everything by april 30th :slight_smile:

1 Like
7

Hi! wanted to check it out, but is not working anymore? i am running chrome 78.0.3904.97