Skip to content

Instantly share code, notes, and snippets.

@keijiro
Created September 16, 2012 06:30
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save keijiro/3731297 to your computer and use it in GitHub Desktop.
Save keijiro/3731297 to your computer and use it in GitHub Desktop.
Perlin Noise (fBm) を使ったカメラ揺れエフェクト

Perlin Noise (fBm) を使ったカメラ揺れエフェクト

概要

Perlin Noise (fBm 関数)をオブジェクトの動きに取り入れることによって、色々と面白い効果が生み出せます。例えば、これを位置と回転に適用するだけで、カメラの手ブレ風エフェクトなどを作り出せます。

サンプル

http://keijiro.github.com/unity-perlin/

Screenshot

Unity で作成したサンプルです。上のバーで揺れの周波数を、下のバーで揺れの量を調節できます。 Editor 上ではもう少し詳しくパラメーターを調節できます。

バンク(Z軸回転)を入れると動きが大きくなり過ぎるため、このサンプルでは入れていません。もっと派手な効果を出したい場合には入れてもよいかもしれません。

仕組み

fBm 関数は、数学的にはなんだかすごくややこしい概念を持ったものなのですが、簡単にまとめると次のような特性を持ったランダムな動きを表す関数です。

  • 0 付近を行ったり来たりする。
  • 大きな動きと小さな動きがまんべんなく混ざっている。
  • どの時点を切り出しても、同じようなランダムな動きをする。
  • 連続性がある(値が飛んだりしない)。

グラフにプロットすると、こんな感じです(Colin Green による)。

fBm plot

これをカメラの位置と回転にオフセットとして与えるだけで、上のサンプルのような動きになってくれます。

もっと fBm を使おう

昔流行った「1/f ゆらぎ」のようなもので、自然の中にはこれと似た動き/かたちを持つものが多くあります。上のサンプルで見せた「カメラ揺れ」も、何かを真面目にシミュレートしているわけではないのですが、fBm の動きを取り入れることによって、なんだか自然な揺らぎのように見えてくる、というわけです。

他にも色々な例があげられます。

実装

Perlin Noise と fBm 関数の実装はこちらにまとめてあります。Perlin Noise の実装は、Ken Perlin 先生の実装を単純に JavaScript に直したものです。

https://github.com/keijiro/unity-perlin/blob/master/Assets/Perlin.js

@sl300
Copy link

sl300 commented Jul 1, 2013

コード拝見させて頂きました。
大変貴重な情報ありがとうございます。
現在、上記のコードをDCCツール(Softimage)にコンバートできないか?と模索しておるのですが、
当方Jscriptとpythonしか扱えず、Javascript特有?のコードの書き方に手詰まりしております。
そこでもし可能でしたら、コメントアウトに、
説明等を記載して頂く事はできますでしょうか?
本当に唐突且つ、ご無理をお願いして申し訳ございませんが、
何卒ご教授頂きますようよろしくお願い致します。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment