The studio reel that runs live in WebGL, with no video file

A heap of glossy plus-shaped objects tumbles slowly on the screen, cobalt and black and white, each one catching a hard highlight as it turns. It reads like a rendered showreel someone exported to video.

Open the network tab. There is no video.

That is Lusion, the site of a Bristol studio founded in 2017 by Edan Kwan, a self-taught coder from Hong Kong who started out in music, and every frame of that pile is being drawn live on your own GPU. I checked the honest way: the homepage document is 58KB, and it contains exactly one canvas element and zero video tags. A showreel would be a fat download; this is shaders and geometry instead. Scroll and the camera moves through the scene, because it is a scene, not a timeline.

What the bundle confesses

Pull the site's main script bundle and the blueprint is right there: 1.25MB of JavaScript in which Three.js class names sit alongside the word Shader, which appears 477 times. So the renderer is the standard WebGL library, and the look comes from the mountain of custom GLSL material and lighting code stacked on top of it. I went in expecting a fully in-house engine; the source says otherwise, and the source wins.

The studio's signature move is older than this homepage. For the 2019 version of lusion.co, which took Site of the Month at Awwwards, the team published a case study laying it out: simulate the expensive things offline in Houdini FX, bake the animation into textures and ArrayBuffers, then interpolate between keyframes in real time on the GPU. Matcap shading fakes the lush translucent materials at almost no cost, an analytical volumetric light adds the glow, and, encoded as 16-bit integers, the cloth animation data for mobile came down to 246KB. The physics you feel was computed weeks earlier; your graphics card just plays it back with interest.

The current site went further and the judges noticed: Site of the Year 2023 at Awwwards, with the top annual prize from FWA and CSSDA landing on the same build, a sweep the studio talks through in a Codrops interview from this April. Their Awwwards profile lists 14 Site of the Day wins besides. That is the industry telling you it is hard. The network tab is you checking that it is real.

Where the path starts

Custom GLSL is the load-bearing skill in all of the above, and The Book of Shaders by Patricio Gonzalez Vivo and Jen Lowe is the gentlest way in: fragment shaders from first principles, every example editable and running in the page.

For a smaller dose of the same sorcery, real fluid dynamics solved in a fragment shader churns along in about fifty kilobytes of JavaScript.

More WebGL with no safety net: a portfolio you drive a car through.