manual/ja/transparency.html

<!DOCTYPE html><html lang="ja"><head>
    <meta charset="utf-8">
    <title>の透過</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@threejs">
    <meta name="twitter:title" content="Three.js – の透過">
    <meta property="og:image" content="https://threejs.org/files/share.png">
    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">

    <link rel="stylesheet" href="../resources/lesson.css">
    <link rel="stylesheet" href="../resources/lang.css">
<script type="importmap">
{
  "imports": {
    "three": "../../build/three.module.js"
  }
}
</script>
  </head>
  <body>
    <div class="container">
      <div class="lesson-title">
        <h1>の透過</h1>
      </div>
      <div class="lesson">
        <div class="lesson-main">
          <p>Three.jsでの透過は簡単な方法と難しい方法があります。</p>
<p>まずは簡単な方法を見ていきましょう。
2 x 2 x 2のグリッドに8個のキューブを配置したシーンを作ってみましょう。</p>
<p><a href="rendering-on-demand.html">要求されたレンダリングの記事</a>の例から始めて、3個から8個のキューブになるように修正します。
まず <code class="notranslate" translate="no">makeInstance</code> 関数の引数に x, y, z を追加しましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function makeInstance(geometry, color) {
+function makeInstance(geometry, color, x, y, z) {
  const material = new THREE.MeshPhongMaterial({color});

  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

-  cube.position.x = x;
+  cube.position.set(x, y, z);

  return cube;
}
</pre>
<p>これで8個のキューブを作れます。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+function hsl(h, s, l) {
+  return (new THREE.Color()).setHSL(h, s, l);
+}

-makeInstance(geometry, 0x44aa88,  0);
-makeInstance(geometry, 0x8844aa, -2);
-makeInstance(geometry, 0xaa8844,  2);

+{
+  const d = 0.8;
+  makeInstance(geometry, hsl(0 / 8, 1, .5), -d, -d, -d);
+  makeInstance(geometry, hsl(1 / 8, 1, .5),  d, -d, -d);
+  makeInstance(geometry, hsl(2 / 8, 1, .5), -d,  d, -d);
+  makeInstance(geometry, hsl(3 / 8, 1, .5),  d,  d, -d);
+  makeInstance(geometry, hsl(4 / 8, 1, .5), -d, -d,  d);
+  makeInstance(geometry, hsl(5 / 8, 1, .5),  d, -d,  d);
+  makeInstance(geometry, hsl(6 / 8, 1, .5), -d,  d,  d);
+  makeInstance(geometry, hsl(7 / 8, 1, .5),  d,  d,  d);
+}
</pre>
<p>カメラの調整もしました。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
const aspect = 2;  // the canvas default
const near = 0.1;
-const far = 5;
+const far = 25;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
-camera.position.z = 4;
+camera.position.z = 2;
</pre>
<p>背景を白に設定します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
+scene.background = new THREE.Color('white');
</pre>
<p>そして2つ目のライトを追加したので、キューブの全ての側面が照らされるようになりました。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-{
+function addLight(...pos) {
  const color = 0xFFFFFF;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
-  light.position.set(-1, 2, 4);
+  light.position.set(...pos);
  scene.add(light);
}
+addLight(-1, 2, 4);
+addLight( 1, -1, -2);
</pre>
<p>キューブを透過するには <a href="/docs/#api/ja/materials/Material#transparent"><code class="notranslate" translate="no">transparent</code></a>フラグを設定し、<a href="/docs/#api/ja/materials/Material#opacity"><code class="notranslate" translate="no">opacity</code></a>を設定する必要があります。opacityは1は完全な不透明、0は完全な透明です。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, x, y, z) {
-  const material = new THREE.MeshPhongMaterial({color});
+  const material = new THREE.MeshPhongMaterial({
+    color,
+    opacity: 0.5,
+    transparent: true,
+  });

  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  cube.position.set(x, y, z);

  return cube;
}
</pre>
<p>8個の透明なキューブになりました。</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/transparency.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/transparency.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>上記の動作サンプルの上でドラッグしてビューを回転してみて下さい。</p>
<p>簡単に修正できたようですが...よく見て下さい。キューブの裏面がないです。</p>
<div class="threejs_center"><img src="../resources/images/transparency-cubes-no-backs.png" style="width: 416px;"></div>
<div class="threejs_center">no backs</div>

<p><a href="materials.html">マテリアルの記事</a>でマテリアルのプロパティ<a href="/docs/#api/ja/materials/Material#side"><code class="notranslate" translate="no">side</code></a>について学びました。
<code class="notranslate" translate="no">THREE.DoubleSide</code> に設定し、各キューブの両面が描画されるようにします。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const material = new THREE.MeshPhongMaterial({
  color,
  map: loader.load(url),
  opacity: 0.5,
  transparent: true,
+  side: THREE.DoubleSide,
});
</pre>
<p>これが結果です。</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/transparency-doubleside.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/transparency-doubleside.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>回転させてみて下さい。
裏面を見ると上手く動作してるように見えますが、時々できない事があります。</p>
<div class="threejs_center"><img src="../resources/images/transparency-cubes-some-backs.png" style="width: 368px;"></div>
<div class="threejs_center">the left back face of each cube is missing</div>

<p>これは3Dオブジェクトの一般的な描画で発生します。
各ジオメトリの各三角形は一度に1つずつ描画します。
三角形の各ピクセルが描画されると2つの事が記録されます。
1つはそのピクセルの色、もう1つはそのピクセルの深さです。
次の三角形が描画される時、以前に記録された深さよりも各ピクセルの深さが深い場合は描画されません。</p>
<p>不透明なものには効果的ですが、透明なものには失敗します。</p>
<p>解決策としては、透明なものを並べ替えて手前より奥のものから描画する事です。
Three.jsでは <a href="/docs/#api/ja/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a> のようなオブジェクトに対してこれを行います。
そうでなければ、最初のサンプルではいくつかのキューブが他のキューブをブロックし、描画に失敗していたでしょう。
残念ながら、個々の三角形が破綻し非常に遅くなります。</p>
<p>キューブには12個の三角形が各面に2個ずつあり、描画される順番は<a href="custom-buffergeometry.html">ジオメトリで作られた順番と同じ</a>です。
そのため、どちらの方向を見ているかによって、カメラに近い三角形が最初に描画されるかもしれません。
その場合、裏面の三角形は描画されません。これにより時々裏面が見えない事があります。</p>
<p>球体やキューブのような凸状のオブジェクトの場合は、全てのキューブをシーンに2個ずつ追加するのが1つの解決法です。
裏面の三角形だけを描画するマテリアルで1個、表面の三角形だけを描画するマテリアルで1個です。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, x, y, z) {
+  [THREE.BackSide, THREE.FrontSide].forEach((side) =&gt; {
    const material = new THREE.MeshPhongMaterial({
      color,
      opacity: 0.5,
      transparent: true,
+      side,
    });

    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    cube.position.set(x, y, z);
+  });
}
</pre>
<p>それは <em>動作してるように見えます</em> 。</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/transparency-doubleside-hack.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/transparency-doubleside-hack.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>この方法はThree.jsの並び順が安定している事が前提です。</p>
<p>つまり、最初に <code class="notranslate" translate="no">side. THREE.BackSide</code> のメッシュを描画し、その後に <code class="notranslate" translate="no">side.THREE.FrontSide</code> のメッシュを描画し、2つとも同じ位置にある場合です。</p>
<p>交差する平面を2つ作ってみましょう（キューブに関連するコードを全て削除後）。
各面に<a href="textures.html">テクスチャを追加</a>します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const planeWidth = 1;
const planeHeight = 1;
const geometry = new THREE.PlaneGeometry(planeWidth, planeHeight);

const loader = new THREE.TextureLoader();

function makeInstance(geometry, color, rotY, url) {
  const texture = loader.load(url, render);
  const material = new THREE.MeshPhongMaterial({
    color,
    map: texture,
    opacity: 0.5,
    transparent: true,
    side: THREE.DoubleSide,
  });

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  mesh.rotation.y = rotY;
}

makeInstance(geometry, 'pink',       0,             'resources/images/happyface.png');
makeInstance(geometry, 'lightblue',  Math.PI * 0.5, 'resources/images/hmmmface.png');
</pre>
<p>平面は一度に片側しか見れないため、今回は <code class="notranslate" translate="no">side: THREE.DoubleSide</code> を使えます。
また、<code class="notranslate" translate="no">render</code> 関数にテクスチャ読み込み関数を渡し、読み込みの終了時に再レンダリングする事にも注意して下さい。
このサンプルが連続したレンダリングではなく、<a href="rendering-on-demand.html">要求されたレンダリング</a>になっているためです。</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/transparency-intersecting-planes.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/transparency-intersecting-planes.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>そしてまたしても同じような問題が発生しています。</p>
<div class="threejs_center"><img src="../resources/images/transparency-planes.png" style="width: 408px;"></div>
<div class="threejs_center">half a face is missing</div>

<p>この解決策は各表面を手動で2つの表面に分割し、交差しないようにします。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, rotY, url) {
+  const base = new THREE.Object3D();
+  scene.add(base);
+  base.rotation.y = rotY;

+  [-1, 1].forEach((x) =&gt; {
    const texture = loader.load(url, render);
+    texture.offset.x = x &lt; 0 ? 0 : 0.5;
+    texture.repeat.x = .5;
    const material = new THREE.MeshPhongMaterial({
      color,
      map: texture,
      opacity: 0.5,
      transparent: true,
      side: THREE.DoubleSide,
    });

    const mesh = new THREE.Mesh(geometry, material);
-    scene.add(mesh);
+    base.add(mesh);

-    mesh.rotation.y = rotY;
+    mesh.position.x = x * .25;
  });
}
</pre>
<p>どうやって達成するかはあなた次第です。
<a href="https://blender.org">Blender</a>のようなモデリングツールを使用していた場合は、テクスチャ座標を手動で調整すると思います。
ここでは <a href="/docs/#api/ja/geometries/PlaneGeometry"><code class="notranslate" translate="no">PlaneGeometry</code></a> を使用していますが、デフォルトではテクスチャを平面全体に引き伸ばします。
<a href="textures.html">テクステャの記事で説明</a>したように <a href="/docs/#api/ja/textures/Texture#repeat"><code class="notranslate" translate="no">texture.repeat</code></a> と <a href="/docs/#api/ja/textures/Texture#offset"><code class="notranslate" translate="no">texture.offset</code></a> を設定し、
各平面上の表面のテクスチャから正しい半分が得られるようにテクスチャを拡大縮小したり移動させたりできます。</p>
<p>上記のコードでは <a href="/docs/#api/ja/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> を作成し、その親となる2つの平面を作成しています。
親の <a href="/docs/#api/ja/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> を回転させた方が必要な計算するよりも簡単そうです。</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/transparency-intersecting-planes-fixed.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/transparency-intersecting-planes-fixed.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>この解決策は、交点の位置を変えない2つの平面のような単純なものにしか機能しません。</p>
<p>テクスチャのあるオブジェクトの場合は、アルファテストを設定するのがもう1つの解決法です。</p>
<p>アルファテストでは、指定した<em>アルファ</em>の値以下ではピクセルを描画しません。
ピクセルを全く描画しなければ、上記のような奥行きの問題はなくなります。
比較的シャープなエッジの効いたテクスチャの場合、これはかなり効果的です。
例としては、植物や木の葉のテクスチャ、または草のパッチが含まれます。</p>
<p>2つの平面で試してみましょう。まずはテクスチャを使い分けてみましょう。
先ほどのテクスチャは不透明100％でした。この2つは透過を利用しています。</p>
<div class="spread">
  <div><img class="checkerboard" src="../examples/resources/images/tree-01.png"></div>
  <div><img class="checkerboard" src="../examples/resources/images/tree-02.png"></div>
</div>

<p>交差する2つの平面（分割する前）に戻り、これらのテクスチャを使用して <a href="/docs/#api/ja/materials/Material#alphaTest"><code class="notranslate" translate="no">alphaTest</code></a> を設定してみましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, rotY, url) {
  const texture = loader.load(url, render);
  const material = new THREE.MeshPhongMaterial({
    color,
    map: texture,
-    opacity: 0.5,
    transparent: true,
+    alphaTest: 0.5,
    side: THREE.DoubleSide,
  });

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  mesh.rotation.y = rotY;
}

-makeInstance(geometry, 'pink',       0,             'resources/images/happyface.png');
-makeInstance(geometry, 'lightblue',  Math.PI * 0.5, 'resources/images/hmmmface.png');
+makeInstance(geometry, 'white', 0,             'resources/images/tree-01.png');
+makeInstance(geometry, 'white', Math.PI * 0.5, 'resources/images/tree-02.png');
</pre>
<p>これを実行する前に小さなUIを追加し、<code class="notranslate" translate="no">alphaTest</code> と <code class="notranslate" translate="no">transparent</code> の設定をもっと簡単に操作できるようにしましょう。
今回は<a href="scenegraph.html">シーングラフの記事</a>で紹介したようにlil-guiを使います。</p>
<p>まず、シーン内の全てのマテリアルに値を設定するlil-guiのヘルパーを作ります。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class AllMaterialPropertyGUIHelper {
  constructor(prop, scene) {
    this.prop = prop;
    this.scene = scene;
  }
  get value() {
    const {scene, prop} = this;
    let v;
    scene.traverse((obj) =&gt; {
      if (obj.material &amp;&amp; obj.material[prop] !== undefined) {
        v = obj.material[prop];
      }
    });
    return v;
  }
  set value(v) {
    const {scene, prop} = this;
    scene.traverse((obj) =&gt; {
      if (obj.material &amp;&amp; obj.material[prop] !== undefined) {
        obj.material[prop] = v;
        obj.material.needsUpdate = true;
      }
    });
  }
}
</pre>
<p>そして、guiを追加します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();
gui.add(new AllMaterialPropertyGUIHelper('alphaTest', scene), 'value', 0, 1)
    .name('alphaTest')
    .onChange(requestRenderIfNotRequested);
gui.add(new AllMaterialPropertyGUIHelper('transparent', scene), 'value')
    .name('transparent')
    .onChange(requestRenderIfNotRequested);
</pre>
<p>もちろん、lil-guiを含める必要があります。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
+import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
</pre>
<p>その結果がこちらです。</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/transparency-intersecting-planes-alphatest.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/transparency-intersecting-planes-alphatest.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>動作していますが、ズームしてみると1つの平面に白い線が入っているのがわかります。</p>
<div class="threejs_center"><img src="../resources/images/transparency-alphatest-issues.png" style="width: 532px;"></div>

<p>これは前と同じ、深さの問題です。
その平面が先に描画されていたので、後ろの平面は描画されません。
これに完全な解決策はありません。
使用例に合った解決策を見つけるために、<code class="notranslate" translate="no">alphaTest</code> を調整したり <code class="notranslate" translate="no">transparent</code> をオフにしたりして下さい。</p>
<p>この記事から完璧な透過を目指すのは難しいです。
問題とトレードオフと回避策があります。</p>
<p>例えば、あなたが車を持っていると言います。
車は通常、四方がフロントガラスになっています。
上記の並び順の問題を回避したいのであれば、各ウィンドウを独自のオブジェクトにして、three.jsがウィンドウを並び替えて正しい順序で描画できるようにする必要があります。</p>
<p>一部の植物や草を作っている場合は、アルファテストでの解決が一般的です。</p>
<p>どの解決策を選択するかは、あなたのニーズによります。</p>

        </div>
      </div>
    </div>

  <script src="../resources/prettify.js"></script>
  <script src="../resources/lesson.js"></script>


</body></html>