球体对象的three.js外发光？

Posted 2023-02-27

【中文标题】球体对象的three.js外发光？

【英文标题】：three.js outer glow for sphere object?

【发布时间】：2013-04-22 14:21:04

【问题描述】：

我正在 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”属性的讨论帖，但这似乎是实验性的、未使用的和未记录的……甚至不确定这是否能解决我的问题。

请分享您的想法，谢谢！

【问题讨论】：

您能否发布一个指向“overrideMaterial”讨论主题的链接？

由于我是新用户，它不允许我发布超过 2 个链接。 :) github.com/mrdoob/three.js/issues/265

查看相关问题：***.com/questions/10213361/…

非常感谢@WestLangley！我不是 GLSL 程序员，但这似乎是明天要精确分析的开箱即用的解决方案。 :) data-arts.appspot.com/globe

开源，下载链接在这里：code.google.com/p/webgl-globe

【参考方案1】：

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

【讨论】：

感谢您的回复！我已经尝试过了 - 白色仍然会影响原始图像。我将在几秒钟内发布我的代码

好的，第一个例子，我只渲染主渲染器，单通道：matt.prayam.com/private/planet3d 第二个例子，我使用你的方法，用 composer 渲染多通道：matt.prayam.com/private/planet3d/white.html唯一的区别在于 onRenderLoop 回调

【参考方案2】：

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

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

【讨论】：

不错的李！看起来很有趣！不敢相信你花了这么多时间解决这个问题，非常感谢！现在要去看看。我欠你的:)

如果我可以建议你一件事（我仍然需要自己实施）。这对于示例或任何内容都不是至关重要的，但是您的浏览器调整大小事件无法处理那里的 Atmo Sphere。 :)

Proszę uprzejmy, kyeno -- 这是一个有趣的问题，一个我一直想从事的项目。您对浏览器调整大小问题是正确的，我使用 THREEx.WindowResize(renderer, camera) 来处理这个问题，并且需要为具有发光效果的次要场景设置类似的东西。如果你觉得你“欠我的”，你可以通过帮助其他人用three.js标签提出问题来支付它......而且，没有什么比支持更能表达“谢谢”了：D跨度>

完全同意德米特里。这很酷，但与所有新的threejs代码不兼容。

@LeeStemkoski 嗨，该示例似乎不适用于新的 three.js 版本。请您更新一下好吗？非常感谢