这只可爱的小外星人由高级开发者 Drin 可视化呈现，看起来是 3D 的，但实际上并不是。它基于 Three.js 构建，依靠着色器数学而非几何体来创造 3D 效果。

背后没有网格、没有纹理、也没有一个顶点，只有着色器内部运行的数学计算。场景由一个全屏四边形构成，每个像素都在片元着色器中通过有符号距离场的球追踪计算得出。

这种设置本质上是一个平面表面，由着色器数学来处理深度、形状和形态，在技术上完全平坦的平面上创造出体积的错觉。球追踪和 SDF 是技术美术们常用的技术，用于直接在 GPU 上生成风格化、无几何体的视觉效果。

创造迷人的伪 3D 效果有很多方法。例如，看看 Blender 短片《Dust of the Simulacrum》的导演是如何解决广角镜头畸变的：

这个标志为《Web Entangled Prophecy》创建，使用虚幻引擎 5 中的 Retainer Box 和 HLSL 制作：

至于 Three.js，可以看看更多使用它创作的作品，比如由 Chiro Visuals 制作的实时降雪系统，Yong Su 将 Evan Wallace 的 WebGL 演示移植到 Three.js 的版本，以及Dan Greenheck 的 Three.js Water Pro：

相关链接

• this link

原文链接：https://80.lv/articles/this-alien-has-no-mesh-is-built-in-three-js-with-shader-math