30

我正在three.js中构建某种行星系统,我花了几个小时寻找一个体面的解决方案来在一个行星上获得外发光- 一个具有纹理的球体对象。

我遇到了这个例子http://stemkoski.github.io/Three.js/Selective-Glow.html哪种方法可以解决问题,但问题是 - 这种发光形式也会影响主要的 3D 对象,导致颜色变化(如那里所见)。

另一个不错的发光示例可以在这里找到http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html但它再次发光整个区域,而不仅仅是“外部”的东西。

我一直在 GitHub 上阅读一些关于“overrideMaterial”属性的讨论线程,但这似乎是实验性的、未使用的和未记录的......甚至不确定这是否可以解决我的问题。

请分享您的想法,谢谢!

4

2 回答 2

51

我在分离出产生大气效果的 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

我对最终结果很满意,所以我不会再更新这个答案了:)

于 2013-04-30T03:52:20.217 回答
1

在您所指的示例中,我使用了带有加色混合的蓝色发光 - 如果您使用白色代替,那么可能会产生您想要的效果。

于 2013-04-29T01:04:23.750 回答