three.js で Mesh をレントゲン透視みたいに表示してみた

X線透視というかレントゲン透視というか・・・

そういう効果を付けてモデル表示したかったんです。

色々試行錯誤したところ、その方法が分かりました。

そこで Three.jsでMeshをレントゲン透視する方法 をまとめます。

 

では早速そのやり方・コードですが・・・

順を追ってコード例付きで説明すると次の通り

1.WebGLRendererで透過バッファを有効にする

まずはレンダラ―側での設定から。

Three.jsでは WebGLRenderer が用意されてます。

そこで alpha というパラメーターを有効にしないとダメです。

▼ 公式リファレンスでの alpha の解説

alpha - whether the canvas contains an alpha (transparency) buffer or not. Default is false.

引用元 : https://threejs.org/docs/#api/en/renderers/WebGLRenderer

▼ この解説の意訳

alpha - Canvas要素がアルファ(すなわち透明度)バッファを含めるかどうかのフラグ。デフォルトは false になってます。

デフォルトでは透過は無効( false )になってる模様。

つまりMeshの透過とかできないってことです。

だから有効にしないと透過が効きません。

 

そこでレンダラー初期化時に alpha を有効化しておきましょう。

▼ レンダラ―で alpha を有効化するコード例

このように alpha: true  を渡すだけ。

でも意外と忘れがちなのが盲点なので要注意です。

2.Materialに対して opacity と depthTest を設定

ここからが肝心な部分

各MeshのMaterialに対し、以下パラメーターを変更します。

  • opacity
    文字通り透過度のこと。値は 0 ~ 1 までの間。値が 0 で完全に透明になって見えなくなり、値が 1 だと完全不透明になる。
  • transparent
    透過を許可するかどうかのフラグ。デフォルトだと false  になっているので true  に変更しないといけない。
  • depthTest
    陰面処理を有効化するかのフラグ。陰面処理とは "ある視点から見えない部分の面を消去する" という処理のこと。デフォルトでは true  になっている。

これら値・フラグを調整すればレントゲン透視も簡単です。

 

たとえばGLTF形式のモデルを読み込んだとしましょう。

「3DにおけるJPEG」と呼ばれているフォーマット

そのレントゲン透過効果のコード例は次の通りです。

▼ モデル読込してレントゲン透過させるコード例

ハイライトした部分でレントゲン透視効果を付与。

各Meshの各Materiaiをちょちょっと調整するだけです。

ちょうど次画像みたいにレントゲン効果を付与できます。

▼ あるCGモデルにレントゲン透視効果を付与した様子

あるGLTFモデルにレントゲン透視効果を付与した様子

▼ レントゲン透視したモデルを動かしてるGif動画

レントゲン透視効果を付与したGLTFモデルを動かしてる様子

恐らく GLTF 以外のフォーマットでも有効なはずです。

それからMeshには影響ないから、透過On/Off も簡単ですね。

もし上記コードで誤りを発見されたら指摘してください。

 

ちなみに他モデルでレントゲン透視した様子・・・

▼ とある自動車モデルをレントゲン透視

とある自動車3Dモデルにレントゲン透視効果を付けた様子

▼ 骸骨モデルで試したら本当にレントゲンぽくなった 笑

骸骨の3Dモデルに透視効果をつけた様子。本当にレントゲンっぽくなった・・・

このレントゲン透視効果、中々楽しいです。

他モデルでも色々試してみたいと思います。

Three.js(WebGL)関連でのその他記事

Three.js関連では、こういう記事も書いてます。

よければご覧ください。

モデルへのレントゲン透視効果の付け方まとめ

最後に手順だけパパッとまとめ

これさえ押さえておけば案外難しくありません。

以上、Three.jsでMeshにレントゲン透視みたいな効果を付けるでした。

Three.jsで学んだこと・Tipsは今後もまとめていきます。ではまた(^^)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください