WebGL & Three.js Time!

2023-02-28.txt

I am currently learning WebGL and Three.js — a topic I have been interested in for a long time but has always been on my backlog. And thus far, I have found it challenging to understand some fundamental WebGL concepts — especially shaders.

Although my grasp of the fundamental concepts is still shaky — I don’t want to dwell too long on theory. Instead, I’m following my best pattern to connect the dots by learning through doing.

As a kick-off, I challenged myself with the first case study to create a simple snowdrop effect. Why a snowdrop effect? I’m not sure — it’s just the first thing that popped into my head.

A doodle of snowdrop effect case study

Honestly, I didn’t face any major difficulties while working on this case study. I believe this is because the case study itself was relatively easy.

In the end, I changed that boring white snowdrop to be colorful — which I then called colordrop.

And here is the result.

Colordrop

A colorful drop effect. This is my first case study in learning WebGL using Three.js.

  • Three.js

So what’s next? I’ll rewrite that colordrop using React Three Fiber first — and take on a more challenging case study!