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

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

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

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

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

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

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

このページの目次

１．WebGLRendererで透過バッファを有効にする
２．Materialに対して opacity と depthTest を設定
Three.js（WebGL）関連でのその他記事
モデルへのレントゲン透視効果の付け方まとめ

１．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 を有効化するコード例

renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#appCanvas'),
  antialias: true,
  alpha: true,  /// <= これ
  preserveDrawingBuffer: true
  /// 他パラメーター...
});

renderer = new THREE.WebGLRenderer({

canvas: document.querySelector('#appCanvas'),

antialias: true,

alpha: true, /// <= これ

preserveDrawingBuffer: true

/// 他パラメーター...

});

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

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

２．Materialに対して opacity と depthTest を設定

ここからが肝心な部分

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

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

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

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

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

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

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

/// Meshに付与する透過度
const OPACITY = 0.7;
/// Meshの透過を有効にするか
const TRANSPARENT = true;
/// Meshの陰面処理を有効にするか
const DEPTH_TEST = false;

var loader = new GLTFLoader();

loader.load(
  /// 読込するモデルURI
  './2CylinderEngine.glb',
  // モデル読込後のコールバック
  function(gltf){
    /// 各Meshに対してレントゲン透視効果を付与
    gltf.scene.traverse(function(obj3d){
      if(obj3d.material){
        /// 単一Materialのみなら...
        obj3d.material.opacity = OPACITY;
        obj3d.material.transparent = TRANSPARENT;
        obj3d.material.depthTest = DEPTH_TEST;
      }
      if(Array.isArray(obj3d.material)){
        /// 複数Materialを持つなら...
        for(var i = 0; i < obj3d.material.length; ++i){
          var material = obj3d.material[i];
          material.opacity = OPACITY;
          material.transparent = TRANSPARENT;
          material.depthTest = DEPTH_TEST;
        }
      }
    });
  },
  function ( xhr ) {
    var pct = xhr.loaded / xhr.total * 100;
    console.log(pct + '% まで読込完了');
  },
  function ( error ) {
    console.log( 'エラーが起きました...' );
  }
);

/// Meshに付与する透過度

const OPACITY = 0.7;

/// Meshの透過を有効にするか

const TRANSPARENT = true;

/// Meshの陰面処理を有効にするか

const DEPTH_TEST = false;

var loader = new GLTFLoader();

loader.load(

/// 読込するモデルURI

'./2CylinderEngine.glb',

// モデル読込後のコールバック

function(gltf){

/// 各Meshに対してレントゲン透視効果を付与

gltf.scene.traverse(function(obj3d){

if(obj3d.material){

/// 単一Materialのみなら...

obj3d.material.opacity = OPACITY;

obj3d.material.transparent = TRANSPARENT;

obj3d.material.depthTest = DEPTH_TEST;

}

if(Array.isArray(obj3d.material)){

/// 複数Materialを持つなら...

for(var i = 0; i < obj3d.material.length; ++i){

var material = obj3d.material[i];

material.opacity = OPACITY;

material.transparent = TRANSPARENT;

material.depthTest = DEPTH_TEST;

}

});

function ( xhr ) {

var pct = xhr.loaded / xhr.total * 100;

console.log(pct + '% まで読込完了');

function ( error ) {

console.log( 'エラーが起きました...' );

}

);

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

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

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

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

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

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

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

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

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

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

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

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

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

Three.js（WebGL）関連でのその他記事

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

PisukeCode - Web開発まとめ

【Android】WebViewを使ってWebGL（three.js）動かしてみた

https://pisuke-code.com/android-run-threejs-on-webview

昔は CG を扱おうとすると大変でした。（一度C++で OpenGLとか書いたことあるけど、意味不明のキワミ）でも今は WebGL が標準化してきたので、"行列計算" とか "法線" とか良く分からないことしなくても、ブラウザさえあれば3D表現が簡単になってきてます。あと three.js とかのライブラリも沢山あって開発もしやすいです。自分もWebGLを使ったアプリが作ってみたいので、Android環境で WebView + WebGL（three.js）を動かしてみました。手始めにWebViewに three.js（WebGL）で赤球を表示してみたまずは3DCG入門...

PisukeCode - Web開発まとめ

ボクセルアートを投稿できるSNSアプリを運営開始！

https://pisuke-code.com/app-pr-voxel-arts-sns-3dotter

タイトルの通りです。この度 3Dotter というアプリ公開しました！ボクセルアートを投稿できるアプリです。▼ 現在オープンベータ公開中のコチラのアプリ3Dドット絵メーカー - 3DotterBikaba Apps無料posted withアプリーチただ作るだけのモノではなく、全世界に公開できるSNS型アプリです。レビュー＆評価も絶賛募集中！ボクセルアート未体験の方は是非DLを！正式版は2020年3月末までに公開する予定です。※ 正式版の公開を諸事情により延ばすことにしました。※ 半年～１年ほどオープンベータ公開を続けます。ついに2020年7月に正式版公...

よければご覧ください。

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

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

必ずレンダラ―で alpha を有効にする
透過させるのに WebGLRenderer の初期化時に alpha: true を設定すること。これをしとかないとモデルの透過ができない。
各マテリアルの opacity と depthTest を設定
各Meshの各Materialに対し、opacity（0～1までの透過度）、transparent（透過を許可するかどうか）、depthTest（陰面処理が有効かどうか）を適宜設定。

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

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

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