Portfolio 2021 technical case study — Rendering a whole HTML website in WebGL

The journey

Rendering the text elements

Scroll to see the magic happen!

The fluid effect

Original ripples effect from CodePen above.
Some of the different tests I’ve made while trying to find the result that would suit our needs.
From the original raw FBO ping pong texture output (yellow), to a traditional ripple effect (grayscale) to the final fluid effect (white & pink)
// ligths & shadows
float lightStrength = 5.0;
float lights = max(0.001, ripples.r - (0.7 + lightStrength * 0.025));
float shadow = max(0.001, 1.0 - (ripples.r + 0.5));

// get values to mix white and the colors for lights
// decrease lights area by multiplicating it with a float < 1
// then apply a pow() operation to sharpen the area
// finally multiply back the result with a big float number to increase the effect strength
float lightMixValue = clamp(pow(lights, 3.5) * 5.0, 0.0, 1.0);
float lightMixValue2 = clamp(pow(lights * 0.95, 5.0) * 10.0, 0.0, 1.0);
float lightMixValue3 = clamp(pow(lights * 0.9, 6.5) * 15.0, 0.0, 1.0);
float lightMixValue4 = clamp(pow(lights * 0.85, 7.0) * 30.0, 0.0, 1.0);
float lightMixValue5 = clamp(pow(lights * 0.8, 7.25) * 70.0, 0.0, 1.0);
float lightMixValue6 = clamp(pow(lights * 0.75, 8.5) * 100.0, 0.0, 1.0);
float lightMixValue7 = clamp(pow(lights * 0.7, 10.0) * 50.0, 0.0, 1.0);

// apply colors to lights
// [fluid1 ... fluid7] are predefined vec3 colors
vec3 lightColor = mix(color.rgb, fluid1, lightMixValue);
lightColor = mix(lightColor, fluid2, lightMixValue2);
lightColor = mix(lightColor, fluid3, lightMixValue3);
lightColor = mix(lightColor, fluid4, lightMixValue4);
lightColor = mix(lightColor, fluid5, lightMixValue5);
lightColor = mix(lightColor, fluid6, lightMixValue6);
lightColor = mix(lightColor, fluid7, lightMixValue7);
// repeat for shadowsvec3 lightColor = mix(color.rgb, fluid1, lightMixValue);
lightColor = mix(lightColor, fluid2, lightMixValue2);
lightColor = mix(lightColor, fluid3, lightMixValue3);
lightColor = mix(lightColor, fluid4, lightMixValue4);
lightColor = mix(lightColor, fluid5, lightMixValue5);
lightColor = mix(lightColor, fluid6, lightMixValue6);
lightColor = mix(lightColor, fluid7, lightMixValue7);
Some screenshots of our exporations
I must confess it was so fun that we spent way too much time looking for the right colors combination by just playing with the controls.

Rendering the scene and post-processing

Page transitions

Page transitions concept (just play with the transition input to show / hide the overlay)

Wrapping it up

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store