p5.js中lightFalloff()函数示例的问题分析与修复

在p5.js的WebGL渲染功能中，lightFalloff()函数用于控制光源的衰减效果。最近发现官方文档中该函数的示例代码存在渲染问题，本文将详细分析问题原因并提供解决方案。

问题现象

在p5.js 1.9.1版本中，lightFalloff()函数的参考页面示例会渲染出一个纯黑画布，而预期效果应该是显示两个受不同衰减参数影响的3D球体。这个示例原本旨在展示不同衰减值对光照效果的影响：左侧球体使用线性衰减(1,0,0)，右侧球体使用二次衰减(0.97,0.03,0)。

问题分析

经过排查，发现问题的根源在于示例代码中使用了ortho()正交投影函数。在3D图形学中，正交投影会移除透视效果，使物体无论距离远近都保持相同大小。这与光照衰减效果的展示产生了冲突：

1. 正交投影移除了深度感，使得两个球体看起来完全一样
2. 光照衰减效果依赖于物体与光源的相对距离
3. 这种冲突导致渲染系统无法正确显示光照效果

解决方案

最简单的修复方法是移除ortho()函数调用，让场景使用默认的透视投影。这样：

1. 保留了3D空间的深度感
2. 允许光照衰减效果正常显示
3. 两个球体虽然实际距离相同，但右侧球体会因为更弱的光照而看起来更远

修改后的代码能够正确展示lightFalloff()函数的效果：左侧球体使用线性衰减，光照强度随距离均匀减弱；右侧球体使用二次衰减，光照强度随距离平方反比减弱，因此显得更暗。

技术原理

lightFalloff()函数控制点光源的衰减方式，参数分别为：

• 常数衰减项：影响所有距离的光照强度
• 线性衰减项：与距离成正比的光照减弱
• 二次衰减项：与距离平方成正比的光照减弱

在3D渲染中，正确的投影方式选择对光照效果的展示至关重要。透视投影模拟人眼观察世界的方式，而正交投影则常用于CAD等需要精确尺寸显示的场合。

总结

这个案例提醒我们，在展示3D光照效果时，需要谨慎选择投影方式。p5.js文档中的这个示例通过移除ortho()调用，恢复了光照衰减效果的正常展示，帮助开发者更好地理解lightFalloff()函数的工作原理。