Then & nowのリメイクの3D作品は、どれもPythonファイルから始まりました。Superman、Batman、Wolverine、Spider-Man、Iron Man、Hulk、R2-D2、そしてGame & Watchは、それぞれBlenderを操作するスクリプトによって作られ、モデルを書き出し、three.jsでリアルタイムにライティングするページへと渡されます。マウスで造形したものは何ひとつありません。
曲芸のように聞こえるかもしれません。しかし結果的に、このプロジェクトで最も実用的な判断でした。
なぜコードで3Dをつくるのか
手で作ったモデルは完成品です。スクリプトで作ったモデルはレシピであり、レシピは変えられます。Hulkについて"拳が手袋のように見える"というフィードバックがあったとき、私たちはファイルを開き直して頂点を動かしたりはしませんでした。拳の作り方を変えて、もう一度実行したのです。前腕が短すぎたときも、マントを背中ではなく肩にかけて垂らす必要があったときも、修正は数行で、モデル全体が数分で作り直されました。
これは、どの作品も再現可能だということでもあります。スクリプトはサイトと同じリポジトリにあり、共通のツールキットが、胴体、台座、彩色、書き出しといった、どの胸像にも必要な部分を担っています。
顔は難しい。だからゼロからは始めなかった
最初の頭部は、プリミティブを組み合わせ、数式で変形させて作りました。頭部には見えても、人には見えませんでした。顔は目が最も厳しくなる場所で、どれほど巧みなノイズを加えても、少し長すぎる鼻は直せません。
そこでアプローチを変えました。Blender Studioは、誰でも自由に使えるCC0の人体ベースメッシュを公開しています。いまでは各顔をそのリアルな頭部から始め、スクリプトで形を整えています。Hulkにはより重い眉と広い顎を、Supermanには角ばった顎と割れたあごを、Wolverineには唸る口元を。手も同じセットから取り、スクリプトでつかむ手、開いた手のひら、握り拳のポーズにしています。
最も時間がかかった小さなディテール
同じことに取り組む人に伝えたい教訓をいくつか：
- 水密でなければ意味がない。パーツをまとめてリメッシュし、ファイルサイズを減らすために縮小すると、表面が折り重なることがあり、その折り目は黒い穴として描画されます。いまのビルドでは、モデルが閉じた正しい表面でなければ完了しないようにしています。
- メッシュごとにマテリアルはひとつ。BlenderのglTFエクスポーターは、メッシュの最初のマテリアルにしか頂点カラーを残さないため、彩色したパーツはすべて個別のメッシュにしています。
- 必要になるまで口は閉じておく。HulkとWolverineは普段は唇を閉じています。咆哮や唸りは長押ししている間だけ再生される形状変化で、口が開くまで歯は隠れています。
- すべてのモデルにバージョンを。ブラウザはモデルを強くキャッシュするため、各ファイルはモデルが変わるたびに変わるバージョンタグ付きで読み込んでいます。
光はモデルの半分
ページ上では、各作品をthree.jsでリアルタイムにライティングしています。Iron ManとSupermanには、目、アークリアクター、リパルサー、ヒートビジョンを光らせるブルームという発光効果を加えました。調整には手間がかかりました。最初のIron Manは光りすぎてヘルメットが見えなくなったので、いまのブルームは控えめに始まり、ブラストをチャージするにつれて広がるようにしています。
それぞれの作品には固有のシーンもあります。雨のゴッサムの屋上、夕暮れのニューヨーク、タトゥイーンの2つの太陽、携帯ゲーム機のためのクルミ材の机。
軽快さを保つ
3Dはすぐに重くなります。スマートフォンでも使えるよう、いくつかのルールを守っています：
- モデルはページが落ち着いてから読み込み、テキストより先には読み込みません。
- シーンはひとつずつ、小さな単位に分けて構築するので、グラフィックの準備中にページが固まることはありません。
- グラフィックの準備は、最初のフレームを描く前にバックグラウンドで行います。
- 十分なグラフィックチップのない端末には、止まったページではなく静止画を表示します。
Then & nowの冒頭にある博物館の棚は8つの作品を一度に見せるため、各モデルの軽量版を使っています。ポリゴンを削減し、圧縮し、必要なときだけ読み込みます。
これから向かう先
これらの胸像の技術は、そのままクライアントの仕事に活かせます。プロダクトのコンフィギュレーター、インタラクティブな解説、すばやく読み込まれタッチに反応するヒーロー演出。コードで作るからこそ、隣にあるプロダクトと同じ速さで変えていけます。
それまでの間に、Hulkを怒らせてみてください。