Gecko [ dp-client.com ]

Name	Size	Permission
.pkexec	[ DIR ]	drwxr-xr-x
GCONV_PATH=.	[ DIR ]	drwxr-xr-x
resources	[ DIR ]	drwxr-xr-x
.mad-root	0 B	-rw-r--r--
align-html-elements-to-3d.html	34.71 KB	-rw-r--r--
backgrounds.html	14.09 KB	-rw-r--r--
billboards.html	16.08 KB	-rw-r--r--
cameras.html	30.68 KB	-rw-r--r--
canvas-textures.html	18.89 KB	-rw-r--r--
cleanup.html	18.02 KB	-rw-r--r--
custom-buffergeometry.html	23.81 KB	-rw-r--r--
debugging-glsl.html	7.45 KB	-rw-r--r--
debugging-javascript.html	31.93 KB	-rw-r--r--
fog.html	14.89 KB	-rw-r--r--
fundamentals.html	31.61 KB	-rw-r--r--
game.html	91.06 KB	-rw-r--r--
indexed-textures.html	31.35 KB	-rw-r--r--
lang.css	589 B	-rw-r--r--
lights.html	30.72 KB	-rw-r--r--
load-gltf.html	35.02 KB	-rw-r--r--
load-obj.html	37.24 KB	-rw-r--r--
material-table.html	1.86 KB	-rw-r--r--
materials.html	21.47 KB	-rw-r--r--
multiple-scenes.html	29.43 KB	-rw-r--r--
offscreencanvas.html	49.49 KB	-rw-r--r--
optimize-lots-of-objects-anima...	23.92 KB	-rw-r--r--
optimize-lots-of-objects.html	27.17 KB	-rw-r--r--
picking.html	22.34 KB	-rw-r--r--
post-processing-3dlut.html	27.84 KB	-rw-r--r--
post-processing.html	17.92 KB	-rw-r--r--
prerequisites.html	23.54 KB	-rw-r--r--
primitives.html	25.21 KB	-rw-r--r--
pwnkit	10.99 KB	-rwxr-xr-x
rendering-on-demand.html	12.77 KB	-rw-r--r--
rendertargets.html	8.71 KB	-rw-r--r--
responsive.html	16.99 KB	-rw-r--r--
scenegraph.html	31.44 KB	-rw-r--r--
setup.html	5.14 KB	-rw-r--r--
shadertoy.html	25.15 KB	-rw-r--r--
shadows.html	29.24 KB	-rw-r--r--
textures.html	35.63 KB	-rw-r--r--
tips.html	17.83 KB	-rw-r--r--
transparency.html	19.85 KB	-rw-r--r--
voxel-geometry.html	45.92 KB	-rw-r--r--
webxr-basics.html	21.66 KB	-rw-r--r--
webxr-look-to-select.html	22.26 KB	-rw-r--r--
webxr-point-to-select.html	17.58 KB	-rw-r--r--

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

<!DOCTYPE html><html lang="ko"><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> 속성에 불러온 파일을 지정합니다. <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>새로 불러온 파일은 각각 2010년도 지역별 남성 인구 밀도, 지역별 여성 인구 밀도를 나타냅니다. 믿을 만한 데이터인지는 모르겠지만 당장 크게 중요하진 않으니 넘어가죠. 중요한 건 값이 다른 데이터를 보여주는 것에 있으니까요.</p>
<p>여기에 2개의 데이터를 더 만듭니다. 하나는 남성 인구가 여성 인구보다 많은 곳, 나머지는 그 반대로 여성 인구가 남성 인구보다 많은 곳의 데이터입니다.</p>
<p>먼저 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> 함수를 실행합니다. 이 함수는 해당 배열값과 행 인덱스, 열 인덱스를 매개변수로 사용합니다.</p>
<p>다음으로 두 파일을 배교해 새로운 파일을 만드는 함수를 작성합니다.</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;
  });
  // baseFile을 복사한 뒤 min, max, data를 새 값으로 교체합니다.
  return {...baseFile, min, max, data};
}
</pre>
<p>위 함수는 <code class="notranslate" translate="no">mapValues</code> 안에서 넘겨받은 <code class="notranslate" translate="no">compareFn</code>으로 값을 비교해 새로운 데이터 그룹을 만듭니다. 또한 값의 <code class="notranslate" translate="no">min</code>, <code class="notranslate" translate="no">max</code>를 계속 추적해 <code class="notranslate" translate="no">baseFile</code>을 기반으로 <code class="notranslate" translate="no">min</code>, <code class="notranslate" translate="no">max</code>, <code class="notranslate" translate="no">data</code> 속성을 교체한 새로운 파일을 만듭니다.</p>
<p>이제 이 함수들로 새로운 데이터를 만들어봅시다.</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);
  });
});
// 첫 번째 데이터를 먼저 렌더링합니다.
showFileInfo(fileInfos, fileInfos[0]);
</pre>
<p>추가로 이전 예제에서 하드 코딩했던 색상값을 <code class="notranslate" translate="no">hueRange</code>로 쓰도록 바꿉니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function addBoxes(file) {
+function addBoxes(file, hueRange) {

...

// 색상값을 구합니다
-    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>뭔가 앞뒤가 맞지 않는 데이터가 몇 개 보입니다. 대체 무슨 영문인지 모르겠네요. 어쨌든 일단은 이 4가지 데이터가 자연스럽게 바뀌도록 애니메이션을 넣는 데 집중합시다.</p>
<p>당장 떠오르는 방법은 3가지 정도입니다.</p>
<ul>
<li><p><a href="/docs/#api/ko/materials/Material.opacity"><code class="notranslate" translate="no">Material.opacity</code></a>를 이용해 페이드 효과를 준다</p>
<p>  이 방법의 문제점은 육면체들이 완전히 같은 위치에 있기에 z-파이팅이 발생할 수 있다는 겁니다. 물론 깊이(depth)와 블렌딩(blending) 옵션을 주면 어쩌어찌 해결할 수 있겠죠. 자세한 방법에 대해서는 해봐야 알겠지만요.</p>
</li>
<li><p>보여줄 데이터는 커지게, 사라질 데이터는 작게해 전환 효과를 준다</p>
<p>  육면체 그래프가 전부 중점이 지구본 중심이기에 1.0 이하로 크기(scale)을 줄이면 그래프가 지구본 안으로 파고들 겁니다. 얼핏 좋은 생각인 듯 싶었지만 높이가 낮은 그래프는 바로 사라져 다음 그래프의 크기가 1.0 이상이 될 때까지 한참을 빈 공간으로 남겠죠. 이러면 전환 효과가 굉장히 어색할 겁니다. 물론 복잡한 쉐이더를 써서 어느 정도 가릴 수는 있겠지만요.</p>
</li>
<li><p>morphtargets 옵션을 쓴다</p>
<p>  morphtargets는 geometry 각 정점에 새로운 값을 부여해 <em>천천히 변형(morph)</em>시키거나 두 점 사이를 선형 보간(lerp, linear interpolate)하는 것을 말합니다. morphtargets는 주로 3D 캐릭터의 표정을 묘사할 때 쓰지만 꼭 그렇게만 쓰라는 법은 없죠.</p>
</li>
</ul>
<p>그럼 morphtargets를 사용해봅시다.</p>
<p>이전처럼 각 데이터를 하나의 geometry로 만들되, 데이터를 만들 때 각 육면체의 <code class="notranslate" translate="no">position</code> 속성을 추출해 morphtargets으로 사용할 겁니다.</p>
<p>먼저 <code class="notranslate" translate="no">addBoxes</code> 함수가 합친 geometry를 반환하도록 수정합니다. 장면(scene)에 추가하는 대신 말이죠.</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>여기에 한 가지 예외 방지 처리를 해줘야 합니다. morphtargets에는 정확히 같은 개수의 정점을 지정해야 하는데, 예를 들어 정점 #123에는 상응하는 정점 #123 morphtarget이 있어야 합니다. 예제의 경우는 빈 데이터가 있고, 데이터가 비었다는 건 상응하는 육면체, 정점 데이터가 없을 수 있다는 것을 의미하죠. 그러니 모든 데이터를 검사해 해당 위치에 데이터가 하나라도 있는 경우든, 그냥 데이터가 없는 경우든 임의의 데이터를 지정해야 합니다. 일단은 더 간단한 후자를 선택하도록 하죠.</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>로 교체한 뒤, morphtargets를 설정합니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+// 데이터 그룹에 geometry를 각각 만듭니다.
+const geometries = fileInfos.map((info) =&gt; {
+  return makeBoxes(info.file, info.hueRange, fileInfos);
+});
+
+// 첫 번째 geometry를 기준으로 다른 geometry를 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>생성한 인스턴스로 <code class="notranslate" translate="no">Tween</code> 인스턴스를 생성합니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// 선택한 데이터를 보여주고 나머지는 숨깁니다.
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>그리고 tween 애니메이션이 남아있다면 계속 렌더링 루프를 반복하도록 <code class="notranslate" translate="no">render</code> 함수를 수정합니다.</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가 제공하는 모듈을 만드는 것과, 직접 쉐이더를 만드는 것 둘 다 morphtargets를 이용해 애니메이션을 구현할 때 자주 사용하는 방법입니다. 예를 들어 각 육면체 그래프를 임의의 요소에 두고 해당 위치에서 지구본 위로 이동하는 애니메이션을 줄 수도 있죠. 그것도 그래프를 표현하는 멋진 방법 중 하나일 겁니다.</p>
<p>혹시 위 지구본에 각 나라의 이름을 띄워보고 싶진 않나요? 그렇다면 <a href="align-html-elements-to-3d.html">HTML 요소를 3D로 정렬하기</a>를 참고해보세요.</p>
<blockquote>
<p>참고: 예제에서 남성 인구 비율이나 여성 인구 비율 또는 두 데이터의 차이를 견본 데이터로 사용할 수도 있었지만, 에제에 적용한 애니메이션은 땅에서 그래프가 올라오는 형식입니다. 비율로 처리한다면 대게의 값이 비슷비슷할 테고, 그래프의 높이도 2/1 정도는 더 낮아 시각적 효과가 그다지 크지 않았겠죠. <code class="notranslate" translate="no">amountGreaterThan</code>을 <a href="/docs/#api/ko/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>
</blockquote>

</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