전체 글 (68) 썸네일형 리스트형 [WebGL] 14Island - 2. 디컴파일 먼저 순수하게 번들링 파일을 까보자. 난독화가 되어있어서 알아보기 힘들지만, 난독화의 경우, 객체의 멤버 혹은 메소드 혹은 원시값들은 변형시킬 수 없다. 이 성질을 이용해 추론해보자. 먼저 DOM 상, canvas id의 three.js 특유의 흔적이 남아있어서, threejs를 사용했다는 사실은 자명하다. 문제는 에이전시라 그런지, 온갖 파트에 canvas를 떡칠해놓았다. 즉, 번들링 된 코드 상에서도 상당히 많은 three.js 코드들이 있다는 뜻인데... 분명 fbm을 썼을 테니, fbm을 키워드 삼아 검색해보았다. (헤헤... 찾았다) 변수 이름들 보아하니, j.g가 shaderMaterial을 선언하는 부분인듯 하다. 그 뜻은 이 주위에 render 관련 메서드가 있다는 뜻이다. 아니나 .. [WebGL] 14Island (1. Intuition ~ 전시작) Intro.퇴사 후, 모두의 연구소에서 진행한 "인터렉티브 아트 연구소"에서 전시회를 연다길래 출품하기 위해 무엇을 만들어볼까 하다가, 전부터 Awwwards에서 즐겨보던 에이전시 홈페이지에 있는 수채화 이펙트를 직접 만들어보기로 했다. 처음 봤을때는 그리 크게 어려워 보이지 않았는데, 다음의 시퀀스를 생각했다. 캔버스에 흰색 배경을 깐다마우스 위치에 특정 도형( 원 )을 렌더링 한다.해당 프레임에 대한 텍스쳐를 따온다.텍스쳐를 쉐이더에서 FBM 처리를 한다.다채로운 색감을 위해, 시간에 따라 hsl 을 바꿔서 색감을 입힌다. 여기에 이왕 전시할꺼, 전에 만든 VGesture를 사용하여 포인터 제스처를 추가해보기로 하였다. Implemention들어가기 앞서서, 팁을 하나 주자면, 왠만한 강심장이 .. [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)외부 팩터(시간 .. [Wasm] 웹어셈블리(c++) 오버헤드 테스트 Intro. c++가 특성상 자바스크립트보다 빠르나 웹 어셈블리의 경우, 컴파일된 bytecode를 가지고 wasm runTime에 중간 언어로 변환된 후 JIT 컴파일 되는 과정을 거친다. 물론 자바스크립트 또한 JIT 컴파일되고 그 과정에서 자잘한 최적화가 이루어진다. 그럼 어느 상황즈음 되어야 자바스크립트 코드에서 WASM으로 전환했을 때, 성능적 이득을 볼 수 있을까? 리서치를 해도 보통 그냥 "네이티브에 유사한 속도를 가집니다" 정도로만 끝내기에 이번 기회에 한번 테스트해보기로 했다. 따라서, 3가지 비교군에 대하여 Loop + Function call 이 2가지 항목에 대해 비교 분석을 해보았다. 비교군은 다음과 같다. Vanila JSWASM - c++ 17 (noopt)WASM - c++.. V-Gesture 제작기 - 4. 번들링 가장 당황스러웠던 Rollup...개발 자체는 vite 템플릿 기반으로 개발하였으나, 프로덕션용 번들링은 rollup으로 했다. 물론 vite가 내부적으로 rollup을 이용하긴 하나, entry가 여럿일 경우, 각 entry에 맞는 설정파일을 만들어 여러번 번들링을 수행해줘야하는 단점이 있기에, rollup으로 번들러를 재구성 하였다. 여기까진 문제가 없었는데, 빌드 후 실행을 시키니, tfjs의 의존성인 @mediapipe/hand 모듈에서 다음과 같은 에러를 뿜기 시작했다. 개발 서버에서는 잘되는데 번들 후 에러가 뜨니, 이건 100% 번들러 에러였다. 번들된 파일 상에서 위 코드에서 발생하는 에러였기에, 별다른 선택지가 없이 @mediapipe/hand 모듈을 다운받아 로컬에서 빌드해봤다... V-Gesture 제작기 - 3. VGesture 지금 생각하면 가장 처음에 이야기했어야 할 듯 하지만 이미 Bottom-Top 방식으로 이야기하고 있으니...ㅋㅋㅋ 바로 VGesture 모듈이다. 주 기능이랄까나... 주 기능은 앞서 소개한 모든 모델들을 하나로 모아주는(aggregate)하는 역할에 직접적인 인터페이스를 개발자에게 제공한다는 점이다. 이 글에서 할 이야기는 아무래도 무슨 생각으로 설계를 했는지를 알려주는게 맞는것 같아 그 부분에 초점을 맞춰보겠다. _task().먼저 task함수인데, 해당 함수가 곧 VGesture의 모든 실행 로직을 담고 있는 함수이다. 최대한 처음보는 개발자 입장에서 코드를 이해하기 쉽게 하기 위해 task함수에 주요 실행 로직들을 "평면화"시켰는데, 이를 통해 디버깅 혹은 코드 이해 과정에서 물리적인 파일 이.. V-Gesture 제작기 - 2. Gesture , Plugin, GestureManager Gesture.당연하지만 VGesture 모듈이 Gesture을 인식함에 있어서 필요한 정보들을 리스트업 하되, 제스처, 그 자체에 동작과 연관성이 떨어지는 속성들은 최대한 배제하고, 배제된 요소들은 Plugin 레이어로 올리는 방향으로 방향성을 잡았다. 애당초 Gesture 클래스를 구현해야하는 임의의 개발자 입장에서 안 그래도 Plugin 클래스 까지 구현해야 비로소 완성이되는데, 코어인 Gesture 클래스가 너무 난잡하거나 요구하는 구현 스펙이 너무 많다면 개발자 입장에서 상당히 부담스러울거라 생각했다. 따라서 정리하여 크게 6가지 속성으로 정리했다. name : 해당 Gesture의 고유 이름. 다른 Gesture와 구분하기 위한 식별자eventName: 해당 Gesture가 감지 될 시, 발.. V-Gesture 제작기 - 1. intro ~ prototyping Intro.개발 유투브 보다가 우연히 알고리즘에 의해 다음 영상을 보게 되었다.https://www.youtube.com/watch?v=f7uBsb-0sGQ tensorflow에서 제공하는 자바스크립트 모델(tfjs)을 활용하여 실시간으로 손의 위치를 측정해주는 모델인데 보다가 문득 손으로 웹과 인터렉션 할 수 있는 기능이 있으면 참 재밌겠다는 생각이 들었다. 먼저 Mac 유저인 본인으로써 트랙패드 제스처를 굉장히 애용하고 있고, 좀 더 나아가 제스처로써, 웹을 컨트롤 할 수 있으면 꽤나 편리하고 재밌는 경험을 줄 수 있을것 같아 한번 tfjs 기반 제스처를 이용한 인터렉션 라이브러리를 제작해 보기로 했다. Goals & Settings설계할 때, 가장 크게 염두해둔건 "확장의 용이함" 이었다. .. 이전 1 2 3 4 ··· 9 다음
