javascript
/
three.js
oglindă de https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597
							<!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">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

<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>この記事は<a href="align-html-elements-to-3d.html">Three.jsでHTML要素を3Dに揃える</a>の続きです。
まだ読んでいない人はそちらから読んでみて下さい。</p>
<p>Three.jsを使う時には、クリエイティブな解決策を考えなければならない事もあります。
これが素晴らしい解決策かわかりませんが、共有して何か解決策の提案があるか見てみようと思いました。</p>
<p><a href="align-html-elements-to-3d.html">前回の記事</a>では3Dの地球儀の周りに国名を表示しました。
ユーザーに国を選択させて、その国の選択内容を表示させるにはどうすれば良いでしょうか？</p>
<p>最初に思いつくのは国ごとにジオメトリを生成する事です。
以前取り上げた<a href="picking.html">ピッキングを使った解決策</a>があります。
国ごとに3Dジオメトリを作ります。
ユーザーが国のメッシュをクリックすると、どの国がクリックされたのか分かります。</p>
<p>この解決策を確認するために<a href="align-html-elements-to-3d.html">前回の記事</a>のアウトライン生成に使った同じデータを使用し、全ての国の3Dメッシュを生成してみました。
その結果、15.5MBのバイナリGLTF(.glb)ファイルができました。
15.5MBをダウンロードさせるのは、私にはやりすぎのように思えます。</p>
<p>データを圧縮する方法はたくさんあります。
1つ目はアウトラインの解像度を下げるアルゴリズムを適用する事です。
その解決策を追求する時間を割いていませんでした。
アメリカの国境にとっては大勝利でしょうね。
カナダの国境はおそらくもっと少ないです。</p>
<p>別の解決策としては、実際のデータ圧縮だけを使用する方法もあります。
例えばファイルを圧縮すると11MBになりました。
30％減ですが、間違いなく物足りないです。</p>
<p>全てのデータを32ビットのfloat値ではなく、16ビットの範囲内の値として格納できます。
もしくは<a href="https://google.github.io/draco/">draco compression</a>のようなものを使う事もできるし、それだけで充分かもしれません。
私は確認してないですが、ぜひご自身で確認して結果がどうなったか教えて下さい😅</p>
<p>私の場合は<a href="picking.html">ピッキングの記事</a>の最後に取り上げた<a href="picking.html">GPUピッキングの解決策</a>について考えてみました。
この解決策では、メッシュのIDを表すユニークなカラーで全てのメッシュを描画しました。
全てのメッシュを描画し、クリックしてカラーを確認しました。</p>
<p>そこからインスピレーションを得て、国の配列の中でそれぞれの国のカラーがインデックス番号になり、国の地図を事前に生成できました。
そうすれば、GPUピッキング技術と似たように使う事ができます。
この圧縮テクスチャ（インデックステクスチャ）を使って地球儀を画面外に描画します。
ユーザーがクリックしたピクセルのカラーを見ると国のIDが分かります。</p>
<p>そこでこのようなテクスチャを生成する<a href="https://github.com/mrdoob/three.js/blob/master/manual/resources/tools/geo-picking/">コード</a>を書いてみました。</p>
<div class="threejs_center"><img src="../examples/resources/data/world/country-index-texture.png" style="width: 700px;"></div>

<p>注：このテクスチャを生成するために使用されたデータは<a href="http://thematicmapping.org/downloads/world_borders.php">このウェブサイト</a>からのもので<a href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>ライセンスです。</p>
<p>たったの217KBになり、国のメッシュの14MBよりずっと良いです。
解像度を下げる事もできそうですが、今の所は217KBで充分だと思います。</p>
<p>これを使い国をピッキングしてみましょう。</p>
<p><a href="picking.html">GPUピッキング例</a>からコードを取得すると、ピッキングシーンが必要です。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const pickingScene = new THREE.Scene();
pickingScene.background = new THREE.Color(0);
</pre>
<p>そして、ピッキングシーンに圧縮ステクスチャの地球儀の追加が必要です。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
  const loader = new THREE.TextureLoader();
  const geometry = new THREE.SphereGeometry(1, 64, 32);

+  const indexTexture = loader.load('resources/data/world/country-index-texture.png', render);
+  indexTexture.minFilter = THREE.NearestFilter;
+  indexTexture.magFilter = THREE.NearestFilter;
+
+  const pickingMaterial = new THREE.MeshBasicMaterial({map: indexTexture});
+  pickingScene.add(new THREE.Mesh(geometry, pickingMaterial));

  const texture = loader.load('resources/data/world/country-outlines-4k.png', render);
  const material = new THREE.MeshBasicMaterial({map: texture});
  scene.add(new THREE.Mesh(geometry, material));
}
</pre>
<p>前に使った <code class="notranslate" translate="no">GPUPickingHelper</code> クラスをコピーしましょう。
少し変更しました。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class GPUPickHelper {
  constructor() {
    // create a 1x1 pixel render target
    this.pickingTexture = new THREE.WebGLRenderTarget(1, 1);
    this.pixelBuffer = new Uint8Array(4);
-    this.pickedObject = null;
-    this.pickedObjectSavedColor = 0;
  }
  pick(cssPosition, scene, camera) {
    const {pickingTexture, pixelBuffer} = this;

    // set the view offset to represent just a single pixel under the mouse
    const pixelRatio = renderer.getPixelRatio();
    camera.setViewOffset(
        renderer.getContext().drawingBufferWidth,   // full width
        renderer.getContext().drawingBufferHeight,  // full top
        cssPosition.x * pixelRatio | 0,             // rect x
        cssPosition.y * pixelRatio | 0,             // rect y
        1,                                          // rect width
        1,                                          // rect height
    );
    // render the scene
    renderer.setRenderTarget(pickingTexture);
    renderer.render(scene, camera);
    renderer.setRenderTarget(null);
    // clear the view offset so rendering returns to normal
    camera.clearViewOffset();
    //read the pixel
    renderer.readRenderTargetPixels(
        pickingTexture,
        0,   // x
        0,   // y
        1,   // width
        1,   // height
        pixelBuffer);

+    const id =
+        (pixelBuffer[0] &lt;&lt; 16) |
+        (pixelBuffer[1] &lt;&lt;  8) |
+        (pixelBuffer[2] &lt;&lt;  0);
+
+    return id;
-    const id =
-        (pixelBuffer[0] &lt;&lt; 16) |
-        (pixelBuffer[1] &lt;&lt;  8) |
-        (pixelBuffer[2]      );
-    const intersectedObject = idToObject[id];
-    if (intersectedObject) {
-      // pick the first object. It's the closest one
-      this.pickedObject = intersectedObject;
-      // save its color
-      this.pickedObjectSavedColor = this.pickedObject.material.emissive.getHex();
-      // set its emissive color to flashing red/yellow
-      this.pickedObject.material.emissive.setHex((time * 8) % 2 &gt; 1 ? 0xFFFF00 : 0xFF0000);
-    }
  }
}
</pre>
<p>これで国を選択できるようになりました。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const pickHelper = new GPUPickHelper();

function getCanvasRelativePosition(event) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: (event.clientX - rect.left) * canvas.width  / rect.width,
    y: (event.clientY - rect.top ) * canvas.height / rect.height,
  };
}

function pickCountry(event) {
  // exit if we have not loaded the data yet
  if (!countryInfos) {
    return;
  }

  const position = getCanvasRelativePosition(event);
  const id = pickHelper.pick(position, pickingScene, camera);
  if (id &gt; 0) {
    // we clicked a country. Toggle its 'selected' property
    const countryInfo = countryInfos[id - 1];
    const selected = !countryInfo.selected;
    // if we're selecting this country and modifiers are not
    // pressed unselect everything else.
    if (selected &amp;&amp; !event.shiftKey &amp;&amp; !event.ctrlKey &amp;&amp; !event.metaKey) {
      unselectAllCountries();
    }
    numCountriesSelected += selected ? 1 : -1;
    countryInfo.selected = selected;
  } else if (numCountriesSelected) {
    // the ocean or sky was clicked
    unselectAllCountries();
  }
  requestRenderIfNotRequested();
}

function unselectAllCountries() {
  numCountriesSelected = 0;
  countryInfos.forEach((countryInfo) =&gt; {
    countryInfo.selected = false;
  });
}

canvas.addEventListener('pointerup', pickCountry);
</pre>
<p>上記のコードでは、国の配列に <code class="notranslate" translate="no">selected</code> プロパティを設定/解除しています。
<code class="notranslate" translate="no">Shift</code> や <code class="notranslate" translate="no">ctrl</code>、<code class="notranslate" translate="no">cmd</code> を押すと複数の国を選択できます。</p>
<p>残作業は選択した国を表示させるだけです。
ラベルを更新してみましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function updateLabels() {
  // exit if we have not loaded the data yet
  if (!countryInfos) {
    return;
  }

  const large = settings.minArea * settings.minArea;
  // get a matrix that represents a relative orientation of the camera
  normalMatrix.getNormalMatrix(camera.matrixWorldInverse);
  // get the camera's position
  camera.getWorldPosition(cameraPosition);
  for (const countryInfo of countryInfos) {
-    const {position, elem, area} = countryInfo;
-    // large enough?
-    if (area &lt; large) {
+    const {position, elem, area, selected} = countryInfo;
+    const largeEnough = area &gt;= large;
+    const show = selected || (numCountriesSelected === 0 &amp;&amp; largeEnough);
+    if (!show) {
      elem.style.display = 'none';
      continue;
    }

    ...
</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/indexed-textures-picking.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/indexed-textures-picking.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>地域に基づいて国を表示しますが、1つをクリックすると1つだけラベルが表示されます。</p>
<p>国を選択する合理的な解決策のように思えますが、選択された国を強調表示するにはどうでしょうか？</p>
<p><em>パレットグラフィックス</em> からインスピレーションを得る事ができます。</p>
<p><a href="https://en.wikipedia.org/wiki/Palette_%28computing%29">パレットグラフィックス</a>や<a href="https://en.wikipedia.org/wiki/Indexed_color">インデックスカラー</a>はAtari 800、Amiga、ファミコン、スーパーファミコン、IBMの古いPCなどの古いシステムで使われていました。
ビットマップをRGBAカラー8ビット、1ピクセル32バイト以上で格納するのではなく、ビットマップを8ビット以下の値で格納していました。
各ピクセルの値はパレットへのインデックスです。
そのため例えば画像内の値が3であれば "color 3を表示する" という事になります。
color 3が何色かは "パレット" と呼ばれる別の場所で定義されています。</p>
<p>JavaScriptでは次のようなコードにできます。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const face7x7PixelImageData = [
  0, 1, 1, 1, 1, 1, 0,
  1, 0, 0, 0, 0, 0, 1,
  1, 0, 2, 0, 2, 0, 1,
  1, 0, 0, 0, 0, 0, 1,
  1, 0, 3, 3, 3, 0, 1,
  1, 0, 0, 0, 0, 0, 1,
  0, 1, 1, 1, 1, 1, 1,
];

const palette = [
  [255, 255, 255],  // white
  [  0,   0,   0],  // black
  [  0, 255, 255],  // cyan
  [255,   0,   0],  // red
];
</pre>
<p>画像データの各ピクセルがパレットへのインデックスとなります。
上記のパレットを使い、画像データを解釈すると次のような画像が得られます。</p>
<div class="threejs_center"><img src="../resources/images/7x7-indexed-face.png"></div>

<p>この場合、上記のテクスチャは国ごとに異なるIDを持っています。
そこでパレットのテクスチャを通して同じテクスチャを使い、それぞれの国のカラーを出せば良いのです。
パレットの質感を変える事でそれぞれの国を彩る事ができます。
例えばパレットテクスチャ全体を黒に設定し、パレット内のある国のエントリーを別のカラーにするとその国だけを強調表示できます。</p>
<p>パレット化されたインデックスグラフィックスを行うにはカスタムシェーダーコードが必要です。
three.jsでデフォルトのシェーダーを変更してみましょう。
そうすれば、必要に応じてライティングなどの機能も使えます。</p>
<p><a href="optimize-lots-of-objects-animated.html">アニメーションする多くのオブジェクトを最適化の記事</a>で解説したように、
マテリアルの <code class="notranslate" translate="no">onBeforeCompile</code> プロパティに関数を追加するとデフォルトのシェーダーを変更できます。</p>
<p>デフォルトのフラグメントシェーダーはコンパイル前は以下のようになっています。</p>
<pre class="prettyprint showlinemods notranslate lang-glsl" translate="no">#include &lt;common&gt;
#include &lt;color_pars_fragment&gt;
#include &lt;uv_pars_fragment&gt;
#include &lt;map_pars_fragment&gt;
#include &lt;alphamap_pars_fragment&gt;
#include &lt;aomap_pars_fragment&gt;
#include &lt;lightmap_pars_fragment&gt;
#include &lt;envmap_pars_fragment&gt;
#include &lt;fog_pars_fragment&gt;
#include &lt;specularmap_pars_fragment&gt;
#include &lt;logdepthbuf_pars_fragment&gt;
#include &lt;clipping_planes_pars_fragment&gt;
void main() {
    #include &lt;clipping_planes_fragment&gt;
    vec4 diffuseColor = vec4( diffuse, opacity );
    #include &lt;logdepthbuf_fragment&gt;
    #include &lt;map_fragment&gt;
    #include &lt;color_fragment&gt;
    #include &lt;alphamap_fragment&gt;
    #include &lt;alphatest_fragment&gt;
    #include &lt;specularmap_fragment&gt;
    ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
    #ifdef USE_LIGHTMAP
        reflectedLight.indirectDiffuse += texture2D( lightMap, vLightMapUv ).xyz * lightMapIntensity;
    #else
        reflectedLight.indirectDiffuse += vec3( 1.0 );
    #endif
    #include &lt;aomap_fragment&gt;
    reflectedLight.indirectDiffuse *= diffuseColor.rgb;
    vec3 outgoingLight = reflectedLight.indirectDiffuse;
    #include &lt;envmap_fragment&gt;
    gl_FragColor = vec4( outgoingLight, diffuseColor.a );
    #include &lt;premultiplied_alpha_fragment&gt;
    #include &lt;tonemapping_fragment&gt;
    #include &lt;encodings_fragment&gt;
    #include &lt;fog_fragment&gt;
}
</pre>
<p><a href="https://github.com/mrdoob/three.js/tree/dev/src/renderers/shaders/ShaderChunk">これらのスニペットを全て調べてみる</a>とthree.jsはベースマテリアルのカラーを管理するために <code class="notranslate" translate="no">diffuseColor</code> という変数が使用されています。
これは <code class="notranslate" translate="no">&lt;color_fragment&gt;</code> <a href="https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/color_fragment.glsl.js">スニペット</a> に設定されているので修正できるはずです。</p>
<p>シェーダーで <code class="notranslate" translate="no">diffuseColor</code> は既にアウトラインテクスチャのカラーになっているはずなので、パレットテクスチャからカラーを探して最終的な結果にそれらをミックスします。</p>
<p><a href="optimize-lots-of-objects-animated.html">前にやった</a>ように検索文字列と置換文字列の配列を作り、<a href="/docs/#api/ja/materials/Material.onBeforeCompile"><code class="notranslate" translate="no">Material.onBeforeCompile</code></a> でシェーダーに適用します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
  const loader = new THREE.TextureLoader();
  const geometry = new THREE.SphereGeometry(1, 64, 32);

  const indexTexture = loader.load('resources/data/world/country-index-texture.png', render);
  indexTexture.minFilter = THREE.NearestFilter;
  indexTexture.magFilter = THREE.NearestFilter;

  const pickingMaterial = new THREE.MeshBasicMaterial({map: indexTexture});
  pickingScene.add(new THREE.Mesh(geometry, pickingMaterial));

+  const fragmentShaderReplacements = [
+    {
+      from: '#include &lt;common&gt;',
+      to: `
+        #include &lt;common&gt;
+        uniform sampler2D indexTexture;
+        uniform sampler2D paletteTexture;
+        uniform float paletteTextureWidth;
+      `,
+    },
+    {
+      from: '#include &lt;color_fragment&gt;',
+      to: `
+        #include &lt;color_fragment&gt;
+        {
+          vec4 indexColor = texture2D(indexTexture, vUv);
+          float index = indexColor.r * 255.0 + indexColor.g * 255.0 * 256.0;
+          vec2 paletteUV = vec2((index + 0.5) / paletteTextureWidth, 0.5);
+          vec4 paletteColor = texture2D(paletteTexture, paletteUV);
+          // diffuseColor.rgb += paletteColor.rgb;   // white outlines
+          diffuseColor.rgb = paletteColor.rgb - diffuseColor.rgb;  // black outlines
+        }
+      `,
+    },
+  ];

  const texture = loader.load('resources/data/world/country-outlines-4k.png', render);
  const material = new THREE.MeshBasicMaterial({map: texture});
+  material.onBeforeCompile = function(shader) {
+    fragmentShaderReplacements.forEach((rep) =&gt; {
+      shader.fragmentShader = shader.fragmentShader.replace(rep.from, rep.to);
+    });
+  };
  scene.add(new THREE.Mesh(geometry, material));
}
</pre>
<p>上記のように <code class="notranslate" translate="no">indexTexture</code>、<code class="notranslate" translate="no">paletteTexture</code>、<code class="notranslate" translate="no">paletteTextureWidth</code> の3つのユニフォームを追加します。
<code class="notranslate" translate="no">indexTexture</code> からカラーを取得してインデックスに変換します。
<code class="notranslate" translate="no">vUv</code> はthree.jsで提供されているテクスチャ座標です。
そのインデックスを使い、パレットテクスチャからカラーを取り出します。
その結果を現在の <code class="notranslate" translate="no">diffuseColor</code> とミックスします。
<code class="notranslate" translate="no">diffuseColor</code> は黒と白のアウトラインテクスチャなので、2色を加えると白のアウトラインになります。
現在の拡散色（ディフューズカラー）を引くと黒いアウトラインになります。</p>
<p>レンダリング前にパレットテクスチャと3つのユニフォームを設定する必要があります。</p>
<p>パレットテクスチャは、国ごとに1色 + 海のための1色を保持するのに十分な幅が必要です(id = 0)。
240の国があります。
国のリストがロードされるまで待ち、正確な数字を得るか、それを調べる事ができます。
少し大きめの数字を選んでも、あまり害はないので512を選びましょう。</p>
<p>パレットテクスチャを作成するコードは以下の通りです。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const maxNumCountries = 512;
const paletteTextureWidth = maxNumCountries;
const paletteTextureHeight = 1;
const palette = new Uint8Array(paletteTextureWidth * 4);
const paletteTexture = new THREE.DataTexture(
    palette, paletteTextureWidth, paletteTextureHeight);
paletteTexture.minFilter = THREE.NearestFilter;
paletteTexture.magFilter = THREE.NearestFilter;
</pre>
<p><a href="/docs/#api/ja/textures/DataTexture"><code class="notranslate" translate="no">DataTexture</code></a> はテクスチャの生データを与える事ができます。
今回はは512のRGBAカラーを4バイトずつ与え、それぞれのバイトが赤、緑、青で0〜255の値を使用します。</p>
<p>ランダムなカラーで塗りつぶしましょう！</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">for (let i = 1; i &lt; palette.length; ++i) {
  palette[i] = Math.random() * 256;
}
// set the ocean color (index #0)
palette.set([100, 200, 255, 255], 0);
paletteTexture.needsUpdate = true;
</pre>
<p>パレットテクスチャを <code class="notranslate" translate="no">palette</code> 配列の内容で更新したい時は、常に  <code class="notranslate" translate="no">paletteTexture.needsUpdate</code> を <code class="notranslate" translate="no">true</code> にする必要があります。</p>
<p>これはマテリアルのユニフォームに設定する必要があります。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const geometry = new THREE.SphereGeometry(1, 64, 32);
const material = new THREE.MeshBasicMaterial({map: texture});
material.onBeforeCompile = function(shader) {
  fragmentShaderReplacements.forEach((rep) =&gt; {
    shader.fragmentShader = shader.fragmentShader.replace(rep.from, rep.to);
  });
+  shader.uniforms.paletteTexture = {value: paletteTexture};
+  shader.uniforms.indexTexture = {value: indexTexture};
+  shader.uniforms.paletteTextureWidth = {value: paletteTextureWidth};
};
scene.add(new THREE.Mesh(geometry, material));
</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/indexed-textures-random-colors.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/indexed-textures-random-colors.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>インデックスとパレットテクスチャの動作が確認できたので、パレットを操作してハイライトにしてみましょう。</p>
<p>まず、three.jsスタイルカラーを渡してパレットのテクスチャに入れる値を与える関数を作ってみましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const tempColor = new THREE.Color();
function get255BasedColor(color) {
  tempColor.set(color);
  const base = tempColor.toArray().map(v =&gt; v * 255);
  base.push(255); // alpha
  return base;
}
</pre>
<p>このように <code class="notranslate" translate="no">color = get255BasedColor('red')</code> を呼び出すと <code class="notranslate" translate="no">[255, 0, 0]</code> のような配列が返されます。</p>
<p>次はそれを使って、いくつかのカラーを作ってパレットを埋めていきましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const selectedColor = get255BasedColor('red');
const unselectedColor = get255BasedColor('#444');
const oceanColor = get255BasedColor('rgb(100,200,255)');
resetPalette();

function setPaletteColor(index, color) {
  palette.set(color, index * 4);
}

function resetPalette() {
  // make all colors the unselected color
  for (let i = 1; i &lt; maxNumCountries; ++i) {
    setPaletteColor(i, unselectedColor);
  }

  // set the ocean color (index #0)
  setPaletteColor(0, oceanColor);
  paletteTexture.needsUpdate = true;
}
</pre>
<p>これらの関数を使い、国が選択された時にパレットを更新してみましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function getCanvasRelativePosition(event) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: (event.clientX - rect.left) * canvas.width  / rect.width,
    y: (event.clientY - rect.top ) * canvas.height / rect.height,
  };
}

function pickCountry(event) {
  // exit if we have not loaded the data yet
  if (!countryInfos) {
    return;
  }

  const position = getCanvasRelativePosition(event);
  const id = pickHelper.pick(position, pickingScene, camera);
  if (id &gt; 0) {
    const countryInfo = countryInfos[id - 1];
    const selected = !countryInfo.selected;
    if (selected &amp;&amp; !event.shiftKey &amp;&amp; !event.ctrlKey &amp;&amp; !event.metaKey) {
      unselectAllCountries();
    }
    numCountriesSelected += selected ? 1 : -1;
    countryInfo.selected = selected;
+    setPaletteColor(id, selected ? selectedColor : unselectedColor);
+    paletteTexture.needsUpdate = true;
  } else if (numCountriesSelected) {
    unselectAllCountries();
  }
  requestRenderIfNotRequested();
}

function unselectAllCountries() {
  numCountriesSelected = 0;
  countryInfos.forEach((countryInfo) =&gt; {
    countryInfo.selected = false;
  });
+  resetPalette();
}
</pre>
<p>1つ以上の国を強調する事ができるようにする必要があります。</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/indexed-textures-picking-and-highlighting.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/indexed-textures-picking-and-highlighting.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>これで動作しました！</p>
<p>ちょっとした事ですが、選択状態を変えないと地球儀を回せないです。
国を選択してから地球儀を回転させると選択範囲が変わります。</p>
<p>修正してみましょう。
思いつく限りでは2つの事が確認できます。
クリックしてから手放すまでにどれだけの時間が経過したか。
もう1つはユーザーが実際にマウスを動かしたかどうかです。
時間が短かったり、マウスを動かさなかった場合はクリックだったのではないでしょうか。
そうでなければ、地球を引っ張っていこうとしていたのでしょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const maxClickTimeMs = 200;
+const maxMoveDeltaSq = 5 * 5;
+const startPosition = {};
+let startTimeMs;
+
+function recordStartTimeAndPosition(event) {
+  startTimeMs = performance.now();
+  const pos = getCanvasRelativePosition(event);
+  startPosition.x = pos.x;
+  startPosition.y = pos.y;
+}

function getCanvasRelativePosition(event) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: (event.clientX - rect.left) * canvas.width  / rect.width,
    y: (event.clientY - rect.top ) * canvas.height / rect.height,
  };
}

function pickCountry(event) {
  // exit if we have not loaded the data yet
  if (!countryInfos) {
    return;
  }

+  // if it's been a moment since the user started
+  // then assume it was a drag action, not a select action
+  const clickTimeMs = performance.now() - startTimeMs;
+  if (clickTimeMs &gt; maxClickTimeMs) {
+    return;
+  }
+
+  // if they moved assume it was a drag action
+  const position = getCanvasRelativePosition(event);
+  const moveDeltaSq = (startPosition.x - position.x) ** 2 +
+                      (startPosition.y - position.y) ** 2;
+  if (moveDeltaSq &gt; maxMoveDeltaSq) {
+    return;
+  }

-  const position = {x: event.clientX, y: event.clientY};
  const id = pickHelper.pick(position, pickingScene, camera);
  if (id &gt; 0) {
    const countryInfo = countryInfos[id - 1];
    const selected = !countryInfo.selected;
    if (selected &amp;&amp; !event.shiftKey &amp;&amp; !event.ctrlKey &amp;&amp; !event.metaKey) {
      unselectAllCountries();
    }
    numCountriesSelected += selected ? 1 : -1;
    countryInfo.selected = selected;
    setPaletteColor(id, selected ? selectedColor : unselectedColor);
    paletteTexture.needsUpdate = true;
  } else if (numCountriesSelected) {
    unselectAllCountries();
  }
  requestRenderIfNotRequested();
}

function unselectAllCountries() {
  numCountriesSelected = 0;
  countryInfos.forEach((countryInfo) =&gt; {
    countryInfo.selected = false;
  });
  resetPalette();
}

+canvas.addEventListener('pointerdown', recordStartTimeAndPosition);
canvas.addEventListener('pointerup', pickCountry);
</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/indexed-textures-picking-debounced.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/indexed-textures-picking-debounced.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>私はUXの専門家ではないので、もっと良い解決策があれば教えて下さい。</p>
<p>インデックスグラフィックスがどのように役立つのか、また、three.jsが作るシェーダーを変更してシンプルな機能を追加する方法が少しでも理解してもらえたと思います。
シェーダーが書かれている言語のGLSLの使い方は、この記事で扱うには内容が大きすぎます。
<a href="post-processing.html">ポストプロセスの記事</a>にGLSLのリンクがあるので確認してみて下さい。</p>

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

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


</body></html>