GIS Developer

이 글은 three.js를 이용한 효과적인 광원 효과를 위해 LightProbeGrid를 WebGPU 렌더러에서 사용할 때 빠른 적용을 위해 작성된 글입니다.

먼저 필요한 API에 대한 import 문입니다.

import { LightProbeGrid } from 'three/examples/jsm/lighting/LightProbeGrid.js';
import { LightProbeGridHelper } from 'three/examples/jsm/helpers/LightProbeGridHelper.js';

관련된 필드는 다음과 같습니다.

private probes?: LightProbeGrid;
private probesHelper?: LightProbeGridHelper;

LightProbeGrid는 정적 장면에 대한 광원 효과입니다. 즉, 장면을 구워야 합니다. 아래의 코드는 장면에 대한 광원을 굽는 코드입니다.

async bake(resolution: number) {
  if (this.probes) {
    this.scene.remove(this.probes);
    this.probes.dispose();
  }

  const probes = new LightProbeGrid(
    5.6, 4.7, 5.6,
    resolution, resolution, resolution
  );

  probes.position.set(0, 2.45, 0);

  await probes.bake(
    this.renderer, this.scene,
    { 
      cubemapSize: 32,
      sampleCount: 512, 
      bounces: 0,
      near: 0.05, 
      far: 20
    }
  );

  probes.visible = params.enabled;
  this.scene.add(probes);

  this.probes = probes;

  // Update debug visualization

  if (!this.probesHelper) {
    this.probesHelper = new LightProbeGridHelper(probes);
    this.probesHelper.visible = params.showProbes;
    this.scene.add(this.probesHelper);
  } else {
    this.probesHelper.probes = probes;
    this.probesHelper.update();
  }
}

위의 코드에서 사용된 설정값에 대한 객체는 다음과 같습니다.

const params = {
  enabled: true,
  showProbes: true,
  resolution: 6
};

GUI를 통해 설정값을 조정하기 위한 코드는 다음과 같습니다.

private setupGUI() {
  const gui = this.renderer.inspector.createParameters('Light Probes');
  gui.add(params, 'enabled').name('GI').onChange((value: boolean) => {
    if(this.probes) this.probes.visible = value;
  });

  gui.add(params, 'resolution', 2, 12, 1).name('Resolution').onChange((value: number) => {
    this.bake(value);
  });

  gui.add(params, 'showProbes').name('Show Probes').onChange((value: boolean) => {
    if(this.probesHelper) this.probesHelper.visible = value;
  });
}