[카테고리:] 프로그래밍

작성일자

드디어 three.js에서도 GI 기능이 지원됩니다.

드디어 three.js의 WebGPU 지원이 매우 안정화되면서 GI(Global Illumination, 전역 조명) 기능을 사용할 수 있습니다. 꽤 오래전 babylon.js에서 GI 기능을 제공하지만 three.js는 그러지 못해 늘 안타까웠는데요. 먼저 GI란 3D 장면 내에서 빛이 광원에서 나와 물체에 직접 닿는 것(직접광)뿐만 아니라, 표면에 반사되고 산란되어 주변 환경을 밝히는 간접광(Indirect Lighting)까지 모두 계산하여 사실적인 조명 효과를 만들어내는 기술이라고 정의되어 있습니다. 네, 더 나은 장면을 만들어 주는 기술이라는 것입니다. 먼저 GI가 적용되지 않은 장면입니다. 광원은 PointLight 하나만 사용되었습니다.

오직 PointLight에 대한 광원만으로 개별 메시에 대한 쉐이딩만이 고려되어 렌더링된 일반적인 three.js 렌러링 결과죠. 부족한 이런 렌더링 품질을 보완하기 위해 블렌더와 같은 3D 툴을 이용해 광원맵을 baking해서 사용하곤 했습니다. 하지만 이제 그럴 필요없이 GI를 적용하면 위의 결과가 아래처럼 바뀝니다.

품질이 훨씬 좋아졌습니다. FPS가 양호합니다. 예전에 babylon.js에서 GI를 적용했을때 FPS가 매우 나쁘게 나왔는데 three.js는 양호합니다. 물론 현재 babylon.js의 GI 기능이 개선되어 좋아졌을 수도 있지만 말입니다.

끝으로 주요 GI 기술의 종류는 3가지입니다.

  • 레이 트레이싱(Ray Tracing): 빛의 경로를 역추적하여 반사, 굴절 등을 물리적으로 정확하게 계산.
  • 라이트 맵(Light Map): 빛의 효과를 미리 계산해 텍스처로 물체에 입히는 방식.
  • 앰비언트 오클루전(AO): 주로 구석이나 틈새 부분에 은은한 음영을 추가해 3D 모델의 입체감을 향상시키는 기술 (GI의 보조 역할).

이제 넓은 범위의 지형 지물에 대한 장면에 GI를 적용해 멋진 장면을 렌더링해 봅시다.

작성일자

Soft Min/Max

SDF에서 두 개의 Distance를 섞을 때….. 합은 최소로, 교차는 최대로 얻을 수 있다. 하지만 두 개의 거리가 만나는 지점에 너무 칼처럼 정확하면 보기가 딱딱해 보이는데.. 예를 들어 다음과 같다.

material.colorNode = Fn(([]) => {
  const color = backgroundColor(0.015, BLACK, GRAY);

  const st = uv().sub(.5);

  const A = sdfHexagon(st.sub(vec2(-.1, -.13)), .25);
  const B = sdfBox(st.sub(vec2(.1, .2)), vec2(.2, .2));

  const D = min(A, B, 100);

  color.assign(mix(RED, color, D.smoothstep(0, 0.0025)));
  color.assign(mix(BLACK, color, D.abs().smoothstep(0.005, 0.0052)));

  return vec4(color, 1);
})();

두 개의 거리가 만나는 지점을 좀더 부드럽게 표현하기 위해 Soft Min/Max를 사용하면 되는데, 먼저 Soft Min과 Max에 대한 함수는 다음과 같다.

const softMax = /*@__PURE__*/ Fn(([a, b, k]) => {
  return log(exp(k.mul(a)).add(exp(k.mul(b)))).div(k);
}, { a: 'float', b: 'float', k: 'float', return: 'float' });

const softMin = /*@__PURE__*/ Fn(([a, b, k]) => {
  return softMax(a.negate(), b.negate(), k).negate();
}, { a: 'float', b: 'float', k: 'float', return: 'float' });

앞서봤던 예제 코드에 위의 Soft Min를 적용한 코드는 다음과 같다.

material.colorNode = Fn(([]) => {
  const color = backgroundColor(0.015, BLACK, GRAY);

  const st = uv().sub(.5);

  const A = sdfHexagon(st.sub(vec2(-.1, -.13)), .25);
  const B = sdfBox(st.sub(vec2(.1, .2)), vec2(.2, .2));

  const D = softMin(A, B, 80);

  color.assign(mix(RED, color, D.smoothstep(0, 0.0025)));
  color.assign(mix(BLACK, color, D.abs().smoothstep(0.005, 0.0052)));

  return vec4(color, 1);
})();

끝으로 이와 관련된 또 다른 Soft Min, Max에 대한 글은 아래를 참조하자.

2개의 모양 함수를 smooth하게 섞는 방법(smooth min/max)

작성일자

TSL에서 법선벡터와 관련된 노드 함수에 대한 고찰

fragmentNode에서 사용할 수 있는 일반적인 법선벡터는 normalWorld 노드이다. normalWorld은 이미 normalize가 되어 있다. transform이 전혀 이뤄지지 않았을지라도 normalLocal은 normalWorld와 다르며 normalLocal을 정규화해야 비로써 normalWorld와 같아진다. 즉, normalWorld.sub(normalLocal)은 0 벡터가 아니며 normalWorld.sub(normalLocal.normalize())가 0 벡터라는 것인데, 전제 조건은 transform이 전혀 이뤄지지 않았을때이다. normalWorld를 직접 계산해 보면 다음과 같다.

const normalView = vertexStage( modelNormalMatrix.mul( normalLocal ) );

vertexStage 노드는 vertex shader에서 varying(보간)으로 fragment로 넘겨준다. varying으로 넘겨줬고 법선벡터는 단위벡터로 사용되어야 하므로 넘겨받은 fragment 측에서 반드시 정규화를 시켜야 한다. 즉, normalWorld와 직접 계산한 normalView가 동일한 값을 가지려면 normalView를 정규화해야 한다.

가끔 시각화를 통해 normal의 동일성 여부를 확인하려고 할때가 있다. 즉, 아래의 코드처럼 말이다.

material.fragmentNode = Fn(([]) => {
  const color = normalWorld.sub(normalLocal);
  return vec4(color, 1);
})();

결과는 마치 normalWorld와 normalLocal이 동일하기라도 한것처럼 까맣게 표시된다. 하지만 아니다. 위의 코드 중 normalWorld.sub(normalLocal)의 결과값에 1000정도 곱해줘 값을 증폭시켜 보면 다음처럼 값에 대한 차이값을 눈으로 볼 수 있다.

쉐이더 프로그래밍의 디버깅은 이처럼 사람의 눈으로 직접 확인하는 방법 이외에 뾰족한 수가 없다는 문제가 있는데, 위와 같은 상황도 있다는 것을 미리 알아두면 좋을 것이다.

작성일자

TSL에서 2D 회전

어떤 2차원 좌표(st)를 정해진 중심점(mid)을 기준으로 원하는 각도(rotation)만큼 회전된 결과를 얻는 TSL 함수 정의는 다음과 같다.

const _rotate = Fn(([st, rotation, mid]) => {
  return vec2(
    cos(rotation).mul(st.x.sub(mid.x)).add(sin(rotation).mul(st.y.sub(mid.y))).add(mid.x),
    cos(rotation).mul(st.y.sub(mid.y)).sub(sin(rotation).mul(st.x.sub(mid.x))).add(mid.y),
  );
}, { st: 'vec2', rotation: 'float', mid: 'vec2', return: 'vec2'})

TSL에서 위의 함수처럼 2D 회전에 대한 내장 함수를 제공하는데 바로 rotateUV 노드 함수이다. rotateUV 노드 함수는 3차원 좌표를 회전하는 TSL 내장 함수인 rotate를 사용한 것에 지나지 않는다.

즉, 아래의 결과는 모두 같다.

material.fragmentNode = Fn(([]) => {
  const { x, y } = uv().toVar();

  const rotatedUv = _rotate(vec2(x, y), Math.PI * 0.25, vec2(0.5));
  // const rotatedUv = rotateUV(vec2(x, y), Math.PI * 0.25, vec2(0.5)); // 위와 같고
  // const rotatedUv = rotate(vec2(x, y).sub(vec2(0.5)), Math.PI * 0.25).add(vec2(0.5)) // 또 위와 같고..

  const l1 = float(0.03).div(length(rotatedUv.sub(vec2(.5, .5)).mul(vec2(.2, 1))));
  const l2 = float(0.03).div(length(rotatedUv.sub(vec2(.5, .5)).mul(vec2(1, .2))));

  return vec4(vec3(mul(l1, l2)), 2);
})();

아래 이미지는 위의 코드를 통해 45도 회전된 결과이다.

HDR 이미지로 캡쳐가 안되서 너무 구리게 보이는데….