このキャラクターがあり、ユーザーが選択できるようにしたいので、選択されたときにその周りにアウトラインを表示したいとします。
キャラクターは、いくつかのメッシュを持つ object3D です。裏側のマテリアルを複製して設定しようとしましたが、うまくいきませんでした。問題は、シェイプ内の各立方体が裏側で別々にレンダリングされたため、アウトラインが間違っていたことです。
アウトライン用に別のメッシュを作成する必要がありますか?もっと簡単な方法はありますか?
5300 次
5 に答える
18
@spassvolgel の記述は正しいです。
私が行う必要があると思われるのは、次のようなものです。1.最初に背景をレンダリングする必要があります2.次に、別の透明レイヤーで、元のレイヤーよりもわずかに大きい単色のキャラクターモデル3.別の透明レイヤーで通常のマテリアル/テクスチャでキャラクターをレイヤー化します 4.最後に、キャラクターレイヤーをアウトラインレイヤーの上に置き、それらを組み合わせて背景に配置する必要があります
複数のシーンを作成し、シーケンシャル レンダー パスと組み合わせるだけです。
renderer.autoClear = false;
. . .
renderer.render(scene, camera); // the entire scene
renderer.clearDepth();
renderer.render(scene2, camera); // just the selected item, larger, in a flat color
renderer.render(scene3, camera); // the selected item again
three.js.r.129
于 2014-02-18T19:04:24.227 に答える
1
gamedev.stackexchange.com/ で役立つものを見つけました。彼らはステンシルバッファについて話します。これをTHREE.jsに適用する方法がわかりません..
于 2014-02-18T18:21:18.617 に答える
1
複雑なジオメトリに適用される一般的な解決策は、three.js のShaderMaterial クラスを介してフラグメント シェーダーを適用することです。あなたの経験レベルは不明ですが、必要な場合はシェーダーの紹介をここで見つけることができます。
シェーダーを使用してジオメトリを強調表示する良い例は、こちらにあります。頂点シェーダーでは、頂点の法線と、グロー効果の強度を表現するために使用されるパラメーターを計算します。
uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main()
{
vec3 vNormal = normalize( normalMatrix * normal );
vec3 vNormel = normalize( normalMatrix * viewVector );
intensity = pow( c - dot(vNormal, vNormel), p );
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
これらのパラメーターはフラグメント シェーダーに渡され、ジオメトリの周囲のピクセルのカラー値を変更するために使用されます。
uniform vec3 glowColor;
varying float intensity;
void main()
{
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, 1.0 );
}
于 2014-02-13T17:39:08.167 に答える
1
輪郭を描いたオブジェクトを (理想的には) 目的のフレーム バッファーのサイズのテクスチャにレンダリングし、そのテクスチャを使用してフレーム バッファー サイズのクワッドをレンダリングし、フラグメント シェーダーをぼかしたり、他の画像変換を行ったりすることで、良い結果を得ることができます。生の WebGL を使用する例をここに示しますが、カスタム ShaderMaterial を問題なく作成できます。
于 2018-12-14T05:44:34.710 に答える
0
私はまだ答えを見つけていませんが、複数のメッシュを作成し、これらの各メッシュの背後に別のメッシュを配置するとどうなるかを示したかったのです。
side: THREE.BackSide
ご覧のとおり、これは望ましい効果ではありません。3 つのメッシュすべての背後に、オーバーラップしないきれいなアウトラインが必要です。私のレベルのプログラミング シェーダーは実際には存在しませんが、ほとんどのオンライン リソースでは、メッシュを複製するこのアプローチを使用するように言われています。
于 2014-02-15T22:57:20.290 に答える