3Dアニメーション

3Dデータをあえて2Dっぽく見せる!? トゥーンレンダリング技術とはサムネイル画像

3Dデータをあえて2Dっぽく見せる!? トゥーンレンダリング技術とは?

トゥーンレンダリングというレンダリング手法をご存知でしょうか。最近ではVtuberなどにも活用され、目にすることも増えた本技術をご紹介します。

トゥーンレンダリングとは

トゥーンレンダリングは3Dデータを2Dのイラストのように見せる技術です。「トゥーンシェイド」や「トゥーンシェーディング」「セルシェーディング」とも称されます。言葉で説明するよりも画像を見た方が理解しやすいので、こちらをご覧ください。

トゥーンレンダリング
Flat Kit. Cel / Toon Shading — Demo からキャプチャ

右が元データで左がトゥーンレンダリング後のデータです。輪郭線などが追加され、3Dデータ感がなくなり、まるで手書きの絵のような質感になっていますね。これがトゥーンレンダリングです。

トゥーンレンダリングの特徴や利点

通常、3Dデータをそのままアニメーションに利用すると3Dデータ独自の雰囲気が出てしまうため、これまでの2Dアニメーションと比べると違和感があります。そのため、トゥーンレンダリング処理をおこない、あえて2Dの質感を与えることで違和感のないアニメーションやゲームを表現します。

例えば、こちらのツイートでは右側が元の3Dデータです。これをこのままアニメーションにすると3Dデータ丸出しの不自然なリアル感が出てしまうのが想像できますね。そして、左側がトゥーンレンダリングしたデータです。違和感がなく従来の2Dアニメーションに近くなりました。

写実的な表現を必要としないキャラクターなどの3DCGにおいて、手描きの表現を残しつつ、作図が大変なアクションやカメラワークの調整ができるというのがトゥーンレンダリングの利点です。

また、一見単純化されたデータのように見えますが、元の3Dデータからポリゴン数が減っているわけではありません。元のモデルのポリゴンから輪郭線となるポリゴンを生成しているため、同じ条件であれば、影などが同色で設定されます。そのため、データの容量や演算の負荷は元のデータと同じ、またはそれ以上になってしまうことがあります。

トゥーンレンダリングの活用事例

『GUILTY GEAR Xrd -SIGN-(ギルティギア イグザード サイン)』という格闘ゲームではリアルタイム3Dにもかかわらず、2Dアニメーションにしか見えないというトゥーンレンダリングを用いた日本の技術の高さに海外のゲーム製作会社が驚いたという話が有名です。

話題作の動画がこちら。キャラクター登場のムービーから戦闘中も全て3Dデータが使用されていますが、トゥーンレンダリング技術を使うことで2Dイラストのような表現がされています。

ゲームだけでなくテレビアニメでも多く利用されており、『プリキュア』シリーズや『ラブライブ!』シリーズなど、ダンスのような複雑な動きがあるアニメーションでは広くトゥーンレンダリング技術が使用されています。

また、最近話題になっているVtuberでも基本的にはトゥーンシェーダーを適用するのが一般的です。キズナアイを初め、ほとんど全てのVtuberで活用されています。

トゥーンレンダリングをおこなえるソフトウェア

トゥーンレンダリングは多くの3DCGソフトウェアに標準搭載されています。以下に記載しているのが主な3DCGソフトウェアです。

3DCG制作ソフトウェア

  • Maya(マヤ)
  • 3ds Max(スリーディーエスマックス)
  • LightWave(ライトウェーブ)
  • Cinema 4D(シネマ4D)
  • Blender(ブレンダー)
  • modo(モド)
  • Shade 3D(シェイド3D)

参照

その他、ゲームエンジン

  • Unity(ユニティ)
  • UnrealEngine(アンリアルエンジン)
  • MikuMikuDance(ミクミクダンス)

また、ゲームやVtuberなどの不規則な動きのある3Dデータでは、アクション毎にレンダリング演算をするのではなく、Unityなどのゲームエンジンでトゥーンシェーダーを適用し、リアルタイムレンダリングをするのが一般的です。

ちなみに弊社でもトゥーンシェーダーの設定やVtuber用データ作成のご相談を承っております(宣伝)。

3Dデータ作成サービス MODELY(モデリー)|Vtuber・MMD用データ作成

まとめ

元々アニメーションやゲーム文化が根強い日本では、トゥーンレンダリングの技術が自然に作品へ取り入れられていますね。今後、アニメーションやゲームを見る際には是非この技術にも着目して見てみてください!


関連記事

  1. three.jsで作られた3DCGのミュージックビデオやサイトが…
  2. 3Dアニメーションのリグについてサムネイル画像 3Dアニメーションのリグについて
  3. 特撮に使われる3D技術をご紹介!
  4. 3DCGアニメーションとはの画像 3Dアニメーションとは?具体的な作成方法やコツを徹底解説!
  5. 直感的にARやVRコンテンツを作成できる! Amazonが発表し…
  6. 3Dデータが無料でダウンロードできるサイトまとめ(CG/アニメー…
  7. ゼルダファンは一度見てほしい。ファンが作った「ムジュラの仮面」の…
  8. David Lewandowski氏による狂気のCG映像をご覧く…

新着記事

  1. WebGLのアイキャッチ画像
  2. 「3Dモデル依頼」のアイキャッチ画像
  3. 「3dデータ フィギュア」のアイキャッチ画像

PICK UP

  1. 【Fusion 360】覚えておくと便利なショートカットキー一覧サムネイル画像
PAGE TOP