질문답변

안녕하세요. ESS 김희정 담당입니다.

객체 윤곽선 애니메이션 효과 적용과 관련하여 문의드립니다.

app에 내장된 three를 기반으로 아래 예제와 유사한 형태의 객체 애니메이션 효과를 적용하고자 시도하였습니다.
https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html

우선 해당 예제와 동일한 환경을 적용하고자 app에 bloom을 적용했습니다.

  _setupBloomForApp(app) {

    const { composer } = this.setupBloomPostProcessing(app);

    app._bloomComposer = composer;

  }

  setupBloomPostProcessing(app) {

    const THREE = app._THREE;

    const renderer = app._renderer;

    const scene = app._scene;

    const camera = app._camera;

    const resolution = new THREE.Vector2(window.innerWidth, window.innerHeight);

    const composer = new EffectComposer(renderer);

    composer.addPass(new RenderPass(scene, camera));

    const bloomPass = new UnrealBloomPass(resolution, 1.5, 0.4, 0.85);

    bloomPass.threshold = 0;

    bloomPass.strength = 1;

    bloomPass.radius = 0.5;

    composer.addPass(bloomPass);

    composer.addPass(new OutputPass());

    function onResize() {

      const w = window.innerWidth;

      const h = window.innerHeight;

      resolution.set(w, h);

      bloomPass.resolution.copy(resolution);

      composer.setSize(w, h);

      composer.setPixelRatio(window.devicePixelRatio);

    }

    window.addEventListener('resize', onResize);

    onResize();

    app.setRenderBefore(() => {

      composer.render();

    });

    return { composer, bloomPass };

  }

이후 객체에 윤곽선 효과를 추가할 수 있도록 설정하였습니다.

const instance = this.layer.addPosition(this._parsePosition(obj, currentRootPos));

(addPosition으로 생성된 instance에 설정)

 new THREE.ShaderMaterial({
   vertexShader: vShader,
   fragmentShader: fShader,
   transparent: true,
   depthTest: false,
   depthWrite: false,
   side: THREE.DoubleSide
 });

메쉬의 geometry를 기반으로 EdgesGeometry를 생성하고 LineSegments를 child에 추가하는 방식으로 구현하였습니다.

instance.traverse((child) => {
  if (child.isMesh && child.geometry) {
    const edges = new THREE.EdgesGeometry(child.geometry, 15);
    const line = new THREE.LineSegments(edges, forceVisibleMaterial);
    child.add(line);
  }
});



하지만 지도상에서 객체의 윤곽선이 전혀 표시되지 않습니다.

ShaderMaterial 대신 아래와 같이 LineBasicMaterial로 변경하여 단순 윤곽선이라도 확인해보았으나 출력되지 않았습니다.

const forceVisibleMaterial = new THREE.LineBasicMaterial({
  color: 0xffff00,
  linewidth: 2
});

혹시 제가 설정한 환경 외에 별도로 설정해야 할 부분이 있을지,

혹은 윤곽선 애니메이션 효과를 위해 적용할 수 있는 다른 방식을 알고계시는게 있다면 조언 부탁드립니다.

감사합니다.