[Threejs]PointCloud(パーティクル)でコマアニメ

  • 22
    Like
  • 0
    Comment
More than 1 year has passed since last update.

WebGL Advent Calender 2日目。
Flash大好きFlasherなボクですが、世間の流れにも乗らなければいけません。
恐る恐るthree.jsのパーティクルを触ってみました。

three.js(r69)でパーティクルを扱うにはPointCloudクラスを使うようです。

threejs example #webgl_particles_billboards

公式のexampleも豊富で色々あってみてるだけで楽しいのですが、パーティクルをコマアニメさせているサンプルはなかったようなので作ってみました。

wheresflasher.jpg

WHERE'S FLASHER? :DEMO

  • ウォーリーを探せ的なノリでFlasherを探し、クリックで捕まえてください。 だいたい想像通りのことがおきます。
  • 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

上の習作を簡素にしたサンプルもアップしてあります。
具体的にどう書いてるのかはこちらの方がわかりやすいかもしれません。

コマアニメを大量にうごかしてみるのはなかなか楽しいですね。
おまけ


そして、明日は SUPER FLASHER の @clockmaker 先生です!
ボクよりもっと露出大な展開を期待しています!!

This post is the No.2 article of WebGL Advent Calendar 2014