例えば、Webページで SVG アニメーションを使用して「立体的でアニメーションするもの」を制作しようとすると、コードを手書きしたり Illustrator で制作したものをパラパラ漫画にしたりといった方法ではなかなか大変です。
そこで、オープンソースの 3DCG ソフトウェアである Blender を使用すると以下のようなアニメーションを比較的簡単に作ることができます。
▲この画像はSVGアニメーションです。クリックすると拡大表示することができます。もし表示できない場合は GIFアニメーション版 をご覧ください。
Blender は、Windows・Mac・Linux などで利用できるオープンソースの 3DCG ソフトウェアです。基本的な使い方は以下の記事に書いています。
「AdobeユーザーのためのBlender入門」というチュートリアルを作りました | Stocker.jp / diary
基本的な設定と静止画SVGの出力
Blenderユーザー設定（command+,）［アドオン］タブ＞左上の検索に SVG と入力すると右側にインストール済みのアドオンが絞り込まれます。
［Render: Freestyle SVG Exporter］にチェックします。このアドオンは、最初からインストールされていますが初期設定では無効になっています。
ダイアログ左下の［ユーザー設定の保存］をクリックしてダイアログを閉じます。
［レンダー］タブで［出力］に // と書くとネイティブファイル（.blend）と同じフォルダーに SVG が出力されるように設定されます。
［Freestyle］と［Freestyle SVG Export］の2つにチェックを入れます。
command+S で .blend ファイルを任意のフォルダーに保存します。
続いて、［レンダー］ボタンまたは F12 キーでレンダリングします。すると、ネイティブファイル（.blend）と同じフォルダーに［0001.svg］のような名前で出力されます。
▲初期設定の立方体をレンダリングした場合このようになります。色は塗られていませんし、まだアニメーションもしません。
ファイルの最適化
たったこれだけ（立方体1つ）の SVG でも 3KB になってしまいます。
SVGOMG というWebアプリで圧縮してみると 2KB になるので、SVGO のようなものを使用して圧縮した方が良さそうです。
塗りの色
初期設定では塗りがどのような色に設定されていても真っ白に出力されます。
塗りの色も出力するには［レンダー＞Freestyle SVG Export］内の［Fill Contours］にチェックを入れます。
そして、［シーン＞Freestyle Line SVG Export］内の［Export Strokes］と［Export Fills］の両方にチェックを入れます。
もし［Export Strokes］にチェックを入れなかった場合は、塗りのみで線なしの SVG が出力されます。
アニメーション
ここでは、簡単な回転アニメーションを制作します。
まず、［レンダー］タブの［フレームレート］を 24fps にします。
これは、24フレーム=1秒という設定です。
次に、キーフレームを作成します。
［タイムラインビュー］の［カレントフレーム］を 1 にし、3Dビュー上で i キーを押して［位置/回転］を選択します。
次に、［カレントフレーム］を 24 にし、3Dビューのメニューで［ビュー＞上］を選択します。
キーボードの R キーを押した後マウスを移動してオブジェクトを回転させ、クリックで回転を決定し、i キーを押して［位置/回転］を選択します。
［レンダー＞Freestyle SVG Export］を［アニメーション］に設定し、上の方にある［レンダー］の隣の［アニメーション］ボタンをクリックしてアニメーションレンダリングします。
すると、.blend と同じフォルダーに［0001-0024.svg］のようなファイルができています。数字はフレーム数です。
この SVG ファイルも、SVGOMG でアニメーションを保ったまま圧縮できます。
陰線を破線で表示
Freestyle SVG Exporter — Blender Manual
上記ページには立方体の陰線を破線で表示したサンプルがあり、このページにある設定だけで陰線を破線で表示できるのかと思っていましたが、このページに設定方法は書かれていませんでした。
陰線を破線で表示するには、以下のページにある方法を使用します。
【Blender】Freestyleで実線･破線（破線）にする方法(4/6)【ストローク】
私の場合は、［LineSet 2］の［破線］のチェックの下の設定を［4:4］にしました。
すると、以下のように陰線を破線で表示した SVG ができます。
これをアニメーションさせると、冒頭のものができます。
サンプルファイルのダウンロード
このサンプルファイルは Blender v2.78 で制作しました。従って、2.78以上のバージョンを使用し、必ずアドオンの［Render: Freestyle SVG Exporter］をオンにしてご利用ください。
サンプルファイルのダウンロード（svga-sample.zip）
内容は以下の通りです。
- 破線なし・静止画.blend
- 破線あり・アニメーション.blend
- 0001.svg（静止画出力サンプル）
- 0001-0024.svg（アニメーション出力サンプル）
応用: 物理演算
ここまでなら Illustrator や Flash Professional でも頑張れば作れるかもしれません。
しかし、Blender の場合は物理演算（衝突、破壊、流体、煙）シミュレーション機能があるため、それと組み合わせると以下のようなことができます。
以前、Stocker.jp / Space で開催された Blender 勉強会のときに物理演算（衝突）を使用してちゃぶ台返しするアニメーションを製作したのですが、そのデータを使用してSVGアニメーションにしてみました。陰線はオフにしています。
圧縮前は 2.3MB、SVGOMG で初期設定で圧縮しても 1.3MB あったため、精度を 1 まで下げて大幅に圧縮して 855KB にしました。
そのため、拡大してみると線が少しブレて見えると思います。あと、読み込み完了するまではチラついて見えますね。
このサンプルの場合、塗りつぶしを使用すると明らかに表示がおかしくなったため塗りつぶしはオフにしました。
Freestyle SVG Exporter — Blender Manual によると、「塗りつぶし機能は多少不安定で、特にアニメーションでは不安定です。」とのことです。
これくらい複雑なものの場合、SVGアニメーションより three.js 書き出しで WebGL 表示などを検討した方が良いかもしれません。
