[카테고리:] Three.JS

작성일자

three.js, 3D 모델에 대한 라벨 시각화

3D 모델에 대한 효과적은 라벨 시각화는 그 목표에 따라 매우 주관적이고 다양하게 접근할 수 있습니다. 이 글에서 제공되는 라벨 시각화 역시 많은 다양한 방법 중에 하나인데요. 목표는 3D 모델을 최대한 가리지 않아야 하며 라벨 사이의 충돌을 최소화 해야 합니다. 이런 목표에 따라 만든 기능은 아래와 같습니다.

위의 기능을 프로젝트에 빠르고 쉽게 적용하기 위해 SmartLabel이라는 이름으로 컴포넌트로 만들었는데요. 이 컴포넌트를 적용할 때 고려해야할 코드를 정리하면 다음과 같습니다.

먼저 SmartLabel 컴포넌트와 라벨 관련 데이터를 생성하고 설정해야 합니다.

  _setupLabels() {
    const smartLabel = new SmartLabel(this._scene, this._camera);
    this._smartLabel = smartLabel;

    const labels = {
      "Object": {
        label: "미할당영역",
        textColor: "gray",
      },
      "Part1": {
        label: "정문 계단",
        textColor: "white",
      },
      "Part2": {
        label: "정문",
        textColor: "white",
      },
      "Part3": {
        label: "파손영역A",
        textColor: "red",
      },
      "Part4": {
        label: "파손영역B",
        textColor: "red",
      },
      
      ...
    }

    this._smartLabel.setLabelData(labels);
  }

labels 객체의 key는 Mesh의 이름이고 Value는 표시될 라벨과 텍스트 색상입니다. 라벨이 표시될 Mesh의 지정은 다음과 같습니다.

_setupModel() {
  const loader = new GLTFLoader();
  loader.load("./model.glb", gltf => {
    const object = gltf.scene;
    this._scene.add(object);
    const meshes = [];

    object.traverse(obj => {
      if (obj.isMesh) meshes.push(obj);
    });

    this._smartLabel.setTargetMeshs(meshes);
    this._smartLabel.buildLabels();

    ...
  });
}

매 프레임마다 다음과 같은 코드 호출이 필요합니다.

update() {
  ...

  this._smartLabel.updateOnFrame();
}

렌더링 시 다음과 같은 코드 호출이 필요하구요.

render() {
  this.update();

  ...

  this._smartLabel.render();

  requestAnimationFrame(this.render.bind(this));
}

렌더링 되는 영역의 크기가 변경되면 다음 코드 호출이 필요합니다.

resize() {
  const width = this._divContainer.clientWidth;
  const height = this._divContainer.clientHeight;

  ...  

  this._smartLabel.updateSize(width, height);
}

라벨은 DOM 요소입니다. 이에 대한 스타일이 필요할 수 있는데, 위의 예시의 경우 다음과 같습니다.

.label {
  font-size: 1em;
  border: 2px solid yellow;
  padding: 0.3em 0.8em;
  border-radius: 0.9em;

  background-color: black;
  transition: transform 0.2s ease-out, opacity 1s ease;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
작성일자

three.js, 선택된 3D 모델에 대한 하이라이팅

3D 그래픽과 관련된 개발을 하다보면 사용자 요구 사항에 대한 기본적인 것들이 몇가지 존재합니다. 그중에 하나가 마우스 등으로 어떤 모델을 클릭해 선택했을때 선택된 모델을 시각적으로 하일라이팅되도록 하는 것입니다. 매우 명확하고 반드시 필요한 요구사항입니다. 아래는 마우스로 모델의 특정 부분을 선택하면 선택된 부분에 대한 하일라이팅입니다.

이런 요구사항을 빠르고 쉽게 반영될 수 있도록 SelectionPassWrapper라는 이름으로 컴포넌트로 만들어 보았는데요. 이름에서도 알 수 있는듯이 Postprocess를 위한 Pass로 만들어졌다는 것을 알 수 있습니다. SelectionPassWrapper를 이용하는 API를 정리하면 다음과 같습니다.

먼저 SelectionPassWrapper를 생성해 Postprocess를 위한 EffectComposer에 추가하는 것으로 시작합니다.

_setupPostprocess() {
  ...

  const selectionPassWrapper = new SelectionPassWrapper(this._renderer, this._scene, this._camera);
  // selectionPassWrapper.debug = false;
  const selectionPass = selectionPassWrapper.pass;
  effectComposer.addPass(selectionPass);
  this._selectionPassWrapper = selectionPassWrapper;

  ...
}

그리고 렌더링 영역의 크기가 변경되었을 때 다음 코드가 필요합니다.

resize() {
  ...

  this._selectionPassWrapper.updateSize();
}

마지막으로 하일라이팅하고자 하는 매시를 지정해야 하는데요. 아래의 코드는 하일라이팅 하고자 하는 메시를 마우스로 더블클릭하는 방식으로 선택하는 코드입니다.

_setupEvents() {
  ...

  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();

  window.addEventListener("dblclick", (event) => {
    mouse.x = (event.clientX / this._divContainer.clientWidth) * 2 - 1;
    mouse.y = -(event.clientY / this._divContainer.clientHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, this._camera);
    const intersects = raycaster.intersectObjects(this._scene.children, true);

    if (intersects.length > 0) {
      this._selectionPassWrapper.selectedMeshes.length = 0;

      const intersectedMesh = intersects[0].object;
      if(intersectedMesh.parent.type === "Group") {
        intersectedMesh.parent.traverse(child => {
          if(child.isMesh) {
            this._selectionPassWrapper.selectedMeshes.push(child);
          }
        });
      } else {
        this._selectionPassWrapper.selectedMeshes.push(intersectedMesh);
      }
    } else {
      this._selectionPassWrapper.selectedMeshes.length = 0;
    }

    this._selectionPassWrapper.updateSelection();
  });
}

만약 OrbitControls의 autoRotate나 enableDamping가 활성화된 경우 다음 코드가 필요합니다.

_setupControls() {
  this._orbitControls = new OrbitControls(this._camera, this._divContainer);
  this._orbitControls.addEventListener("change", () => {
    this._selectionPassWrapper.updateSelection();
  });
  this._orbitControls.autoRotate = true;
  this._orbitControls.enableDamping = true;
}
작성일자

three.js에서 두께를 갖는 라인

OpenGL이나 이를 기반으로 하는 WebGL에서 3D 그래픽에서 두께를 갖는 라인을 표현하기 위해서는 원하는 만큼의 두께를 표현하기 위한 볼륨을 갖는 매시를 구성해야 합니다. 3D 그래픽에서는 기본적으로 라인을 오직 1 픽셀만큼의 두께로 표현할 수 있다는 제약이 있기 때문입니다. 사실 이런 제약은 OpenGL의 제약은 아니고 이를 구현하는 쪽에서의 표준을 충족하지 못했다고 보는게 맞습니다. 원래 OpenGL은 라인에 대해서도 두께를 지정할 수 있고 이에 맞게 라인을 표현해야한다라는 표준을 정했지만 이 표준을 구현하는 쪽에서 이를 구현하지 않았기 때문입니다.

three.js에서도 라인을 표현할때 아무리 두께에 대한 값을 설정해줘도 항상 1 pixel로 표현됩니다. 다행히도 three.js는 두께를 갖는 라인을 표현하기 위해 충분히 검증된 기능을 Line2라는 확장 Addon을 제공합니다. 이 Line2를 사용하면 원하는 두께를 갖는 라인을 표현할 수 있습니다.

이 Line2를 이용하기 위해 다음과 같은 import문이 필요합니다.

import { ..., Line2, LineMaterial, LineGeometry, GeometryUtils } from "three/addons/Addons.js"

그리고 원하는 형태의 라인의 좌표와 색상을 통해 라인을 생성합니다.

_setupModel() {
  const positions = [];
  const colors = [];
  const points = GeometryUtils.hilbert3D(
    new THREE.Vector3(0, 0, 0), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7);
  const spline = new THREE.CatmullRomCurve3(points);
  const divisions = Math.round(3 * points.length);
  const point = new THREE.Vector3();
  const color = new THREE.Color();

  for (let i = 0, l = divisions; i < l; i++) {
    const t = i / l;
    spline.getPoint(t, point);
    positions.push(point.x, point.y, point.z);
    color.setHSL(t, 1, 0.5, THREE.SRGBColorSpace);
    colors.push(color.r, color.g, color.b);
  }

  const geometry = new LineGeometry();
  geometry.setPositions(positions);
  geometry.setColors(colors);

  const matLine = new LineMaterial({
    // wireframe: true,
    // color: 0xffffff,
    vertexColors: true,

    // worldUnits: false,
    linewidth: 10, // worldUnits이 false일 경우 pixel 단위

    // alphaToCoverage: true,

    // dashed: true,
    // dashSize: 3,
    // gapSize: 1,
    // dashScale: 1,
  });

  const line = new Line2(geometry, matLine);
  line.computeLineDistances();
  line.scale.set(1, 1, 1);
  this._scene.add(line);
}

결과는 다음과 같습니다.

위의 결과는 단순히 선으로 보이지만 사실 매시입니다. 코드 중 LineMaterial에 wireframe을 true로 설정하면 다음처럼 면으로 구성된 매시라는 점과 항상 카메라를 향하도록(빌보드) 설정되어 있다느 것을 알 수 있습니다.

작성일자

three.js의 보다 사실적인 유리 재질을 위한 dispersion 속성

어떤 유리를 보면 유리의 내부에서 마치 프리즘처럼 빛이 산란되어 보이는 경우가 있습니다. 유리를 마냥 투명하게만 표현하면 간혹 있는지 없는지스러운 느낌없는 느낌으로 표현되고 마는데요. 이때를 위해 재질의 속성 중 dispersion을 활용할 수 있습니다. 이 속성은 오직 MeshPhysicalMaterial에서만 제공된다는 안타까운 점은 있지만 유리와 같은 재질은 한두개만 만들어두고 재활용하는 경우가 대부분이므로 충분히 활용할만합니다.

아래 이미지는 dispersion에 대한 값 변화에 따른 표현입니다. (이미지 출처: three.js examples)

번외로 흔히 손쉽지만 매우 효과적인 광원으로 HDRi를 사용하는데요. 이는 정적인 데이터 파일을 이용하는 경우고 데이터 없이 이와 유사한 광원을 만들어 내는 방법이 있습니다. 바로 RoomEnvironment 확장 기능인데요. 이 클래스는 Scene을 상속받는 것으로 Scene으로 구성된 내용으로 PMREM 데이터(환경맵 데이터의 한 종류)를 생성할 수 있습니다. 이에 대해 관련된 코드는 다음과 같습니다. 즉, 아래의 코드가 있다면 별도의 광원이 필요하지 않습니다. 단, 그림자 표현을 위해서는 별도의 광원이 필요합니다.

const environment = new RoomEnvironment();
const pmremGenerator = new THREE.PMREMGenerator(this._renderer);
const env = pmremGenerator.fromScene(environment).texture;
this._scene.background = env;
this._scene.environment = env;
this._scene.backgroundBlurriness = 0.5;
environment.dispose();