iOS で SceneKit を試す(Swift 3) その39 - Scene Editor カメラの HDR 設定 Part1

今回は HDR の説明と設定の準備。

HDR (High Dynamic Range) とは

ざっくり説明すると、表示される画面は色の情報しか持たないが、 ピクセルごとに色とは別に光の情報を持つもの。 現実の色のより広いレンジを持ち、画像処理の際に多彩な表現を行うことができる。

端末のディスプレイ上では HDR ではなく LDR (Low Dynamic Range)のものが多く、光の情報を持たないため、トーンマッピングという手法を使い画像処理を行う。

代表的な使用例だと画面の露出表現などができる。

HDR の使用方法

SceneKit のカメラの Attributes Inspector の HDR にチェックを入れるか、コードで SCNCamera のプロパティ wantsHDR を true にする。

HDR の表示を簡単に確認する

ちょっとずつ数値を変更しつつビルドするのが面倒なので、 Mac アプリで試してみる。

Mac のアプリの場合、デバッグの showsStatistics の歯車アイコンからたどってを変更できるため。

プロジェクトの準備

まず、Xcode から Project を作成して、macOS の Game テンプレートを選ぶ。

HDR を使用するため、テンプレートの宇宙船のマテリアルを Physically Based に変更する。

Command ＋ R でビルドしてアプリを起動する。

背景設定

今回は背景を照明にするため、画像と IBL (Image Based Lighting) 用の画像を使用する。

使う画像は適当なものを用意してもらえば良いのだが、探すのが面倒な場合はApple のサンプルを使用しても良いかと。

下記の URL、Fox2 をダウンロード。

developer.apple.com

Assets > Art.scnassets > textures の sky_cube.png を背景画像、sky_cube.exr を IBL 画像として使ってみる。

ビルドしたアプリの左下にある歯車をクリック。

ウインドウが表示されるので、
sky_cube.png を Background に ドラッグ&ドロップして、

sky_cube.exr を IBL にドラッグ&ドロップする。

宇宙船の底の部分が sky_cube.exr の影響で黄色い光が照らされている。

ということで準備完了。

ちなみに、Scene Editor やコードでの設定方法は過去記事の Background / Light Environment で。

appleengine.hatenablog.com

今回はここまで。

Part2 に続く。

iOS で SceneKit を試す(Swift 3) その38 - Scene Editor カメラの基本設定

今回はカメラの基本設定のプロパティについてのご紹介。

カメラを選択して Attributes Inspector（Command + Option + 4）を選択。

パラメーターは以下のもの。

ちなみに、iOS 11 では、Projection のパラメーターが変更されたり、 Unity でなどである機能の SSAO (Screen Space Ambient Occlusion) が使用できるようになっている。

Identity

Name

カメラを識別するための名前。
コードでこのカメラを調べるために使う。

Identifier

Scene Editor での設定不可。

Projection

Projection Type

設定値	説明
Perspective	デフォルト値。遠近感のある透視投影のカメラでシーンを表示する
Orthographic	遠近感のない平行投影のカメラでシーンを表示する

X fov、Y fov (Feild Of View)

SCNCamera - SceneKit | Apple Developer Documentation より

画面を表示する視体積の角度。
上の画像を参照。

デフォルト値は互いに 0。 片方が 0 以外の場合はもう片方を自動的に調整され、
両方設定した場合はアスペクト比に最も適した値を使用し視野を自動的に調整される。

このプロパティは廃止予定で iOS 11 では Feild Of View と X fov、Y fov が1つになり、Focal Length (焦点距離)を設定して表示方法を決める。

Z Cliping

Near、Far

画面の奥、手前をどこまで表示するかを決める。
上の画像を参照。

デフォルト値は Near が 0、
Far は 100。

例えば、遠くに表示するものがない場合、Far の値を調整して表示させないことで端末の処理が軽くなる。

Category bitmask

設定されているノードのビットマスクを AND 演算して表示するか決める。
カメラのデフォルト値は 0 で全てを表示する。

注意： ビットマスクを設定しても、SCNView の allowsCameraControl を使用した場合、カメラを動作させるとビットマスク 0 に変更されるため表示される。

コード

let camera = SCNCamera()
camera.name = "camera"
camera.xFov = 0.0
camera.yFov = 0.0
camera.usesOrthographicProjection = false
camera.zNear = 1.0
camera.zFar = 100.0
camera.categoryBitMask = 0

Scene Editor にはパラメーターがないが、 usesOrthographicProjection を true にして、 Orthographic 表示にした場合、orthographicScale で表示倍率を変更できる。 デフォルトは 1.0。

camera.usesOrthographicProjection = false
camera.orthographicScale = 1.0

今回はここまで。

次回は カメラ の HDR について

iOS で SceneKit を試す(Swift 3) その37 - Scene Editor の Material、Shininess と Fresnel

Blinn と Phong のライティングモデルでは Shininess と Fresnel を設定することができる。

Shininess

光沢の度合い。値を大きくすると光沢が小さくなる。

Shininess のデフォルト値 1

　

Shininess の値 4

Fresnel

シャボン玉のように輪郭部分だけ光の反射が異なる表現。

Fresnel のデフォルト値 1

Fresnel の値 1

今回はここまで。

iOS で SceneKit を試す(Swift 3) その36 - Scene Editor の Material のテクスチャ設定

Scene Editor の Material は SCNMaterial となっており、 diffuse、specular などの各ビジュアルプロパティに設定するためのコンテナ SCNMaterialProperty が用意されている。

SCNMaterialProperty 自体が持つプロパティは 度々コードの方で使用している Any 型の contents と CGFloat の intensity のみ。

contents は UIColor、テクスチャ画像と SpriteKit を画像として扱うことができ、 contents が画像である場合はいくつかの設定を行うことができる。

Scene Editor の Material Inspector のテクスチャ設定

diffuse に画像を設定してみたところ。 intensity を除いたものがテクスチャの設定値となる。

今回のテクスチャ

設定値

Scale

1 で UV に対して画像がフィットする。
以下の画像では、Scale の X、Y を 2 にして半分にしている。

0.5 にすると 1 / 4 しか表示されない。

WrapS、WrapT

ポリゴンに対して上記の Scale などで画像を小さくした際に余白をどう埋めていくか設定する。
WrapS が横方向。 WrapT が縦方向。

以下の 4 つだが、Clamp To Border は使用するためのパラメーターが廃止されるため説明を割愛。

• Clamp
• Repeat
• Clamp To Border
• Mirror

Clamp

デフォルト値。
画像の周りの色が伸びて余白を埋める。

Repeat

画像がリピートされる。
下の画像はScale の X､ Y を共に 2 にしたもの。

WrapS を Repeat に設定

WrapS、WrapT を Repeat に設定

Mirror

画像が反転されてリピートされ、
偶数回数のリピート分が反転される。

Scale の X､ Y を共に 2 にしたもの

Scale の X､ Y を共に 3 にしたもの

Offset

左上を基準に画像の位置を変更することができる。
プラス値の X は 左、Y は 上。
マイナス値の X は 右、Y は 下。

画像は Scale を 2 にして、Offset -0.5 に設定している。

Rotation

左上を基準に画像の回転を行うことができる。
画像は 10 度傾けたもの。

UV Channel

適応したい UV Channel に変更する。

フイルター

テクスチャ表示の際に Minification Filter(Min filter)、Magnification Filter(Mag filter)、Mipmap Filter(Mip filter)で、どのようにフィルターを設定するか決める

設定値	機能
None	設定しない
Nearest	サンプリングされる座標に最も近い1つのテクセルを選ぶ
Linear	サンプリングされる座標の近傍からサンプルのテクセルを選び線形補間する

フィルター設定

フィルター	デフォルト値	説明
Min filter	Linear	元のテクスチャ画像よりも小さく表示された場合、テクスチャの見た目を決める
Mag filter	Linear	元のテクスチャ画像よりも大きく表示された場合、テクスチャの見た目を決める
Mip filter	Nearest	None ではない場合、解像度の異なる画像を作成し、遠くにあるものは低解像度のテクスチャを適応し、近くのものには高解像度し、中間のものは補完して表示するため、パフォーマンスを考慮しつつ状況に適した画像を適応できる。

コードでの注意

Scene Editor での名称とだいたい同じなのだが Scale, Offset, Rotation に関しては SCNMatrix4 型の contentsTransform を使用している。

Scale, Offset, Rotation のパラメータがあるわけではないので注意。

今回はここまで。

iOS で SceneKit を試す(Swift 3) その35 - Scene Editor の Material, Physically Based プロパティ

今回は Physically Based プロパティのご紹介。

Physically Based とは？

現実世界のライトの光などを近似させた物理ベースのシェーダーで 2010 年ぐらいから PC ゲームなどで使われ始め、モバイル GPU の進化によりスマートフォンのゲームでも使用される。

プロパティ

Blinn や Phong のライティングモデルのシェーダーとはプロパティが異なる。

Specular、Reflective、Transparent、Ambient のプロパティはなく、
Metalness と Roughness がある。

また、Settings の Shininess や Fresnel はなく、
Scene Editor 上では「Lock ambient with diffuse」のチェックボックスはあるが
Ambient のプロパティがないため動作はしない。

Metalness と Roughness

右に行くほど Metalness の intensity が上がり、
下に行くほど Roughness の intensity が上がっている

Metalness

金属や非金属を表面設定を行う。
色またはグレイスケールの画像と intensity で適応具合を調整する。

Roughness

オブジェクトの表面の細かな荒さを設定し、
つや消しのような広がった光沢や金属のよう鋭い光沢の設定を行う、
色またはグレイスケールの画像と intensity で適応具合を調整する。

Roughness の色の設定

上の画像の Roughness はパラメーターで変化を示したが、
色やグレイスケールの画像での表示でも表示方法が変わる。

以下、色で Roughness の値を設定している。

また、Physically Based ではシーンで設定された Lighting Environment がライトとして適応されるため、
金属に近く、強めの光沢があるとジオメトリの輪郭部分にフレネル反射が出る（画像の左のほう）

Roughness にテクスチャを適応してみる

Metalness を 1にして、
Photoshop のフィルターの雲模様を使い Roughness にテクスチャを適応。

雲のような白い部分で光が広がっている。

今回はここまで。

iOS で SceneKit を試す(Swift 3) その34 - Scene Editor の Material プロパティ

前回紹介を省略したマテリアルのプロバティについてご紹介。

Physically Based の Metalness、Roughness やテクスチャマッピングに関しては他の記事で紹介する。

以下の説明では Physically Based 以外のものを列挙しているが、 ライティングモデルの Constant は Specular と Normal、Lambert では Specular の設定が存在しない。

Normal と Emission 以外の効果のかかり具合である intensity は 0 から 1。
0.1 刻みで変化が行なっている。

Diffuse (Ambient)

表面色の設定。

色を設定していても 0 が 黒になる。
完全に反射するマテリアル以外は 0 の値をとる完全な黒にしない方が良い。他の設定が反映されない可能性があるため。

また、マテリアルのデフォルト設定は Ambient のプロパティは有効にならない。
有効にした場合は Diffuse に Ambient が加算される。

Specular

光沢色の設定。
今回は白にしているが他の色も設定できる。

Normal

Normal Map 使用時の設定。
テクスチャ画像のみ使用可能。
画像の値から法線情報を変更し凹凸のあるような表面をつくる。

頂点や面を変更するわけではないので輪郭は元のジオメトリのまま。

iOS 11 の Height Map の場合、頂点が移動される。

Reflective

テクスチャ画像を使用して擬似的な鏡面反射を設定する。
現状はテクスチャ画像のみ使用可能。

今後紹介する Cube Map が使用できる。

Transparent

半透明時の設定。
ノードやジオメトリの半透明とは別にテクスチャ画像のグレイスケールから半透明にすることができる。

色で切り抜くため、Transpatency の Mode を RGB Zero にする必要がある。

Occlusion

Ambient Occlusion（画像）使用の際の設定。
主に 3DCG のソフトで Ambient Occlusion のテクスチャをベイクした使用する。

画像のように、光が当たらない部分に画像の暗部が適応される。

Illumimation

自発光しているように見せるための設定。
テクスチャ画像の白い部分を元にマテリアルの彩度が上がる。

サンプルではわかりやすく Diffuse のテクスチャを暗めに設定しており、適応する値を大きくすると中央部分の文字が明るくなっている。

Diffuse と Illumimation テクスチャ

Emission

自発光の値の設定。
ライトの陰に影響せず彩度が上がる。

このプロパティは Global Illumination で Light Probe 使用時に マテリアルをライトにすることがで、
下の画像では床がライトになっているため、球体の下の部分がライトの影響を受け赤くなっている。

また、カメラの HDR 使用時に Bloom の影響を受け、Emission の周囲にグローの効果を出すことができる。
詳しくはカメラの紹介で説明する。

Multiply

全ての設定適応後にこちらの値が乗算される設定。
白に近いものは他のマテリアル設定を写す。

Diffuse で テクスチャが設定されており、Multiply で白と赤のチェックの画像を設定している。

コード

色

let geometry = SCNSphere(radius: 2)
geometry.firstMaterial?.diffuse.contents = UIColor.red
geometry.firstMaterial?.diffuse.intensity = 1.0

let material = SCNMaterial()
material.diffuse.contents = UIColor.red

let geometry = SCNSphere(radius: 2)
geometry.materials = [material]

テクスチャ

let geometry = SCNSphere(radius: 2)
geometry.firstMaterial?.diffuse.contents = UIImage(named:"texture.png")
geometry.firstMaterial?.diffuse.intensity = 1.0

let material = SCNMaterial()
material.diffuse.contents = UIImage(named:"texture.png")

let geometry = SCNSphere(radius: 2)
geometry.materials = [material]

今回はここまで。

iOS で SceneKit を試す(Swift 3) その34 - Scene Editor の Material Inspector

ジオメトリ選択後に Material Inspector を選択すると（Command + Option + 5）、以下のような表示になる。

長くなるので Lighting Model に影響のある設定（上の画像でいうPropaerties）に関しては別の記事で紹介する。

Materials

現在使用しているマテリアルが列挙される。

列挙されるものはノード内にある1つもしくは複数のジオメトリに対してマテリアルが複数設定されているもの。

Scene Editor からのジオメトリ作成はビルトインのものしか使用できず、ビルトインものは1つのマテリアルで構成されている。

そのため、「+」押しても設定はできない。

Identity

Name

識別用の名前。コードで利用する際に使用する。

Settings

Transparency

透明度の設定。

Mode

設定値	説明
A One	アルファチャンネルから透明度を返す。1 で不透明になる。デフォルト設定値
RGB Zero	色の輝度から透明度を返す。0 で不透明になる。

Value

透明度の値を設定する。 0 〜 1 の間で値を設定し、0 は観世に透明になる。 デフォルトは 1。

Lit per pixel

デフォルトではチェックが入っており、
このジオメトリのレンダリング時にピクセル毎でライティングの計算を実行する。

チェックを外すと頂点からライティングの計算を行い補完した値でジオメトリのマテリアルを表示する。
見た目にほとんど影響を与えずにレンダリングのパフォーマンスを向上させることができる。

Visibility

ジオメトリの面が向き。
設定を変更すると法線情報を反転させて逆側を表示することができる。

デフォルトでは Cull front が設定されている。
Cull back にすると反転され裏面が表示される。

Blend Mode

画面上でのジオメトリの描画モード。

設定値	説明
Alpha	デフォルト設定。ジオメトリのアルファ値でブレンドする
Add	背景色からジオメトリの色を加算してブレンドする
Subtract	背景色からジオメトリの色を減算してブレンドする
Multiply	ジオメトリの色と背景色を掛け合わせてブレンドする
Screen	ジオメトリの色の逆数に背景色の逆数を掛けてブレンドする
Replace	背景色をジオメトリの色に置き換え、アルファを無視してブレンドする（Alpha と同じだが透明にならない）

Enhancements to SceneKit - WWDC 2015 - Videos - Apple Developer

Double sided

ジオメトリの表面を裏表描画するかのチェックボックス。
デフォルトでは false だが、一部のビルトインジオメトリでは true になっている。

Options

現行のデフォルトでは全てチェックされている。
(OS X v10.9 以前のものは Lock ambient with diffuse のチェックせれていない)

また、ノードやマテリアルが半透明だとデプスバッファの計算がかかるためか、Write depth、Reads depth の設定は無視される。

Write depth

チェックを外すと、半透明オブジェクトをレンダリングするように深度情報の書き込みを無効にする。 （あまりうまく動作しない）

Reads depth

チェックを外すと、レンダリング時に深度情報の読み込みを無効にして最前面に表示する。
ゲームのなどの UI や HUD などを表現するためものもだと思われる。

Lock ambient with diffuse

チェック時や Physically Based の場合には、環境光(Ambient)と表面(Diffuse)が両方に同じように応答する。

そのため、チェック時は Ambient にテクスチャが適応されない。

Sharing

マテリアルの共有設定。
ジオメトリの共有設定と同様に、ジオメトリコピー後「Unshare」を押すと他のジオメトリとマテリアルが共有されなくなり個別で設定できる。

今回はここまで