我在分离出产生大气效果的 WebGL Globe 代码部分(链接到上面)方面做了一些工作。初步工作版本在这里:
http://stemkoski.github.io/Three.js/Atmosphere.html
据我所知,原始代码中发生了一些有趣的事情来创建大气效果。首先,发光的纹理被放置在另一个球体上——我们称之为 Atmo Sphere :)——它围绕着球体,上面有地球的图像。Atmosphere 材质被翻转,因此正面不渲染,仅渲染背面,因此即使围绕地球球体,它也不会遮挡地球球体。其次,渐变光照效果是通过使用片段着色器而不是纹理来实现的。但是,如果放大和缩小,气氛会改变其外观;这在 WebGL Globe 实验中并不明显,因为缩放功能被禁用。
【4月30日更新】
接下来,类似于来自的源代码
http://stemkoski.github.io/Three.js/Selective-Glow.html
具有渐变照明纹理的球体(和另一个黑色纹理球体)被放置在第二个场景中,然后使用加法混合器将该场景的结果与原始场景组合。为了让您可以试验用于创建发光效果的参数,我提供了几个滑块,以便您可以更改值并查看产生的不同发光效果。
我希望这可以帮助您入门。祝你好运!
[6月11日更新]
我有一个新示例,它以更简单的方式实现了相同的效果,而不是使用后处理和叠加混合两个场景,我只是更改了自定义材质中的一些参数。(回想起来似乎很明显。)对于更新的示例,请查看:
http://stemkoski.github.io/Three.js/Shader-Halo.html
尽管如此,仍然没有弄清楚平移/缩放问题。
[7月24日更新]
我发现了平移/缩放问题。它需要使用着色器;有关复杂性的详细信息,请参阅相关问题Three.js - shader code for halo effect, normals need transformation,对于最终的工作示例,请参阅:
http://stemkoski.github.io/Three.js/Shader-Glow.html。
我对最终结果很满意,所以我不会再更新这个答案了:)