球体对象的three.js外发光? [英] three.js outer glow for sphere object?

问题描述

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

I'm building some sort of planetary system in three.js and I spent couple of hours looking for a decent solution to get an outer glow on one planet - a sphere object with a texture.

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

I came across this example http://stemkoski.github.io/Three.js/Selective-Glow.html which kind of does the trick, but the thing is - this form of glow also affects the main 3D object resulting in color change (as seen there).

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

Another nice glow example can be found here http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html but again it glows the entire region, not only "outer" thing.

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

I've been reading some discussion thread about "overrideMaterial" property on GitHub but this seems experimental, unused and undocumented... not even sure if this could solve my problem.

请分享您的想法，谢谢！

Please share your ideas, thanks!

推荐答案

我在分离产生大气效果的 WebGL Globe 代码部分(链接到上面)方面做了一些工作.初步工作版本在这里:

I've worked a bit on separating out the part of the WebGL Globe code (linked to above) that produces the atmospheric effect. A preliminary working version is here:

http://stemkoski.github.io/Three.js/Atmosphere.html

据我所知，原始代码中做了一些有趣的事情来创建大气效果.首先，发光的纹理被放置在另一个球体上——我们称之为 Atmo Sphere :)——它围绕着地球的图像.大气材质被翻转，使得正面不会渲染，只有背面，因此它不会遮挡地球球体，即使它包围它.其次，渐变光照效果是通过使用片段着色器而不是纹理来实现的.然而，如果你放大和缩小，气氛会改变它的外观；这在 WebGL Globe 实验中并不明显，因为缩放被禁用.

To the best of my understanding, there are a few interesting things going on in the original code to create the atmospheric effect. First, the glowing texture is placed on another sphere -- let's call it the Atmo Sphere :) -- that surrounds the sphere with the image of earth on it. The Atmosphere material is flipped so that the front side does not render, only the back side, thus it does not obscure the earth sphere even though it surrounds it. Second, the gradient lighting effect is achieved by using a fragment shader rather than a texture. However, the atmosphere will change its appearance if you zoom in and out; this was not evident in the WebGL Globe experiment because zooming was disabled.

[4 月 30 日更新]

[updated April 30th]

接下来，类似来自

http://stemkoski.github.io/Three.js/Selective-发光.html

具有渐变照明纹理的球体(和另一个黑色纹理球体)被放置在第二个场景中，然后该场景的结果使用加法混合器与原始场景组合.为了让您可以试验用于创建发光效果的参数，我提供了几个滑块，以便您可以更改值并查看产生的不同发光效果.

the sphere with the gradient lighting texture (and another black-textured sphere) are placed in a second scene, and then the results from that scene are composed with the original scene using an additive blender. And just so you can experiment with the parameters used to create the glow effect, I have included a couple of sliders so that you can change the values and see the different glow effects that result.

我希望这可以帮助您入门.祝你好运！

I hope this helps you get started. Good luck!

[6 月 11 日更新]

[updated June 11]

我有一个新示例，它以更简单的方式实现了相同的效果，而不是使用后处理和加法混合两个场景，我只是更改了自定义材质中的一些参数.(回想起来似乎很明显.)有关更新的示例，请查看:

I have a new example which achieves the same effect in a much simpler way, rather than using post-processing and additively blending two scenes, I just changed some of the parameters in the customized material. (It seems obvious in retrospect.) For an updated example, check out:

http://stemkoski.github.io/Three.js/Shader-晕.html

仍然没有弄清楚平移/缩放问题.

Still haven't figured out the pan/zoom issues though.

[7 月 24 日更新]

[Updated July 24]

我发现了平移/缩放问题.它需要使用着色器；有关复杂性的详细信息，请参阅相关问题 三个.js - 光晕效果的着色器代码，法线需要转换，有关最终工作示例，请参阅:

I figured out the pan/zoom issues. It requires using a shader; for details about the complexities, see the related question Three.js - shader code for halo effect, normals need transformation and for the final working example, see:

http://stemkoski.github.io/Three.js/Shader-发光.html.

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

I'm pretty happy with the final result, so I will not be updating this answer any more :)

这篇关于球体对象的three.js外发光?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！