This Alien Has No Mesh & Is Built in Three.js with Shader Math

This cute alien, visualized by Senior Developer Drin, looks 3D but in fact isn't. Built in Three.js, the approach relies on shader math rather than geometry to create the 3D effect.

There's no mesh, no textures, and not a single vertex behind it, just math running inside a shader. The scene consists of a single fullscreen quad, with every pixel calculated in the fragment shader through raymarching a signed distance field.

The setup is essentially a flat surface where shader math handles depth, shape, and form, creating the illusion of volume on what is, technically, a completely flat plane. Raymarching and SDFs are techniques used among technical artists for creating stylized, geometry-free visuals directly on the GPU.

There are many ways to create a fascinating fake 3D effect. For example, take a look at how the director of the Blender short film Dust of the Simulacrum solved wide-angle lens distortion:

This logo, created for Web Entangled Prophecy, was made with a retainer box and HLSL in Unreal Engine 5: