[Threejs] PointCloud (파티클)에서 프레임 애니메이션

WebGL Advent Calender 둘째 날.
Flash를 좋아하는 Flashher인 나입니다만, 세상의 흐름에도 타지 않으면 안됩니다.
무서운 무서운 three.js 파티클을 만져 보았습니다.

three.js(r69)에서 파티클을 처리하려면 PointCloud 클래스를 사용하는 것 같습니다.

threejs example #webgl_particles_billboards

공식의 example도 풍부하고 여러가지 있어 보는 것만으로 즐겁습니다만, 파티클을 컷 애니메이션시키고 있는 샘플은 없었던 것 같기 때문에 만들어 보았습니다.



WHERE'S FLASHER? :DEMO

워리를 찾는 노리로 플래셔를 찾아 클릭으로 잡아라. 대체로 상상대로 일을 합니다.

PC는 Chrome에서 확인하세요. (다른 브라우저는 확인하지 않았습니다.)

스마트폰에도 어쩐지 대응했습니다. iPhone6 ​​이상에서 보세요. Android는 몰라요.

three.js의 example풍에, html에 script라면 css를 쓰고 있습니다만 기세로 썼기 때문에 css가 오히려 심합니다.

※누르누루와 움직여주는 프레임 애니메이션 소재는 이쪽을 베이스로 했습니다.

MMD로 출력한 모브코 동영상을 게임용 캐릭터 이미지로 변환

했던 일

우선, three.js에서 spritesheet인 컷 애니메이션을 하려면 여기 샘플이 참고가 되었습니다.

Texture Animation (Three.js)

Texture의 offset과 repeat 속성을 사용하여 쉽게 프레임 애니메이션을 할 수있는 메커니즘이있는 것 같습니다.

다만, PoindCloud는 Plane나 Box등의 일반적인 Primitive인 오브젝트와는 달리 조금 특수한 것 같아서 PointCloudMaterial이라고 하는 PoindCloud용의 머티리얼이 준비되어 있었습니다.
다만, PointCloudMaterial도 Texture를 건네주는 것으로, 임의의 이미지를 파티클로 할 수 있기 때문에, 똑같이 Texture의 offset와 repeat 프로퍼티을 고뇨고뇨하면 좋을까 생각해 시험했는데, 에러가 되어, 잘 작동하지 않습니다 했다.

그래서 PointCloudMaterial을 포기하고 ShaderMaterial을 사용합니다.
(PointCloudMaterial에서 괜찮을 수있는 방법도있을 수 있습니다.)

PointCloud에서 ShaderMaterial을 사용할 때는 이 기사와 샘플이 도움이 되었습니다.

Texture atlas offset/repeat works for meshes but is ignored for point system particles
PointCloud with Custom, Dynamic Attribute

위의 습작을 간소하게 한 샘플도 업하고 있습니다.
구체적으로 어떻게 쓰고 있는지는 이쪽이 알기 쉬울지도 모릅니다.

간단한 샘플 DEMO

간단한 샘플 소스 : gist

프레임 애니메이션을 대량으로 즐겨 보는 것은 꽤 재미 있습니다.
덤

그리고 내일은 SUPER FLASHER의 @clockmaker 선생님입니다!
나보다 더 노출 큰 전개를 ​​기대하고 있습니다! !