📹 Angus Emmerson

• 프로젝트 이름: Angus Emmerson
• 사용한 언어: HTML, SCSS, JavaScript
• 사용한 JavaScript 라이브러리: GSAP, Three.js

Three.js 캔버스 Mesh의 위치와 DOM의 위치 동기화 하기

Camera 설정하기

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};
...
let camera = null;
setCamera();
...
function setCamera() {
  const distance = 500;
  const fov = (180 * (2 * Math.atan(sizes.height / 2 / distance))) / Math.PI;
  camera = new THREE.PerspectiveCamera(
    fov,
    sizes.width / sizes.height,
    1,
    1000
  );
  camera.position.z = distance;
  scene.add(camera);
}

1. 임의의 distance 설정 후 변수로 만들기 (위 예제에서는 500으로 설정)

2. camera의 fov 계산하기 (매우 중요)

   const fov = (180 * (2 * Math.atan(height / 2 / distance))) / Math.PI;

• 브라우저의 높이와 Three.js 캔버스 상에서의 높이를 일치시키기 위해 height 에 window.innerHeight 사용 (위 예제에서는 sizes.height로 대체)
• 임의로 설정한 distance 값 사용하여 fov 계산하기

3. 계산된 fov를 활용하여 PerspectiveCamera 생성하기

4. PerspectiveCamera의 near, far는 1에서 1000으로 설정 (distance를 500으로 설정했기 때문에 far를 500이하로 설정했을경우 화면에서 보이지 않게 됩니다)

5. 카메라의 z위치를 distance 값으로 설정 후 scene에 추가하기

DOM의 위치 구하기

const links = document.querySelectorAll(".link-img");
...
let bounds = {};
...
init();
...
function init() {
  links.forEach((link, i) => {
    mesh = setMesh(i);
    setBounds(link);
  });
}
function setMesh(i) {
  const geometry = new THREE.PlaneGeometry(1, 1, 100, 100);
  const material = new THREE.ShaderMaterial({
  	...
  });
  const plane = new THREE.Mesh(geometry, material);
  scene.add(plane);
  return plane;
}
function setBounds(link) {
  const rect = link.getBoundingClientRect();
  const width = rect.width;
  const height = rect.height;
  const left = rect.left;
  const right = rect.right;
  const x = rect.left + rect.width / 2 - sizes.width / 2;
  const y = -(rect.top + rect.height / 2) + sizes.height / 2;
  bounds = { width, height, left, right, x, y };
  mesh.scale.set(width, height, 1);
  mesh.position.set(x, y, 0);
}

1. document.querySelectorAll을 사용하여 위치를 구할 요소들을 선택하고 변수로 만들기

2. forEach 반복문 사용하기 (매개변수로 각 요소, 인덱스 사용)

3. DOM의 위치를 구할 setBounds 함수 만들기 (각 요소들, 즉 link를 매개변수로 받음)

4. getBoundingClientRect()를 사용하여 각 요소의 크기 및 위치 정보 변수 rect에 저장하기

5. width, height, left, right, x, y 값을 각각 변수로 만들기

   • x, y 값은 각 요소의 중심 위치 값 (Mesh의 위치 설정할때에 사용할 값)

     x : 좌측 위치 + 너비 / 2 - 윈도우 너비 / 2
     y : 윈도우 높이 / 2 - (위쪽 위치 + 높이 / 2)

6. 객체 bounds에 위에서 구해진 값들 저장하기

7. 미리 만들어 놓은 mesh의 scale 값을 요소의 너비, 높이 값으로 설정하기 (z 값은 1로 설정)

8. bounds의 x, y 값을 활용하여 mesh의 position 설정하기 (z 값은 0으로 설정)

Shader를 활용하여 스크롤시 물결 효과 구현하기

스크롤 이벤트 추가하기

const state = {
  scroll: {
    target: 0,
    current: 0,
  },
  ...
};
...
window.addEventListener("wheel", (e) => {
  handleWheel(e);
});
...
function handleWheel(e) {
  let delta = e.deltaY;
  delta *= 0.55;
  handleScroll(delta);
}
function handleScroll(delta) {
  state.scroll.target = Math.round(state.scroll.target + delta * 0.6);
  state.scroll.target = THREE.MathUtils.clamp(
    state.scroll.target,
    0,
    sizes.width
  );
}

1. 스크롤 및 기타 상태를 관리할 객체 state 만들기

2. 휠 이벤트에 사용할 함수 handleWheel 만들기 (매개변수로 이벤트 e 보내기)

3. 변수 delta에 e.deltaY 값 정의하기

e.deltaY란?

마우스 휠의 수직 이동량을 의미하며, 아래로 스크롤 했을때는 양수 값, 위로 스크롤 했을때는 음수 값을 나타냅니다.

4. delta에 0.55를 곱하여 이동량을 조정하기

5. delta를 매개변수로 하는 handleScroll 함수 만들고, 호출하기

6. delta에 0.6을 곱하여 이동량을 한번 더 조정한 후 state의 스크롤 타겟을 더한 값을 Math.round()를 사용하여 반올림 한 후, 그 값을 할당하기

7. Three.js의 내장 함수 MathUtils.clamp를 사용하여 state의 스크롤 타겟 값을 0부터 sizes.width 즉, 윈도우 너비를 넘지 않도록 고정시키기 (윈도우 너비는 위 예제를 위해 임의로 설정한 값)

clamp란?

THREE.MathUtils.clamp(value, min, max);
// 숫자 값을 특정 범위 내로 제한하는 데 사용됩니다. 즉, 값이 지정된 최소값과 최대값 사이에 있도록 보장합니다.

렌더링에 사용할 값 업데이트 하기

const uniforms = {
  uResolution: { value: new THREE.Vector2(sizes.width, sizes.height) },
  uProgress: { value: 0 },
  uEffectWidth: { value: 0.75 },
  uStrength: { value: 0 },
};
const state = {
  ...
  ,
  progress: {
    target: 0,
    current: -0.5,
  },
  strength: {
    target: 0,
    current: 0,
    base: -0.8,
  },
};
const clock = new THREE.Clock();
let deltaTime = null;
...
function update() {
  deltaTime = clock.getDelta() * 1000;
  const progress = THREE.MathUtils.mapLinear(
    state.scroll.target,
    0,
    sizes.width,
    0,
    1
  );
  state.progress.target = progress - 0.5;
  state.progress.current = lerp(
    state.progress.current,
    state.progress.target,
    0.09
  );
  if (Math.abs(state.progress.current - state.progress.target) < 0.02) {
    state.strength.target = 0;
  } else {
    state.strength.target = state.strength.base;
  }
  state.strength.current = lerp(
    state.strength.current,
    state.strength.target,
    0.04
  );
  uniforms.uProgress.value = state.progress.current;
  uniforms.uStrength.value = state.strength.current;
  ...
}
function lerp(value, target, time) {
  return value + (target - value) * (time / (16.6666666666667 / deltaTime));
}

1. Shader에서 사용할 값들을 담은 객체 uniforms 만들기

   const uniforms = {
   	uResolution: { value: new THREE.Vector2(sizes.width, sizes.height) },
       // Three.js의 Vector2를 활용하여, 현재 화면의 해상도 담기
   	uProgress: { value: 0 },
       // 스크롤의 진행도를 나타내는 값
   	uEffectWidth: { value: 0.75 },
       // 물결 효과의 너비를 정하는 값
   	uStrength: { value: 0 },
       // 스크롤 하였을 때, 물결 효과의 강도를 정하는 값
   };

2. 상태 관리 객체 state에 progress, strength 항목 추가하기

3. Three.js의 Clock을 사용하여 프레임 간 시간 경과를 측정하기

4. 현재의 프레임 레이트를 담을 변수 deltaTime 만들기

5. 렌더링에 사용할 값들을 실시간으로 업데이트 할 함수 update() 만들기

6. Clock의 getDelta()를 사용하여 현재의 프레임 레이트를 실시간으로 업데이트 하기

7. 현재의 스크롤 진행도를 0부터 1까지의 값으로 바꾸기 위해 Three.js의 내장 함수 MathUtils.mapLinear를 사용하기

mapLinear란?

THREE.MathUtils.mapLinear(x, a1, a2, b1, b2);
// x: 변환할 입력 값
// a1: 입력 값의 최소값
// a2: 입력 값의 최대값
// b1: 출력 값의 최소값
// b2: 출력 값의 최대값
// 주어진 입력 범위에서 해당 값이 차지하는 비율을 기준으로 새로운 출력 범위의 값을 계산합니다.

8. 맵핑된 값을 담은 변수 progress에 -0.5 만큼 뺀 값을 state의 progress 타겟 값으로 설정 (0을 중간 값으로 만들기 위해서)

9. 함수 lerp를 사용하여 state의 progress 현재 값을 타겟 값으로 부드럽게 보간하기

lerp란?

function lerp(value, target, time) {
  return value + (target - value) * (time / (16.6666666666667 / deltaTime));
}
// 60프레임(약 16.67ms)을 deltaTime으로 나눔으로써, 값의 변화 속도를 일정하게 유지
// lerp 함수는 선형 보간(Linear Interpolation)을 구현한 함수로, 두 값 사이를 부드럽게 변화시킬때 사용합니다.

10. progress의 현재 값을 타겟 값으로 뺀 값을 Math.abs를 사용하여 절대 값으로 만들고, 이 값이 0.02보다 작을때는 strength의 타겟 값을 0으로, 클 시에는 strength의 기본 값인 -0.8로 설정 (스크롤 하지 않을 시에는 물결 효과를 주지 않기 위해서)

11. uniform의 uProgress 값은 progress의 현재 값으로, uStrength 값은 strength의 현재 값으로 설정하기

vertexShader 코드 작성하기

function setMesh(i) {
  ...
  const material = new THREE.ShaderMaterial({
    uniforms: {
      uTexture: new THREE.Uniform(textures[i]),
      uResolution: uniforms.uResolution,
      uEffectWidth: uniforms.uEffectWidth,
      uProgress: uniforms.uProgress,
      uStrength: uniforms.uStrength,
    },
    vertexShader: 
    `
      uniform float uProgress;
      uniform float uEffectWidth;
      uniform float uStrength;
      uniform vec2 uResolution;
      varying vec2 vUv; 
      void main(){
        vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
        float normalizedX = modelViewPosition.x / uResolution.x;
        normalizedX = (normalizedX - uProgress) / (uEffectWidth * 1.2);
        float mappedVar = normalizedX * 2.0;
        float wave = abs(normalizedX - mappedVar);
        wave = smoothstep(0.0, 0.5, wave);
        wave = 1.0 - wave;
        modelViewPosition.z += wave * uStrength * 100.0;
        gl_Position = projectionMatrix * modelViewPosition;
        vUv = uv;
      }
    `,
    ...
    ,
  });
  ...
}

1. ShaderMaterial에 각 uniform 요소들 추가하기

   uniforms: {
         uTexture: new THREE.Uniform(textures[i]),
         // TextureLoader를 사용하여 불러온 텍스쳐 저장
         uResolution: uniforms.uResolution,
         // 현재 화면의 해상도
         uEffectWidth: uniforms.uEffectWidth,
         // 물결 효과의 너비
         uProgress: uniforms.uProgress,
         // 스크롤 진행도
         uStrength: uniforms.uStrength,
         // 물결 효과의 강도
       },

2. vertexShader 에서 저장해 둔 각 uniform 값 불러오기

glsl의 데이터 타입

float: 3.14, 0.5
// 부동소수점 숫자
int: 1, -10
// 정수
bool: true, false
// 논리값, 불리언
vec2: vec2(0.5, 1.0)
// 2차원 벡터
vec3: vec3(1.0, 0.0, 0.0)
// 3차원 벡터
vec4: vec4(1.0, 0.0, 0.0, 1.0)
// 4차원 벡터
mat2, mat3, mat4: mat4(1.0)
// 행렬 데이터 타입
sampler2D: texture(sampler, uv)
// 2D 텍스처 샘플링 (주로 텍스쳐 불러올 때에 사용)

3. 모델 좌표를 카메라 기준 좌표로 변환한 값인 modelViewMatrix에 현재 플레인의 좌표 값인 position을 곱하여 vec4 변수 modelViewPosition 만들기 (카메라 기준 좌표로 작업하여 물결 효과를 일관성 있게 적용시키기 위해서)

4. modelViewPosition의 x값을 현재 해상도인 uResolution.x으로 나눈 후 float 변수 normalizedX에 저장 (해상도에 따른 정규화 값, 값을 0에서 1 범위로 변환하기 위해서)

5. 스크롤의 진행도 (uProgress)와, 물결효과의 너비 (uEffectWidth)에 따라 normalizedX 값 조정하기

   normalizedX = 
     (normalizedX - uProgress) // 스크롤 할 때 물결 효과의 방향 설정 (왼쪽에서 오른쪽으로)
     / 
     (uEffectWidth * 1.2); // 물결 효과의 너비에 임의의 값 곱하기 (위 예제에서는 1.2 사용)

6. 조정된 normalizedX 값에 2.0을 곱하여 float 변수 mappedVar 만들기 (위 예제에서는 2.0 사용)

7. normalizedX에서 mappedVar의 차이 값을 abs 함수를 사용하여 절대값으로 만들고 float 변수 wave에 저장 (두 값의 차이를 물결 효과에 사용하기 위해서)

8. smoothstep 함수를 사용하여 물결 효과를 부드럽게 만들기 (0.0부터 0.5 사이의 값을 경계값으로 사용)

smoothstep 함수란?

float smoothstep(float edge0, float edge1, float x);
// edge0: 보간이 시작되는 값 (최소 경계값)
// edge1: 보간이 끝나는 값 (최대 경계값)
// x: 보간 대상 값
// 두 경계값 사이에서 매끄럽게 보간(smooth interpolation)을 수행하는 역할을 합니다.

9. wave 값 반전시키기

   wave = 1.0 - wave;
   // 물결 효과를 중심 부분에서 가장 강하게 만들기 위해서

10. modelViewPosition의 z값 조정하기

    modelViewPosition.z += wave * uStrength * 100.0;
    // 변수 wave에 물결 효과의 강도(uStrength)와 임의의 값(100.0)을 곱한 후에 modelViewPosition의 z 위치에 더하기

11. projectionMatrix를 조정된 modelViewPosition에 곱하여 최종 위치 (gl_Position) 설정

12. uv좌표를 fragmentShader에서 사용하기 위해, varying 변수 vUv 만들기 (uv 좌표는 attribute 속성이기 때문에 fragmentShader에서 사용 불가)

fragmentShader 코드 작성하기

const material = new THREE.ShaderMaterial({
  uniforms: {
    uTexture: new THREE.Uniform(textures[i]),
    ..,
  }
  ,
  fragmentShader: 
  `
    uniform sampler2D uTexture;
    varying vec2 vUv;
    void main(){
      vec4 tex = texture2D(uTexture, vUv);
      gl_FragColor = vec4(tex.rgb, 1.0);
    }
  `
});

1. sampler2D를 사용하여 각 텍스쳐(uTexture) 불러오기

2. vertexShader에서 저장한 vUv 값 (varying) 불러오기

3. texture2D로 텍스쳐 및 uv 값을 변환하여 vec4 변수 tex에 저장하기

4. 변수 tex의 rgb을 활용하여 플레인의 최종 색상 설정 (1.0은 플레인의 투명도 alpha 값)
   * rgb는 xyz와 같습니다. (색상이기 때문에 rgb로 사용)