「1変数での微分と、接線の方程式の間の関係」と、「2変数での偏微分と、接平面の方程式の間の関係」を比べてみる

  • 「1変数での微分と、接線の方程式の間の関係」
  • 「2変数での偏微分と、接平面の方程式の間の関係」

この2つを比べてみると、いろいろわかりやすい気がします。

記事

f:id:onionmarktwo:20170922031404p:plain

参考

http://www.fbc.keio.ac.jp/~hkomiya/education/lecture/bisekibun-2-spring-2014-4.pdf http://tutorial.math.lamar.edu/Classes/CalcIII/TangentPlanes.aspx

補足

素人なので間違いがあるかもしれません。 間違っていたら教えていただければ幸いです。

検索エンジンのための文字列

- 1変数の微分
  - $$f(x)$$ の、$$x=a$$での接線の方程式は   

           $$y = \frac{d(f(x))}{dx} \mid _{x=a}  (x-a) + f(x) \mid _{x=a}$$  である。

  
  - $$f(x)$$ の、$$(a,b)$$における接線の傾きは $$\frac{d(f(x))}{dx} \mid _{x=a}$$ である。
  
- 2変数の微分
  
  - $$f(x,y)$$ の、$$x=a,y=b$$での接平面の方程式は
  
        $$z = \frac{\partial(f(x,y))}{\partial x} \mid _{x=a,y=b}  (x-a) + \frac{\partial(f(x,y))}{\partial y} \mid _{x=a,y=b}  (y-b) +f(x,y) \mid _{x=a,y=b}$$  である。


  - $$f(x,y)$$ の、$$(a,b)$$における接平面の、$$x$$方向の傾きは $$\frac{\partial(f(x,y))}{\partial x} \mid _{x=a}$$ である。
  
  - $$f(x,y)$$ の、$$(a,b)$$における接平面の、$$y$$方向の傾きは $$\frac{\partial(f(x,y))}{\partial y} \mid _{y=b}$$ である。

方向微分(翻訳記事)

この記事は何?

翻訳

はてなだとTexがかけないっぽいので、画像にしてます。 別タブで画像を開いていただくと文字が読みやすくなるかもしれません。


f:id:onionmarktwo:20170919224144p:plain


f:id:onionmarktwo:20170919224414p:plain


f:id:onionmarktwo:20170919222106p:plain


補足など

  • 数学素人が自分用にまとめました。間違っていたら教えてください。
  • Khan Academyの記事がとてもわかりやすかったので、感動のあまり翻訳してみました。

f:id:onionmarktwo:20170919222033p:plain

検索用の文字

方向微分の正しい定義

正しい定義を気にする理由がいくつかあります。一つは、新しいコンセプトの正式な定義を本当に理解することで、そのコンセプトは実際に何なのか明らかになることです。
しかし、より重要な、最大の利点は、コンセプトの定義を理解することは、そのコンセプトが使えるか使えないか判断する自信がつくことです。


ウォーミングアップとして、xに関する偏導関数の定義を確認してみましょう。



| 記号             | 平易な言葉で書いた理解(informal understanding)   | 改まった言葉で書いた理解(formal understanding)                                                     |
| -------------- | ------------------------------------- | -------------------------------------------------------------------------------------- |
| $$\partial x$$ | $$x$$ 方向の僅かな変化                        | $$\partial x$$とは、以下2つを行う変数 $$h$$のこと。 


- $$h$$ は 0 に限りなく近づく。
- $$h$$ は関数の1つめの入力に足される。 |
| $$\partial f$$ | $$\partial x$$ 動かした後の、 関数 $$f$$の出力の変化 | $$\partial f$$とは、 $$h$$ を限りなく0に近づけるときの$$f(x_0+h,y_0)$$ と$$f(x_0,y_0)$$ の差。             |


偏導関数の定義は、ベクトル表記法で書くこともできます。
まず入力を ベクトル $$(x_0, y_0)$$ とみます。


$$\bold x_0$$は ベクトルであることを強調するため、太字で書かれています。
入力全体を、(太字の)文字 $$\bold x$$で表すことは、少しわかりづらい書き方です。
なぜなら、文字 $$x$$ は、入力の1つめの成分を表すのに、太字でない形で既に使用済みだからです。
しかし、これはこの書き方は慣習となっているので、慣習に従いました。


僅かな入力の変化を、$$(x_0+h,y_0)$$ と表記する代わりに $$\textbf{x}_0 + h \hat{\textbf{i}}$$  と表記します。
なお、$$\hat i$$ は $$x$$ 軸方向の単位ベクトルです。



この表記法では、$$x$$ に関する偏導関数を $$\vec v$$ に関する方向微分へと一般化する方法を理解するのは、ずっと簡単になります。


$$\vec v$$ 方向へ僅かに変化させるという概念を数式にしたものが、$$h \vec v$$ を関数$$f$$の入力に足すことだといえます。

数学で出てくる縦棒の意味

f:id:onionmarktwo:20170909223300p:plain

補足など

  • 数学素人が自分用にまとめました。間違っていたら教えてください。
  • はてなだとTexがかけないっぽいので、画像にしてます。
  • Vertical bar - Wikipedia が一番まとまっててわかりやすい気がします。
  • 偏微分の変化させない変数の用法は、「ヴィジュアルガイド物理数学(前野先生)」の p45 を根拠にしました。

画像をテキストで

画像だと、ググるときに引っかからないと思うので テキスト形式(markdownの表、Texで数式)も載せます。 Texが入っているせいか、上手く表になってくれないので で囲っています。

| 用法              | 例                                                        | 例の意味                                                                                                                                                                 |
| --------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 評価(代入)          | $$x+3|_{x=2} = 5$$

$$\left.\frac{df}{dx}\right|_{x=1}$$ | $$x$$の関数 $$x+3$$を、$$x=2$$  で評価した値が$$5$$である。

関数$$f$$を$$x$$で微分した後、$$x$$に1を代入する。                                                                                       |
|                 |                                                          |                                                                                                                                                                      |
| 偏微分の変化させない変数の指定 | $$\frac { \partial f(x,y) } {\partial x}\mid_y$$         | xを変数、yを定数とみたときの偏微分。
同じ意味の記法は、以下の2つがある。


- 括弧でくくる記法   $$\left( \frac {\partial f(x,y) } {\partial x} \right)_y$$ 
- 省略記法  $$\frac { \partial f(x,y) } {\partial x}$$ |
| 集合定義の区切り        | $$\{x \mid x < 2\}$$                                     | 集合の要素 $$x$$ は、  2 より小さい数。 

同じ意味の記法として、以下がある。
$$\{x : x < 2\}$$                                                                                                      |
| 割り切れる           | $$2 \mid 12$$                                            | 2は12を割り切れる。                                                                                                                                                          |
| 関数の定義域の制限       | $$f\mid_A : A \rightarrow F$$                            | $$f\mid_A$$ は、関数$$f$$と定義域以外は同じ関数で、定義域が「『関数$$f$$の定義域』かつ$$A$$ 」となる関数。                                                                                                  |
| 条件付き確率          | $$P(A\mid B)$$                                           | 条件 B の下での A の確率                                                                                                                                                      |

Unity5.6で主婦写真講座をやってみる

イメージエフェクトなどの使い方を知るために、GOROmanさんの主婦写真講座をやってみた記録です。

こんな感じになりました。 f:id:onionmarktwo:20170519181432p:plain

f:id:onionmarktwo:20170519181511p:plain

要点まとめ

  • Unity5.6なので、Effects Post-processing Stackを使う。
    • standard assetのImage Effectや Cinematic Imageは使わない。
  • ColorSpaceをLinearにする。
  • standard shaderを使う。
    • 透明なものは、RenderingModeをTransparentにする。

作業内容

実際の作業は以下のとおり。

ColorSpaceをLinearにする。

なぜやるのか

Unityには、ColorSpaceという設定項目があり、「Gamma」「Linear」の2つが設定できる。 このうち、「Linear」のほうが、綺麗な絵になるらしい。

リニアワークフローでは、レンズフレアやグローのような「光モノ」の合成がよりリアルにしやすいというメリットがあります。 http://compojigoku.blog.fc2.com/blog-entry-26.html

なお、Unity5.6.0f3時点では、ColorSpaceのデフォルトは「Gamma」。

手順

Edit > PlayerSettings > ColorSpace を Linearにする。

Settings

Settings

環境光の設定(DirectinalLight削除 + IBL設定)

なぜやるのか

イメージ ベースド ライティングはフォト リアリスティックなイメージを作成するためのテクニックです。イメージ ベースド ライティングでは、環境(Environment)テクスチャ(イメージ ファイル)を使用して、シーンを照らすことができます。 https://knowledge.autodesk.com/ja/support/maya/learn-explore/caas/CloudHelp/cloudhelp/2016/JPN/Maya/files/GUID-A7758B82-59A7-47CE-A6F5-8754282531C1-htm.html

IBLを実現するには HDRI (High Dynamic Rengi Image) と呼ばれる特殊なイメージフォーマットの画像が必要になります。

通常、コンピューター上のイメージは、RGB (Red / Green / Blue ) の 3チャンネル 256階調 のグレースケール画像で表現されていますが、256階調では光源(ライト)に必要な輝度をカバーする事が出来ません。 そこで256階調を超えるダイナミックレンジを持つ特殊な画像が必要となります。 http://3dcg.homeip.net/3d_reading/light_camera_render/global_light/01_e.php#ibl

手順

  1. 最初からシーンにある、Directional Lightを消す。
  2. IBL用のSkyboxとして使えるアセット https://www.assetstore.unity3d.com/jp/#!/content/34761 を購入してインポート。
  3. Window > Lighting > Settings > SkyboxMaterial を 2k_Modern_Loft にする。

なおこのアセット、2017年5月現在では有料になっている。無料でやりたいなら、http://www.hdrlabs.com/sibl/archive.html の画像を使わせていただくとよいらしい。

Settings

Settings

Tda初音ミクのインポート

なぜやるのか

  • 大変美しいモデル(Tda初音ミク)を使用させていただくことで、作業が楽しくなる。
  • 主婦写真講座の作例と比較ができ、うまい人のやり方を学べる。

手順

立ちポーズのアニメーション設定

なぜやるのか

  • T字ポーズではなく、自然な立っているポーズにしたいため。
  • イメージエフェクトとは関係ないので、T字ポーズのままで良いならスキップ。

手順

  • 生成されたPrefab Tda式初音ミク・アペンド_Ver1.10 を選択。Rig > AnimationTypeを Humanoidに変更する。
    • デフォルト(Generic)では MecanimのHumanoidAnimationをうまく利用できないため、Humanoidにしている。
  • UnityChan Official Webサイトから「ユニティちゃん 3Dモデルデータ」をダウンロードしてAnimationsフォルダをインポート。
  • Project Window で右クリック > Create > Animator Controllerで、Animator Controller を新規作成。
  • Animator Windowで右クリック > Create State で、Stateを新規作成、Motionに WAIT00 を指定する。

Settings

Settings

Settings

Settings

Settings

MainCameraのRenderingPathを変更

なぜやるのか

RenderingPathをDefferedにすると、デフォルトのForwardと比べて、よりリアルな光と影にできるため。

Deferred Shading is the rendering path with the most lighting and shadow fidelity https://docs.unity3d.com/Manual/RenderingPaths.html

手順

  • RenderingPathをDeferredにする。
  • MSAAをオフにする。(Deferredのときには使用できないため。) Settings

RenderingPathは、グローバルな設定を Edit > Project Settings > Graphics > TierSettings > Rendering Path から変更し、カメラではuse graphic settings のままにするのでも良いようだ。

構図の調整

Transform, Field Of Viewを調整して、好きな構図にする。 ClippingPlanesのNearを0.01(最低値)にすると、モデルの中身が見える事故が少なくなる。

Settings

マテリアルの調整

なぜやるのか

  • Unity5のStandard Shaderは、物理ベースレンダリングに対応している。
  • 物理ベースレンダリングを使用すると、「異なるライティングの条件でも一貫性のあるもっともらしい見た目を実現できる」(ref)らしい。

手順

  • 17個のマテリアルすべて、シェーダーをstandard shaderにする。
  • 以下のマテリアルを調整する。
    • RenderingMode
      • 不透明なものはopaque、透明なものはTransparentにする。
    • Metalic
    • smoothness
    • Emission
      • 自己発光しているものに指定する。
      • カラーピッカーの右にある、数字入力箇所で数字を増やすと、発光が強くなる。 Settings

私の場合、設定は以下のようになった。

name AlbedColor RenderingMode Metallic smoothness Emission EmissionColor
0.face00 RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0
1.face01 RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0
2.eye_hi RGBA(0.690, 0.882, 0.745, 1.000) Transparent 1 1
3.eye_hi2 RGBA(0.400, 0.800, 0.700, 1.000) Transparent 0 1 TRUE RGBA(0.651, 0.651, 0.651, 1.000)
4.skin RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0
5.body00 RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 1
6.body01 RGBA(1.000, 1.000, 1.000, 1.000) opaque 1 1
7.body_pink RGBA(0.700, 0.180, 0.430, 1.000) opaque 1 1 TRUE RGBA(1.200, 0.308, 0.737, 1.000)
8.body_green RGBA(0.400, 0.900, 0.600, 1.000) opaque 0 0.5 TRUE RGBA(0.532, 1.200, 0.798, 1.000)
9.body_green2 RGBA(0.400, 0.900, 0.600, 1.000) Transparent 0 0
10.body02 RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 1
11.hair00 RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0
12.hair01 RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0
13.hairshadow RGBA(1.000, 1.000, 1.000, 1.000) Transparent 0 0.5
14.cheek RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0.5
15.lens RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0.5
16.wing RGBA(0.400, 0.900, 0.600, 1.000) Transparent 0 1

ハイライトについて

「Emissionは本当に光ってる物体に対してのみ使用する(明るさの調整に使わない)」 http://unityshader.hatenablog.com/entry/2017/02/25/130016

というのがルールらしい。 目のハイライトは自己発光していないので、Emissionを指定しないのが正しいのかもしれない。 が、Emissionなしでハイライトっぽくする方法がわからなかった。

https://www.slideshare.net/Unite2017Tokyo/unite-2017-tokyovr-magic4 ※p34 上記によれば、「ハイライト成分だけ加算半透明」「ハイライト成分だけHDR環境マップ」「リフレクションプローブ」といった手法でできるらしい。

お願い

このあたりのハイライトの設定、ご存知の方がいらっしゃったらよろしければ教えてください。

Post Processing Stackの導入

カメラに取り付けて、画面を綺麗にしたり映像効果を付けるモノを「イメージエフェクト」というらしい。 Post Processing Stackは、この「イメージエフェクト」を使うための提供は、Unity Technologies製アセット。

なぜPost Processing Stackか

Unity Technologies提供の「イメージエフェクト」を実現するアセットとして、より古い以下2つがある。

これらは、カメラにアタッチする順番を間違えると正しく動かないなどの欠点がある。

手順

  1. Post Processing Stack をインポート。
  2. Project Window上で右クリック > Create > Post-Processing Profile 。
  3. Main Cameraに PostProcessingBehaviour スクリプトをアタッチ。
  4. 2で作成したProfileをインスペクタにドラッグドロップする。
  5. インスペクタで下記にチェックを入れる

チェックを入れるもの

  • Anti aliasing(ギザギザをとる。)
  • Ambient Occlusion(くぼみなどを暗くする。)
  • Screen Space Reflection(反射を作成する。)
  • Bloom(光が漏れるような効果)
  • Color Grading ( カラーコレクション。画面全体の色合いを変えること。 )
  • Vignette(画面の辺・四隅を暗くしてレンズっぽくする。)

Settings

Settings

デフォルトから変えるとよさそうなのは、以下のとおり。

  • Tonemapperをneutral → Filmic に変更(なぜかは覚えていない)
  • Contrastをデフォルトより若干強めた(1 → 1.13)。対比がきれいになる気がする。
  • Temperatureを-12.4、Channel MixerでGreen, Blueを強くした。

Settings

Settings

Settings

Settings

おわりに

本文中にリンクしました、GOROmanさんの主婦写真講座を はじめとするインターネット上のたくさんの解説から、 イメージエフェクトやマテリアルなどの使い方を勉強させていただきました。

また、Tdaさんの素晴らしいモデル、 NoraさんのMMD4Mechanimを 使わせていただいたおかげで、大変楽しく作業できました。 誠にありがとうございました。

この記事について、ご指摘や改善点などありましたら、ぜひコメント等でお知らせいただければと思います。