AI 요약관련 정보

• 바이럴 커서 추적 효과는 Kylin Oconor의 웹사이트에서 영감을 받아 시작되었으며, 사용자의 마우스 움직임에 따라 사진 속 인물이 시선을 따라 움직이는 방식입니다. 🖱️
• 핵심 기술은 'live portrait' 기반의 'expression editor' ML 모델로, 단일 이미지에서 인물의 머리 피치, 요, 롤(상하좌우 및 기울기)을 조작하여 다양한 각도의 이미지를 생성합니다. 🤖
• 부드러운 움직임을 위해 25x25 그리드(총 625개)와 같이 다양한 머리 위치를 가진 수백 장의 이미지를 생성하는 과정을 거칩니다. 🖼️
• 이미지 생성에는 Replicate API가 활용되며, 이는 로컬 Docker 실행보다 빠르고 비용 효율적입니다. 🚀
• 성능 최적화를 위해 생성된 수백 장의 이미지를 FFmpeg을 사용하여 단일 비디오 파일로 변환하고, 마우스 커서 위치에 따라 비디오 프레임을 스크러빙하는 기법을 사용했습니다. 이로써 파일 크기를 80MB에서 1MB로 대폭 줄였습니다. 🎞️
• 시각적 효과를 한 단계 더 발전시키기 위해 Transformers.js와 'depth anything' 모델을 사용하여 2D 이미지에서 깊이 맵을 생성하고, 이를 3JS로 캔버스에 렌더링하여 3D 효과를 구현했습니다. 🌌
• 깊이 맵은 이미지의 가장 깊은 부분을 검은색으로, 카메라에 가장 가까운 부분을 흰색으로 표현하여 3D 착시를 만들어냅니다. ⚫⚪
• 최근에는 JavaScript, HTML, CSS 및 스프라이트/비디오를 직접 출력하는 새로운 모델이 개발되어 구현 과정을 더욱 간소화할 수 있게 되었습니다. ✨
• 향후 입 벌리기, 눈 깜빡임 등 다른 얼굴 표정을 추가하여 웹사이트에 구매 버튼 호버 시 윙크하거나 비밀번호 입력 시 눈을 감는 등 더욱 풍부한 상호작용 요소를 만들 수 있습니다. 😉
• 이러한 기술은 웹 개발자들이 독창적인 '스크롤 스토퍼' 효과를 만들고, 웹사이트에 흥미로운 요소를 추가하여 사용자 참여를 유도하는 데 크게 기여하며 웹 창의성을 촉진합니다. 💡
• 관련 코드와 추가 정보는 GitHub에서 확인할 수 있으며, 원작자들을 Twitter에서 팔로우하여 더 많은 영감을 얻을 수 있습니다. 🧑‍💻