GN⁺: 박스 쉐도우에 대해 얼마나 알고 있나요?

박스 쉐도우에 대해 얼마나 알고 있나요?

박스 쉐도우란 무엇인가?

• 박스 쉐도우는 드롭 쉐도우의 일종으로, 이미지 필터의 한 형태임
• 드롭 쉐도우는 이미지의 픽셀을 x와 y 축을 따라 이동시켜 그림자 효과를 주는 필터임
• CSS에서 filter 속성을 사용하여 드롭 쉐도우를 적용할 수 있음

div { 
  filter: drop-shadow(xOffset yOffset rgba(0, 0, 0, 0.5));
}

• CSS는 블러 값을 추가로 지원하여 드롭 쉐도우에 적용할 수 있음

div { 
  filter: drop-shadow(xOffset yOffset blurSize rgba(0, 0, 0, 0.5));
}

박스 쉐도우

• 박스 쉐도우는 박스 형태만 지원하는 드롭 필터의 일종임
• 박스 쉐도우는 성능 면에서 유리함
• CSS 박스 쉐도우 구현은 수학적 해킹을 통해 둥근 박스를 저렴하게 그릴 수 있음
• 여러 박스 쉐도우를 레이어링하여 다양한 디자인을 만들 수 있음

function randomizeAndColor(e) { 
  randomize(e); 
  const spread = Math.random() > 0.8 ? 2 : 0; 
  const x1 = Math.floor(3 - Math.random() * 6) / (1 + spread); 
  const y1 = Math.floor(3 - Math.random() * 6) / (1 + spread); 
  const y2 = 2 + Math.floor(Math.random() * 4); 
  const blur2 = 8 + Math.floor(Math.random() * 12); 
  e.style.boxShadow = `${x1}px ${y1}px 0px ${spread}px ${getRandomPastelColor()}, 0 ${y2}px ${blur2}px #0006`;
}

박스 쉐도우를 잘못 사용하는 방법

• 일반적으로 디자이너는 일관된 마진, 패딩, 타이포그래피를 사용하여 사각형을 배치함
• 박스 쉐도우를 사용하여 다양한 형태의 예술적 효과를 낼 수 있음
• 박스 쉐도우를 사용하여 애니메이션 효과를 줄 수 있음

const tick = (timestamp: number) => { 
  gameState.frame++; 
  gameState.deltaTime = Math.min((timestamp - gameState.prevFrameStartTime) / 1000, 0.1); 
  gameState.prevFrameStartTime = timestamp; 
  update(gameState); 
  render(gameState); 
  winContext._gameFrame = window.requestAnimationFrame(tick);
};

박스 쉐도우를 심각하게 잘못 사용하는 방법

• 박스 쉐도우를 사용하여 3D 효과를 낼 수 있음
• 공이 튀는 애니메이션을 만들 수 있음
• 박스 쉐도우를 사용하여 점 구름을 그릴 수 있음

const pixels = await getImagePixels("/images/starry_night_full.jpg", width);
const dx = window.innerWidth / pixels[0].length;
const dy = window.innerHeight / pixels.length;
for (let y = 0; y < pixels.length; y++) { 
  for (let x = 0; x < pixels[0].length; x++) { 
    const px = x * dx + dx / 2, py = y * dy + dy / 2, pz = 60 + Math.random() * 3; 
    state.particles.push({ size: pSize, x: px, y: py, z: pz, ox: px, oy: py, oz: pz, dx: Math.random() * 3, dy: Math.random() * 3, dz: Math.random() * 3, color: pixels[y][x] });
  }
}

박스 쉐도우로 레이 트레이싱

• 레이 트레이싱은 이미지 생성의 정확하지만 느린 방법임
• 박스 쉐도우를 사용하여 레이 트레이싱을 구현할 수 있음
• 웹 워커를 사용하여 멀티 스레딩을 구현할 수 있음

const gameState = { 
  frame: 0, 
  prevFrameStartTime: 0, 
  deltaTime: 0, 
  renderContainerSize: 32, 
  cam: new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100), 
  spheres: [ 
    { position: new Vector3(0, 1.3, 0), radius: 1.3, material: CreateMat({ color: new Color(1, 0.2, 0.3) }) }, 
    { position: new Vector3(-3, 1.3, 0), radius: 1.3, material: CreateMat({ color: new Color(0.9, 0.9, 0.9), smoothness: 0.9 }) }, 
    { position: new Vector3(0, 10.8, 0), radius: 3.6, material: CreateMat({ color: new Color(0, 0, 0), emissive: new Color(1, 1, 1), emissiveStrength: 8 }) }
  ]
};

# GN⁺의 정리

• 박스 쉐도우는 드롭 쉐도우의 일종으로, 이미지에 깊이감을 더하는 데 유용함
• CSS를 사용하여 다양한 박스 쉐도우 효과를 구현할 수 있으며, 이를 통해 창의적인 디자인을 만들 수 있음
• 박스 쉐도우를 사용하여 3D 효과와 애니메이션을 구현할 수 있음
• 레이 트레이싱을 박스 쉐도우로 구현하는 것은 비효율적이지만 가능함
• 이 기사는 박스 쉐도우의 창의적이고 비정형적인 사용 방법을 탐구하며, 이를 통해 새로운 디자인 가능성을 제시함