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:

As for Three.js, check out more works created using it, like this real-time snowfall system by Chiro Visuals, a port of Evan Wallace's WebGL demo to Three.js by Yong Su, and Dan Greenheck's Three.js Water Pro:

Play with the alien setup, adjusting its colors, by clicking this link. Also, subscribe to our Newsletter, join our 80 Level Talent platform, Discord, and follow us on Twitter, LinkedIn, Telegram, and Instagram, where we share breakdowns, the latest news, awesome artworks, and more.

Are you a fan of what we do here at 80 Level? Then make sure to set us as a Preferred Source on Google to see more of our content in your feed.