NEWVIEW FEST 2021

2022.01.21(Fri.)~01.31(Sun.)
@SHIBUYA PARCO & VIRTUAL VENUE

XR作品体験、ライブ、トーク、ポップアップetc.XRカルチャーの最前線を発信
3次元空間での表現と体験のデザインを開拓するNEWVIEW初の複合型イベント

【Blender】オリジナルのHDRI(High Dynamic Range Image)を作る方法

360度カメラや高画質なカメラを持っていなくても、既存のフリー素材とオブジェクトを組み合わせて自分好みのHDRIを作成できます。
今回の記事ではそのHDRIをBlenderで作成する方法を紹介します。

HDRIとは?
High Dynamic Range Image=ハイダイナミックレンジ画像の略で、高い輝度幅をもつ画像のことです。(Wikipediaより)
360度画像やキューブマップテクスチャ(6面の立方体に分割された画像)などで構成されていて、環境光やメタリック素材への写り込み、作品の背景(Skybox)として使用できます。

STYLY GALLERYからサンプル空間を体験できます。

 

HDRI Heavenより

HDRIフリー配布サイトHDRI Heaven(https://hdrihaven.com/)より

オリジナルHDRIを作ってみよう

ここで使用するオブジェクトはHDRIになる部分です。
そのためUnityやSTYLY Studioでオブジェクトを配置するような立体ではなく、VRシーン内での動作に干渉しない周辺の風景(360度画像)になります。

作るための準備

今回はこちらの4K素材を使用し、別で作成したオブジェクトを組み合わせようと思います。
このサイトのHDRIは著作権フリー&無料で入手できます。

まずShadingタブに切り替えます。

Shadingタブ

Shadingタブ

右側のWorld Properties(地球儀のアイコン)を選択したらColor→Envioment Textureをクリックします。

World Properties

黄色い丸をクリックし選択

すると一面ピンク色の背景になるので、ここで先ほどダウンロードしたHDRIを割り当てます。

HDRI適用時、Viewport Shadingをrender previewにしないと反映が確認できないので注意しましょう。

右上アイコンから切り替え

右上アイコンから切り替え

カメラの位置を原点に移動させます。
カメラを選択した状態で[N]キー→Transformを出したら、RotationのXを90、それ以外を全て0にします。

カメラの位置が赤い丸(原点)からずれている

カメラの位置が赤い丸(原点)からずれている


カメラが原点に移動した

カメラが原点に移動した

カメラの周りを囲むような形でオブジェクトや画像を配置します。

画像を置く

今回は例としてこちらの木の画像を使用しますが、各自で使用したい画像を準備してください。

 

2D画像は透過済みのを使用

2D画像は透過済みのを使用

レンダーエンジンをCyclesに切り替えます。

Cycles

Cycles

[Shift+A]キー→メッシュ→プレーンを選択し新規追加します。

プレーンを新規追加

プレーンを新規追加

プレーンを選択した状態でマテリアルを新規追加します。

マテリアル新規追加

マテリアル新規追加

ベースカラーからImage Textureノードを追加します。

黄色い丸をクリックし選択

黄色い丸をクリックし選択

Openをクリックすると別ウィンドウが出てくるので、その中から使いたい画像を選択します。
そしてOpen Imageをクリックします。

Open→画像選択→Open Image

Open→画像選択→Open Image

マテリアルプロパティのBlend Mode、Shadow ModeをAlphaに変更します。
Principled BSDFと画像それぞれノードのAlphaをつなぎます。

Blend Mode/Alpha

Blend Mode/Alpha

反映された画像を見ながらプレーンの幅や向きを調節します。

S→X、R→X→90、R→Z→90

S(縮小)→X、R(回転)→X→90、R→Z→90

この調子でさまざまな画像やオブジェクトを配置していきます。

常に中心を向くような角度で置きましょう。

距離やサイズ感が難しいですが、身長と同じくらいのシリンダーや、VRシーン内の行動範囲を想定したサークルを仮配置することで大幅な誤差を回避できると思います。

Shift+A→Cylinder

[Shift+A]キー→Cylinder


Shift+A→Circle追加し、その周辺に木を移動させた

[Shift+A]キー→Circle追加し、その周辺に木を移動させた

オブジェクトを置く

今回は画像のみ配置しますが、CGの立体オブジェクトを置きたい場合はImportから特定の拡張子を選択します。

上記メニューのFile→Import選択

上記メニューのFile→Import選択

HDRIを書き出す

木の画像を増やした

木の画像を増やした

完成したら、HDRIとして画像を書き出します。

目安として配置していたシリンダーとサークルを削除し、カメラを選択します。
右側にカメラプロパティが表示されるので、クリックしたらいくつかの設定を変更します。

カメラ選択→カメラアイコンクリック→レンズ設定変更

カメラ選択→カメラアイコンクリック→レンズ設定変更

解像度をアウトプットプロパティ(印刷アイコン)から変更します。

今回は使用したHDRIの解像度(4K)で設定しました。
ここの数値は大きければ大きいほど綺麗に見えますが、その分データ容量も大きくなってしまうのでお好みで設定してください。

2:1

2:1

そして左上のRenderからRender Imageをクリックして書き出します。

Render Image

Render Image


書き出された

書き出された

最後に画像を保存します。
左上のImageからSaveを選択し、拡張子をhdrに変更します。

Save

Save


Radiance HDR

Radiance HDR→Save as Image


保存された

保存された

オリジナルHDRIを使ってみよう

STYLYのシーンへ反映するには、Unityで割り当てたのちアップロードする必要があります。
Unityを開いたらアセットウィンドウに先ほど保存したHDRIをドラッグ&ドロップし読み込みます。

ドラッグ&ドロップ

ドラッグ&ドロップ

読み込まれた画像を選択し、インスペクターウィンドウから設定を変更します。

Texture ShapeをCube→Apply

Texture ShapeをCube→Apply

しばらく待つとアセット内の画像が球体になります。

HDRI

HDRI

アセットで右クリック→マテリアルを新規作成します。

Create→Material

Create→Material


上部タブからもマテリアルを新規作成できる

上部タブからもマテリアルを新規作成できる

マテリアルを選択し、インスペクターからシェーダーのSkybox→Cubemapを設定します。

Cubemap

Cubemap

Selectをクリックし、出てくる別ウィンドウから画像を選択します。

Cubemap→Celect

Cubemap→Select

設定が完了したら、マテリアルをシーンにドラッグ&ドロップします。

マテリアルをドラッグ&ドロップ

マテリアルをドラッグ&ドロップ

STYLYにアップロードする前に、HDRIがちゃんと反映されるようMain Cameraの名称を変更します。
この手順を忘れるとSTYLY上で使用する際、設定したHDRIがうまく反映されないことがあるので注意しましょう。

Main CameraからCameraに変更

UnityからSTYLYにアセットをアップロードする方法

今回は屋外のHDRIを作成しましたが、建物のオブジェクトの中にカメラを設置して書き出せば屋内に居るようなHDRIも作成できます。
立体のオブジェクトとHDRI、うまく使い分けてみてくださいね。

未経験から VR/AR コンテンツ制作を学ぼう

VR/ARコンテンツ制作に必要なUnity・PlayMakerを基礎から応用まで学べ、STYLYで配信されている魅力的なコンテンツの制作過程(制作技術も公開します)を学べる オンライン学習サイト NEWVIEW SCHOOL ONLINE 開講中!!

  • プログラミングコードをかかず、VR/ARコンテンツを制作可能
  • 公式監修によるUnity講座を用意
  • フォトグラメトリ制作方法、コンテンツ軽量化などの追加要素あり
  • VR/ARコンテンツを作るための考え方を学習できる

newbview popup