異方性反射(Anisotropicノード)

最終更新:2016/09/06

異方性(アニソトロピー、Anisotropy)というのは、物質の物理的性質が何かの方向により変わる特質のこと。宝石をはじめとする鉱物に光が入射する角度によって色が変わって見えたり、偏光性のある結晶のように角度によって光の透過率や屈折率が変わることなんかをひとまとめにして異方性という。異方性反射もそのひとつ。金属の表面に何らかの加工が施されていると、ピカピカに磨いたものとは異なる光の反射の仕方を見せることがある。

身近なところでは、CDやDVDの裏面なんかがそれにあたる。音楽や映像のデータを刻むために薄いアルミニウムの板に目に見えないほどの細かい同心円状の加工がしてあることで、光の当たり方によって虹色に光って見える。新旧を問わず、光ディスクは同様の特徴を持っている。

また、アルミニウムやステンレスなどの金属製品の表面を一定方向にわざと荒らして独特の風合いを出すヘアライン加工(ヘアライン仕上げ)が有名。同心円状にヘアライン加工をすると円の中心で交わる扇状の異方性反射を生じ、放射状に加工を施すと同心円状の異方性反射を生じる。加工と反射がちょうど直交するのが特徴。特に、ヘアライン加工による異方性反射というと同心円状の加工をイメージする人も多いはず。

一応、どんな3DCGソフトウェアでも、オブジェクトの表面に加工がされているように凹凸をつけてやれば異方性反射と似たようなことはできる。ただ、ヘアライン加工くらいの微細なレベルになるとポリゴンの数が膨大になるうえ、手間もレンダリング時間もかかるので、おのずと限界がある。そこで、LightWaveでは異方性反射を模擬するAnisotropicノードというものが備えられているのでそれを利用する。この記事を書いている時点で利用しているLightWaveのバージョンは10.1。

サーフェースの設定関連ではノードの編集はあまり得意ではないんだけど、勉強もかねて同心円状のヘアライン加工を施した金属表現に挑戦してみた。次の画像がレンダリングしたもの。

Anisotropy007

色々試行錯誤してみた結果、ノードの構成は次の画像のような感じになった。

Anisotropy000

この画像だけだと設定がわからないと思うので、順に説明していく。まず、Anisotropic (1) ノード。

「Anisotropy U」と「Anisotropy V」がもっとも大事なところで、VをUよりも十分小さい値にすると、放射状の異方性反射になる。つまり、ヘアライン加工は同心円状ということ。逆に、VがUよりも大きいと同心円状の異方性反射になる。次に大事なのは「Specularity」だけど、ここでは「100%」にしている。「Mapping」を「Cylindrical(円柱状)」にしておかないと同心円状のヘアライン加工にならないので注意。

Anisotropy001

次にAnisotropic (2) ノード。Anisotropic (1) よりも「Specularity」を若干控えめの「70%」にして、Vの値を少し大きめにする。Anisotropic (1) ノードとAnisotropic (2) ノードの「Color」出力をMathグループにあるScalarのAddノードで足してやってSurfaceの「Specular Shading」に接続する。

Anisotropy002

Anisotropic (1) ノードとAnisotropic (2) ノードのColorは白(RGB = (255,255,255))になっているけど、実はなんでもいい。「Specular Shading」に接続した時点で色の情報は無視される。光源の色を変えても異方性反射の色が変わることはない。どうしても異方性反射に色を着けたければ、Surfaceの「Color」に直接接続することになるんだけど、実物感はかなり薄れる。

次に、異方性反射と同じ理屈で鏡面反射を模擬するAni-Reflectionsノードを設定する。ここでも重要なのは「Anisotropy U」と「Anisotropy V」で、U > V にすることで放射状の鏡面反射を生じさせることができる。また、通常の鏡面反射の設定と同様に「Dispersion」を設定することで反射をぼかすこともできるし、球状反射マップを指定することもできる。ノードの設定が優先されるので、サーフェースの環境タブで鏡面反射マップを指定していても無視される。

Anisotropy005

Ani-Reflectionsノードの「Color」出力をSurfaceの「Reflection Shading」に接続する。これだけでも異方性反射らしい感じにはなるのだけれど、肝心のヘアライン加工が見えない。

そこで、LightWave付属のコンテント・ディスクに入っている画像を利用する。画像は Content\Images\Surface\Anisotropic フォルダにある brushed_03.bmp を指定する。なお、この画像はLightWaveを購入した人にのみ使用権が与えられる契約になっているものなので、フリー素材ではなく、ここでは配布できない。

Image (1) ノードは次の画像のような設定になっている。「Mapping」に「Spherical(球状)」を指定しておかないと円柱の上面に同心円状のヘアラインが出ないので注意。

Anisotropy003

Image (1) ノードの「Color」出力をAnisotropic (1) ノードとAnisotropic (2) ノードの「Color」入力に接続することで、異方性反射にヘアライン加工のような同心円状の筋が入るようになる。しかし、異方性反射以外の部分にはヘアラインが見えないのでさらにひと工夫。

Adobe Photoshopで先ほどの brushed_03.bmp を加工してノーマルマップ用の法線マップを用意する。ノーマルマップはメニューバーから「フィルター」-「3D」-「法線マップ」を選択すると設定ウィンドウが表示されて生成できる。あまり大きな凹凸をつけるつもりはないので、「ディテールスケール」を「10%」、「ぼかし」を「0」に設定して生成する。「コントラストのディテール」は特に変更しなかったが、「弱」「中」「強」ともに「20%」。

Anisotropy008

法線マップの機能はPhotoshop CC 2015で追加されたものだそうなので、古いバージョンには実装されていない。法線マップを自力で描くのはほぼ不可能と言ってもいいくらいなので、Photoshopを持っていない場合などは、ネットで画像をアップロードするとノーマルマップを生成してくれるウェブサイトがあるので、そちらを利用してもいいかもしれない。

保存した法線マップをNormalMapノードに読み込む。「Mapping」や軸などは Image (1) ノードと同様の設定にしておく。「Amplitude」はごく小さく、「5%」にしておく。今回は微細な加工を意図しているため、あまり大きくしてしまうと表面にモアレのようなノイズを生じやすくなる。バンプ・マッピングでも似たようなことはできるけど、ノイズを生じやすく、ヘアライン加工のような場面ではあまり使い勝手が良くなかった。

Anisotropy006

NormalMap (1) ノードの「Normal」出力をサーフェースの「Normal」入力に接続する。これで微細な凹凸が表面に追加され、異方性反射にも若干の分散のようなものが生じてそれらしくなる。

ただ、光が当たっていない部分のヘアラインがまったく見えないので、Diffuse Shadingを使用する。Diffuse(拡散レベル)用のテクスチャを同じく brushed_03.bmp からPhotoshopで加工する。レベル補正をかけて、明るいところはそのまま、暗いところを更に暗くするように設定。(他のMathノードなどを使って補正することができるのかもしれないけど、思いつかなかったのでPhotoshopで無精した)

Anisotropy009

保存したDiffuse用のテクスチャをImage (2) ノードに読み込む。これでも明るすぎたようなので、「Luma」出力をMathグループのDivideノードで10分の1に輝度を縮小させてSurfaceの「Diffuse Shading」に接続する。ちなみに、LumaはLuminanceの略語というか、コンピュータ用語における造語だそうで、輝度を表す。「Luma」出力の代わりに「Color」出力を使っても結果は同じ。

Anisotropy004

Diffuse Shadingを使用することによって、同じ表面の中でも明るいところと暗いところができ、同心円状のヘアライン加工らしい筋が見えるようになる。

ただ、これにはひとつ問題がある。勉強不足で理屈はよくわからないんだけど、Diffuse Shadingを使用するとサーフェースの色の情報がまったく受け付けられなくなる。Make ColorノードやColor Toolノードを追加してSurfaceの「Color」に接続しても同様。

塗装もしていない金属の地金ように色のないオブジェクトの場合はこれでもいいんだけど、塗装された表面を表現しようとするとヘアラインを諦めるか、クリアコーティングのように半透明のサーフェースで覆うといった別の工夫が必要になる。鏡面反射を設定している場合、背景色を変更すればその色を映し出させることはできるけど、他のオブジェクトにも影響を与えてしまうので根本的な解決にはならない。光源の色に影響を受けないのはSpecular ShadingやReflection Shadingと同様で、Shading系の機能を使用すればするほど実物感は増すものの、サーフェースの表現には制約を受けるようになる。

以上のように、ノードの設定は結構大変。大変ではあるんだけど、ノーマルマップのようにノードを使わないと実現できない表現もあるのですべてを避けて通るのも難しい。

最初は、順を追って各ノードの効果をレンダリング画像とともに例示していこうと思っていたんだけど、とてもではないけどひとつの記事としては長くなりすぎてしまうので、最終結果の説明のみに留めた。

関連記事

アンチエイリアス部分にアルファチャンネルを適用する

最終更新:2016/09/06

3DCGモデルのエッジ・ラインの抽出について書いた2013年5月14日の記事では、エッジ・ラインだけを残してそれ以外を透明にするためにGIMPの「色域を選択」機能で一括選択してざっくり削除していたけど、アンチエイリアシングで生じた暗い色のピクセルもそのまま残ってしまい、あまり綺麗にはできていなかった。

そこで、8ビット256階調のアルファ・チャンネルを利用してピクセルが暗くなるほど透明度が増すように設定し、背景に溶け込ませることができないだろうかと考えた。画像処理を得意とするソフトウェアを開発する企業の中には当然同様のことを考える人はいて、誰もが知っているAdobe Photoshopはもちろん、フリーライセンスのGIMPでも「レイヤーマスク」という機能で実現されている。モノクロ256階調のレイヤーマスクが黒に近いほどレイヤーの表示は透明に近づき、白に近いほど不透明度が増していく。

マスクを使うとなれば、グレースケールとしても使える画像のほうが何かと都合がいいので、前の記事では、背景色やサーフェース色を暗い青 RGB=(0,0,32) に指定していたけど、これを黒 RGB=(0,0,0) に設定しなおす。エッジ・ラインの色は白 RGB=(255,255,255) で同じ。前回はLightWaveの出力をアルファ・チャンネルとともに32ビットPNG形式で保存していたけど、あえてアルファ・チャンネル情報を破棄して24ビットPNG形式で保存する。

今回用意したのは次の画像(モデルは前回のものとは若干異なる)。

Alpha005

Adobe Photoshopによる方法(Photoshop CC 2015)

Photoshopで対象となる画像を開き、レイヤーパネルの下に並んでいるアイコンの中の左から3つめの「レイヤーマスクを追加」ボタンをクリックする。メニューからでは、「レイヤー」-「レイヤーマスク」-「すべての領域を表示」を順に選択する。すると真っ白なレイヤーマスクのサムネイルが当該レイヤーの隣に追加される。

Alpha000

次に、対象画像のレイヤー(カンバス)を全選択(Ctrl+A)し、コピー(Ctrl+C)しておく。レイヤーマスクのサムネイルをクリックして選択状態にして、更にAltキーを押しながらクリックすると、レイヤーマスクの編集画面になる(この辺はちょっとわかりにくかった)。コピーしておいたレイヤーをペースト(Ctrl+V)する。選択状態になっていてペーストできない場合は、いったんカンバスの外をクリックするなどして選択を解除しておく。

LightWaveでの画像保存でアルファ・チャンネルを破棄したのは、コピーしたレイヤーの余白に透明部分があると普通にペーストするだけでは同じ位置に貼り付けられないことがあるのと、透明だった部分のマスクは真っ白のままで変わらないので、あらかじめ黒で塗りつぶしておかなければならないから。位置については「編集」メニューから「特殊ペースト」、「同じ位置にペースト(Shift+Ctrl+V)」を順に選べばいいんだけど、1ピクセルでもズレると結果が大幅に変わってしまうので、余計な手間はないに越したことはない。

なお、今回は白い実線部分を残しておきたいので、「階調の反転」は行わない。

Alpha003

再びレイヤーのサムネイルをクリックすると、元は黒かった部分が透明になっている。わかりにくければ、背面に何か色のついたレイヤーを一時的に差し入れてみる。エッジ・ラインに隣接するアンチエイリアスのピクセルもレイヤーマスクの階調に従って半透明状になっているので、これを「ファイル」メニューから「別名で保存」を選択してPNG形式で保存する。

GIMPによる方法

GIMPの場合はPhotoshopよりもシンプル。レイヤーなどが表示されているパネルで対象画像のレイヤーを右クリックすると、「レイヤーマスクの追加」というメニューがある。メニューからでも「レイヤー」-「レイヤーマスク」-「レイヤーマスクの追加」で実行できるけど、右クリックのほうが操作は直感的。

Alpha001

クリックすると、どのようにレイヤーマスクを生成するのか「レイヤーマスク追加」ウィンドウで聞いてくるので、「レイヤーのグレースケールのコピー」を選択して「追加」ボタンをクリックする。これだけでいい。GIMPのインターフェースに慣れてさえいれば、レイヤーマスクの編集の手間がない分、Photoshopよりも手軽ではある。

Alpha002

対象画像を「可視部分」と「不可視部分」に分けて重ねているだけで、特殊なアルゴリズムを用いているわけではないのでソフトウェア間の性能差は生じにくく、Photoshopでやっても、GIMPでやっても基本的に結果は変わらない(はず)。

レイヤーマスクを利用して加工したものが次の画像。白い実線以外の部分は透明になっているのがわかりやすいように、ウェブサイトの背景画像の上に表示されているもののスクリーンショットをとった。元の画像よりもエッジが細くなった印象はあるけど、従前の方法よりシャープさが増し、不自然な段差も少ない。エッジの太さについてはLightWave側でなんとでもできる。全体的には綺麗にできていると思うけどいかがだろうか。

Alpha004

関連記事

参考記事

MediaWikiをアップグレードしたら画像が表示されなくなった問題

最終更新:2016/09/06

今までMediaWiki 1.24を使っていたんだけど、ふと何気なく自分のウィキを見てみたら、ウィキメディア・コモンズから呼び出している画像が表示されなくなっていた。MediaWikiの公式サイトを調べてみたら、InstantCommonsという機能に変更があって、HTTPS接続じゃないとコモンズから画像を引っ張ってこれなくなったそうだ。比較的最近のバージョンじゃないとダメみたいなので、最初は何の気なしに気軽にアップグレードを始めてみた。

この記事を書いている時点の最新版はMediaWiki 1.26.2だったので、いつものようにアップグレードをしてみたんだけど、今度はコモンズの画像だけじゃなくて、ローカルに保存されているはずの画像も呼び出せなくなってしまった。画像をクリックして直接表示させようとしても、Internal Server Errorが出てしまって表示できない。

Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, support@sakura.ad.jp and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.

慌ててしまった私は、1.24に戻すことを考えたんだけど、これがまた非常に面倒で、MediaWikiのソフトウェアはともかく、データベースを復元できない。最新版ではデータベース内のテーブルから削除されてしまったフィールドもあったりして、さくらのレンタルサーバーの管理ツール(phpMyAdmin)を使ってもバックアップ・ファイルからインポートされている気配もない。

そもそもXML形式でバックアップしていたのがいけなかった。XML形式でのデータベースの復元は最新のMySQL 5.6でようやく実装されたものらしく、MySQL 5.5を指定している私のデータベースではそもそも無理という結論になった。一晩かかってもデータベースを復元できなかったので、その方向は諦めた。

そこで、ひとまず1.26にアップグレードはして、画像が出ない状態に戻した。そのうえで調べてみると、どうもMediaWikiのバグ・フィクスの影響で、MediaWikiの画像を保存しておく/imagesディレクトリの.htaccessに問題があるらしいことがわかった。さくらのレンタルサーバー非公式FAQによると、Optionsが使えない設定になっているそうだ。

MediaWiki 1.26.2 の .htaccess

# Protect against bug 28235
<IfModule rewrite_module>
	RewriteEngine On
	RewriteCond %{QUERY_STRING} \.[^\\/:*?\x22<>|%]+(#|\?|$) [nocase]
	RewriteRule . - [forbidden]
	# Fix for bug T64289
	Options +FollowSymLinks
</IfModule>

MediaWiki 1.24.2 の .htaccess

# Protect against bug 28235
<IfModule rewrite_module>
	RewriteEngine On
	RewriteCond %{QUERY_STRING} \.[^\\/:*?\x22<>|%]+(#|\?|$) [nocase]
	RewriteRule . - [forbidden]
</IfModule>

Options +FollowSymLinksという部分を#でコメントアウトして、/imagesディレクトリに保存する。

自分のウィキをリフレッシュしてリロード(Ctrl+F5)してみたら、無事に画像が表示された。ウィキメディア・コモンズの画像も表示されるようになっていた。おそらく、内部的にはローカルの画像を探す振りをしながらウィキメディア・コモンズにアクセスしにいっていて、ローカルの設定に影響を受けてしまってるのではないかと推測。

これ以降、アップグレードする度に同じ問題が起こることが考えられるので、備忘録を残しておくことにした。とにかく、MediaWikiをアップグレードして何か問題が起こっても、ダウングレードは最終手段と考え、慌てず騒がず同じ問題に行き当たった人が書いた記事がないか探してみるべきだと痛感した。

関連記事

参考記事