#1E1E1E

レンダリングで仕上げる3Dコンテンツ

#EBEBEB

「レンダリング」という言葉を聞くと、二次元CG(コンピュータグラフィック)や3D、映像、ゲームなどを思い浮かべる人が多いのではないでしょうか。

「レンダリング」とはさまざまな形式のデータをもとに、画像や映像データを生成することを言い、いま見ているこのwebページもまた、レンダリングされて表示されているといえます。

ここでは、レンダリングの基本とともに、3D・ARコンテンツの制作を例に、レンダリングがAdobeアプリケーションではどのように使われているのかを紹介します。

目次

3Dにおけるレンダリング

Adobe Dimensionとレンダリング

Dimensionによる3D作成

Dimensionでレンダリング

3DデータをARで活用する

インタラクティブなARシーンを制作

3Dにおけるレンダリング

3Dは、レンダリングという言葉に接する機会が多い分野と言えます。

レンダリングには大別するとリアルタイムレンダリングとプリレンダリング(プリレンダ)があります。

リアルタイムレンダリングとは、その名の通り、データをもとに即座に画像を生成する方法です。たとえば、ゲームでは操作に合わせて3DCGを表示し続ける必要がありますが、ここで使われているのがリアルタイムレンダリングです。処理に能力と速度が求められるため、精密な表現には向きませんが、結果がすぐに見られるため、ゲームだけでなく、TVのテロップや3Dアプリケーションのプレビューなど、多くのシーンで使われています。

プリレンダリングとは、映画や映像作品データの生成に使われるもので、精密に作り込まれた2D(二次元)CGや、複雑な3DCG、映像等、データによっては非常に処理に時間を要します。

従来は、リアルタイムレンダリングとプリレンダリングの間には、品質の差、処理の差があると考えられていましたが、現在ではリアルタイムレンダリングの技術の進化によってその差は小さくなってきています。

Adobe Dimensionとレンダリング

クリエイティブアプリケーションとレンダリングの関係を見てみましょう。

グラフィックの3Dシミュレーションを可能にするAdobe Dimensionでは、レンダリングは切っても切り離せない機能です。

Dimensionにおけるレンダリングとは、アプリケーション上で作成した3Dシーンを、2D画像(二次元CG)として変換する処理のことを指します。実世界の光の挙動を計算し、シミュレートした反射や影を再現した画像を生成します。

Dimensionのデザインモード(左)とレンダリングモード(右)を比べてみると、デザインモードでは影や反射の質感は描画されていませんが、レンダリングプレビューでは仕上がりをイメージしながらライティングやマテリアルが表現されていることがわかります。

Dimensionのデザインモードは、システムリソースを低く抑えながら作業を優先的に行えるリアルタイムレンダリングにより描画されています。Dimensionのリアルタイムレンダリングは、高速な処理によって描画される一方、ガラスなどの透過性のある表現、影や反射などの表現は行えません。こうした表現のレンダリングには、フォトリアルな画像の生成が可能なレイ トレーシング(Ray Tracing)レンダリングが使われます。

現実のような精密なレンダリングを行うには処理に時間がかかり、システムリソースの使用量も増大しますが、Dimensionの場合、レンダリング結果がすぐに確認できるようにレンダリングプレビューが用意されています。レンダリングプレビューをクリックすると、高速なレイトレーシングレンダリングで処理され、ライト、マテリアル、シャドウ、反射の設定を確認できるようになっています。

Dimensionによる3D作成

Dimensionには、よく利用されるモデルやマテリアル、ライトなどがあらかじめ用意されており、配置しマテリアルの設定を行うだけで簡単に3Dシーンを作成することができます。

また、3Dアプリケーションから書き出した3Dデータを読み込む、Adobe Stockから追加の3Dモデルを追加する、AdobeIllustratorやAdobe Photoshopで制作したグラフィックを3Dモデルにデカールとして配置する、Substanceで作成したマテリアル素材を読み込むといった連携も行えるように設計されています。

このほか、煩雑なパースの調整やライトの処理も背景画像に合わせてAdobe Senseiの技術によって自動的に調整するなど、作業を軽減できる機能も用意されています。

Dimensionでレンダリング

Dimensionでシーンが完成したらレンダリングモードに切り替え、「画質」を設定して「開始」を押すと、レンダリングを行なう=静止画像として書き出すことができます。

このときPSD形式を選択すると、背景とレンダリングされた画像をレイヤーとして分割してレンダリングし、各モデルを色分けしたレイヤーなども作成されるので、レンダリング後に、Photoshop上での補正やレタッチがしやすくなります。

図はDimensionからレンダリングをして書き出しPSD画像(左)とPhotoshopで編集を加えた状態(右)です。
レイ トレーシングを利用してレンダリングされたデータは、背景とモデルが別のレイヤーとして保存されているので、書き出した画像をPhotoshopを開いて補正したり、新しい画像を追加することができます。
画質は「低(高速)」にするとノイズが多くなりますが、「高(低速)」にすることでノイズの少ない高画質な画像が作成されます。

3DデータをARで活用する

ここではもうひとつ、Dimensionによる3Dデータを使った応用例を紹介しましょう。

Dimensionで作成したモデルは、Web上で確認できる「3Dシーンを公開」を行うことで、共有・コメントができるほか、Webにインタラクティブな3Dコンテンツとして挿入することができるようになります。

図は作成した3DシーンをWebブラウザで表示したものです。静止画ではなく3Dのため、カメラ位置を動かすことでさまざまな角度から見ることができます。

インタラクティブなARシーンを制作

DimensionからAero用に書き出すと、iOS向けに提供されているARプラットフォーム・Adobe Aero上で現実空間の上に3DCGをミックスした拡張現実として投影することができるようになります。

複雑なコーディングを行わなくても、Aeroさえインストールされていれば、作成したアート作品をギャラリーにいるかのように近づいて見る、普段は見えないような角度から回り込んで鑑賞する、といった新しい体験が簡単に実現でき、タップや動きなどによってインタラクティブな体験を得ることも可能です。特別なスキルがなくても、アプリ上でオーサリングすることができるので、設計や公開を簡単に行えるのがAeroの特徴です。

また、Aeroでは、DimensionやPhotoshopで作成したアセットを合成して、デジタルの世界とカメラを通した現実を融合させることもできます。

たとえば、カメラを通して認識させた空間にあらかじめ用意されたアセットを配置する、Dimensionから書き出した3Dオブジェクトを配置する、Photoshopのレイヤーを奥行きがあるように見せるなど、さまざまな表現が行えます。移動にも追随するため、あたかも投影したものがその場にあるかのように、現実世界と融合させるこることができるのです。

こうしたARもまたリアルタイムレンダリングによって生成されています。

リアルタイムレンダリングがより複雑な表現をすばやく処理できるようになると、より一層、クリエイティブの表現力も広がると期待されています。

https://main--cc--adobecom.hlx.page/jp/cc-shared/fragments/roc/seo/product-blade/illustrator

関連記事

ロゴ作成のポイント

目を惹くロゴの作り方とは?企業やブランドの顔となるロゴ作成のコツを解説。ロゴデザインのインスピレーションが沸いたら自作のお洒落なロゴを作成しましょう。

今すぐ読む

ドット絵、ピクセルアートの作り方・描き方

ドット絵とは別名ピクセルアートとも呼ばれ、レトロゲームのように仕上げるCG技法です。ドット絵作成の基礎から応用や、ドット絵の作り方・描き方のコツを解説します。

今すぐ読む

白黒写真に色を付ける方法

色を加えると古い写真が生き返ります。その基本的な手順とテクニックを説明します。

今すぐ読む