GLSL (4) 썸네일형 리스트형 Shattering Text Animation 제작기 소스코드는 하단에 있습니다 Intro.웹 사이트의 목적은 정보의 전달이 목적이라 생각하고, 텍스트는 가장 직접적인 정보 전달의 수단이기에 개인적으로 텍스트 애니메이션이 들어가면 유독 임팩트가 강하게 느껴집니다. 요즘 소소하게 awwwards 둘러보면서 인사이트를 얻고는 하는데, 사이트가 기억이 안나지만... 스크롤에 따라 파편 상태 -> 하나로 합쳐지는 이미지 애니메이션이 있엇는데 정말 재밌게 반복해서 스크롤링 했었습니다. 그 애니메이션은 2d 이미지를 단순하게 16등분하고 스크롤 위치에 따라 CSS::translate 속성 조절을 통해 하나로 합치는 애니메이션이었는데, 문득 다음과 같은 생각을 하게 되었습니다. 임의의 3d 객체를 임의의 평면으로 쪼갰다가 합치면 재밌겠다 Problem .. [WebGL + Three.js] GLSL - colors Intro. 음.. glsl에 대해 검색하시는 분들이 어떤 용도로 glsl에 대해 찾아볼까 생각하다가 (학술, 실무 etc..) 결론적으로 어찌되었든 그래픽 관련된 이슈 때문이겠지요? 그래서 가장 첫 주제로는 color에 대해 이야기 해 보려합니다. 참고로 테스팅 환경은 Three.js를 기반으로 사용했습니다. 아래 링크들을 통해 테스팅 환경을 구현해 보세요! https://threejs.org/docs/#api/en/materials/ShaderMaterial three.js docs threejs.org https://gist.github.com/kylemcdonald/9593057 Minimal three.js shader example. Minimal three.js shader example. .. [Graphics] Transformation Pipeline (local ~ screen 좌표계) Intro. 혹시 지금 무엇을 보고 계신가요?(아마 모니터겠죠?) 왼쪽과 오른쪽, 앞 뒤엔 무엇이 있나요? 제 기준에선 좌측엔 커피, 우측엔 가방이 있습니다. 다만, 제 앞에 계신분 입장에선 다를 것 같습니다. 저와 마주보고 있기에 그 분 기준에선 전방 우측에 제 가방, 전방 좌측에 제 커피 잔이 있습니다. 즉, 저희가 보는 세상은 1인칭, 나 자신을 기준으로 하는 상대 좌표계란 점이지요. (세상은 나 자신을 기준으로 돌고 있다!) 그럼 저 멀리 미국에 사는 John기준엔 저는 어디있을까요? (좌 -> 전 -> 우 -> 후 -> 우 -> 전 -> ...) 어딘가 있겠지요? 이런 좌표 시스템이 사실 컴퓨터 그래픽스에도 그대로 적용된답니다. (이 점이 너무 흥미로워서 사실 이 주제로 글을 쓰게 되었습니다) .. [WebGL] GLSL - 기초 들어가기에 앞서.. 먼저 GLSL 뭔지 하나도 모르는, 그야말로 아무것도 모르는 분들을 타겟팅한 글이기에, 혹시 GLSL에 대해 어느정도 개념은 알고 계시면 뒤로가기를 누르시는걸 추천드립니다! GLSL OpenGL Shading Language로 C언어 기반입니다(컴퓨터 공학과 여러분들 드디어 C언어를 배운 보람을 느낄 수 있습니다..). GLSL을 통해 OpenGL의 쉐이더를 다룰 수 있습니다. OpenGL은 GPU인터페이스이기에, 쉽게 말해 GLSL을 통해 GPU에서 실행 가능한 프로그램을 구현할 수 있습니다. 일상적으로 여러분이 보시는 브라우저 화면, 또한 OpenGL을 통해 GPU와 통신하고, 게임, 영상 등.. 가시적인 화면에 대한 모든 어플리케이션은 OpenGL을 통해 GPU와 통신하고 그 결.. 이전 1 다음
