three.js (3) 썸네일형 리스트형 [Three.js] case study: m-trust Intro. 최근에 재밌게 보고 있는 유투버 겸 개발자 (Yuri Artikuh) 스트리밍 영상들을 통해 이런 저런 기법들 배우는 게 많아서 영상 따라 공부하며 배운것들을 공유해보자고 한다. 영상에서 얻어간 것은 다음과 같다. 이미지를 어떻게 입자화 시킬 것인가? 입자들에 넣는 반짝이는 이펙트는 어떻게 구현한 것인가? 비디오와 Three.js 간 동기화 + 애니메이션 처리는 어떻게 할 것인가? 안보이는 입자 제거를 통해 gpu성능 최적화 1. 이미지를 어떻게 입자화 시키는가? 3가지 스텝으로 이루어진다. 먼저, geometry 와 material을 일반적인 Mesh에 연결시키는것이 아닌, Points 객체에 연결시킨다. const geometry = new THREE.PlaneGeometry(480 * .. [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. .. [WebGL] GLSL - 기초 들어가기에 앞서.. 먼저 GLSL 뭔지 하나도 모르는, 그야말로 아무것도 모르는 분들을 타겟팅한 글이기에, 혹시 GLSL에 대해 어느정도 개념은 알고 계시면 뒤로가기를 누르시는걸 추천드립니다! GLSL OpenGL Shading Language로 C언어 기반입니다(컴퓨터 공학과 여러분들 드디어 C언어를 배운 보람을 느낄 수 있습니다..). GLSL을 통해 OpenGL의 쉐이더를 다룰 수 있습니다. OpenGL은 GPU인터페이스이기에, 쉽게 말해 GLSL을 통해 GPU에서 실행 가능한 프로그램을 구현할 수 있습니다. 일상적으로 여러분이 보시는 브라우저 화면, 또한 OpenGL을 통해 GPU와 통신하고, 게임, 영상 등.. 가시적인 화면에 대한 모든 어플리케이션은 OpenGL을 통해 GPU와 통신하고 그 결.. 이전 1 다음
