1/14, here is a short thread with coding techniques you can learn from recent beautiful @awwwards #SOTD by @makemepulse: themagicalpantry.com, CSS, WebGL, KTX2, Shaders, Image formats
2/n First of all, the whole book background is a 25s (6Mb) video rendered in WebGL. The foreground, with texts-images is HTML! And altho it seems like a little pain to align HTML to an objects inside a video. Well, it just works, and the result is magical!
3/n they achieve this alignment knowing a book is *always* in the center of the video. The rest is just about finding a scale factor 
4/n there is also some nice natural particle movement in this section. I'm always curious about how these subtle movements are achieved, it adds so much magic and atmosphere
5/n It is a vertex shader animation, and here is a rough formula recipe with some skipped constants
6/n in the next section of the website, there is a looot of graphics with alpha channel, feels like an interactive cartoon.
7/n only on the previous screen; there are like 10 images. To pack them, they used KTX2 packing and images in BASIS format.
8/n BASIS is just like PNG or JPG, another image "codec", the main benefit: it is optimized for use on GPUs, WebGL in our case. You can learn more here github.com/BinomialLLC/ba…, and it can be used in all popular WebGL frameworks, #threejs, #pixi, #babylon, whatever
9/n there are actually two "versions" of BASIS, lossless and lossy, it is lossless one here. Also KTX2 packing saves us some HTTP requests. Wonder if those are still important?
10/n Easiest way to preview .ktx2 files is on @babylonjs sandbox: sandbox.babylonjs.com, just drag them. For example this atlas is 1.5Mb, which is probably same as PNG, but much faster decoding on GPU
11/n There are still some normal PNG files with alpha for HTML part, and I'm wondering why PNG is still used? WebP and AVIF seem to be more efficient in 99% of cases. But there not so many of them, may be wasn't worth the effort.
12/n Here is a comparison of different image formats, of course some are lossy, but can you really spot a difference here? And WTF with AVIF file size?! But to be honest, it is still somewhat negligible compared to the whole app.
13/n Anyway, the overall work agency did on the website is astonishing, check it out yourself themagicalpantry.com. I felt like a kid reading book. For every dev decision, there is a reason, and there is always plenty to learn from such professionals!
14/14 And this is all for today. I hope you liked these insights, let me know! I can't stream yet because of blackouts, so decided to try this new format to share my investigations 🕵🏻♂️. Have a good one, and stay safe! 🇺🇦
• • •
Missing some Tweet in this thread? You can try to
force a refresh
