Billboard Rendering
Billboard 渲染是一种将 2D 平面(sprite 或 mesh)始终朝向相机的渲染技术,用于在 3D 场景中模拟 3D 物体的外观。本质是一个朝向约束问题:给定相机位置,计算物体旋转矩阵使得平面法线指向相机。
核心变体
1. 球形 Billboard(Spherical / Full)
平面完全面向相机位置,所有轴自由旋转。这是最通用的 billboard 模式,适用于粒子效果、光源光晕、远景 impostor。
实现原理:构造 LookAt 矩阵,物体 Z 轴对齐到相机→物体方向。
2. 圆柱 Billboard(Cylindrical / Y-Axis Locked)
仅绕 Y 轴旋转,物体始终保持直立。适用于树木、角色标识、路牌等需要保持”站立感”的场景。
实现原理:仅计算相机→物体在 XZ 平面的水平分量,绕 Y 轴旋转,忽略垂直分量。
3. 速度对齐 Billboard(Velocity-Aligned)
平面朝向物体的运动方向,而不是相机。适用于拖尾、流星、箭矢等需要表现运动方向的粒子效果。
实现原理:用粒子速度向量替换相机方向作为朝向目标。
4. 拉伸 Billboard(Stretched Billboard)
沿运动方向拉伸平面,配合速度对齐使用。Unity 独有功能,通过 Camera Scale / Speed Scale / Length Scale 参数控制拉伸量。
5. 轴向组合 Billboard(Per-Axis Bitmask)
通过位掩码任意组合 X/Y/Z 轴的锁定。Babylon.js 独有设计:NONE=0, X=1, Y=2, Z=4, ALL=7。例如 X|Y=3 表示仅锁定 X 和 Y,Z 轴自由。
关键配套功能
- 深度缩放(Size Attenuation): 物体大小是否随距离缩放。关闭可实现屏幕空间固定大小(如 UI 标识)。
- 深度裁剪(Depth Culling): 是否参与深度测试。关闭可实现 X-Ray 效果或始终可见的标识。
- LOD / Facade 模式: 远处用 billboard 替代 3D 模型以降低多边形数。three.js 展示:121 棵树从 7,260 多边形降至 121 个 billboard 面。
- 批处理(Batching): 大量 billboard 共享 draw call,对粒子系统性能至关重要。
Bevy 生态中的 Billboard
- bevy_mod_billboard — 唯一专注 billboard 的社区 crate(已停滞)。
- bevy_sprite3d — 活跃替代方案,但功能覆盖有限。
- Bevy #3688 — 官方 feature request,S-Ready-For-Implementation 但 PR 被拒。
详见 billboard-cross-engine 跨引擎对比。
待研究
- Bevy 0.15+ 渲染管线改动对 billboard shader 适配的技术影响。
- bevy_mod_billboard vs. bevy_sprite3d vs. 手写 shader 的运行时性能对比。