WebGL Advent Calender 2日目。
Flash大好きFlasherなボクですが、世間の流れにも乗らなければいけません。
恐る恐るthree.jsのパーティクルを触ってみました。
three.js(r69)でパーティクルを扱うにはPointCloudクラスを使うようです。
公式のexampleも豊富で色々あってみてるだけで楽しいのですが、パーティクルをコマアニメさせているサンプルはなかったようなので作ってみました。
- ウォーリーを探せ的なノリでFlasherを探し、クリックで捕まえてください。 だいたい想像通りのことがおきます。
- PCはChromeで観てください。（他ブラウザは確認してません）
- スマホにもなんとなく対応しました。iPhone6以上で観てください。Androidなんて知りません。
- three.jsのexample風に、htmlにscriptやらcssを書いてますが勢いで書いたのでcssが大分酷いです。
※ヌルヌルと動いてくれるコマアニメ素材はこちらをベースとさせて頂きました。
やったこと
まず、three.jsでspritesheetなコマアニメするにはこちらのサンプルが参考になりました。
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
上の習作を簡素にしたサンプルもアップしてあります。
具体的にどう書いてるのかはこちらの方がわかりやすいかもしれません。
コマアニメを大量にうごかしてみるのはなかなか楽しいですね。
おまけ
そして、明日は SUPER FLASHER の @clockmaker 先生です！
ボクよりもっと露出大な展開を期待しています！！