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

问题描述

我建立某种形式的行星系统的 three.js ，然后我花了几个小时寻找一个体面的解决办法，以获得外发光在一个星球 - 一个球体对象与质感。

我碰到这个例子<一个href="http://stemkoski.github.io/Three.js/Selective-Glow.html">http://stemkoski.github.io/Three.js/Selective-Glow.html哪一种是卓有成效的，但事情是 - 这种形式的光芒也影响导致颜色变化的主要3D对象（如见到有）

另外一个不错的辉光例子可以在这里<一个发现href="http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html">http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html但是这又焕发了整个区域，不仅是外的事情。

我一直在阅读一些关于在GitHub上overrideMaterial房地产话题，但这似乎是实验性的，未使用的和无证......甚至不知道这是否能解决我的问题。

请分享你的想法，谢谢！

解决方案

我已经分离出的WebGL的全球code（与上文）的部分工作有点产生的大气效果。一个preliminary工作版本是在这里：

<一个href="http://stemkoski.github.io/Three.js/Atmosphere.html">http://stemkoski.github.io/Three.js/Atmosphere.html

要尽我的理解，也有一些有趣的事情会在原来的code创建大气的效果。首先，发光的纹理被放置在另一个领域 - 我们称之为ATMO球:) - 围绕与地球上的影像领域。大气材料被翻转，使得前侧不呈现，仅在背面侧，因此，它不会遮挡地球球体即使它包围它。第二，梯度照明效果是通过使用一个片段着色器，而不是将纹理来实现的。但是，如果您在放大和缩小的气氛将改变它的外观;这是不是在全球的WebGL实验明显缩放，因为被禁用。

[更新4月30日]

接下来，从

相似的源$ C ​​$ C

<一个href="http://stemkoski.github.io/Three.js/Selective-Glow.html">http://stemkoski.github.io/Three.js/Selective-Glow.html

与梯度照明纹理（和另一个黑色纹理球体）的球体放置在第二场景，然后从该场景中的结果与使用添加剂混合器原始场景组成。而就这样你就可以用来创建发光效果的参数实验，我已经包括了几个滑块，这样你可以改变这些值，看到了不同的发光效果的结果。

我希望这可以帮助您开始。祝你好运！

[更新6月11日]

我有一个新的例子，实现了在多简单的方法相同的效果，而不是使用后处理和​​加法混合的两个场景，我只是改变了一些在定制的材料参数。 （它回想起来似乎很明显）对于一个更新的例子，看看：

<一个href="http://stemkoski.github.io/Three.js/Shader-Halo.html">http://stemkoski.github.io/Three.js/Shader-Halo.html

不过还没有想出的平移/缩放问题虽然。<​​/ P>

[更新时间7月24日]

我想通了平移/缩放问题。它需要使用着色器;关于复杂性的详细信息，请参阅相关的问题<一href="http://stackoverflow.com/questions/17455776/three-js-shader-$c$c-for-halo-effect-normals-need-transformation/">Three.js - 着色器code的晕轮效应，法线需要改造，并为最终的工作示例，请参见：

<一个href="http://stemkoski.github.io/Three.js/Shader-Glow.html">http://stemkoski.github.io/Three.js/Shader-Glow.html.

我是pretty的满意最后的结果，所以我不会被更新这个答案更多：）

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.

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).

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.

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!

解决方案

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

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.

[updated April 30th]

Next, similar to the source code from

http://stemkoski.github.io/Three.js/Selective-Glow.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!

[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-Halo.html

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

[Updated July 24]

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-Glow.html.

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

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