星空发光花朵
2026年05月20日
更新于 2026-05-21
技术栈
前端基础技术栈 Canvas 2D 图形编程 动画技术 视觉效果技术作品介绍
这个 HTML 展示了一个梦幻的发光花园场景:
发光花朵系统由主花朵、副花朵、远景花朵和花苞组成,每朵花都有多层花瓣叠加,配合呼吸般的缩放动画和自然的摇曳摆动,花蕊还会发出脉冲式的闪烁光芒
后处理 Bloom泛光(双pass模糊)+ 暗角 + 色差 + 胶片颗粒
双缓冲 离屏Canvas → 后处理 → 主Canvas
花瓣形态 40种预计算变体(控制点偏移、宽度、卷曲、叶脉)
次表面散射 SSS模拟(光源偏移 + 边缘透光 + 菲涅尔高光)
花瓣层数 6层44片(9+9+8+7+6+5)
能量丝 14条三层渲染(外发光+中层+核心+4光点/条)
体积光 16条God rays + 大范围光柱
星空 300颗 + 光晕 + 十字星芒
星云 5层不同色调
水面 12条焦散波纹 + 20个动态光斑 + 倒影
发光花朵系统由主花朵、副花朵、远景花朵和花苞组成,每朵花都有多层花瓣叠加,配合呼吸般的缩放动画和自然的摇曳摆动,花蕊还会发出脉冲式的闪烁光芒
后处理 Bloom泛光(双pass模糊)+ 暗角 + 色差 + 胶片颗粒
双缓冲 离屏Canvas → 后处理 → 主Canvas
花瓣形态 40种预计算变体(控制点偏移、宽度、卷曲、叶脉)
次表面散射 SSS模拟(光源偏移 + 边缘透光 + 菲涅尔高光)
花瓣层数 6层44片(9+9+8+7+6+5)
能量丝 14条三层渲染(外发光+中层+核心+4光点/条)
体积光 16条God rays + 大范围光柱
星空 300颗 + 光晕 + 十字星芒
星云 5层不同色调
水面 12条焦散波纹 + 20个动态光斑 + 倒影