音楽アプリのマスコットに、オレンジ色の丸っこいキャラがいます。鉢巻きをして、後ろにエビの尻尾がちょこんと付いた「えびふりゃ」。このキャラはずいぶん長い付き合いで、いまの音楽アプリ「Harmonize」よりも前、えびふりゃだけが出てくる別のアプリのために描いたのが最初でした。もうずいぶん前のことです。平面のイラストとしてはずっと気に入っていて、いつか立体にしてみたいという気持ちも、かなり前からありました。
やらなかった理由は、単純に面倒くさかったからです。以前3Dプリンターを持っていた頃にBlenderでモデリングをしたことがあって、正方形の箱ひとつ作るのにも骨が折れた記憶があります。実物として印刷するとなると、ミリ単位で寸法を合わせないと困る。その調整のやり方を覚えるのが一番大変でした。丸や四角のパーツをぽこぽこ足していくだけなら本来そう難しくはないのでしょうが、ソフトに慣れる手間すら億劫で、ずっと手をつけずにいました。
今回それをやってみたのは、AIの時代なら、自分ではBlenderを操作せずに3Dモデリングができるのではないか、と思ったからです。実際、この記事で紹介する立体は、モデリングのためのコードをすべてAIに書かせて、私は「こうしてほしい」と指示を出し、出てきた結果を見て直しを頼む、という進め方で作りました。私が3D画面でポリゴンをこねた場面は一度もありません。丸1日、並行で他の作業をしながら、AIと会話しているうちにできあがっていた、という感覚に近いです。
長いあいだ、平べったいまま磨いてきた
先に、このキャラの見た目の変遷を並べておきます。いちばん左が初代。フラットで、目も点のような、いかにも手描きらしい素朴な顔です。真ん中が、その後じわじわ手を入れて、いまアプリに入っている質感のついた現行デザイン。鉢巻きに立体感が出て、ほおのぼかしや光沢が加わっています。そして右が、今回3Dにしたもの。ずっと平面のまま磨いてきたキャラが、はじめて立体になった格好です。
初代を立体にしなかったのは、繰り返しになりますが面倒くさかったからです。素朴なフラット絵を3Dにしても、たぶんそれはそれで可愛いのですが、当時はそこに手をかける気になれなかった。それが長い時を経て、平面の集大成である現行デザインからいきなり立体へ飛べたのは、間に入ってくれるAIがいたからです。
いちばん苦労したのは、楕円をやめさせることだった
意外なことに、難所は立体の作り方そのものではありませんでした。AIに意図を伝えることのほうでした。
「丸いマスコットを立体にして」と頼むと、AIはごく素直に、楕円体で近似しようとします。横から見たシルエットに楕円をあてはめれば、正面はそれらしく見える。ところが少し回すと、元のイラストが持っていた「下がぷっくり膨らんで上がすぼまる」あの肉まんのような愛嬌が消えて、のっぺりした卵になってしまう。人の顔でいう骨格が違うようなもので、色や表情をどれだけ寄せても「似ているけれど別人」から抜け出せません。
厄介なのは、これがなかなか言葉で伝わらないことでした。「楕円じゃない」「もっとイラストのままの形に」と言っても、卵型の関数に変えてみたり、輪郭からの距離で膨らませてみたりと、AIは別の「きれいな近似」を次々に持ってくる。どれも一長一短で、正面だけ合って側面が痩せたり、妙な稜線が縞になって出たり。汎用のなめらかな形へ寄せにいくほど、元の絵の個性が削れていく。この「近似から離れさせる」ところに、何度もやりとりを重ねました。
効いた一手 ── イラストの輪郭を、画像から読み取ってそのまま回す
行き詰まりを抜けたのは、発想を逆にしてからでした。楕円という「きれいな形」に絵を近づけるのをやめて、イラストの輪郭そのものを立体の材料にする。
やっていることは拍子抜けするほど単純です。まず元のイラスト画像から、マスコットのシルエットを画素単位で拾い出します。塗ってある範囲のふちをたどって、輪郭の点の並びを取り出すわけです。次に、その輪郭の右半分だけを使い、「中心の軸からどれだけ横に張り出しているか（半径）が、高さごとにどう変わるか」というプロファイルとして扱う。あとはこの一本の曲線を、縦の軸のまわりにぐるりと360度回すだけです。ろくろで壺をひくのと同じで、断面の曲線が決まれば立体が決まります。
大事なのは、この断面が楕円のような「作った形」ではなく、イラストから測り取った実物の輪郭だ、という点です。近似して立体をこしらえるのではなく、絵の輪郭を測って、測ったものを回す。この切り替えが効きました。
この作り方には、素直だからこその強みが三つあります。正面から見た形と真横から見た形が必ず一致すること。真上から見ると完璧な円になること。そして何より、断面がイラストの実際の輪郭なので、あの下ぶくらみの愛嬌がそのまま立体に乗ることです。回転体だから左右対称になりますが、退屈さの正体は左右対称そのものではなく、断面を楕円のような当たり障りのない形にしてしまうことのほうにありました。断面が絵から来ていれば、対称でも十分にキャラの顔になります。
尻尾の突起は左上にはみ出しているので、輪郭の右半分だけを使えば自然に無視できる、というのも都合がよいところでした。この「回してできた本体」が、以降のすべての土台になりました。
顔のパーツは「絵から座標を測って」載せる
本体ができたら、次は鉢巻き・目・眉・口・ほおの赤み、といった顔の要素です。ここでも方針は一貫していて、パーツの位置や大きさを勘で置くのではなく、元のイラストから一つひとつ測って決める、というやり方をAIに徹底させました。
たとえば目なら、イラストの中の「丸くて大きい黒い塊」を二つ探し、その中心と半径、白いハイライトの位置を数値として読み取る。読み取った座標を本体の表面に対応づけ、そこに少しつぶした黒い球を置きます。鉢巻きは、帯の色をした画素の並びから傾きと幅を測り、本体の表面に沿った帯として巻く。「えびふりゃ」の文字は帯のテクスチャとして貼りました。口や眉のような細い線は、中心を通る曲線と太さを測って、表面に浮かせた細いリボンとして再現しています。
測った値は、キャラごとに一つのデータとしてまとめておきます。すると立体を組み立てる側は、そのデータを読んでパーツを並べるだけの役割に徹することができる。元絵を差し替えて測り直せば、同じ仕組みが別のキャラにもそのまま使える、という見通しも同時に立ちました（これが後半で効いてきます）。
出来上がりが元絵とどれくらい合っているかは、毎回きちんと確かめました。3Dのレンダリングを元のイラストに半透明で重ねて、目や口や鉢巻きの位置がずれていないかを目で見る。数字が合っていても、重ねてみると微妙に印象が違う、ということはよくあります。下の画像は、3Dの顔を元絵にぴたりと重ねたところです。
正面が合っていても油断はできません。斜めから見たときに目のハイライトがずれる、細いリボンが表面から浮きすぎて影が出る、といった立体ならではのズレは、正面の重ね合わせだけでは見つからない。角度を変えたレンダリングを何枚も見比べて、少しずつ詰めていきました。
平面の「記号」を、立体の都合に合わせて翻訳する
この作業でいちばん面白かったのは、平面の絵では成立していた表現が、立体にすると急に不自然になる場面でした。
いい例が眉です。元のイラストは、片方の眉だけを描いています。平面の「表情記号」としてはそれで十分伝わるのですが、実体のある立体で片眉だけだと、反対側がのっぺりして落ち着きません。そこで、描かれている片方の眉を、顔の中心線を基準にもう片方へ折り返して両眉に増やしました。単純な左右反転ではなく、顔がやや斜めを向いた構図であることを考えて、立体の表面に沿う形で折り返すのがコツでした。
尻尾も同じ話です。エビの尻尾は、イラストでは体の後ろからちょこんと出た羽根のように描かれていますが、正体は鉢巻きの結び目です。頭の後ろに縛ったこぶがあって、その結び端が尻尾に見えている。3Dでは律儀にそう作りました。後ろに回り込んだときに「ちゃんと縛ってある」感じが出ると、平面では気づかなかった立体らしさが生まれます。
ほおの赤みのような、輪郭を持たないぼかしも悩みどころでした。これは形として作るのではなく、本体の色そのものを、ほおの位置からじわっと赤側へにじませることで表現しています。表面の色として塗っているので、後でジャンプさせて体が伸び縮みしても、赤みがちゃんと一緒に動いてくれます。
表情を切り替える
元のアプリには、マスコットの表情がいくつか用意されています。ふつう顔、困り顔、目がキラキラの大喜び、にっこり、口笛。せっかくなので、これらを3Dでも切り替えられるようにしました。
仕組みは本体と同じで、各表情のイラストから顔パーツを測り、表情ごとのデータとして持っておく。あとは組み立てるときに「どの表情か」を指定すれば、対応するパーツに差し替わる。文字どおり、顔だけを付け替えているイメージです。
ここでも平面から立体への翻訳が何度も出てきました。困り顔の汗は、貼り付いた水滴ではなく、頭から飛び出して弧を描いて消える飛沫として作る。大喜びの目のキラキラは、平面の星マークを立体の光として置き直す。口笛のすぼめた口は、平面では単純な形ですが、立体でカメラが横に回り込むと向きの違和感が出るので、視点に応じて向きが変わるようにしています。どれも「元の絵が伝えたかったこと」を、立体の都合に合わせて訳し直す作業でした。
ジャンプさせる
止まっているだけでは寂しいので、ぴょんぴょん跳ねてもらいました。物理シミュレーションではなく、手付けのアニメーションです。
跳ねるときの気持ちよさは、踏み込みでぺしゃっとつぶれ、飛び出す瞬間に縦へ伸び、空中で丸に戻り、着地でまたつぶれる、という「つぶれと伸び」のメリハリから来ます。アニメーションの世界で昔から使われる原則で、このとき縦に伸ばしたぶんは横を細く、つぶしたぶんは横を太くして体積が変わらないようにすると、ゴムまりのような弾力が出ます。
面白いのは、ジャンプと表情を組み合わせたときです。踏み込みまではふつうの顔で、飛び出す瞬間に目をキラキラさせて口を開ける。そうやって動きと表情のタイミングを合わせると、ただの丸い物体が急に生き物らしくなります。
ちなみに、このマスコットが平面のまま暮らしている音楽アプリはこちらです。宣伝を少しだけ。
二匹目は、ほとんど設定を足すだけだった
このマスコットには兄弟がいます。ミントグリーンの鉢巻きをした「かきふりゃ」。えびふりゃで作った仕組みが本当に汎用なのかは、二匹目で試されます。
結論からいうと、拍子抜けするくらい素直に立体になりました。元絵を差し替えて、輪郭と顔パーツを測り直す。あとはキャラごとの違い ── 鉢巻きが緑であること、尻尾はなくて結び目のこぶだけがあること、ほおの代わりに星のイヤリングを下げていること ── を、設定として書き足すだけです。同じパイプラインが、そのまま二匹目を吐き出しました。
星のイヤリングは、動くと揺れるようにしました。歩いたり跳ねたりすると、耳もとの星がぷらぷらと遅れて振れる。こういう「本体の動きに引きずられて遅れて動く付属品」があるだけで、生き物っぽさがぐっと増します。一匹目で土台を丁寧に作っておくと、二匹目以降は驚くほど安くなる。当たり前のようでいて、手を動かして体感すると気持ちのいい瞬間でした。
ブラウザの中を歩き回れるようにする
最後に、レンダリングして眺めるだけでなく、自分で動かして遊べるようにしました。作った立体をWeb用の3Dデータに書き出し、ブラウザの上で操作できる小さなページにしています。
キーボードで歩き回り、マウスの左ドラッグで視点を回し、スペースで例のジャンプ。スマホなら、画面の左半分をなぞって移動、右半分で視点、ボタンでジャンプ。えびふりゃとかきふりゃが同じ地面に並んでいて、ボタンで操作するほうを切り替えられます。跳ねればちゃんとつぶれて伸び、かきふりゃのイヤリングは走ると揺れる。ブラウザの中で二匹が並んで跳ねているのを見ると、平面の絵から始まったとは思えない距離まで来たな、という実感がありました。
やってみた感想
正直、出来上がりは予想どおりでした。みかんのおまんじゅうにエビの尻尾が生えたような形になるだろうと思っていて、そのとおりの、けれど思っていたより愛嬌のある立体になった。意外にうまくいったな、というのが率直な感想です。ここからゲームにするといった展望が具体的にあるわけではなく、単に「立体にしたらどうなるんだろう」を確かめたかった、それだけの実験でした。
反省もあります。丸1日かかったのですが、もっと早く仕上げられたはずで、詰まったのはたいてい待ち時間 ── 立体を作ってはレンダリングして確認する、そのループの重さでした。手元のマシンはそれなりに速いほうなので、これはやり方の工夫でまだ縮められたと思います。
それでも、昔さんざん面倒くさがってやらなかったことが、Blenderの画面を自分では開かないまま形になったのは、素直に面白い体験でした。若い頃にちゃんとBlenderを覚えていたら、夢中でちょいちょいと作っていたのかもしれません。歳を重ねると、お金になるかも分からないことに手間をかけるのがだんだん億劫になる。その腰の重さを、AIがひょいと肩代わりしてくれる。たいした成果物でなくても、こういうちょっとした遊びが軽い気持ちで実現できるようになったのは、いい時代だなと思います。