Help us understand the problem. What is going on with this article?

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

More than 5 years have 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 先生です!
ボクよりもっと露出大な展開を期待しています!!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした