3Dのアニメーションは、ファイルに入れない

3Dモデリングを、AK²Labの顔の一つとして取り入れることにしました。モデリング自体は、まだ試行錯誤の段階です。

AK²Labではこれまで、Webサイトの動きを動画ではなくプログラムで作ってきました。3Dも、その延長で考えています。

動画は手軽だが、ファイルが重い

Webサイトで動きを見せたいとき、一番手軽なのは動画を置くことです。ただ、動画は1秒間に何十枚もの絵を切り替えて見せているので、長くしたり画質を上げたりするほど、ファイルが大きくなります。

静止画でも、ゆっくり拡大したり横にずらしたりすれば、動きのある見せ方ができます。この場合、ファイルは画像1枚で済みます。

イラストや図形なら、SVGにする方法もあります。SVGは線や形を座標で表す形式なので、PNGやJPEGよりファイルが小さく済むことが多く、拡大しても粗くなりません。CSSやJavaScriptで動かすこともできます。

CanvasやThree.jsはその場で描いている

Canvasを使うと、絵そのものをプログラムで描けます。JavaScriptで1コマずつ描き直していくので、画像を用意しなくても、線や図形、細かい粒の動きなどを表現できます。

WebGLを使うと、この描画をGPUで処理できるので、3Dや大量の図形も扱えます。Three.jsは、そのWebGLを使いやすくしたライブラリで、カメラや光、物体の位置や動きをプログラムで指定します。見た目は動画に近くても、中身はCanvasと同じく、プログラムで描いています。

静止画を動かす方法も、SVGも、CanvasやThree.jsも、決まった映像を再生しているわけではありません。表示するたびに、ブラウザがその場で計算して動かしています。そのため、ページを開くたびに動きを変えることもできますし、画面に見えていないときは処理を止めることもできます。

AK²Labがプログラムで動きを作ってきたのは、この点が大きな理由です。見た目のインパクトに対し、相対的に軽く実装できることと、他のプログラムと組み合わせやすいことを優先してきました。

3Dモデルに動きまで入れてしまうと、動画と変わらない

3Dを使うと、写真や動画に近いリッチな表現ができます。ただし、3Dモデルのファイルに形と動きをまとめて入れると、ファイルが大きくなり、動きも毎回同じになります。これでは、動画を再生しているのとあまり変わりません。

実際、AK²Labのロゴを部品に分けて、散らばってはロゴの形に集まる3Dアニメーションを作ったときも、そうなりました。動きまで入れたファイルは924KBあり、そのうち形のデータは約70KBです。残りの大半は、部品ごとの位置・回転・大きさを、10秒分、1秒に30回ずつ記録したアニメーションのデータでした。

見た目は綺麗に動いていても、これではAK²Labらしくありません。

形だけをファイルにして、動きはJavaScriptで計算する

そこで、ファイルには部品の形だけを入れ、組み立てと動きはJavaScriptで計算するように作り直しました。

ファイルは924KBから152KBと、約6分の1になりました。減ったのはファイルに記録していたアニメーションのデータの分で、代わりに動きを計算するJavaScriptは約9KBです。

プログラムで動かしているので、ページを開き直すたびに部品の動き方が変わります。ただし、動きを決める乱数を使うのは開いたときの一度だけで、1フレームごとにランダムに動かしているわけではありません。あとは経過時間から位置や向きを計算していて、ロゴの形に戻るところは毎回同じです。

実物はこれです。トップページのファーストビューにあるロゴと同じ部品を、同じ計算で動かしています。ドラッグで回せて、離すと正面へ戻ります。動きを減らす設定のときは、SVG のロゴのままです。

3Dでも動きはプログラムで作る

3Dが加わっても、動きをプログラムで作るという方針は同じです。形は3Dモデルのファイルで用意し、動きはJavaScriptで計算するこの作り方を、これからのAK²Labの個性として育てていきます。

トップページをリニューアルしたので、この記事を書いた当時の版は 2026年9月24日のページ で確認できます。