AS I SLOWLY BECOME LITERATE IN THREE.JS, I AM DETERMINED TO DIVE DEEPER INTO THE WORLD OF WEBGL AND CUSTOM SHADERS. WHILE THREE.JS IS POWERFUL, WE CAN LEVEL UP THE EXPERIENCE WITH CUSTOME SHADERS. LIKE MANY OTHER THINGS I’VE LEARNED, I STARTED BY BUILDING VARIOUS PROJECTS EVEN THOUGH I HAVE NO IDEA WHAT WAS HAPPENING HALF THE TIME. BUILDING THINGS HAS ALWAYS BEEN THE BEST WAY FOR ME TO LEARN, AND IT WORKS WONDERS. WITH JUST A COUPLE OF PROJECTS. I WANT FROM NOT UNDERSTANDING TO NOW CAPABLE OF FORMULATING A GENERAL STRUCTURE WHEN LOOKING AT AN EFFECT FROM OTHER WEBSITES.

NOW THAT WE HAVE THE DESIRED EFFECT, WE CAN GO CRAZY WITH THE COLORs AS WE’VE GOT ALL THE DATA WE NEEDED. I UTILIZED THE MIX() FUNCTION TO CREATE A BLEND OF COLORS AND ROUGHNESS DEPENDING ON THE POSITION.

AT FIRST GLANCE, THIS SEEMS TRICKY AS THIS SCENE HAS MANY MOVING PARTS, SO I BROKE THEM DOWN INTO MORE MINOR PROBLEMS TO TACKLE ONE AT A TIME. WE CAN EASILY BREAK DOWN THE EFFECTS INTO FIVE SMALL INTERACTIONS: PLANE ROTATION, BENDING THE VERTICES, LOADING TEXTURES, PARALLAX THUMBNAIL, AND UPDATING THE TEXTURE ON HOVER. NOW THAT I HAVE A TODO LIST, I CAN TACKLE THEM INDIVIDUALLY AND EVENTUALLY COMPILE THEM INTO ONE ENTITY.

YOU MAY HAVE NOTICED, BUT I LOVE BINDING DIFFERENT INTERACTIONS TO THE CURSOR. IT IS A GREAT WAY TO IMMERSE USERS IN THE EXPERIENCE. IN THIS CASE, I ESSENTIALLY USE THE CURSOR POSITION TO ANIMATE PRETTY MUCH EVERYTHING THAT’S ON SCREEN. WHILE THE HEAD LOOKS WHEREVER THE CURSOR IS, THE ARMS FLAP OUTWARD BASED ON THE X POSITION OF THE CURSOR. LASTLY, I LAOS BONDED A POINT LIGHT TO THE CURSOR SO IT LIGHTS UP WHEREVER THE USER CURSOR IS.

TO ACHIEVE THE SAME EFFECT, I CREATED TWO SEPARATE SCENES, EACH WITH ITS PURPOSE. THE PRIMARY SCENE IS RENDERED TO THE AUDIENCE, CREATING WINDOW EFFECTS, AND THE MODEL SCENE RENDERS AND ANIMATES THE MODEL. ONCE BOTH SCENES ARE SET UP, I ASSIGN THE PLANE IN THE PRIMARY SCENE AS A RENDER TARGET, WHICH WILL RENDER THE MODEL SCENE THROUGH ITS LENS, CREATING THE WINDOW EFFECT. LASTLY, I DISTORTED THE UV WITH SHADERS TO CREATE A GLASS-LIKE EFFECT ON TOP OF THE RENDERED MODEL. ESSENTIALLY, I’M APPLYING POSTPROCESSING TO A RENDERED IMAGE.

CREATING PARTICLES IS HARD. IT’S EVEN HARDER TO ANIMATE THEM AS IT INVOLVES A LOT OF CALCULATIONS WITH HUNDREADS OF VERTICES, AND WE HAVE TO DO IT FOR EVERY FRAME. TO ACHIEVE A FLOWING PARTICLE EFFECT, WE NEED TO LEVERAGE A TECHNIQUE CALLED GENERAL-PURPOSE COMPUTING ON GRAPHICS PROCESSING UNITS (GPGPU). FROM THIS, WE CAN EMBED POSITIONAL DATA ONTO A TEXTURE, DECODE THEM, AND UPDATE EACH FRAME’S VERTICES’ POSITION ACCORDINGLY. IT’S A SUPER POWERFUL TOOL WHEN PROCESSING LARGE AMOUND OF DATA. ONCE WE ACHIEVE THIS PROCESS, WE CAN APPLY ANIMATION WITH DIFFERENT FORMULAS AND NOISES.

TO TEST THE POWER OF SHADER CODE, I FOLLOWED A RAYMARCHING GUIDE TO CREATE A FLUID BLENDING EFFECT WITH CIRCLES AND SQUARES. ALTHOUGH THE FINAL RESULT LOOKS 3D, IT IS ACHIEVED WITH MATCAP TEXTURE, HENCE THE RENDER STYLE DIFFERENCES. ESSENTIALLY, I’M BLENDING CIRCLES AND SQUARES TO CREATE THE BEAUTIFUL RENDERS.