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;
  });
}

SkyMesh는 하늘에 대한 시각적인 표현을 해주는 API입니다. 이 SkyMesh를 이용하여 시각적인 표현 뿐만 아니라 실제 광원으로써 사용하기 위한 코드에 대한 내용입니다.

먼저 SkyMesh를 사용하기 위해 다음과 같은 import 문이 필요합니다.

import { SkyMesh } from 'three/addons/objects/SkyMesh.js';

그리고 SkyMesh 객체를 생성합니다.

private sky!: SkyMesh;

private setupSky() {
  const sky = new SkyMesh();
  sky.scale.setScalar(9000);
  // this.scene.add(sky);

  sky.sunPosition.value.copy(this.sunLight.position);
  sky.turbidity.value = 3;
  sky.rayleigh.value = 2;
  sky.cloudSpeed.value = 0; // keep the clouds static, like the WebGL version
  sky.showSunDisc.value = false; // the sun is represented by the light

  this.sky = sky;
}

위의 코드는 SkyMesh 객체를 생성했고 있는데, SkyMesh의 위치를 잡기 위해 this.sunLight의 position을 참고하고 있습니다. 고도와 방위각을 통해 직접 그 위치를 정하고 싶다면 다음 코드를 참고하시기 바랍니다.

sunLight.position.setFromSphericalCoords(
  1, 
  THREE.MathUtils.degToRad(90 - params.elevation), 
  THREE.MathUtils.degToRad(params.azimuth)
);

이를 scene에 추가하면 하늘이 표현됩니다. 하지만 하늘 표현뿐만 아니라 SkyMesh를 이용해 환경광을 구성해야 합니다. 이를 위한 코드는 다음과 같습니다.

private setupEnvironment() {
  const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
  const sceneEnv = new THREE.Scene();
  sceneEnv.add(this.sky);

  const renderTarget = pmremGenerator.fromScene(sceneEnv);
  this.scene.environment = renderTarget.texture;
  // renderTarget.dispose();

  this.scene.add(this.sky);
}

vertex shader의 결과를 fragment shader로 전달하기 위한 varying을 TSL 노드로 사용하기 위한 예제입니다. 먼저 varying으로 사용될 데이터를 정의합니다.

const colorVarying = vec3(0).toVarying(); // same as varying(vec3(0))

이 varying 데이터의 값을 재질의 vertex shader에 해당하는 positionNode에서 할당합니다.

material.positionNode = Fn(() => {
  ...

  colorVarying.assign(texture(colorTexture, colorUv).rgb)

  ...
}

varying 데이터를 재질의 다양한 fragment shader 중 하나에 해당하는 colorNode에서 사용합니다.

material.colorNode = colorVarying