歌詞がモーショングラフィックスとして表示される『Lyric speaker』や、800本の造花が有機的に動くウィンドウディスプレイ『FLOWER MIRROR』など独創的なインタラクティブ・コンテンツを手がけるクリエイティブ・プロダクションの「dot by dot」。
ユニークな作品が生まれる秘密をプログラマのSaqoosha氏と代表の富永氏に聞いた。

インタビュー： 齋藤 あきこ

斎藤

SaqooshaさんはもともとFlashで名を馳せたスーパープログラマですが、最近のプロジェクトではUnityを使われていると聞いてお話を伺いに参りました。なぜUnityを使われているのですか？

Saqoosha

もともとdot by dotはWebの制作からキャリアを始めているんですが、広告のトレンドが、単なるWebだけではなく、リアルな装置やデバイスと連動するものになってきた。そうすると僕らプログラマにも3Dなどが求められることも多くなってきたんです。中でもUnityはプロトタイプを作るのがとにかく早く出来る。一番早いと思いますよ。特にFlashを使ってた人には、感覚的にすごく近い。Directorの最新版といった印象ですね。

斎藤

Webから脱却した広告コンテンツに対応するには、とにかくプロトタイプが重要になってくると。最初にUnityで作った作品は？

Saqoosha

VRコンテンツの『ヤフー トレンドコースター』でした。企画は自分が参加する前から進行していたんですが、「面白そうだけど本当に出来るのか？」と今一歩踏み込めない段階だった。それで自分がプロトタイプを作ったんです。当時は2014年で、Oculus Rift も開発版 (DK2) しかなかったので、Unityしか気軽に試せる環境がなかった。「目の前にあるやるべきことをさくっと実現してくれる」のはUnityが一番早かったんですよ。会議の次の日にプロトタイプを提出して、そこでチーム全員が「これはいける」となったんです。

リアルタイム検索とVRを組合せた体験型アトラクション「ヤフートレンドコースター」

斎藤

複雑なプロジェクトにおいて、形が見えることは必須ですね。いつもプロトタイプはどの段階で作るんですか？

Saqoosha

企画の方向性が見え始めた段階です。大規模な広告の企画では関わる人が多いので、「なんとなく面白そうなことはわかるんだけど、このまま作って大丈夫かな？」という確証を全員が得なくてはならない。そのためには、やっぱり動かさないとわからないんです。大体動いてるものを見たら面白いか面白くないかわかるし。そこで判断が分かれますよね。

モーションが気持ちいい『Lyric speaker』

斎藤

『Lyric speaker』はどのような経緯で作られたんですか？

Saqoosha

「SXSW」にプロダクトとして持っていきたいということで相談を受けて。既にプロトタイプが出来上がっていたんですが、その時点ではすごく重くて、60fpsも出ないくらいだった。Unityでプロトタイプを作り直して、文字がスムーズに動くように調整したんです。

斎藤

モーションの気持ちよさは『Lyric speaker』の大きな特徴ですね。

Saqoosha

モーショングラフィックスに長けた映像作家にムービーで動きを作ってもらって、それをもとに僕たちがリアルタイムに動かすバージョンを作り直しました。そのリファレンス映像は「この歌手は、このワードならこんなふうに声を出すだろう」というこだわりのもと、1フレーズずつ作られています。

斎藤

『Lyric speaker』はあらゆる曲に対応するものなので、タイミングをあわせるのが大変そうですね。

Saqoosha

そうですね。リアルタイムに、どんな曲でも気持ち良いモーションにするのが、僕らプログラマーの仕事でした。

斎藤

そんなこと、どうやって出来るんですか？

Saqoosha

映像作家のほうに、指示書を作ってもらいました。「このモーションはこういう意図で作っているので、そこを維持してくれれば多少レイアウトが変わっても大丈夫です」というように、それぞれの作家と細かくやり取りしましたね。

斎藤

映像作家と二人三脚になり映像表現として実現されたという事ですね。

Saqoosha

映像作家によって、プログラムしやすい、そうでない、など、いろいろな違いがありました。プログラムは難しいけど、出来上がるとすごく良いというものもあって。Flashの頃は、実装する人が自分でモーションも作っていましたが、今は両方できる人はそんなに多くないと思います。僕もそんなに得意じゃないので、映像作家と組むのは理想ですね。

斎藤

テキストのレンダリングはどうされているんですか？

Saqoosha

最初はアセットストアのTextMesh Proを使っていましたが、日本語のカーニングまではできなかったんです。でもこれは文字が主役です。レイアウトにはめちゃくちゃこだわりたかったので、最終的に全部自分で作ってしまいました。OpenType フォントの情報を読み出して、イラストレーターと全く同じになるようにカーニングとか詰めの処理をやるというテキストレンダリングエンジンを書いたんです。

斎藤

TextMesh Proと同じようなものですか？

Saqoosha

そうですね。SDFのテクスチャーを生成するところも自分で書いて。

斎藤

日本語の需要ありそうですよね。

Saqoosha

最初は重いし、メモリを食うし、解像度が小さくなるから荒くなるのが嫌だな、と思っていたんですが、一曲の中で使う文字数も決まっているので問題ありませんでした。

Unityエディタ上での様子

斎藤

ライブ演出にも使われたそうですね。

Saqoosha

石垣島の野外音楽フェスの映像演出だったんですが、お金も時間もあまりない、ということで、『Lyric speaker』で映像を作って流しました。映像エンジンが書き出す映像なので、その場で生成できるので。ただ、ライブだとあらかじめプログラムしたテンポとズレがあるので、そこは手作業です（笑）。

後編（Flower Mirror編）に続きます