オブジェクトのアウトラインを表示する
January 21, 2020
three.jsでオブジェクトのアウトラインを表示する方法を調べていたのでメモを残します。 ユースケースとしては、ユーザーが選択したオブジェクトを強調表示したい、などでしょうか。
まずは以下のサンプルを見てください。
https://jsfiddle.net/hokuma/xL25smw3/
立方体オブジェクトのアウトラインが白い線で表示されています。
three.jsのPost-Processsingという機構を利用しています。
https://threejs.org/docs/#manual/en/introduction/How-to-use-post-processing
Post-Processingの機構を利用することで、描画結果に対してglichやアウトラインなどの様々なエフェクトをかけることができます。 公式サイトにある例を見てみるとなかなか面白いです。 https://threejs.org/docs/#examples/en/postprocessing/EffectComposer
実装の特徴として、描画処理を WebGLRenderer ではなく EffectComposer に実行させています。
画面への描画処理は、addPass で追加された順に処理が適用されます。
RenderPass はオブジェクト自体を描画する処理です。
ほとんどのケースでまず RendearPass にてオブジェクトを描画し、その後に適用したいエフェクトに応じた Pass を追加していきます。
アウトラインを表示するときは、 OutlinePass を利用します。
selectedObjects に配列でアウトラインを表示したいオブジェクトを渡すと、良い感じに表示してくれます。
2つのオブジェクトを指定すると次のようになります。
https://jsfiddle.net/hokuma/gspkwL3o/
アウトライン表示の対象が2つのオブジェクトになるので、2つのオブジェクト全体としてのアウトラインが表示されます。 複数のオブジェクトを選択して強調表示したい場合には少し不向きです。
以下の方法が推奨される方法かはちょっとわからないのですが、オブジェクトごとにOutlineを用意することで個々のオブジェクトごとにアウトラインを表示することができます。 ただ、アウトラインの抽出処理は重そう？な気もするので、数が増えてくると負荷が上がってくるかもしれません。