Gecko [ dp-client.com ]

Name	Size	Permission
align-html-elements-to-3d.html	34.11 KB	-rw-r--r--
backgrounds.html	14.5 KB	-rw-r--r--
billboards.html	15.38 KB	-rw-r--r--
cameras.html	31.33 KB	-rw-r--r--
canvas-textures.html	19.04 KB	-rw-r--r--
cleanup.html	1.62 KB	-rw-r--r--
custom-buffergeometry.html	25.29 KB	-rw-r--r--
debugging-glsl.html	8 KB	-rw-r--r--
debugging-javascript.html	32.43 KB	-rw-r--r--
fog.html	14.84 KB	-rw-r--r--
fundamentals.html	21.88 KB	-rw-r--r--
game.html	1.63 KB	-rw-r--r--
indexed-textures.html	31.49 KB	-rw-r--r--
lights.html	29.56 KB	-rw-r--r--
load-gltf.html	36 KB	-rw-r--r--
load-obj.html	39.52 KB	-rw-r--r--
material-table.html	1.67 KB	-rw-r--r--
materials.html	21.2 KB	-rw-r--r--
multiple-scenes.html	29.63 KB	-rw-r--r--
offscreencanvas.html	48.19 KB	-rw-r--r--
optimize-lots-of-objects-anima...	24.44 KB	-rw-r--r--
optimize-lots-of-objects.html	27.12 KB	-rw-r--r--
picking.html	22.49 KB	-rw-r--r--
post-processing-3dlut.html	27.99 KB	-rw-r--r--
post-processing.html	18.46 KB	-rw-r--r--
prerequisites.html	21.03 KB	-rw-r--r--
primitives.html	25.51 KB	-rw-r--r--
rendering-on-demand.html	12.96 KB	-rw-r--r--
rendertargets.html	8.75 KB	-rw-r--r--
responsive.html	17.9 KB	-rw-r--r--
scenegraph.html	32.03 KB	-rw-r--r--
setup.html	5.28 KB	-rw-r--r--
shadertoy.html	25.61 KB	-rw-r--r--
shadows.html	30.69 KB	-rw-r--r--
textures.html	35.99 KB	-rw-r--r--
tips.html	18.07 KB	-rw-r--r--
transparency.html	20.81 KB	-rw-r--r--
voxel-geometry.html	1.69 KB	-rw-r--r--
webxr-basics.html	1.6 KB	-rw-r--r--
webxr-look-to-select.html	1.66 KB	-rw-r--r--
webxr-point-to-select.html	1.68 KB	-rw-r--r--

Code Editor : optimize-lots-of-objects-animated.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)">

async function loadAll() {
  const fileInfos = [
    {name: 'men',   hueRange: [0.7, 0.3], url: 'resources/data/gpw/gpw_v4_basic_demographic_characteristics_rev10_a000_014mt_2010_cntm_1_deg.asc' },
    {name: 'women', hueRange: [0.9, 1.1], url: 'resources/data/gpw/gpw_v4_basic_demographic_characteristics_rev10_a000_014ft_2010_cntm_1_deg.asc' },
  ];

await Promise.all(fileInfos.map(loadData));

...
}
loadAll();
</pre>
<p>上記のコードでは <code class="notranslate" translate="no">fileInfos</code> 内の各オブジェクトがローティングされたファイルを <code class="notranslate" translate="no">file</code> プロパティに持ち、Promise.allで全てのファイルをロードします。
<code class="notranslate" translate="no">name</code> と <code class="notranslate" translate="no">hueRange</code> プロパティはあとで使います。<code class="notranslate" translate="no">name</code> はUIフィールドです。<code class="notranslate" translate="no">hueRange</code> は色相の範囲をマップし選択するために使います。</p>
<p>上記2ファイルは2010年時点でのエリア別の男性数と女性数を示しています。</p>
<p>注：このデータが正しいかわかりませんが、それは重要ではありません。
重要なのは異なるデータセットを示す事です。</p>
<p>さらに2つのデータセットを生成してみましょう。
1つは女性数よりも男性数が多い場所、逆にもう1つは男性数より女性数が多い場所です。</p>
<p>まず先ほどのデータで新しい2次元配列をマップする前に、2次元配列を生成する関数を書いてみましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function mapValues(data, fn) {
  return data.map((row, rowNdx) =&gt; {
    return row.map((value, colNdx) =&gt; {
      return fn(value, rowNdx, colNdx);
    });
  });
}
</pre>
<p>通常の <code class="notranslate" translate="no">Array.map</code> 関数と同様に <code class="notranslate" translate="no">mapValues</code> 関数は配列の各値に対して関数 <code class="notranslate" translate="no">fn</code> を呼び出します。
fnには値と行と列のインデックスを渡します。</p>
<p>2つのファイルを比較した新しいファイルを生成するコードを作成します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeDiffFile(baseFile, otherFile, compareFn) {
  let min;
  let max;
  const baseData = baseFile.data;
  const otherData = otherFile.data;
  const data = mapValues(baseData, (base, rowNdx, colNdx) =&gt; {
    const other = otherData[rowNdx][colNdx];
      if (base === undefined || other === undefined) {
        return undefined;
      }
      const value = compareFn(base, other);
      min = Math.min(min === undefined ? value : min, value);
      max = Math.max(max === undefined ? value : max, value);
      return value;
  });
  // make a copy of baseFile and replace min, max, and data
  // with the new data
  return {...baseFile, min, max, data};
}
</pre>
<p>上記のコードは <code class="notranslate" translate="no">compareFn</code> 関数で比較された値を元に <code class="notranslate" translate="no">mapValues</code> 関数で新しいデータセットを生成しています。また <code class="notranslate" translate="no">min</code> と <code class="notranslate" translate="no">max</code> の比較結果も持っています。
最後のreturnで新しく <code class="notranslate" translate="no">min</code>、<code class="notranslate" translate="no">max</code>、<code class="notranslate" translate="no">data</code> を追加した以外は <code class="notranslate" translate="no">baseFile</code> と同じプロパティを持つ新しいファイルを作成します。</p>
<p>それを使って2つの新しいデータセットを作りましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
  const menInfo = fileInfos[0];
  const womenInfo = fileInfos[1];
  const menFile = menInfo.file;
  const womenFile = womenInfo.file;

const uiElem = document.querySelector('#ui');
fileInfos.forEach((info) =&gt; {
  const boxes = addBoxes(info.file, info.hueRange);
  info.root = boxes;
  const div = document.createElement('div');
  info.elem = div;
  div.textContent = info.name;
  uiElem.appendChild(div);
  div.addEventListener('mouseover', () =&gt; {
    showFileInfo(fileInfos, info);
  });
});
// show the first set of data
showFileInfo(fileInfos, fileInfos[0]);
</pre>
<p>もう1つ変更が必要で <code class="notranslate" translate="no">addBoxes</code> の引数に <code class="notranslate" translate="no">hueRange</code> があります。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function addBoxes(file) {
+function addBoxes(file, hueRange) {

...

// compute a color
-    const hue = THREE.MathUtils.lerp(0.7, 0.3, amount);
+    const hue = THREE.MathUtils.lerp(...hueRange, amount);

...
</pre>
<p>これで4つのデータセットを表示できるようになるはずです。ラベルの上にマウスを置いたり、タッチしてデータセットを切り替える事ができます。</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/lots-of-objects-multiple-data-sets.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/lots-of-objects-multiple-data-sets.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>注意してほしいのは突出したいくつかの奇妙なデータポイントがあります。</p>
<p>これは何が起きてるのでしょう！？</p>
<p>いずれにしてもこの4つのデータセットをラベルから切り替えた際にクロスフェードアニメーションさせるにはどうすればいいのでしょうか。</p>
<p>たくさんのアイデアがあります。</p>
<ul>
<li><p><a href="/docs/#api/ja/materials/Material.opacity"><code class="notranslate" translate="no">Material.opacity</code></a> でクロスフェードアニメーションする</p>
<p>この解決策の問題点はキューブが完全に重なっているため、Z軸の戦いの問題を意味します。
depth関数とブレンディングを使い修正できる可能性があります。調べてみた方が良さそうですね。</p>
</li>
<li><p>見たいデータセットをスケールアップして他のデータセットをスケールダウンする</p>
<p>全てのボックスは惑星の中心に位置しているので、1.0以下に縮小すると惑星の中に沈んでしまいます。
最初は良いアイデアのように聞こえますが、高さの低いボックスはほとんどすぐに消えてしまい、新しいデータセットが1.0までスケールアップするまで置き換えできません。
このため、アニメーション遷移があまり気持ち良くありません。派手なカスタムシェーダーで修正できるかもしれません。</p>
</li>
<li><p>モーフターゲットを使用する</p>
<p>モーフターゲットはジオメトリ内の各頂点に複数の値を与え、それらの中間を <em>モーフ</em> または lerp (線形補間) する方法です。
モーフターゲットは3Dキャラクターの表情アニメーションに最も一般的に使用されていますがそれだけではありません。</p>
</li>
</ul>
<p>モーフターゲットを使ってみましょう。</p>
<p>これまで通りにデータセットごとにジオメトリを作成しますが、それぞれのデータから <code class="notranslate" translate="no">position</code> を抜き出してモーフターゲットとして使用します。</p>
<p>まず <code class="notranslate" translate="no">addBoxes</code> を変更してマージされたジオメトリを返すだけに変更してみましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function addBoxes(file, hueRange) {
+function makeBoxes(file, hueRange) {
  const {min, max, data} = file;
  const range = max - min;

...

-  const mergedGeometry = BufferGeometryUtils.mergeGeometries(
-      geometries, false);
-  const material = new THREE.MeshBasicMaterial({
-    vertexColors: true,
-  });
-  const mesh = new THREE.Mesh(mergedGeometry, material);
-  scene.add(mesh);
-  return mesh;
+  return BufferGeometryUtils.mergeGeometries(
+     geometries, false);
}
</pre>
<p>ここでもう1つやるべき事があります。モーフターゲットは全ての頂点数が全く同じである必要があります。
あるターゲットの頂点#123は、他の全てのターゲットに対応する頂点#123を持つ必要があります。
しかし、異なるデータセットにはデータのないデータポイントがあるかもしれないので、
そのポイントに対してはボックスが生成されず、別のデータセットに対応する頂点も生成されません。</p>
<p>そこで全てのデータセットをチェックし、どのセットにもデータがある場合は常に何かを生成するか、
またはどのセットにもデータがない場合は何も生成しないかのどちらかを選択する必要があります。後者をやってみましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+function dataMissingInAnySet(fileInfos, latNdx, lonNdx) {
+  for (const fileInfo of fileInfos) {
+    if (fileInfo.file.data[latNdx][lonNdx] === undefined) {
+      return true;
+    }
+  }
+  return false;
+}

-function makeBoxes(file, hueRange) {
+function makeBoxes(file, hueRange, fileInfos) {
  const {min, max, data} = file;
  const range = max - min;

...

const geometries = [];
  data.forEach((row, latNdx) =&gt; {
    row.forEach((value, lonNdx) =&gt; {
+      if (dataMissingInAnySet(fileInfos, latNdx, lonNdx)) {
+        return;
+      }
      const amount = (value - min) / range;

...
</pre>
<p><code class="notranslate" translate="no">addBoxes</code> を呼び出していたコードを <code class="notranslate" translate="no">makeBoxes</code> に変更し、モーフターゲットを設定します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+// make geometry for each data set
+const geometries = fileInfos.map((info) =&gt; {
+  return makeBoxes(info.file, info.hueRange, fileInfos);
+});
+
+// use the first geometry as the base
+// and add all the geometries as morphtargets
+const baseGeometry = geometries[0];
+baseGeometry.morphAttributes.position = geometries.map((geometry, ndx) =&gt; {
+  const attribute = geometry.getAttribute('position');
+  const name = `target${ndx}`;
+  attribute.name = name;
+  return attribute;
+});
+baseGeometry.morphAttributes.color = geometries.map((geometry, ndx) =&gt; {
+  const attribute = geometry.getAttribute('color');
+  const name = `target${ndx}`;
+  attribute.name = name;
+  return attribute;
+});
+const material = new THREE.MeshBasicMaterial({
+  vertexColors: true,
+});
+const mesh = new THREE.Mesh(baseGeometry, material);
+scene.add(mesh);

...
</pre>
<p>TweenMangerを使って <code class="notranslate" translate="no">Tween</code> を作成します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// show the selected data, hide the rest
function showFileInfo(fileInfos, fileInfo) {
  fileInfos.forEach((info) =&gt; {
    const visible = fileInfo === info;
    info.elem.className = visible ? 'selected' : '';
    const targets = {};
    fileInfos.forEach((info, i) =&gt; {
      targets[i] = info === fileInfo ? 1 : 0;
    });
    const durationInMs = 1000;
-    new TWEEN.Tween(mesh.morphTargetInfluences)
+    tweenManager.createTween(mesh.morphTargetInfluences)
      .to(targets, durationInMs)
      .start();
  });
  requestRenderIfNotRequested();
}
</pre>
<p>次にtweenManagerを更新するためにレンダーループを修正し、アニメーションが実行されている場合はレンダリングを継続します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render() {
  renderRequested = false;

if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

+  if (tweenManager.update()) {
+    requestRenderIfNotRequested();
+  }

controls.update();
  renderer.render(scene, camera);
}
render();
</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/lots-of-objects-morphtargets.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/lots-of-objects-morphtargets.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>これがお役に立てれば幸いです。
three.jsが提供するサービスを利用するか、カスタムシェーダーを使ってモーフターゲットを使うのは多くのオブジェクトを移動させるための一般的なテクニックです。
例として全てのキューブに別の目標を設定し、そこから地球上での最初の位置へと変化します。
地球儀を紹介するにはかっこいいかもしれません。</p>
<p>次は<a href="align-html-elements-to-3d.html">HTML要素を3Dに整列させる</a>で説明している地球儀にラベルを追加します。</p>
<p>注: 男性や女性の割合、または正の差をグラフ化する事もできますが、情報を表示する方法に基づいて地表から成長するキューブはほとんどのキューブが低い方が良いでしょう。
これらの他の比較を使用した場合、ほとんどのキューブは最大高さの約1/2の大きさになり可視化として良くありません。
<code class="notranslate" translate="no">amountGreaterThan</code> を変えたように感じますが、このような場合は <a href="/docs/#api/ja/math/Math.max(a - b, 0)"><code class="notranslate" translate="no">Math.max(a - b, 0)</code></a> を <code class="notranslate" translate="no">(a - b)</code> "正の差" や <code class="notranslate" translate="no">a / (a +b)</code> "パーセント" のようなものに変えると何を言っているのかわかるでしょう。</p>

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

</body></html>

${this.title}

Code Editor : optimize-lots-of-objects-animated.html