akella Profile picture
Dec 9, 2022 14 tweets 7 min read Read on X
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
 

Keep Current with akella

akella Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(