Gen Art (4) 썸네일형 리스트형 [WebGL] - case study : The Avener The Avener The Avener - Beautiful | New song and music videoDive into interactive images from The Avener’s new music video.beautiful.theavener.com Intro.개인적으로, 사이버 펑크/ 네온 느낌이 강한 디자인을 좋아하는데, Avener 사이트의 이펙트가 앞서 말한 디자인과 잘 어올릴 것 같은 생각에 분석 주제로 삼았다. 코드 기반은 Three.js를 기반으로 하나, 모든 핵심 로직이 webGL 코드로 이루어지기에, 제목에서 ThreeJS는 제거하였다. 이펙트는 다음과 같은 요소들의 연결로 이루어진다. 미디어 1(cover) 와 미디어 2(target) 간의 전환 (T1)외부 팩터(시간 .. Shattering Text Animation 제작기 소스코드는 하단에 있습니다 Intro.웹 사이트의 목적은 정보의 전달이 목적이라 생각하고, 텍스트는 가장 직접적인 정보 전달의 수단이기에 개인적으로 텍스트 애니메이션이 들어가면 유독 임팩트가 강하게 느껴집니다. 요즘 소소하게 awwwards 둘러보면서 인사이트를 얻고는 하는데, 사이트가 기억이 안나지만... 스크롤에 따라 파편 상태 -> 하나로 합쳐지는 이미지 애니메이션이 있엇는데 정말 재밌게 반복해서 스크롤링 했었습니다. 그 애니메이션은 2d 이미지를 단순하게 16등분하고 스크롤 위치에 따라 CSS::translate 속성 조절을 통해 하나로 합치는 애니메이션이었는데, 문득 다음과 같은 생각을 하게 되었습니다. 임의의 3d 객체를 임의의 평면으로 쪼갰다가 합치면 재밌겠다 Problem .. [Three.js] case study: m-trust Intro. 최근에 재밌게 보고 있는 유투버 겸 개발자 (Yuri Artikuh) 스트리밍 영상들을 통해 이런 저런 기법들 배우는 게 많아서 영상 따라 공부하며 배운것들을 공유해보자고 한다. 영상에서 얻어간 것은 다음과 같다. 이미지를 어떻게 입자화 시킬 것인가? 입자들에 넣는 반짝이는 이펙트는 어떻게 구현한 것인가? 비디오와 Three.js 간 동기화 + 애니메이션 처리는 어떻게 할 것인가? 안보이는 입자 제거를 통해 gpu성능 최적화 1. 이미지를 어떻게 입자화 시키는가? 3가지 스텝으로 이루어진다. 먼저, geometry 와 material을 일반적인 Mesh에 연결시키는것이 아닌, Points 객체에 연결시킨다. const geometry = new THREE.PlaneGeometry(480 * .. [Javascript] 폭죽 이펙트 (fireworks) Intro 한동안 web3쪽 공부만 하다보니, 이펙트 구현 욕구가 스멀스멀 밀려오길래 만들어 봤습니다 :) 간만에 만들고 이것저것 취향에 맞게 건들이다보니 이번 휴일은 순삭이었습니다.. (흑흑) Intuition 해당 이펙트의 무브먼트를 생각해보면 사실 크게 어려운건 없습니다. 1. viewport 하단에서 폭죽이 뿅 쏘아올려집니다. 2. 최고점에 도달할 시, 사방 팔방 파편이 튕겨 나가집니다. 이 정도입니다. Method 구현하기 위해 3가지 클래스를 만들었습니다. (정확히는 1가지 더 있는데, 얘는 이따 설명하겠습니다) 1. Firework - 말 그대로 폭죽 이펙트 하나에 대응하는 클래스 입니다. 2. Particle - 눈에 보이는 입자 하나에 대응하는 클래스 입니다. 3. Vector - 유.. 이전 1 다음
