跳到主要内容

镜头光晕

LensFlareEffect 为场景灯光或任意位置绘制光晕。每个光晕是跟随光源的 LensFlare,其外观沿从光源穿过屏幕中心的轴放置形状。光源被场景遮挡、离开屏幕,或聚光灯相机离开光锥时,光晕淡出。

镜头光晕非内置效果,需创建并通过 addEffect 添加。它以低于场景的分辨率绘制,在色调映射之前以线性 HDR 加入场景。

配置光晕​

所有光晕从同一形状库取形状:将纹理复制到纹理数组,各元素按名称引用。形状纹理用颜色通道保存形状、alpha 保存覆盖率,例如透明背景上的白色图形。

const lensFlare = new LensFlareEffect(app.graphicsDevice);
lensFlare.shapes = {
shapes: {
glow: glowAsset.resource,
star: starAsset.resource,
disc: discAsset.resource
}
};
cameraFrame.addEffect(lensFlare);

// a flare following the sun: a glow, a star and a train of four ghosts
const sun = new LensFlare({
elements: [
{ shape: 'glow', size: 0.5, color: [1, 0.9, 0.7], intensity: 0.5 },
{ shape: 'star', size: 1.2, intensity: 0.4 },
{ shape: 'disc', offset: 0.5, size: 0.08, color: [0.4, 0.8, 1], count: 4, spread: 0.4 }
]
}, { light: sunEntity.light });
lensFlare.add(sun);

cameraFrame.update();

形状统一分辨率,默认 512 像素,通过形状库 resolution 设置。为每个需要光晕的灯光创建 LensFlare,通过 add 注册,remove 取消注册。

外观​

光晕外观是按顺序绘制的元素列表,属于普通数据,可由任意多个光晕共享,也可从 JSON 资源加载。每个元素沿光晕轴放置一个形状:

属性说明
shape效果形状库中的形状名称。
offset轴向位置:0 为光源,1 为屏幕中心,2 为跨中心镜像,负值位于光源外侧。默认 0。
size元素高度占屏幕高度的比例,默认 0.1。
aspect宽高比,默认 1。
rotation旋转角度,默认 0 度。
autoRotate是否自动对齐光晕轴,适合条纹,默认 false。
colorColor 或三个数字数组表示的颜色,默认白色。
intensity亮度,默认 1。
count沿轴在 offset 周围分布的副本数,形成一串鬼影,默认 1。
spread副本沿轴分布的距离,与 offset 同单位,默认 0。

调用 CameraFrame#update 时会将外观元素构建到效果中。修改后需将外观重新赋给光晕的 look,即使仍是同一对象,再更新 CameraFrame。

光晕来源​

LensFlare 构造函数第二个参数决定跟随对象:

  • light:灯光组件。平行光提供方向,点光源和聚光灯提供位置,聚光灯还将光晕限制在光锥内。
  • node:以节点位置为源,不需要灯光。
  • position:世界位置,不需要灯光或节点。
  • direction:指向无限远光源的世界方向,不需要灯光。

灯光颜色为光晕染色,强度缩放亮度,除非关闭 useLightColor 或 useLightIntensity。光晕的 color、intensity 和 scale 分别为全部元素染色、提亮和缩放。

遮挡与淡出​

效果在光源周围测试场景深度,测量被遮挡比例,并据此淡出。以下光晕属性控制行为:

  • occlusionRadius:光源周围测试半径,部分遮挡会部分淡出。
  • occlusionFade:可见性跟随测量变化的时间,使淡出平滑。
  • occlusionOffset:将测试位置从光源向相机移动,避免灯具几何体遮住自身光。
  • edgeFade:源离开屏幕时的边缘淡出带宽度;allowOffScreen 允许源刚离屏时继续显示光晕。
  • fadeStart 和 fadeEnd:按位置光源与相机的距离淡出。

光晕属性实时生效,下一帧即可应用,无需更新 CameraFrame。

效果整体设置​

效果的 intensity 控制全部光晕亮度,0 禁用。渲染分辨率相对场景由 scale 设置,范围 0.25–1,默认一半。越低开销越小,光晕也越柔和。

编辑器中的镜头光晕​

lens-flare.mjs 提供两个脚本:

  • lensFlareEffect:与 cameraFrame 位于同一相机实体,添加效果并保存形状库,包括纹理资源、名称和分辨率。
  • lensFlare:为实体添加光晕,将外观元素和其他属性暴露为脚本属性。有灯光组件时跟随灯光,否则跟随实体位置。

示例​

程序化天空的太阳带有包含衍射星芒和一串鬼影的大光晕,灯具带小光辉,聚光灯只有相机位于光锥中时才产生光晕。

镜头光晕