web-dev-qa-db-ja.com

球体オブジェクトのthree.js外部グロー?

three.jsである種の惑星系を構築していて、1つの惑星の外側の輝き-テクスチャを持つ球体オブジェクト。

私はこの例に出くわしました http://stemkoski.github.io/Three.js/Selective-Glow.html どの種類のトリックを実行しますが、問題は-この形のグローも影響します(そこで見られるように)色が変化する主要な3Dオブジェクト。

もう1つの素敵な輝きの例はここにあります http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html しかし、ここでも領域全体だけでなく、全体が輝きます「外」のもの。

私はGitHubの「overrideMaterial」プロパティに関するいくつかのディスカッションスレッドを読んでいますが、これは実験的で未使用で文書化されていないようです...これで問題が解決できるかどうかさえわかりません。

アイデアを共有してください、ありがとう!

26
kyeno

WebGL Globeコード(上記にリンクされている)の一部を分離して、大気効果を生成するように少し作業しました。暫定版はこちらです:

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

私の理解の及ぶ限りでは、大気効果を作成するために元のコードでいくつか興味深いことが行われています。まず、光るテクスチャを別の球体に配置します。これをAtmo Sphereと呼びましょう。球体を地球のイメージで囲んでいます。 Atmosphereマテリアルは、表側がレンダリングされず裏側のみがレンダリングされるように反転されます。したがって、それを取り囲んでいても、地球球を覆い隠すことはありません。次に、グラデーションライティングエフェクトは、テクスチャではなくフラグメントシェーダーを使用して実現されます。ただし、ズームインまたはズームアウトすると、雰囲気が変化します。これは、ズームが無効になっているため、WebGLグローブの実験では明らかではありませんでした。

【4月30日更新】

次に、からのソースコードに似ています

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

グラデーションライティングテクスチャのある球体(および別の黒いテクスチャーの球体)が2番目のシーンに配置され、そのシーンからの結果は、加法ブレンダーを使用して元のシーンで構成されます。そして、グロー効果を作成するために使用されるパラメーターを試すことができるように、値を変更し、結果として生じるさまざまなグロー効果を確認できるように、いくつかのスライダーを含めました。

これがあなたが始めるのに役立つことを願っています。幸運を!

【6月11日更新】

muchより簡単な方法で同じ効果を達成する新しい例があります。後処理を使用して2つのシーンを加算的にブレンドするのではなく、いくつか変更しましたカスタマイズされた材料のパラメータの。 (振り返ってみると明らかなようです。)更新された例については、以下をチェックしてください。

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

ただし、パン/ズームの問題はまだ解明されていません。

【7月24日更新】

パン/ズームの問題を見つけました。シェーダーを使用する必要があります。複雑さの詳細については、関連する質問 Three.js-ハロー効果のシェーダーコード、法線は変換が必要 を参照してください。最終的な作業例については、以下を参照してください。

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

私は最終結果にかなり満足しているので、この回答はこれ以上更新しません:)

40
Lee Stemkoski

あなたが参照している例では、私は加法混色の青い輝きを使用しました-代わりに白い色を使用した場合、それはおそらくあなたが望む効果を生み出すでしょう。

1
Lee Stemkoski