공간정보시스템 / 3차원 시각화 / 딥러닝 기반 기술 연구소 @지오서비스(GEOSERVICE)
나는 구닥다리 npm만 사용할꼬니까 … 먼저 npm-check-updates를 전역적으로다가 설치하고 …
npm install -g npm-check-updates
이미 설치된 패키지가 담긴 node_modules 폴더랑 패키지 고정 버전 정보가 담긴 package-lock.json 파일을 삭제해 주시고 … 다음 명령을 똭! 입력하면 …
ncu -u
package.json에 최신 버전의 패키지가 반영되고 이제 npm i로 설치하면 끝.
아주 자연스러웠어 … 완벽해
GEOSERVICE-WEB은 지오서비스(지리, 지도, 위치 등과 관련된 서비스)를 웹에서 제공합니다. 지오서비스웹의 목표는 웹에서 누구나 쉽게 지도 기반의 비지니스를 효과적으로 해결하기 위한 서비스를 제공하는데 있습니다. 웹브라우저에서 아래의 URL을 입력하여 이용할 수 있습니다.
https://www.geoservice.co.kr
지오서비스웹은 공간(Spatial)과 위치(Location)에 대한 다양한 서비스를 웹에서 이용할 수 있습니다. 예를 들어 지오코딩 등과 같은 기능을 이용해 공간 데이터를 생성하고 시각화할 수 있습니다. 또한 자신이 가진 데이터를 아카이브에 업로드하여 언제 어디서든 사용할 수 있으며 다른 사용자와 기본적으로 공유할 수 있습니다. 원한다면 내가 올린 데이터는 공유하지 않도록 설정할 수도 있습니다.
드디어 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가지입니다.
이제 넓은 범위의 지형 지물에 대한 장면에 GI를 적용해 멋진 장면을 렌더링해 봅시다.
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에 대한 글은 아래를 참조하자.
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정도 곱해줘 값을 증폭시켜 보면 다음처럼 값에 대한 차이값을 눈으로 볼 수 있다.
쉐이더 프로그래밍의 디버깅은 이처럼 사람의 눈으로 직접 확인하는 방법 이외에 뾰족한 수가 없다는 문제가 있는데, 위와 같은 상황도 있다는 것을 미리 알아두면 좋을 것이다.