제 유튜브 채널을 통해 강좌로 소개할 것들에 대해 먼저 결과 만을 찍어 먼저 올려 봅니다. 아마 바로 돌아오는 이번주 토요일 쯤.. 아래 2개 중 한 개를 찍어 올릴 듯 합니다.
제 유튜브 채널 이름은 GIS Developer 입니다. 채널을 구독하시면 영상 업로드 시 바로 알 수 있습니다.
Lerp, InvLerp, Remap 함수 코드 및 three.js에서의 적용
언어는 C#인가 C인가.. Java인가.. 다 해당되는거 같기도 한데.. 여튼 워낙 기초 코드로 작성된 함수이니 저장해 두고 three.js의 쉐이더 작성 코드에서 적용한 예를 살펴봅니다.
float Lerp(float a, float b, float t) {
return (1.0f - t) * a + b + t;
}
float InvLerp(float a, float b, float v) {
return (v-a) / (b-a);
}
float Remap(float iMin, float iMax, float oMin, float oMax, float v) {
flat t = InvLerp(iMin, iMax, v);
return Lerp(oMin, oMax, t);
}
위의 코드는 Shader 중 glsl 언어로도 사용되는데요. 저 같은 경우 three.js에서 사용한 경우를 소개해 봅니다. 참고로 three.js은 WebGL 기술을 랩핑한 js 라이브러리입니다.
Shader는 Vertex와 Fragment에 대한 처리가 있고.. 재질(Material)에 지정되는데요. 다시 재질은 적용될 지오메트리(Geometry)가 필요합니다. 다음은 지오메트리와 재질에 대한 코드입니다.
const geometry = new THREE.BoxGeometry(1, 1, 1, 10, 10, 10);
fetch("shader4.glsl").then(response => {
return response.text();
}).then(text => {
const fragmentShaerCode = text;
const material = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
transparent: true,
uniforms: {
iTime: { value: 0 },
iResolution: { value: new THREE.Vector3() },
},
vertexShader: `
uniform float iTime;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
//gl_Position = projectionMatrix*(modelViewMatrix*vec4(0.,0.,0.,1.)+vec4(position.x,position.y,0.,0.)); // <- billboard
}
`,
fragmentShader: fragmentShaerCode
});
const cube = new THREE.Mesh(geometry, material);
this._scene.add(cube);
this._material = material;
....
}).catch(function (error) {
console.warn(error);
});
fragmentShaerCode는 shader4.glsl 파일로부터 불러와지는데, 해당 코드는 다음과 같습니다.
uniform vec3 iResolution;
uniform float iTime;
varying vec2 vUv;
float rect(vec2 uv, vec2 p0, vec2 p1, float blur) {
float maskX = smoothstep(p0.x-blur, p0.x+blur, uv.x);
maskX -= smoothstep(p1.x-blur, p1.x+blur, uv.x);
float maskY = smoothstep(p0.y-blur, p0.y+blur, uv.y);
maskY -= smoothstep(p1.y-blur, p1.y+blur, uv.y);
float mask = maskX * maskY;
return mask;
}
// t = a -> return 0., t = b -> return 1.
float invLerp(float a, float b, float t) {
return (a - t) / (a - b);
}
float remap(float a, float b, float c, float d, float t) {
return invLerp(a, b, t) * (d - c) + c;
}
void main() {
vec2 cUv = vUv;
cUv -= .5;
float x = cUv.x;
float m = sin(iTime+x*8.) * .1;
float y = cUv.y - m;
float blur = remap(-.5, .5, .01, .25, x);
blur = pow(blur*3., 3.);
float mask = rect(vec2(x, y), vec2(-.5,-.1), vec2(.5,.1), blur);
vec3 col = vec3(1., 1., 0.) * mask;
gl_FragColor = vec4(col, 1. );
}
추후 이 내용을 제 스스로도 참조하기 위해 재질에 대한 uniforms 데이터를 지정하고 있는데요. 관련 코드는 다음과 같습니다.
update(time) {
time *= 0.001; // second unit
this._material.uniforms.iTime.value = time;
}
resize() {
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
...
this._material.uniforms.iResolution.value.set(width, height, 1);
}
위의 코드에 대한 실행 결과는 다음과 같습니다.
위의 예제는 YouTube의 The Art Of Code의 영상을 참조하여 three.js에 맞게 적용한 것입니다.
원하는 매쉬에 대한 에니메이션 ZoomIn 함수
먼저 사용하는 함수는 다음과 같습니다. (에니메이션을 위하 GSAP 라이브러리를 사용하였음)
_zoomFit(object3D, viewMode, bFront, viewAngle) {
const box = new THREE.Box3().setFromObject(object3D);
const sizeBox = box.getSize(new THREE.Vector3()).length();
const centerBox = box.getCenter(new THREE.Vector3());
const offset = new THREE.Vector3(viewMode==="X"?1:0, viewMode==="Y"?1:0, viewMode==="Z"?1:0);
if(!bFront) offset.negate();
offset.applyAxisAngle(new THREE.Vector3(1,0,0), THREE.Math.degToRad(viewAngle));
const newPosition = new THREE.Vector3().copy(centerBox).add(offset);
const halfSizeModel = sizeBox * 0.5;
const halfFov = THREE.Math.degToRad(this._camera.fov * .5);
const distance = halfSizeModel / Math.tan(halfFov);
const direction = (new THREE.Vector3()).subVectors(newPosition, centerBox).normalize();
newPosition.copy(direction.multiplyScalar(distance).add(centerBox));
const oldPosition = this._camera.position.clone();
gsap.to(this._camera.position, { duration: 0.5, x: newPosition.x, y: newPosition.y, z: newPosition.z});
// camera.lookAt(centerBox.x, centerBox.y, centerBox.z); // OrbitControls를 사용하지 않은 경우
// this._controls.target.copy(centerBox); // OrbitControls를 사용하고 있는 경우
gsap.to(this._controls.target, { duration: 0.5,
x: centerBox.x, y: centerBox.y, z: centerBox.z});
}
사용은 줌인 대상을 마우스로 클릭해 선택한다고 할때.. 먼저 RayCaster 객체를 하나 정의하구요.
_setupPicking() {
const raycaster = new THREE.Raycaster();
this._divContainer.addEventListener("click", this._onClick.bind(this));
this._raycaster = raycaster;
}
클릭 이벤트인 _onClick은 다음과 같습니다.
_onClick(event) {
if(!event.ctrlKey) return false;
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
const xy = {x: (event.offsetX / width) * 2 - 1, y: -(event.offsetY / height) * 2 + 1};
this._raycaster.setFromCamera(xy, this._camera);
const targets = this._raycaster.intersectObjects(this._scene.children);
if(targets.length > 0) {
const mesh = targets[0].object;
this._zoomFit(mesh, "Y", true, 50);
}
}
이 애니메이션 ZoomIn 기능을 이용해 만든 단위 기능에 대한 예제 영상은 다음과 같습니다.
three.js에서 유리 재질에 동적 환경맵 적용하기
three.js에서 유리 재질을 표현하기 위해서 MeshPhysicalMaterial를 사용합니다. 굴절률(ior)과 유리의 두께(thickness)도 표현할 수 있습니다. 그러나 매쉬에 MeshPhysicalMaterial를 사용하여 유리 재질을 적용하고 정적인 환경 맵과 동적인 환경 맵을 적용해 보면 정적 환경맵은 문제가 없으나 동적 환경맵의 경우 표현되지 않습니다.
이는 MeshPhysicalMaterial에서 동적 환경맵을 적용하기 위해서는 반드시 PMREM 형식으로 만들어진 텍스쳐맵을 사용해야 한다고 합니다. 즉 WebGLCubeRenderTarget으로부터 텍스쳐맵을 바로 재질의 envMap 속성에 지정해서는 안되고 PMREMGenerator 클래스를 사용해여 변환된 텍스쳐맵을 envMap 속성에 지정해줘야 합니다.
일반적인 동적 환경맵 생성과 PMREM 형식의 환경맵 가공을 위한 객체에 대한 코드는 다음과 같습니다.
const sphereRenderTarget = new THREE.WebGLCubeRenderTarget(1024, {
format: THREE.RGBFormat,
generateMipmaps: true,
minFilter: THREE.LinearMipmapLinearFilter
});
sphereRenderTarget._pmremGen = new THREE.PMREMGenerator(this._renderer);
const sphereCamera = new THREE.CubeCamera(0.01, 10, sphereRenderTarget);
그리고 환경맵 지정을 위한 매쉬에 CubeCamera를 추가합니다.
sphere.add(sphereCamera); this._sphere = sphere;
그리고 렌더링 시에 환경맵을 업데이트 해줘야 합니다.
if(this._sphere) {
this._sphere.visible = false;
const cubeCamera = this._sphere.children[0];
cubeCamera.update(this._renderer, this._scene);
const renderTarget = cubeCamera.renderTarget._pmremGen.fromCubemap(
cubeCamera.renderTarget.texture);
this._sphere.material.envMap = renderTarget.texture;
this._sphere.visible = true;
}
실행 결과는 다음과 같이 정적인 환경맵과 동적인 환경맵 모두 잘표현되는 것을 확인할 수 있습니다.
전체 코드는 아래를 클릭해서 다운로드 받을 수 있습니다. (three.js 라이브러리는 포함되어 있지 않습니다)
