javascript - Three.js の概要

Question

three.js を使用して 3d モデルに黒いアウトラインを表示することはできますか?

Borderlands 2 のようなグラフィックが必要です (トゥーン シェーディング + 黒のアウトライン)。

Answer 1

遅れて来たのは確かだ。これが後で誰かの質問を解決することを願っています。

すべてを2 回レンダリングする必要はありません。オーバーヘッドは実際にはそれほど大きくありません。メッシュを複製し、複製したメッシュのマテリアル側を「裏面」に設定するだけで済みます。ダブルパスはありません。代わりに 2 つのメッシュをレンダリングし、アウトラインのジオメトリのほとんどを WebGL の「背面カリング」によってカリングします。

次に例を示します。

var scene = new THREE.Scene();

//Create main object
var mesh_geo = new THREE.BoxGeometry(1, 1, 1);
var mesh_mat = new THREE.MeshBasicMaterial({color : 0xff0000});
var mesh = new THREE.Mesh(mesh_geo, mesh_mat);
scene.add(mesh);

//Create outline object
var outline_geo = new THREE.BoxGeometry(1, 1, 1);
//Notice the second parameter of the material
var outline_mat = new THREE.MeshBasicMaterial({color : 0x00ff00, side: THREE.BackSide});
var outline = new THREE.Mesh(outline_geo, outline_mat);
//Scale the object up to have an outline (as discussed in previous answer)
outline.scale.multiplyScalar(1.5);
scene.add(outline);

背面カリングの詳細については、http: //en.wikipedia.org/wiki/Back-face_cullingをご覧ください。

上記のアプローチは、トゥーン シェーダを追加せずにオブジェクトにアウトラインを追加したい場合にうまく機能し、したがって「リアリズム」が失われます。

トゥーン シェーディング自体は、エッジ検出をサポートしています。彼らは、この効果を実現するために Borderlands で「セル」シェーダーを開発しました。

セル シェーディングでは、開発者はオブジェクトの複製方法 ([低] パイプライン レベルで実行) を使用するか、エッジ検出に画像処理フィルターを使用できます。これは、2 つの手法のパフォーマンスのトレードオフを比較するポイントです。

セルの詳細: http://en.wikipedia.org/wiki/Cel_shading

乾杯!

Answer 2

その古い質問ですが、ここに私がしたことがあります。

CG コース用に Outlined Cel-shader を作成しました。残念ながら、3 つのレンダリング パスが必要です。現在、1 つのパスを削除する方法を見つけようとしています。

アイデアは次のとおりです。1) NormalDepth イメージをテクスチャにレンダリングします。

頂点シェーダーでは、通常と同じように、スクリーン スペースに配置し、スクリーン スペースに垂直に配置します。

フラグメントシェーダーでは、ピクセルの深さを計算し、深さをアルファ値として通常の色を作成します

float ndcDepth = (2.0 * gl_FragCoord.z - gl_DepthRange.near - gl_DepthRange.far) / (gl_DepthRange.far - gl_DepthRange.near);
float clipDepth = ndcDepth / gl_FragCoord.w;

2) セル シェーディングを使用してシーンをテクスチャにレンダリングします。シーン オーバーライド マテリアルを変更しました。

3)クワッドを作成し、クワッドに両方のテクスチャをレンダリングし、orto カメラでそれを見てもらいます。セル シェーディング テクスチャはクワッドでレンダリングされるだけですが、エッジ検出を使用してシェーディングされた法線深度を使用すると、ピクセルを黒 (エッジ) にする必要がある場合がわかります。

Answer 3

はい、可能ですが、すぐに使える単純な方法ではありません。トゥーン シェーディングの場合は、/examples/js/ShaderToon.js にシェーダーも含まれています。

アウトラインについては、最も一般的に提案されている方法は、2 つのパスでレンダリングすることだと思います。最初のパスでは、モデルを黒でレンダリングし、スケールを少し大きくします。2 番目のパスは通常のスケールで、トゥーン シェーダーを使用します。このようにして、大きな黒いモデルがアウトラインとして表示されます。完璧ではありませんが、簡単な方法はないと思います。「three.js hidden line rendering」を検索すると、見た目は異なりますが、それを達成するために多少似た方法が使用されるため、より成功する可能性があります。